table + dom/html

Gorash · Gorash · commit 0efa8757a5cd · 2020-08-06T13:39:31.000+02:00
diff --git a/packages/plugin-code/src/Code.ts b/packages/plugin-code/src/Code.ts
@@ -4,7 +4,6 @@ import { Renderer } from '../../plugin-renderer/src/Renderer';
 import { Attributes } from '../../plugin-xml/src/Attributes';
 import { ActionableNode } from '../../plugin-layout/src/ActionableNode';
 import { Layout } from '../../plugin-layout/src/Layout';
-import { CodeButtonDomObjectRenderer } from './CodeButtonDomObjectRenderer';
 import { CodeViewNode } from './CodeViewNode';
 import { CodeViewDomObjectRenderer } from './CodeViewDomObjectRenderer';
 import { VNode } from '../../core/src/VNodes/VNode';
@@ -15,14 +14,15 @@ import { isBlock } from '../../utils/src/isBlock';
 export class Code<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin<T> {
     codeView = new CodeViewNode();
     readonly loadables: Loadables<Renderer & Layout> = {
-        renderers: [CodeButtonDomObjectRenderer, CodeViewDomObjectRenderer],
+        renderers: [CodeViewDomObjectRenderer],
         components: [
             {
                 id: 'CodeButton',
                 render: async (): Promise<ActionableNode[]> => {
                     const button = new ActionableNode({
                         name: 'code',
                         label: 'Toggle Code view',
+                        commandId: 'toggleCodeView',
                         selected: (): boolean => this.active,
                         modifiers: [new Attributes({ class: 'fas fa-code fa-fw' })],
                     });
@@ -38,6 +38,11 @@ export class Code<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin<T>
         ],
         componentZones: [['CodeButton', ['actionables']]],
     };
+    commands = {
+        toggleCodeView: {
+            handler: this.toggle.bind(this),
+        },
+    };
     active = false;
     async start(): Promise<void> {
         await super.start();
@@ -49,9 +54,9 @@ export class Code<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin<T>
 
     async toggle(): Promise<void> {
         if (this.active) {
-            this.deactivate();
+            return this.deactivate();
         } else {
-            this.activate();
+            return this.activate();
         }
     }
     async activate(): Promise<void> {
diff --git a/packages/plugin-html/src/DefaultHtmlDomRenderer.ts b/packages/plugin-html/src/DefaultHtmlDomRenderer.ts
@@ -62,6 +62,17 @@ export class DefaultHtmlDomRenderer extends NodeRenderer<Node[]> {
                     }
                 }
             }
+            element.addEventListener('destroy', () => {
+                [...element.children].forEach(childElement => {
+                    childElement.dispatchEvent(new CustomEvent('destroy'));
+                });
+                if (domObject.detach) {
+                    domObject.detach(element);
+                }
+            });
+            if (domObject.attach) {
+                domObject.attach(element);
+            }
             domNode = element;
         } else if ('text' in domObject) {
             domNode = document.createTextNode(domObject.text);
diff --git a/packages/plugin-table/src/Table.ts b/packages/plugin-table/src/Table.ts
@@ -101,10 +101,10 @@ export class Table<T extends TableConfig = TableConfig> extends JWPlugin<T> {
                 id: 'TablePicker',
                 async render(editor: JWEditor): Promise<VNode[]> {
                     const tablePlugin = editor.plugins.get(Table);
-                    const table = new TablePickerNode(
-                        tablePlugin.minRowCount,
-                        tablePlugin.minColumnCount,
-                    );
+                    const table = new TablePickerNode({
+                        rowCount: tablePlugin.minRowCount,
+                        columnCount: tablePlugin.minColumnCount,
+                    });
                     return [table];
                 },
             },
@@ -173,17 +173,19 @@ export class Table<T extends TableConfig = TableConfig> extends JWPlugin<T> {
      * @param params
      */
     async insertTable(params: InsertTableParams): Promise<void> {
+        const layout = this.editor.plugins.get(Layout);
+        if (this.isTablePickerOpen) {
+            await layout.remove('TablePicker');
+        }
         if (!params.rowCount || !params.columnCount) {
-            const layout = this.editor.plugins.get(Layout);
             const isTablePickerOpen = !!this.isTablePickerOpen;
-            await layout.remove('TablePicker');
             if (!isTablePickerOpen) {
                 await layout.append('TablePicker', 'TableButton');
             }
         } else {
             const range = params.context.range;
             if (range.start.parent) {
-                range.start.before(new TableNode(params.rowCount, params.columnCount));
+                range.start.before(new TableNode(params));
             }
         }
     }
diff --git a/packages/plugin-table/src/TableNode.ts b/packages/plugin-table/src/TableNode.ts
@@ -4,10 +4,10 @@ import { TableCellNode } from './TableCellNode';
 
 export class TableNode extends VElement {
     breakable = false;
-    constructor(rowCount?: number, columnCount?: number) {
+    constructor(params?: { rowCount?: number; columnCount?: number }) {
         super({ htmlTag: 'TABLE' });
-        if (rowCount && columnCount) {
-            this.reset(rowCount, columnCount);
+        if (params && params.rowCount && params.columnCount) {
+            this.reset(params.rowCount, params.columnCount);
         }
     }
 
diff --git a/packages/plugin-table/src/TablePickerCellDomObjectRenderer.ts b/packages/plugin-table/src/TablePickerCellDomObjectRenderer.ts
@@ -6,8 +6,6 @@ import {
 } from '../../plugin-renderer-dom-object/src/DomObjectRenderingEngine';
 import { TableCellNode } from './TableCellNode';
 import { TableNode } from './TableNode';
-import { Layout } from '../../plugin-layout/src/Layout';
-import { DomLayoutEngine } from '../../plugin-dom-layout/src/DomLayoutEngine';
 import { TableRowNode } from './TableRowNode';
 import { VNode } from '../../core/src/VNodes/VNode';
 import { Table } from './Table';
@@ -24,8 +22,6 @@ export class TablePickerCellDomObjectRenderer extends NodeRenderer<DomObject> {
         tablePickerCell: TableCellNode,
         worker: RenderingEngineWorker<DomObject>,
     ): Promise<DomObjectElement> {
-        const layout = this.engine.editor.plugins.get(Layout);
-        const domLayoutEngine = layout.engines.dom as DomLayoutEngine;
         const domObject = (await this.super.render(tablePickerCell, worker)) as DomObjectElement;
         domObject.attributes = {
             ...domObject.attributes,
@@ -38,7 +34,7 @@ export class TablePickerCellDomObjectRenderer extends NodeRenderer<DomObject> {
         const minRowCount = tablePlugin.minRowCount;
         const minColumnCount = tablePlugin.minColumnCount;
 
-        const onMouseOver = async (ev: Event): Promise<void> => {
+        const onMouseOver = (ev: Event): void => {
             const table = (ev.target as HTMLTableCellElement).closest('table.table-picker');
             for (const cell of table.querySelectorAll('td')) {
                 const rowIndex = +cell.getAttribute('data-rowCount') - 1;
@@ -53,58 +49,64 @@ export class TablePickerCellDomObjectRenderer extends NodeRenderer<DomObject> {
                 }
             }
             const tablePicker = tablePickerCell.ancestor(TableNode);
-            const toRedraw = new Set<VNode>();
-            // Add/remove rows.
-            if (tablePickerCell.rowIndex >= tablePicker.rowCount - 1) {
-                // Add.
-                const newRow = new TableRowNode();
-                toRedraw.add(newRow);
-                tablePicker.append(newRow);
-                for (let cellIndex = 0; cellIndex < tablePicker.columnCount; cellIndex++) {
-                    const newCell = new TableCellNode();
-                    newRow.append(newCell);
-                    toRedraw.add(newCell);
-                }
-            } else if (tablePicker.rowCount > minRowCount) {
-                // Remove.
-                const rows = tablePicker.children(
-                    child =>
-                        child instanceof TableRowNode &&
-                        child.rowIndex >= minRowCount &&
-                        child.rowIndex > tablePickerCell.rowIndex + 1,
-                );
-                for (const row of rows) {
-                    for (const rowCell of row.children(TableCellNode)) {
-                        rowCell.remove();
+            if (
+                tablePickerCell.rowIndex >= tablePicker.rowCount - 1 ||
+                tablePicker.rowCount > minRowCount ||
+                tablePickerCell.columnIndex >= tablePicker.columnCount - 1 ||
+                tablePicker.columnCount > minColumnCount
+            ) {
+                this.engine.editor.execCommand(() => {
+                    const toRedraw = new Set<VNode>();
+                    // Add/remove rows.
+                    if (tablePickerCell.rowIndex >= tablePicker.rowCount - 1) {
+                        // Add.
+                        const newRow = new TableRowNode();
+                        toRedraw.add(newRow);
+                        tablePicker.append(newRow);
+                        for (let cellIndex = 0; cellIndex < tablePicker.columnCount; cellIndex++) {
+                            const newCell = new TableCellNode();
+                            newRow.append(newCell);
+                            toRedraw.add(newCell);
+                        }
+                    } else if (tablePicker.rowCount > minRowCount) {
+                        // Remove.
+                        const rows = tablePicker.children(
+                            child =>
+                                child instanceof TableRowNode &&
+                                child.rowIndex >= minRowCount &&
+                                child.rowIndex > tablePickerCell.rowIndex + 1,
+                        );
+                        for (const row of rows) {
+                            for (const rowCell of row.children(TableCellNode)) {
+                                rowCell.remove();
+                            }
+                            row.remove();
+                        }
+                        if (rows.length) toRedraw.add(tablePicker);
                     }
-                    row.remove();
-                }
-                if (rows.length) toRedraw.add(tablePicker);
-            }
-            // Add/remove Columns.
-            if (tablePickerCell.columnIndex >= tablePicker.columnCount - 1) {
-                // Add.
-                for (const row of tablePicker.children(TableRowNode)) {
-                    const newCell = new TableCellNode();
-                    row.append(newCell);
-                    toRedraw.add(newCell);
-                }
-            } else if (tablePicker.columnCount > minColumnCount) {
-                // Remove.
-                const cellsToRemove = tablePicker.descendants(
-                    descendant =>
-                        descendant instanceof TableCellNode &&
-                        descendant.columnIndex >= minColumnCount &&
-                        descendant.columnIndex > tablePickerCell.columnIndex + 1,
-                );
-                for (const cellToRemove of cellsToRemove) {
-                    toRedraw.add(cellToRemove.parent);
-                    cellToRemove.remove();
-                }
-                if (cellsToRemove.length) toRedraw.add(tablePicker);
-            }
-            if (toRedraw.size) {
-                await domLayoutEngine.redraw(...toRedraw);
+                    // Add/remove Columns.
+                    if (tablePickerCell.columnIndex >= tablePicker.columnCount - 1) {
+                        // Add.
+                        for (const row of tablePicker.children(TableRowNode)) {
+                            const newCell = new TableCellNode();
+                            row.append(newCell);
+                            toRedraw.add(newCell);
+                        }
+                    } else if (tablePicker.columnCount > minColumnCount) {
+                        // Remove.
+                        const cellsToRemove = tablePicker.descendants(
+                            descendant =>
+                                descendant instanceof TableCellNode &&
+                                descendant.columnIndex >= minColumnCount &&
+                                descendant.columnIndex > tablePickerCell.columnIndex + 1,
+                        );
+                        for (const cellToRemove of cellsToRemove) {
+                            toRedraw.add(cellToRemove.parent);
+                            cellToRemove.remove();
+                        }
+                        if (cellsToRemove.length) toRedraw.add(tablePicker);
+                    }
+                });
             }
         };
         const onClick = async (ev: Event): Promise<void> => {
diff --git a/packages/plugin-table/src/TablePickerDomObjectRenderer.ts b/packages/plugin-table/src/TablePickerDomObjectRenderer.ts
@@ -8,19 +8,29 @@ import { Table } from './Table';
 import { TableNode } from './TableNode';
 import { Layout } from '../../plugin-layout/src/Layout';
 import { TablePickerNode } from './TablePickerNode';
+import { RenderingEngineWorker } from '../../plugin-renderer/src/RenderingEngineCache';
 
 export class TablePickerDomObjectRenderer extends NodeRenderer<DomObject> {
     static id = DomObjectRenderingEngine.id;
     engine: DomObjectRenderingEngine;
     predicate = TablePickerNode;
 
-    async render(tablePicker: TableNode): Promise<DomObjectElement> {
-        const domObject = (await this.super.render(tablePicker)) as DomObjectElement;
+    async render(
+        tablePicker: TableNode,
+        worker: RenderingEngineWorker<DomObject>,
+    ): Promise<DomObjectElement> {
+        const domObject = (await this.super.render(tablePicker, worker)) as DomObjectElement;
         const tablePlugin = this.engine.editor.plugins.get(Table);
         const layout = this.engine.editor.plugins.get(Layout);
 
         const close = async (): Promise<void> => {
-            await layout.remove('TablePicker');
+            setTimeout(() => {
+                if (tablePlugin.isTablePickerOpen) {
+                    this.engine.editor.execCommand(() => {
+                        return layout.remove('TablePicker');
+                    });
+                }
+            });
         };
 
         domObject.attach = (): void => {
diff --git a/packages/plugin-table/src/TablePickerNode.ts b/packages/plugin-table/src/TablePickerNode.ts
@@ -2,8 +2,8 @@ import { TableNode } from './TableNode';
 import { Attributes } from '../../plugin-xml/src/Attributes';
 
 export class TablePickerNode extends TableNode {
-    constructor(rowCount: number, columnCount: number) {
-        super(rowCount, columnCount);
+    constructor(params?: { rowCount?: number; columnCount?: number }) {
+        super(params);
         this.modifiers.get(Attributes).classList.add('table-picker');
     }
 }
diff --git a/packages/plugin-template/src/TemplateActionableDomObjectRenderer.ts b/packages/plugin-template/src/TemplateActionableDomObjectRenderer.ts
@@ -1,4 +1,7 @@
-import { DomObjectRenderingEngine } from '../../plugin-renderer-dom-object/src/DomObjectRenderingEngine';
+import {
+    DomObjectRenderingEngine,
+    DomObject,
+} from '../../plugin-renderer-dom-object/src/DomObjectRenderingEngine';
 import { VNode } from '../../core/src/VNodes/VNode';
 import { Template } from './Template';
 import { ActionableNode } from '../../plugin-layout/src/ActionableNode';
@@ -7,15 +10,19 @@ import {
     DomObjectActionable,
 } from '../../plugin-dom-layout/src/ActionableDomObjectRenderer';
 import { TemplateThumbnailSelectorNode } from './TemplateThumbnailSelectorNode';
+import { RenderingEngineWorker } from '../../plugin-renderer/src/RenderingEngineCache';
 
 export class TemplateActionableDomObjectRenderer extends ActionableDomObjectRenderer {
     static id = DomObjectRenderingEngine.id;
     engine: DomObjectRenderingEngine;
     predicate = (node: VNode): boolean =>
         node instanceof ActionableNode && !!node.ancestor(TemplateThumbnailSelectorNode);
 
-    async render(node: ActionableNode): Promise<DomObjectActionable> {
-        const domObject = await super.render(node);
+    async render(
+        node: ActionableNode,
+        worker: RenderingEngineWorker<DomObject>,
+    ): Promise<DomObjectActionable> {
+        const domObject = await super.render(node, worker);
         const templatePlugin = this.engine.editor.plugins.get(Template);
         const name = node.actionName
             .split('-')

Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,17 @@ export class DefaultHtmlDomRenderer extends NodeRenderer<Node[]> {`
`62`	`62`	`}`
`63`	`63`	`}`
`64`	`64`	`}`
	`65`	`+ element.addEventListener('destroy', () => {`
	`66`	`+ [...element.children].forEach(childElement => {`
	`67`	`+ childElement.dispatchEvent(new CustomEvent('destroy'));`
	`68`	`+ });`
	`69`	`+ if (domObject.detach) {`
	`70`	`+ domObject.detach(element);`
	`71`	`+ }`
	`72`	`+ });`
	`73`	`+ if (domObject.attach) {`
	`74`	`+ domObject.attach(element);`
	`75`	`+ }`
`65`	`76`	`domNode = element;`
`66`	`77`	`} else if ('text' in domObject) {`
`67`	`78`	`domNode = document.createTextNode(domObject.text);`
Original file line number	Diff line number	Diff line change
`@@ -4,10 +4,10 @@ import { TableCellNode } from './TableCellNode';`
`4`	`4`
`5`	`5`	`export class TableNode extends VElement {`
`6`	`6`	`breakable = false;`
`7`		`- constructor(rowCount?: number, columnCount?: number) {`
	`7`	`+ constructor(params?: { rowCount?: number; columnCount?: number }) {`
`8`	`8`	`super({ htmlTag: 'TABLE' });`
`9`		`- if (rowCount && columnCount) {`
`10`		`- this.reset(rowCount, columnCount);`
	`9`	`+ if (params && params.rowCount && params.columnCount) {`
	`10`	`+ this.reset(params.rowCount, params.columnCount);`
`11`	`11`	`}`
`12`	`12`	`}`
`13`	`13`
Original file line number	Diff line number	Diff line change
`@@ -2,8 +2,8 @@ import { TableNode } from './TableNode';`
`2`	`2`	`import { Attributes } from '../../plugin-xml/src/Attributes';`
`3`	`3`
`4`	`4`	`export class TablePickerNode extends TableNode {`
`5`		`- constructor(rowCount: number, columnCount: number) {`
`6`		`- super(rowCount, columnCount);`
	`5`	`+ constructor(params?: { rowCount?: number; columnCount?: number }) {`
	`6`	`+ super(params);`
`7`	`7`	`this.modifiers.get(Attributes).classList.add('table-picker');`
`8`	`8`	`}`
`9`	`9`	`}`