[IMP] Memory,*: plugin integration for memory usage and new rendering

Author: Gorash

examples/layout/layout.ts

@@ -98,20 +98,20 @@ editor.configure(Theme, {
                     .get(Parser)
                     .parse(
                         'text/html',
-                        `<div style="background: lightblue; height: 100%;"><t-placeholder/></div>`,
+                        `<div style="background: lightblue; min-height: 100%;"><t-placeholder/></div>`,
                     );
             },
         },
         {
             id: 'iframe',
             label: 'Theme color red in iframe',
             render: async (editor: JWEditor): Promise<VNode[]> => {
-                return editor.plugins
-                    .get(Parser)
-                    .parse(
-                        'text/html',
-                        `<t-iframe style="border: 0; width: 100%;"><div style="background: #ffaaaa; height: 100%;"><t-placeholder/></div></t-iframe>`,
-                    );
+                return editor.plugins.get(Parser).parse(
+                    'text/html',
+                    `<t-iframe style="border-width: 80px 14px 40px; border-radius: 16px; border-style: solid; border-color: #000; background-color: white; width: 400px; height: 600px; margin: auto; display: block;">
+                            <div style="background: #ffaaaa; min-height: 100%;"><t-placeholder/></div>
+                        </t-iframe>`,
+                );
             },
         },
     ],

packages/bundle-odoo-website-editor/OdooWebsiteEditor.ts

