[IMP] Allow concurency for DomLayout - DomEditable

Author: Goaman

packages/core/src/ContextManager.ts

@@ -1,16 +1,11 @@
-import JWEditor, { Commands, CommandParamsType } from './JWEditor';
+import JWEditor from './JWEditor';
 import { VRange } from './VRange';
 import { Predicate, VNode } from './VNodes/VNode';
-import { JWPlugin } from './JWPlugin';
+import { ExecutionContext } from './JWEditor';
 
-export interface Context {
+export interface Context extends Partial<ExecutionContext> {
     range?: VRange;
-    execCommand: <P extends JWPlugin, C extends Commands<P> = Commands<P>>(
-        commandName: C | (() => Promise<void> | void),
-        params?: CommandParamsType<P, C>,
-    ) => Promise<void>;
 }
-
 export interface CheckingContext extends Context {
     selector?: VNode[];
 }

packages/core/src/Dispatcher.ts

@@ -52,6 +52,10 @@ export class Dispatcher {
 
             await this.dispatchHooks(commandId, args);
 
+            if (params.context?.range?.temporary) {
+                params.context.range.remove();
+            }
+
             return result;
         }
     }

packages/core/src/JWEditor.ts

@@ -40,6 +40,15 @@ export interface CommitParams extends CommandParams {
     commandNames: string[];
 }
 
