memory editor integration (+ layout/renderer)

Author: Gorash

packages/core/src/Dispatcher.ts

@@ -10,6 +10,12 @@ export interface CommandImplementation extends Contextual {
 export interface CommandParams {
     context?: Context;
 }
+export interface CommitParams extends CommandParams {
+    add: object[];
+    move: object[];
+    remove: object[];
+    update: [object, string[] | number[] | void][];
+}
 export type CommandHandler = (args) => void;
 export type CommandHook = (params: CommandParams, commandId: string) => void;
 

packages/core/src/JWEditor.ts

@@ -1,4 +1,4 @@
-import { Dispatcher } from './Dispatcher';
+import { Dispatcher, CommitParams } from './Dispatcher';
 import { JWPlugin, JWPluginConfig } from './JWPlugin';
 import { Core } from './Core';
 import { ContextManager } from './ContextManager';
@@ -10,6 +10,9 @@ import { ContainerNode } from './VNodes/ContainerNode';
 import { AtomicNode } from './VNodes/AtomicNode';
 import { SeparatorNode } from './VNodes/SeparatorNode';
 import { ModeIdentifier, ModeDefinition, Mode } from './Mode';
+import { Memory } from './Memory/Memory';
+import { makeVersionable } from './Memory/Versionable';
+import { VersionableArray } from './Memory/VersionableArray';
 
 export enum EditorStage {
     CONFIGURATION = 'configuration',
@@ -68,7 +71,10 @@ export class JWEditor {
         plugins: [],
         loadables: {},
     };
-    selection = new VSelection(this);
+    memory: Memory;
+    memoryID = 0;
+    memoryInfo: { commandNames: string[] };
+    selection: VSelection;
     loaders: Record<string, Loader> = {};
     private mutex = Promise.resolve();
     // Use a set so that when asynchronous functions are called we ensure that
@@ -86,6 +92,7 @@ export class JWEditor {
     constructor() {
         this.dispatcher = new Dispatcher(this);
         this.plugins = new Map();
+        this.selection = new VSelection(this);
         this.contextManager = new ContextManager(this);
 
         this.nextEventMutex = this.nextEventMutex.bind(this);
@@ -130,9 +137,18 @@ export class JWEditor {
             this.setMode(this.configuration.mode);
         }
 
-        for (const plugin of this.plugins.values()) {
-            await plugin.start();
-        }
+        // create memory
+        this.memoryInfo = makeVersionable({ commandNames: [] });
+        this.memory = new Memory();
+        this.memory.linkToMemory(this.memoryInfo);
+        this.memory.create(this.memoryID.toString());
+
+        // Start all plugins in the first memory slice.
+        return this.execBatch(async () => {
+            for (const plugin of this.plugins.values()) {
+                await plugin.start();
+            }
+        });
     }
 
     //--------------------------------------------------------------------------
@@ -303,11 +319,16 @@ export class JWEditor {
         }
     }
 
-    async execBatch(callback: () => Promise<void>): Promise<void> {
-        this.preventRenders.add(callback);
-        await callback();
-        this.preventRenders.delete(callback);
-        await this.dispatcher.dispatchHooks('@batch');
+    /**
+     * Execute arbitrary code in `callback`, then dispatch the commit event.
+     *
+     * @param callback
+     */
+    async execBatch(callback: () => Promise<void> | void): Promise<void> {
+        return this._execBatchInMemory(() => {
+            this.memoryInfo.commandNames.push('@batch');
+            return callback();
+        });
     }
 
     /**
@@ -320,26 +341,61 @@ export class JWEditor {
         commandName: C,
         params?: CommandParams<P, C>,
     ): Promise<void> {
-        return await this.dispatcher.dispatch(commandName, params);
+        await this._execBatchInMemory(() => {
+            this.memoryInfo.commandNames.push(commandName);
+            return this.dispatcher.dispatch(commandName, params);
+        });
     }
 
     /**
-     * Execute arbitrary code in `callback`, then dispatch the event.
+     * Execute arbitrary code in `callback` in a free memory slice.
+     * Return true if we open a memory slice.
+     *
+     * TODO: create memory for each plugin who use the command then use
+     * squashInto(winnerSliceKey, winnerSliceKey, newMasterSliceKey)
+     *
+     * @param callback
      */
-    async execCustomCommand<P extends JWPlugin, C extends Commands<P> = Commands<P>>(
-        callback: () => Promise<void>,
-    ): Promise<void> {
+    private async _execBatchInMemory(callback: () => Promise<void> | void): Promise<void> {
+        const isFrozen = this.memory.isFrozen();
+        const previousSlice = (this.memoryID - 1).toString();
+        const memorySlice = this.memoryID.toString();
+        if (isFrozen) {
+            // Switch to the next memory slice (unfreeze the memory).
+            this.memory.switchTo(memorySlice);
+            this.memoryInfo.commandNames = new VersionableArray();
+        }
         await callback();
-        await this.dispatcher.dispatchHooks('@custom');
+        if (isFrozen) {
+            // Check if it's frozen for calling execCommand inside a call of
+            // execCommand Create the next memory slice (and freeze the
+            // current memory).
+            this.memoryID++;
+            this.memory.create(this.memoryID.toString());
+
+            // Send the commit message with a froozen memory.
+            const diff: CommitParams = this.memory.getChanges(previousSlice, memorySlice);
+            await this.dispatcher.dispatchHooks('@commit', diff);
+        }
     }
 
     /**
      * Stop this editor instance.
      */
     async stop(): Promise<void> {
+        if (this.memory) {
+            // Unfreeze the memory.
+            this.memory.create('stop');
+            this.memory.switchTo('stop');
+            this.memory = null;
+        }
         for (const plugin of this.plugins.values()) {
             await plugin.stop();
         }
+        this.plugins.clear();
+        this.dispatcher = new Dispatcher(this);
+        this.selection = new VSelection(this);
+        this.contextManager = new ContextManager(this);
         // Clear loaders.
         this.loaders = {};
         this._stage = EditorStage.CONFIGURATION;

packages/plugin-dom-layout/src/DomLayout.ts

@@ -15,13 +15,12 @@ import { ZoneXmlDomParser } from './ZoneXmlDomParser';
 import { LayoutContainerDomObjectRenderer } from './LayoutContainerDomObjectRenderer';
 import { ZoneIdentifier, ZoneNode } from '../../plugin-layout/src/ZoneNode';
 import { Keymap } from '../../plugin-keymap/src/Keymap';
-import { CommandIdentifier } from '../../core/src/Dispatcher';
+import { CommandIdentifier, CommitParams } from '../../core/src/Dispatcher';
 import { ActionableDomObjectRenderer } from './ActionableDomObjectRenderer';
 import { ActionableGroupDomObjectRenderer } from './ActionableGroupDomObjectRenderer';
 import { ActionableGroupSelectItemDomObjectRenderer } from './ActionableGroupSelectItemDomObjectRenderer';
 import { LabelDomObjectRenderer } from './LabelDomObjectRenderer';
 import { SeparatorDomObjectRenderer } from './SeparatorDomObjectRenderer';
-import { ContainerNode } from '../../core/src/VNodes/ContainerNode';
 import { RuleProperty } from '../../core/src/Mode';
 import { isContentEditable } from '../../utils/src/utils';
 
@@ -30,7 +29,6 @@ export interface DomLayoutConfig extends JWPluginConfig {
     locations?: [ComponentId, DomLayoutLocation][];
     components?: ComponentDefinition[];
     componentZones?: [ComponentId, ZoneIdentifier[]][];
-    afterRender?: Function;
 }
 
 export class DomLayout<T extends DomLayoutConfig = DomLayoutConfig> extends JWPlugin<T> {
@@ -53,7 +51,7 @@ export class DomLayout<T extends DomLayoutConfig = DomLayoutConfig> extends JWPl
         domLocations: this._loadComponentLocations,
     };
     commandHooks = {
-        '*': this.redraw,
+        '@commit': this._redraw,
     };
 
     constructor(editor: JWEditor, configuration: T) {
@@ -76,16 +74,14 @@ export class DomLayout<T extends DomLayoutConfig = DomLayoutConfig> extends JWPl
         this._loadComponentLocations(this.configuration.locations || []);
         domLayoutEngine.location = this.configuration.location;
         await domLayoutEngine.start();
-        if (this.configuration.afterRender) {
-            await this.configuration.afterRender();
-        }
         window.addEventListener('keydown', this.processKeydown, true);
     }
     async stop(): Promise<void> {
         window.removeEventListener('keydown', this.processKeydown, true);
         const layout = this.dependencies.get(Layout);
         const domLayoutEngine = layout.engines.dom;
         await domLayoutEngine.stop();
+        return super.stop();
     }
 
     //--------------------------------------------------------------------------
@@ -122,25 +118,6 @@ export class DomLayout<T extends DomLayoutConfig = DomLayoutConfig> extends JWPl
         }
     }
 
-    async redraw(): Promise<void> {
-        // TODO: adapt when add memory
-        // * redraw node with change
-        // * redraw children if add or remove children (except for selection)
-        const layout = this.dependencies.get(Layout);
-        const domLayoutEngine = layout.engines.dom as DomLayoutEngine;
-        const editables = domLayoutEngine.components.get('editable');
-        if (editables?.length) {
-            const nodes = [...editables];
-            for (const node of nodes) {
-                if (node instanceof ContainerNode) {
-                    nodes.push(...node.childVNodes);
-                }
-            }
-            await domLayoutEngine.redraw(...nodes);
-            await this.configuration.afterRender?.();
-        }
-    }
-
     /**
      * Return true if the target node is inside Jabberwock's main editable Zone.
      *
@@ -202,4 +179,9 @@ export class DomLayout<T extends DomLayoutConfig = DomLayoutConfig> extends JWPl
         }
         return isAnchorDescendantOfTarget ? anchorNode : target;
     }
+    private async _redraw(params: CommitParams): Promise<void> {
+        const layout = this.dependencies.get(Layout);
+        const domLayoutEngine = layout.engines.dom as DomLayoutEngine;
+        await domLayoutEngine.redraw(params);
+    }
 }