@@ -96,7 +96,10 @@ export class OdooWebsiteEditor extends JWEditor {
     constructor(options: OdooWebsiteEditorOptions) {
         super();
         class CustomPlugin extends JWPlugin {
-            commands = options.customCommands;
+            commands = Object.assign(
+                { commit: { handler: options.afterRender } },
+                options.customCommands,
+            );
         }
 
         this.configure({
@@ -212,7 +215,6 @@ export class OdooWebsiteEditor extends JWEditor {
                 ['editable', ['main']],
             ],
             location: options.location,
-            afterRender: options.afterRender,
         });
         this.configure(DomEditable, {
             autoFocus: true,
@@ -237,9 +239,4 @@ export class OdooWebsiteEditor extends JWEditor {
         const nodes = await renderer.render<Node[]>('dom/html', editable);
         return nodes && nodes[0];
     }
-
-    async render(): Promise<void> {
-        const domLayout = this.plugins.get(DomLayout);
-        return domLayout.redraw();
-    }
 }

packages/bundle-odoo-website-editor/odoo-integration.ts

@@ -1,7 +1,7 @@
 import { BasicEditor } from '../bundle-basic-editor/BasicEditor';
 import { DevTools } from '../plugin-devtools/src/DevTools';
 import { OdooWebsiteEditor } from './OdooWebsiteEditor';
-import { VRange, withRange } from '../core/src/VRange';
+import { VRange } from '../core/src/VRange';
 import { DomLayoutEngine } from '../plugin-dom-layout/src/DomLayoutEngine';
 import { Layout } from '../plugin-layout/src/Layout';
 import { Renderer } from '../plugin-renderer/src/Renderer';
@@ -27,7 +27,6 @@ export {
     DomLayoutEngine,
     Renderer,
     ImageNode,
-    withRange,
     VRange,
     InlineNode,
     LinkFormat,

packages/core/src/Core.ts

@@ -85,7 +85,7 @@ export class Core<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin<T>
                 range.mode.is(range.startContainer, RuleProperty.EDITABLE)
             ) {
                 // Otherwise set range start at previous valid leaf.
-                let ancestor = range.start.parent;
+                let ancestor: VNode = range.start.parent;
                 while (
                     ancestor &&
                     range.mode.is(ancestor, RuleProperty.BREAKABLE) &&
@@ -129,7 +129,7 @@ export class Core<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin<T>
                 range.mode.is(range.endContainer, RuleProperty.EDITABLE)
             ) {
                 // Otherwise set range end at next valid leaf.
-                let ancestor = range.end.parent;
+                let ancestor: VNode = range.end.parent;
                 while (
                     ancestor &&
                     range.mode.is(ancestor, RuleProperty.BREAKABLE) &&

packages/core/src/JWEditor.ts

@@ -1,15 +1,20 @@
-import { Dispatcher } from './Dispatcher';
+import { Dispatcher, CommandParams } from './Dispatcher';
 import { JWPlugin, JWPluginConfig } from './JWPlugin';
 import { Core } from './Core';
 import { ContextManager } from './ContextManager';
 import { VSelection } from './VSelection';
+import { VRange } from './VRange';
 import { isConstructor } from '../../utils/src/utils';
 import { Keymap } from '../../plugin-keymap/src/Keymap';
 import { StageError } from '../../utils/src/errors';
 import { ContainerNode } from './VNodes/ContainerNode';
 import { AtomicNode } from './VNodes/AtomicNode';
 import { SeparatorNode } from './VNodes/SeparatorNode';
 import { ModeIdentifier, ModeDefinition, Mode } from './Mode';
+import { Memory, ChangesLocations } from './Memory/Memory';
+import { makeVersionable } from './Memory/Versionable';
+import { VersionableArray } from './Memory/VersionableArray';
+import { Point } from './VNodes/VNode';
 
 export enum EditorStage {
     CONFIGURATION = 'configuration',
@@ -26,9 +31,13 @@ export type Loadables<T extends JWPlugin = JWPlugin> = {
 };
 
 type Commands<T extends JWPlugin> = Extract<keyof T['commands'], string>;
-type CommandParams<T extends JWPlugin, K extends string> = K extends Commands<T>
+type CommandParamsType<T extends JWPlugin, K extends string> = K extends Commands<T>
     ? Parameters<T['commands'][K]['handler']>[0]
     : never;
+export interface CommitParams extends CommandParams {
+    changesLocations: ChangesLocations;
+    commandNames: string[];
+}
 
 export interface JWEditorConfig {
     /**
@@ -68,7 +77,10 @@ export class JWEditor {
         plugins: [],
         loadables: {},
     };
-    selection = new VSelection(this);
+    memory: Memory;
+    memoryInfo: { commandNames: string[] };
+    private _memoryID = 0;
+    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 +98,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 +143,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.attach(this.memoryInfo);
+        this.memory.create(this._memoryID.toString());
+
+        // Start all plugins in the first memory slice.
+        return this.execCommand(async () => {
+            for (const plugin of this.plugins.values()) {
+                await plugin.start();
+            }
+        });
     }
 
     //--------------------------------------------------------------------------
@@ -303,13 +325,12 @@ 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 execCommand(callback: () => Promise<void> | void): Promise<void>;
     /**
      * Execute the given command.
      *
@@ -318,28 +339,101 @@ export class JWEditor {
      */
     async execCommand<P extends JWPlugin, C extends Commands<P> = Commands<P>>(
         commandName: C,
-        params?: CommandParams<P, C>,
+        params?: CommandParamsType<P, C>,
+    ): Promise<void>;
+    /**
+     * Execute the command or arbitrary code in `callback` in memory.
+     *
+     * TODO: create memory for each plugin who use the command then use
+     * squashInto(winnerSliceKey, winnerSliceKey, newMasterSliceKey)
+     *
+     * @param commandName name identifier of the command to execute or callback
+     * @param params arguments object of the command to execute
+     */
+    async execCommand<P extends JWPlugin, C extends Commands<P> = Commands<P>>(
+        commandName: C | (() => Promise<void> | void),
+        params?: CommandParamsType<P, C>,
     ): Promise<void> {
-        return await this.dispatcher.dispatch(commandName, params);
+        const isFrozen = this.memory.isFrozen();
+
+        let memorySlice: string;
+        if (isFrozen) {
+            // Switch to the next memory slice (unfreeze the memory).
+            memorySlice = this._memoryID.toString();
+            this.memory.switchTo(memorySlice);
+            this.memoryInfo.commandNames = new VersionableArray();
+        }
+
+        // Execute command.
+        if (typeof commandName === 'function') {
+            this.memoryInfo.commandNames.push('@custom');
+            await commandName();
+        } else {
+            this.memoryInfo.commandNames.push(commandName);
+            await this.dispatcher.dispatch(commandName, params);
+        }
+
+        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++;
+            const nextMemorySlice = this._memoryID.toString();
+            this.memory.create(nextMemorySlice);
+
+            // Send the commit message with a froozen memory.
+            const changesLocations = this.memory.getChangesLocations(
+                memorySlice,
+                this.memory.sliceKey,
+            );
+            await this.dispatcher.dispatchHooks('@commit', {
+                changesLocations: changesLocations,
+                commandNames: this.memoryInfo.commandNames,
+            });
+        }
     }
 
     /**
-     * Execute arbitrary code in `callback`, then dispatch the event.
+     * Create a temporary range corresponding to the given boundary points and
+     * call the given callback with the newly created range as argument. The
+     * range is automatically destroyed after calling the callback.
+     *
+     * @param bounds The points corresponding to the range boundaries.
+     * @param callback The callback to call with the newly created range.
+     * @param mode
      */
-    async execCustomCommand<P extends JWPlugin, C extends Commands<P> = Commands<P>>(
-        callback: () => Promise<void>,
+    async withRange(
+        bounds: [Point, Point],
+        callback: (range: VRange) => Promise<void> | void,
+        mode?: Mode,
     ): Promise<void> {
-        await callback();
-        await this.dispatcher.dispatchHooks('@custom');
+        return this.execCommand(async () => {
+            this.memoryInfo.commandNames.push('@withRange');
+            const range = new VRange(this, bounds, mode);
+            await callback(range);
+            range.remove();
+        });
     }
 
     /**
      * Stop this editor instance.
      */
     async stop(): Promise<void> {
+        if (this.memory) {
+            this.memory.create('stop');
+            this.memory.switchTo('stop'); // Unfreeze the memory.
+        }
         for (const plugin of this.plugins.values()) {
             await plugin.stop();
         }
+        if (this.memory) {
+            this.memory.create('stopped'); // Freeze the memory.
+            this.memory = null;
+        }
+        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/core/src/JWPlugin.ts

@@ -33,6 +33,8 @@ export class JWPlugin<T extends JWPluginConfig = {}> {
     async stop(): Promise<void> {
         // This is where plugins can do asynchronous work when the editor is
         // stopping (e.g. save on a server, close connections, etc).
+        this.dependencies.clear();
+        this.editor = null;
     }
 }
 export interface JWPlugin {

packages/core/src/Memory/test/memory.test.ts

@@ -7,7 +7,7 @@ import { VersionableSet } from '../VersionableSet';
 import { makeVersionable, markNotVersionable, proxifyVersionable } from '../Versionable';
 import { memoryProxyPramsKey } from '../const';
 
-describe.only('core', () => {
+describe('core', () => {
     describe('state', () => {
         describe('memory', () => {
             describe('throw', () => {

packages/core/src/Modifier.ts

@@ -1,21 +1,19 @@
 import { Constructor } from '../../utils/src/utils';
 import { VNode } from './VNodes/VNode';
+import { VersionableObject } from './Memory/VersionableObject';
 
-export type ModifierTypeguard<T extends Modifier> = (
-    modifier: Modifier,
-    batch: VNode[],
-) => modifier is T;
+export type ModifierTypeguard<T extends Modifier> = (modifier: Modifier) => modifier is T;
 export type ModifierPredicate<T = Modifier | boolean> = T extends Modifier
     ? Constructor<T> | ModifierTypeguard<T>
-    : (modifier: Modifier, batch: VNode[]) => boolean;
+    : (modifier: Modifier) => boolean;
 
 interface ModifierConstructor {
     new <T extends Constructor<Modifier>>(...args: ConstructorParameters<T>): this;
 }
 export interface Modifier {
     constructor: ModifierConstructor & this;
 }
-export class Modifier {
+export class Modifier extends VersionableObject {
     preserve = true;
     get name(): string {
         return '';

packages/core/src/Modifiers.ts

@@ -1,9 +1,12 @@
 import { Modifier } from './Modifier';
 import { Constructor, isConstructor } from '../../utils/src/utils';
+import { VersionableObject } from './Memory/VersionableObject';
+import { VersionableArray } from './Memory/VersionableArray';
 
-export class Modifiers {
+export class Modifiers extends VersionableObject {
     private _contents: Modifier[];
     constructor(...modifiers: Array<Modifier | Constructor<Modifier>>) {
+        super();
         const clonedModifiers = modifiers.map(mod => {
             return mod instanceof Modifier ? mod.clone() : mod;
         });
@@ -49,7 +52,7 @@ export class Modifiers {
      */
     append(...modifiers: Array<Modifier | Constructor<Modifier>>): void {
         if (modifiers.length && !this._contents) {
-            this._contents = [];
+            this._contents = new VersionableArray();
         }
         for (const modifier of modifiers) {
             if (modifier instanceof Modifier) {
@@ -67,7 +70,7 @@ export class Modifiers {
      */
     prepend(...modifiers: Array<Modifier | Constructor<Modifier>>): void {
         if (modifiers.length && !this._contents) {
-            this._contents = [];
+            this._contents = new VersionableArray();
         }
         for (const modifier of [...modifiers].reverse()) {
             if (modifier instanceof Modifier) {