+export type ExecCommandFunction = <P extends JWPlugin, C extends Commands<P> = Commands<P>>(
+    commandName: C | ((context: Context) => Promise<void> | void),
+    params?: CommandParamsType<P, C>,
+) => Promise<void>;
+
+export interface ExecutionContext {
+    execCommand: ExecCommandFunction;
+}
+
 export interface JWEditorConfig {
     /**
      * The modes that the editor will support.
@@ -322,6 +331,12 @@ export class JWEditor {
         }
     }
 
+    async nextEventMutex(next: (execCommand: ExecCommandFunction) => void): Promise<void> {
+        return (this._mutex = this._mutex.then(
+            next.bind(undefined, this._withOpenMemory.bind(this)),
+        ));
+    }
+
     /**
      * Execute arbitrary code in `callback`, then dispatch the commit event.
      * The callback receives an `execCommand` parameter which it can use to
@@ -355,103 +370,9 @@ export class JWEditor {
         commandName: C | ((context: Context) => Promise<void> | void),
         params?: CommandParamsType<P, C>,
     ): Promise<void> {
-        this._mutex = this._mutex.then(async () => {
-            if (!this.memory.isFrozen()) {
-                console.error(
-                    'You are trying to call the external editor' +
-                        ' execCommand method from within an execCommand. ' +
-                        'Use the `execCommand` method of your plugin instead.',
-                );
-                return;
-            }
-            const timeout = setTimeout(() => {
-                console.warn(
-                    'An execCommand call is taking more than 10 seconds to finish. It might be caused by a deadlock.\n' +
-                        'Verify that you do not call editor.execCommand inside another editor.execCommand.',
-                );
-            }, 10000);
-
-            // Switch to the next memory slice (unfreeze the memory).
-            const origin = this.memory.sliceKey;
-            const memorySlice = this._memoryID.toString();
-            this.memory.switchTo(memorySlice);
-            this.memoryInfo.commandNames = new VersionableArray();
-            this.memoryInfo.uiCommand = false;
-            let commandNames = this.memoryInfo.commandNames;
-
-            try {
-                // Execute command.
-                if (typeof commandName === 'function') {
-                    const name = '@custom' + (commandName.name ? ':' + commandName.name : '');
-                    this.memoryInfo.commandNames.push(name);
-                    await commandName(this.contextManager.defaultContext);
-                    if (this.memory.sliceKey !== memorySlice) {
-                        // Override by the current commandName if the slice changed.
-                        commandNames = [name];
-                    }
-                } else {
-                    this.memoryInfo.commandNames.push(commandName);
-                    await this.dispatcher.dispatch(commandName, params);
-                    if (this.memory.sliceKey !== memorySlice) {
-                        // Override by the current commandName if the slice changed.
-                        commandNames = [commandName];
-                    }
-                }
-
-                // Prepare nex slice and freeze the memory.
-                this._memoryID++;
-                const nextMemorySlice = this._memoryID.toString();
-                this.memory.create(nextMemorySlice);
-
-                // Send the commit message with a frozen memory.
-                const changesLocations = this.memory.getChangesLocations(
-                    memorySlice,
-                    this.memory.sliceKey,
-                );
-                await this.dispatcher.dispatchHooks('@commit', {
-                    changesLocations: changesLocations,
-                    commandNames: commandNames,
-                });
-                clearTimeout(timeout);
-            } catch (error) {
-                clearTimeout(timeout);
-                if (this._stage !== EditorStage.EDITION) {
-                    throw error;
-                }
-                console.error(error);
-
-                await this.dispatcher.dispatchHooks('@error', {
-                    message: error.message,
-                    stack: error.stack,
-                });
-
-                const failedSlice = this.memory.sliceKey;
-
-                // When an error occurs, we go back to part of the functional memory.
-                this.memory.switchTo(origin);
-
-                try {
-                    // Send the commit message with a frozen memory.
-                    const changesLocations = this.memory.getChangesLocations(failedSlice, origin);
-                    await this.dispatcher.dispatchHooks('@commit', {
-                        changesLocations: changesLocations,
-                        commandNames: commandNames,
-                    });
-                } catch (revertError) {
-                    if (this._stage !== EditorStage.EDITION) {
-                        throw revertError;
-                    }
-
-                    await this.dispatcher.dispatchHooks('@error', {
-                        message: error.message,
-                        stack: error.stack,
-                    });
-
-                    console.error(revertError);
-                }
-            }
+        return this.nextEventMutex(async () => {
+            return this._withOpenMemory(commandName, params);
         });
-        return this._mutex;
     }
 
     /**
@@ -492,13 +413,13 @@ export class JWEditor {
             this.memoryInfo.commandNames.push('@withRange');
             let range: VRange;
             if (typeof commandName === 'function') {
-                range = new VRange(this, bounds, params as Mode);
+                range = new VRange(this, bounds, { mode: params as Mode });
                 this.memoryInfo.commandNames.push(
                     '@custom' + (commandName.name ? ':' + commandName.name : ''),
                 );
                 await commandName({ ...this.contextManager.defaultContext, range });
             } else {
-                range = new VRange(this, bounds, mode);
+                range = new VRange(this, bounds, { mode });
                 this.memoryInfo.commandNames.push(commandName);
                 const newParam = Object.assign({ context: {} }, params as CommandParamsType<P, C>);
                 newParam.context.range = range;
@@ -538,6 +459,105 @@ export class JWEditor {
         this._stage = EditorStage.CONFIGURATION;
     }
 
+    private async _withOpenMemory<P extends JWPlugin, C extends Commands<P> = Commands<P>>(
+        commandName: C | ((context: Context) => Promise<void> | void),
+        params?: CommandParamsType<P, C>,
+    ): Promise<void> {
+        if (!this.memory.isFrozen()) {
+            console.error(
+                'You are trying to call the external editor' +
+                    ' execCommand method from within an execCommand. ' +
+                    'Use the `execCommand` method of your plugin instead.',
+            );
+            return;
+        }
+        const timeout = setTimeout(() => {
+            console.warn(
+                'An execCommand call is taking more than 10 seconds to finish. It might be caused by a deadlock.\n' +
+                    'Verify that you do not call editor.execCommand inside another editor.execCommand.',
+            );
+        }, 10000);
+
+        // Switch to the next memory slice (unfreeze the memory).
+        const origin = this.memory.sliceKey;
+        const memorySlice = this._memoryID.toString();
+        this.memory.switchTo(memorySlice);
+        this.memoryInfo.commandNames = new VersionableArray();
+        this.memoryInfo.uiCommand = false;
+        let commandNames = this.memoryInfo.commandNames;
+
+        try {
+            // Execute command.
+            if (typeof commandName === 'function') {
+                const name = '@custom' + (commandName.name ? ':' + commandName.name : '');
+                this.memoryInfo.commandNames.push(name);
+                await commandName(this.contextManager.defaultContext);
+                if (this.memory.sliceKey !== memorySlice) {
+                    // Override by the current commandName if the slice changed.
+                    commandNames = [name];
+                }
+            } else {
+                this.memoryInfo.commandNames.push(commandName);
+                await this.dispatcher.dispatch(commandName, params);
+                if (this.memory.sliceKey !== memorySlice) {
+                    // Override by the current commandName if the slice changed.
+                    commandNames = [commandName];
+                }
+            }
+
+            // Prepare nex slice and freeze the memory.
+            this._memoryID++;
+            const nextMemorySlice = this._memoryID.toString();
+            this.memory.create(nextMemorySlice);
+
+            // Send the commit message with a frozen memory.
+            const changesLocations = this.memory.getChangesLocations(
+                memorySlice,
+                this.memory.sliceKey,
+            );
+            await this.dispatcher.dispatchHooks('@commit', {
+                changesLocations: changesLocations,
+                commandNames: commandNames,
+            });
+            clearTimeout(timeout);
+        } catch (error) {
+            clearTimeout(timeout);
+            if (this._stage !== EditorStage.EDITION) {
+                throw error;
+            }
+            console.error(error);
+
+            await this.dispatcher.dispatchHooks('@error', {
+                message: error.message,
+                stack: error.stack,
+            });
+
+            const failedSlice = this.memory.sliceKey;
+
+            // When an error occurs, we go back to part of the functional memory.
+            this.memory.switchTo(origin);
+
+            try {
+                // Send the commit message with a frozen memory.
+                const changesLocations = this.memory.getChangesLocations(failedSlice, origin);
+                await this.dispatcher.dispatchHooks('@commit', {
+                    changesLocations: changesLocations,
+                    commandNames: commandNames,
+                });
+            } catch (revertError) {
+                if (this._stage !== EditorStage.EDITION) {
+                    throw revertError;
+                }
+
+                await this.dispatcher.dispatchHooks('@error', {
+                    message: error.message,
+                    stack: error.stack,
+                });
+
+                console.error(revertError);
+            }
+        }
+    }
     /**
      * Execute the command or arbitrary code in `callback` in memory.
      *

packages/core/src/VRange.ts

@@ -9,9 +9,20 @@ import { TableCellNode } from '../../plugin-table/src/TableCellNode';
 import { Mode, RuleProperty } from './Mode';
 import JWEditor from './JWEditor';
 
+interface VRangeOptions {
+    temporary?: boolean;
+    mode?: Mode;
+}
+
 export class VRange {
     readonly start = new MarkerNode();
     readonly end = new MarkerNode();
+    /**
+     * Mark the range as being temporary to signal the system to remove it
+     * when necessary.
+     */
+    temporary: boolean;
+    private readonly _mode: Mode | undefined;
 
     /**
      * Return the context of a collapsed range at the given location, targetting
@@ -75,8 +86,10 @@ export class VRange {
     constructor(
         public readonly editor: JWEditor,
         boundaryPoints?: [Point, Point],
-        private readonly _mode?: Mode,
+        options: VRangeOptions = {},
     ) {
+        this.temporary = !!options.temporary;
+        this._mode = options.mode;
         // If a range context is given, adapt this range to match it.
         if (boundaryPoints) {
             const [start, end] = boundaryPoints;

packages/core/test/JWeditor.test.ts

@@ -5,6 +5,8 @@ import { StageError } from '../../utils/src/errors';
 import { testEditor } from '../../utils/src/testUtils';
 import { BasicEditor } from '../../bundle-basic-editor/BasicEditor';
 import { Layout } from '../../plugin-layout/src/Layout';
+import { VRange } from '../src/VRange';
+import { Char } from '../../plugin-char/src/Char';
 
 describe('core', () => {
     describe('JWEditor', () => {
@@ -229,7 +231,7 @@ describe('core', () => {
                 });
             });
         });
-        describe('execCustomCommand', () => {
+        describe('execCommand', () => {
             it('should execute a custom command and trigger plugins', async () => {
                 await testEditor(BasicEditor, {
                     contentBefore: '<div>ab[]</div>',
@@ -243,6 +245,28 @@ describe('core', () => {
                     contentAfter: '<div>b[]</div>',
                 });
             });
+            it('should remove a temporaryVRange after an execCommand', async () => {
+                await testEditor(BasicEditor, {
+                    contentBefore: '<div>ab[]</div>',
+                    stepFunction: async editor => {
+                        await editor.execCommand(async context => {
+                            const layout = editor.plugins.get(Layout);
+                            const domLayout = layout.engines.dom;
+                            const divider = domLayout.components.editable[0].firstChild();
+                            const range = new VRange(editor, VRange.at(divider), {
+                                temporary: true,
+                            });
+                            expect(range.start.parent).to.equal(divider);
+                            await context.execCommand<Char>('insertText', {
+                                text: 'c',
+                                context: { range },
+                            });
+                            expect(range.start.parent).to.equal(undefined);
+                        });
+                    },
+                    contentAfter: '<div>cab[]</div>',
+                });
+            });
         });
     });
 });