[IMP] ReactiveInfo: info through ReactiveValue

Author: Goaman

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

@@ -66,6 +66,7 @@ import { DividerNode } from '../plugin-divider/src/DividerNode';
 import { Attributes } from '../plugin-xml/src/Attributes';
 import { Strikethrough } from '../plugin-strikethrough/src/Strikethrough';
 import { ActionableNode } from '../plugin-layout/src/ActionableNode';
+import { ReactiveEditorInfo } from '../plugin-reactive-info/src/ReactiveEditorInfo';
 
 interface OdooWebsiteEditorOptions {
     source: HTMLElement;
@@ -163,6 +164,7 @@ export class OdooWebsiteEditor extends JWEditor {
                 [History],
                 [Iframe],
                 [Button],
+                [ReactiveEditorInfo],
                 ...(options.plugins || []),
             ],
         });
@@ -260,44 +262,12 @@ export class OdooWebsiteEditor extends JWEditor {
                         }
                     },
                 },
-                {
-                    id: 'historyButtons',
-                    render: async (editor: JWEditor): Promise<VNode[]> => {
-                        const history = editor.plugins.get(History);
-                        const undo = new ActionableNode({
-                            name: 'undo',
-                            label: 'Undo',
-                            commandId: 'undo',
-                            enabled: history.canUndo.bind(history),
-                            modifiers: [new Attributes({
-                                class: 'btn btn-secondary fa fa-undo',
-                                'data-action': 'undo',
-                            })],
-                            htmlTag: 'BUTTON',
-                        });
-                        const redo = new ActionableNode({
-                            name: 'redo',
-                            label: 'Redo',
-                            commandId: 'redo',
-                            enabled: history.canRedo.bind(history),
-                            modifiers: [new Attributes({
-                                class: 'btn btn-secondary fa fa-repeat',
-                                'data-action': 'redo',
-                            })],
-                            htmlTag: 'BUTTON',
-                        });
-                        return [undo, redo];
-                    },
-                },
             ],
             componentZones: [
                 ['main_template', ['root']],
                 ['snippet_menu', ['main_sidebar']],
                 ['snippetManipulators', ['snippetManipulators']],
             ],
-            locations: [
-                ['historyButtons', [document.body, 'append']],
-            ],
             location: options.location,
             pressedActionablesClassName: 'active',
         });

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

@@ -24,6 +24,7 @@ import { FontAwesomeNode } from '../plugin-fontawesome/src/FontAwesomeNode';
 import { SeparatorNode } from '../core/src/VNodes/SeparatorNode';
 import { Format } from '../core/src/Format';
 import { OdooVideoNode } from '../plugin-odoo-video/src/OdooVideoNode';
+import { ReactiveEditorInfo } from '../plugin-reactive-info/src/ReactiveEditorInfo';
 
 export {
     OdooWebsiteEditor,
@@ -52,4 +53,5 @@ export {
     OdooVideoNode,
     SeparatorNode,
     Format,
+    ReactiveEditorInfo,
 };

packages/plugin-reactive-info/src/ReactiveEditorInfo.ts

@@ -0,0 +1,32 @@
+import { History } from '../../plugin-history/src/History';
+import { JWPluginConfig, JWPlugin } from '../../core/src/JWPlugin';
+import { ReactiveValue } from '../../utils/src/ReactiveValue';
+
+interface EditorCurrentState {
+    canUndo: boolean;
+    canRedo: boolean;
+}
+
+export class ReactiveEditorInfo<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin<T> {
+    static dependencies = [History];
+
+    editorInfo: ReactiveValue<EditorCurrentState> = new ReactiveValue({
+        canUndo: false,
+        canRedo: false,
+    });
+
+    commandHooks = {
+        '@commit': this._updateInfo,
+    };
+
+    /**
+     * Update the information of the `editorInfo`.
+     */
+    private _updateInfo(): void {
+        const history = this.editor.plugins.get(History);
+        this.editorInfo.set({
+            canUndo: history.canUndo(),
+            canRedo: history.canRedo(),
+        });
+    }
+}