roosterjs-content-model-plugins 0.26.4 → 0.28.0

package/lib-amd/tableEdit/TableEditPlugin.js

@@ -0,0 +1,156 @@
+define(["require", "exports", "roosterjs-content-model-dom", "./editors/TableEditor"], function (require, exports, roosterjs_content_model_dom_1, TableEditor_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TableEditPlugin = void 0;
+    var TABLE_RESIZER_LENGTH = 12;
+    /**
+     * TableEdit plugin, provides the ability to resize a table by drag-and-drop
+     */
+    var TableEditPlugin = /** @class */ (function () {
+        /**
+         * Construct a new instance of TableResize plugin
+         * @param anchorContainerSelector An optional selector string to specify the container to host the plugin.
+         * The container must not be affected by transform: scale(), otherwise the position calculation will be wrong.
+         * If not specified, the plugin will be inserted in document.body
+         */
+        function TableEditPlugin(anchorContainerSelector) {
+            var _this = this;
+            this.anchorContainerSelector = anchorContainerSelector;
+            this.editor = null;
+            this.onMouseMoveDisposer = null;
+            this.tableRectMap = null;
+            this.tableEditor = null;
+            this.onMouseOut = function (_a) {
+                var relatedTarget = _a.relatedTarget, currentTarget = _a.currentTarget;
+                var relatedTargetNode = relatedTarget;
+                var currentTargetNode = currentTarget;
+                if ((0, roosterjs_content_model_dom_1.isNodeOfType)(relatedTargetNode, 'ELEMENT_NODE') &&
+                    (0, roosterjs_content_model_dom_1.isNodeOfType)(currentTargetNode, 'ELEMENT_NODE') &&
+                    _this.tableEditor &&
+                    !_this.tableEditor.isOwnedElement(relatedTargetNode) &&
+                    !currentTargetNode.contains(relatedTargetNode)) {
+                    _this.setTableEditor(null);
+                }
+            };
+            this.onMouseMove = function (event) {
+                var _a;
+                var e = event;
+                if (e.buttons > 0 || !_this.editor) {
+                    return;
+                }
+                _this.ensureTableRects();
+                var editorWindow = _this.editor.getDocument().defaultView || window;
+                var x = e.pageX - editorWindow.scrollX;
+                var y = e.pageY - editorWindow.scrollY;
+                var currentTable = null;
+                //Find table in range of mouse
+                if (_this.tableRectMap) {
+                    for (var i = _this.tableRectMap.length - 1; i >= 0; i--) {
+                        var _b = _this.tableRectMap[i], table = _b.table, rect = _b.rect;
+                        if (x >= rect.left - TABLE_RESIZER_LENGTH &&
+                            x <= rect.right + TABLE_RESIZER_LENGTH &&
+                            y >= rect.top - TABLE_RESIZER_LENGTH &&
+                            y <= rect.bottom + TABLE_RESIZER_LENGTH) {
+                            currentTable = table;
+                            break;
+                        }
+                    }
+                }
+                _this.setTableEditor(currentTable, e);
+                (_a = _this.tableEditor) === null || _a === void 0 ? void 0 : _a.onMouseMove(x, y);
+            };
+            this.invalidateTableRects = function () {
+                _this.tableRectMap = null;
+            };
+        }
+        /**
+         * Get a friendly name of this plugin
+         */
+        TableEditPlugin.prototype.getName = function () {
+            return 'TableEdit';
+        };
+        /**
+         * Initialize this plugin. This should only be called from Editor
+         * @param editor Editor instance
+         */
+        TableEditPlugin.prototype.initialize = function (editor) {
+            this.editor = editor;
+            this.onMouseMoveDisposer = this.editor.attachDomEvent({
+                mousemove: { beforeDispatch: this.onMouseMove },
+            });
+            var scrollContainer = this.editor.getScrollContainer();
+            scrollContainer.addEventListener('mouseout', this.onMouseOut);
+        };
+        /**
+         * Dispose this plugin
+         */
+        TableEditPlugin.prototype.dispose = function () {
+            var _a, _b;
+            var scrollContainer = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getScrollContainer();
+            scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener('mouseout', this.onMouseOut);
+            (_b = this.onMouseMoveDisposer) === null || _b === void 0 ? void 0 : _b.call(this);
+            this.invalidateTableRects();
+            this.disposeTableEditor();
+            this.editor = null;
+            this.onMouseMoveDisposer = null;
+        };
+        /**
+         * Handle events triggered from editor
+         * @param event PluginEvent object
+         */
+        TableEditPlugin.prototype.onPluginEvent = function (e) {
+            switch (e.eventType) {
+                case 'input':
+                case 'contentChanged':
+                case 'scroll':
+                case 'zoomChanged':
+                    this.setTableEditor(null);
+                    this.invalidateTableRects();
+                    break;
+            }
+        };
+        /**
+         * @internal Public only for unit test
+         * @param table Table to use when setting the Editors
+         * @param event (Optional) Mouse event
+         */
+        TableEditPlugin.prototype.setTableEditor = function (table, event) {
+            if (this.tableEditor && !this.tableEditor.isEditing() && table != this.tableEditor.table) {
+                this.disposeTableEditor();
+            }
+            if (!this.tableEditor && table && this.editor && table.rows.length > 0) {
+                // anchorContainerSelector is used to specify the container to host the plugin, which can be outside of the editor's div
+                var container = this.anchorContainerSelector
+                    ? this.editor.getDocument().querySelector(this.anchorContainerSelector)
+                    : undefined;
+                this.tableEditor = new TableEditor_1.TableEditor(this.editor, table, this.invalidateTableRects, (0, roosterjs_content_model_dom_1.isNodeOfType)(container, 'ELEMENT_NODE') ? container : undefined, event === null || event === void 0 ? void 0 : event.currentTarget);
+            }
+        };
+        TableEditPlugin.prototype.disposeTableEditor = function () {
+            var _a;
+            (_a = this.tableEditor) === null || _a === void 0 ? void 0 : _a.dispose();
+            this.tableEditor = null;
+        };
+        TableEditPlugin.prototype.ensureTableRects = function () {
+            var _this = this;
+            if (!this.tableRectMap && this.editor) {
+                this.tableRectMap = [];
+                var tables = this.editor.getDOMHelper().queryElements('table');
+                tables.forEach(function (table) {
+                    if (table.isContentEditable) {
+                        var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(table.getBoundingClientRect());
+                        if (rect && _this.tableRectMap) {
+                            _this.tableRectMap.push({
+                                table: table,
+                                rect: rect,
+                            });
+                        }
+                    }
+                });
+            }
+        };
+        return TableEditPlugin;
+    }());
+    exports.TableEditPlugin = TableEditPlugin;
+});
+//# sourceMappingURL=TableEditPlugin.js.map

package/lib-amd/tableEdit/TableEditPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableEditPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/tableEdit/TableEditPlugin.ts"],"names":[],"mappings":"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","sourcesContent":["import { isNodeOfType, normalizeRect } from 'roosterjs-content-model-dom';\nimport { TableEditor } from './editors/TableEditor';\nimport type { EditorPlugin, IEditor, PluginEvent, Rect } from 'roosterjs-content-model-types';\n\nconst TABLE_RESIZER_LENGTH = 12;\n\n/**\n * TableEdit plugin, provides the ability to resize a table by drag-and-drop\n */\nexport class TableEditPlugin implements EditorPlugin {\n    private editor: IEditor | null = null;\n    private onMouseMoveDisposer: (() => void) | null = null;\n    private tableRectMap: { table: HTMLTableElement; rect: Rect }[] | null = null;\n    private tableEditor: TableEditor | null = null;\n\n    /**\n     * Construct a new instance of TableResize plugin\n     * @param anchorContainerSelector An optional selector string to specify the container to host the plugin.\n     * The container must not be affected by transform: scale(), otherwise the position calculation will be wrong.\n     * If not specified, the plugin will be inserted in document.body\n     */\n    constructor(private anchorContainerSelector?: string) {}\n\n    /**\n     * Get a friendly name of this plugin\n     */\n    getName() {\n        return 'TableEdit';\n    }\n\n    /**\n     * Initialize this plugin. This should only be called from Editor\n     * @param editor Editor instance\n     */\n    initialize(editor: IEditor) {\n        this.editor = editor;\n        this.onMouseMoveDisposer = this.editor.attachDomEvent({\n            mousemove: { beforeDispatch: this.onMouseMove },\n        });\n        const scrollContainer = this.editor.getScrollContainer();\n        scrollContainer.addEventListener('mouseout', this.onMouseOut);\n    }\n\n    private onMouseOut = ({ relatedTarget, currentTarget }: MouseEvent) => {\n        const relatedTargetNode = relatedTarget as Node;\n        const currentTargetNode = currentTarget as Node;\n        if (\n            isNodeOfType(relatedTargetNode, 'ELEMENT_NODE') &&\n            isNodeOfType(currentTargetNode, 'ELEMENT_NODE') &&\n            this.tableEditor &&\n            !this.tableEditor.isOwnedElement(relatedTargetNode) &&\n            !currentTargetNode.contains(relatedTargetNode)\n        ) {\n            this.setTableEditor(null);\n        }\n    };\n\n    /**\n     * Dispose this plugin\n     */\n    dispose() {\n        const scrollContainer = this.editor?.getScrollContainer();\n        scrollContainer?.removeEventListener('mouseout', this.onMouseOut);\n        this.onMouseMoveDisposer?.();\n        this.invalidateTableRects();\n        this.disposeTableEditor();\n        this.editor = null;\n        this.onMouseMoveDisposer = null;\n    }\n\n    /**\n     * Handle events triggered from editor\n     * @param event PluginEvent object\n     */\n    onPluginEvent(e: PluginEvent) {\n        switch (e.eventType) {\n            case 'input':\n            case 'contentChanged':\n            case 'scroll':\n            case 'zoomChanged':\n                this.setTableEditor(null);\n                this.invalidateTableRects();\n                break;\n        }\n    }\n\n    private onMouseMove = (event: Event) => {\n        const e = event as MouseEvent;\n\n        if (e.buttons > 0 || !this.editor) {\n            return;\n        }\n\n        this.ensureTableRects();\n\n        const editorWindow = this.editor.getDocument().defaultView || window;\n        const x = e.pageX - editorWindow.scrollX;\n        const y = e.pageY - editorWindow.scrollY;\n        let currentTable: HTMLTableElement | null = null;\n\n        //Find table in range of mouse\n        if (this.tableRectMap) {\n            for (let i = this.tableRectMap.length - 1; i >= 0; i--) {\n                const { table, rect } = this.tableRectMap[i];\n\n                if (\n                    x >= rect.left - TABLE_RESIZER_LENGTH &&\n                    x <= rect.right + TABLE_RESIZER_LENGTH &&\n                    y >= rect.top - TABLE_RESIZER_LENGTH &&\n                    y <= rect.bottom + TABLE_RESIZER_LENGTH\n                ) {\n                    currentTable = table;\n                    break;\n                }\n            }\n        }\n\n        this.setTableEditor(currentTable, e);\n        this.tableEditor?.onMouseMove(x, y);\n    };\n\n    /**\n     * @internal Public only for unit test\n     * @param table Table to use when setting the Editors\n     * @param event (Optional) Mouse event\n     */\n    public setTableEditor(table: HTMLTableElement | null, event?: MouseEvent) {\n        if (this.tableEditor && !this.tableEditor.isEditing() && table != this.tableEditor.table) {\n            this.disposeTableEditor();\n        }\n\n        if (!this.tableEditor && table && this.editor && table.rows.length > 0) {\n            // anchorContainerSelector is used to specify the container to host the plugin, which can be outside of the editor's div\n            const container = this.anchorContainerSelector\n                ? this.editor.getDocument().querySelector(this.anchorContainerSelector)\n                : undefined;\n\n            this.tableEditor = new TableEditor(\n                this.editor,\n                table,\n                this.invalidateTableRects,\n                isNodeOfType(container, 'ELEMENT_NODE') ? container : undefined,\n                event?.currentTarget\n            );\n        }\n    }\n\n    private invalidateTableRects = () => {\n        this.tableRectMap = null;\n    };\n\n    private disposeTableEditor() {\n        this.tableEditor?.dispose();\n        this.tableEditor = null;\n    }\n\n    private ensureTableRects() {\n        if (!this.tableRectMap && this.editor) {\n            this.tableRectMap = [];\n\n            const tables = this.editor.getDOMHelper().queryElements('table');\n            tables.forEach(table => {\n                if (table.isContentEditable) {\n                    const rect = normalizeRect(table.getBoundingClientRect());\n                    if (rect && this.tableRectMap) {\n                        this.tableRectMap.push({\n                            table,\n                            rect,\n                        });\n                    }\n                }\n            });\n        }\n    }\n}\n"]}

package/lib-amd/tableEdit/editors/TableEditor.d.ts

@@ -0,0 +1,73 @@
+import type { IEditor } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ *
+ * A table has 6 hot areas to be resized/edited (take LTR example):
+ *
+ *   [6]  [                ]
+ *       +[      1         ]+--------------------+
+ *       |[                ]|                    |
+ *      [ ]               [ ]                    |
+ *      [ ]               [ ]                    |
+ *      [2]               [3]                    |
+ *      [ ]               [ ]                    |
+ *      [ ][       4       ]|                    |
+ *       +------------------+--------------------+
+ *       |                  |                    |
+ *       |                  |                    |
+ *       |                  |                    |
+ *       +------------------+--------------------+
+ *                                                [5]
+ *
+ * 1 - Hover area to show insert column button
+ * 2 - Hover area to show insert row button
+ * 3 - Hover area to show vertical resizing bar
+ * 4 - Hover area to show horizontal resizing bar
+ * 5 - Hover area to show whole table resize handle
+ * 6 - Hover area to show whole table mover handle
+ *
+ * When set a different current table or change current TD, we need to update these areas
+ */
+export declare class TableEditor {
+    private editor;
+    readonly table: HTMLTableElement;
+    private onChanged;
+    private anchorContainer?;
+    private contentDiv?;
+    private horizontalInserter;
+    private verticalInserter;
+    private horizontalResizer;
+    private verticalResizer;
+    private tableResizer;
+    private tableMover;
+    private isRTL;
+    private range;
+    private isCurrentlyEditing;
+    constructor(editor: IEditor, table: HTMLTableElement, onChanged: () => void, anchorContainer?: HTMLElement | undefined, contentDiv?: EventTarget | null | undefined);
+    dispose(): void;
+    isEditing(): boolean;
+    isOwnedElement(node: Node): boolean;
+    onMouseMove(x: number, y: number): void;
+    private setEditorFeatures;
+    private setResizingTd;
+    /**
+     * create or remove TableInserter
+     * @param td td to attach to, set this to null to remove inserters (both horizontal and vertical)
+     */
+    private setInserterTd;
+    private disposeTableResizer;
+    private disposeTableInserter;
+    private disposeCellResizers;
+    private disposeTableMover;
+    private onFinishEditing;
+    private onStartTableResize;
+    private onStartCellResize;
+    private onStartResize;
+    private onInserted;
+    /**
+     * Public only for testing purposes
+     * @param table the table to select
+     */
+    onSelect: (table: HTMLTableElement) => void;
+    private getOnMouseOut;
+}

package/lib-amd/tableEdit/editors/TableEditor.js

@@ -0,0 +1,290 @@
+define(["require", "exports", "./features/CellResizer", "./features/TableInserter", "./features/TableMover", "./features/TableResizer", "./features/TableEditFeature", "roosterjs-content-model-dom"], function (require, exports, CellResizer_1, TableInserter_1, TableMover_1, TableResizer_1, TableEditFeature_1, roosterjs_content_model_dom_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TableEditor = void 0;
+    var INSERTER_HOVER_OFFSET = 6;
+    var TOP_OR_SIDE;
+    (function (TOP_OR_SIDE) {
+        TOP_OR_SIDE[TOP_OR_SIDE["top"] = 0] = "top";
+        TOP_OR_SIDE[TOP_OR_SIDE["side"] = 1] = "side";
+    })(TOP_OR_SIDE || (TOP_OR_SIDE = {}));
+    /**
+     * @internal
+     *
+     * A table has 6 hot areas to be resized/edited (take LTR example):
+     *
+     *   [6]  [                ]
+     *       +[      1         ]+--------------------+
+     *       |[                ]|                    |
+     *      [ ]               [ ]                    |
+     *      [ ]               [ ]                    |
+     *      [2]               [3]                    |
+     *      [ ]               [ ]                    |
+     *      [ ][       4       ]|                    |
+     *       +------------------+--------------------+
+     *       |                  |                    |
+     *       |                  |                    |
+     *       |                  |                    |
+     *       +------------------+--------------------+
+     *                                                [5]
+     *
+     * 1 - Hover area to show insert column button
+     * 2 - Hover area to show insert row button
+     * 3 - Hover area to show vertical resizing bar
+     * 4 - Hover area to show horizontal resizing bar
+     * 5 - Hover area to show whole table resize handle
+     * 6 - Hover area to show whole table mover handle
+     *
+     * When set a different current table or change current TD, we need to update these areas
+     */
+    var TableEditor = /** @class */ (function () {
+        function TableEditor(editor, table, onChanged, anchorContainer, contentDiv) {
+            var _this = this;
+            var _a;
+            this.editor = editor;
+            this.table = table;
+            this.onChanged = onChanged;
+            this.anchorContainer = anchorContainer;
+            this.contentDiv = contentDiv;
+            // 1, 2 - Insert a column or a row
+            this.horizontalInserter = null;
+            this.verticalInserter = null;
+            // 3, 4 - Resize a column or a row from a cell
+            this.horizontalResizer = null;
+            this.verticalResizer = null;
+            // 5 - Resize whole table
+            this.tableResizer = null;
+            // 6 - Move as well as select whole table
+            this.tableMover = null;
+            this.range = null;
+            this.onFinishEditing = function () {
+                _this.editor.focus();
+                if (_this.range) {
+                    _this.editor.setDOMSelection({ type: 'range', range: _this.range, isReverted: false });
+                }
+                _this.editor.takeSnapshot(); // Pass in an empty callback to make sure ContentChangedEvent is triggered
+                _this.onChanged();
+                _this.isCurrentlyEditing = false;
+                return false;
+            };
+            this.onStartTableResize = function () {
+                _this.isCurrentlyEditing = true;
+                _this.onStartResize();
+            };
+            this.onStartCellResize = function () {
+                _this.isCurrentlyEditing = true;
+                _this.disposeTableResizer();
+                _this.onStartResize();
+            };
+            this.onInserted = function () {
+                _this.disposeTableResizer();
+                _this.onFinishEditing();
+            };
+            /**
+             * Public only for testing purposes
+             * @param table the table to select
+             */
+            this.onSelect = function (table) {
+                _this.editor.focus();
+                if (table) {
+                    var selection = {
+                        table: table,
+                        firstRow: 0,
+                        firstColumn: 0,
+                        lastRow: table.rows.length - 1,
+                        lastColumn: table.rows[table.rows.length - 1].cells.length - 1,
+                        type: 'table',
+                    };
+                    _this.editor.setDOMSelection(selection);
+                }
+            };
+            this.getOnMouseOut = function (feature) {
+                return function (ev) {
+                    if (feature &&
+                        ev.relatedTarget != feature &&
+                        (0, roosterjs_content_model_dom_1.isNodeOfType)(_this.contentDiv, 'ELEMENT_NODE') &&
+                        (0, roosterjs_content_model_dom_1.isNodeOfType)(ev.relatedTarget, 'ELEMENT_NODE') &&
+                        !(_this.contentDiv == ev.relatedTarget)) {
+                        _this.dispose();
+                    }
+                };
+            };
+            this.isRTL = ((_a = editor.getDocument().defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(table).direction) == 'rtl';
+            this.setEditorFeatures();
+            this.isCurrentlyEditing = false;
+        }
+        TableEditor.prototype.dispose = function () {
+            this.disposeTableResizer();
+            this.disposeCellResizers();
+            this.disposeTableInserter();
+            this.disposeTableMover();
+        };
+        TableEditor.prototype.isEditing = function () {
+            return this.isCurrentlyEditing;
+        };
+        TableEditor.prototype.isOwnedElement = function (node) {
+            return [
+                this.tableResizer,
+                this.tableMover,
+                this.horizontalInserter,
+                this.verticalInserter,
+                this.horizontalResizer,
+                this.verticalResizer,
+            ]
+                .filter(function (feature) { return !!(feature === null || feature === void 0 ? void 0 : feature.div); })
+                .some(function (feature) { return (feature === null || feature === void 0 ? void 0 : feature.div) == node; });
+        };
+        TableEditor.prototype.onMouseMove = function (x, y) {
+            var _a;
+            // Get whole table rect
+            var tableRect = (0, roosterjs_content_model_dom_1.normalizeRect)(this.table.getBoundingClientRect());
+            //console.log('>>>tableRect', tableRect);
+            if (!tableRect) {
+                return;
+            }
+            // Determine if cursor is on top or side
+            var topOrSide = y <= tableRect.top + INSERTER_HOVER_OFFSET
+                ? 0 /* top */
+                : this.isRTL
+                    ? x >= tableRect.right - INSERTER_HOVER_OFFSET
+                        ? 1 /* side */
+                        : undefined
+                    : x <= tableRect.left + INSERTER_HOVER_OFFSET
+                        ? 1 /* side */
+                        : undefined;
+            var topOrSideBinary = topOrSide ? 1 : 0;
+            // i is row index, j is column index
+            for (var i = 0; i < this.table.rows.length; i++) {
+                var tr = this.table.rows[i];
+                var j = 0;
+                for (; j < tr.cells.length; j++) {
+                    var td = tr.cells[j];
+                    var tdRect = (0, roosterjs_content_model_dom_1.normalizeRect)(td.getBoundingClientRect());
+                    if (!tdRect || !tableRect) {
+                        continue;
+                    }
+                    // Determine the cell the cursor is in range of
+                    // Offset is only used for first row and column
+                    var lessThanBottom = y <= tdRect.bottom;
+                    var lessThanRight = this.isRTL
+                        ? x <= tdRect.right + INSERTER_HOVER_OFFSET * topOrSideBinary
+                        : x <= tdRect.right;
+                    var moreThanLeft = this.isRTL
+                        ? x >= tdRect.left
+                        : x >= tdRect.left - INSERTER_HOVER_OFFSET * topOrSideBinary;
+                    if (lessThanBottom && lessThanRight && moreThanLeft) {
+                        if (i === 0 && topOrSide == 0 /* top */) {
+                            var center = (tdRect.left + tdRect.right) / 2;
+                            var isOnRightHalf = this.isRTL ? x < center : x > center;
+                            this.setInserterTd(isOnRightHalf ? td : tr.cells[j - 1], false /*isHorizontal*/);
+                        }
+                        else if (j === 0 && topOrSide == 1 /* side */) {
+                            var tdAbove = (_a = this.table.rows[i - 1]) === null || _a === void 0 ? void 0 : _a.cells[0];
+                            var tdAboveRect = tdAbove
+                                ? (0, roosterjs_content_model_dom_1.normalizeRect)(tdAbove.getBoundingClientRect())
+                                : null;
+                            var isTdNotAboveMerged = !tdAboveRect
+                                ? null
+                                : this.isRTL
+                                    ? tdAboveRect.right === tdRect.right
+                                    : tdAboveRect.left === tdRect.left;
+                            this.setInserterTd(y < (tdRect.top + tdRect.bottom) / 2 && isTdNotAboveMerged
+                                ? tdAbove
+                                : td, true /*isHorizontal*/);
+                        }
+                        else {
+                            this.setInserterTd(null);
+                        }
+                        this.setResizingTd(td);
+                        //Cell found
+                        break;
+                    }
+                }
+                if (j < tr.cells.length) {
+                    break;
+                }
+            }
+            // Create Mover and Resizer
+            this.setEditorFeatures();
+        };
+        TableEditor.prototype.setEditorFeatures = function () {
+            if (!this.tableMover) {
+                this.tableMover = (0, TableMover_1.createTableMover)(this.table, this.editor, this.isRTL, this.onSelect, this.getOnMouseOut, this.contentDiv, this.anchorContainer);
+            }
+            if (!this.tableResizer) {
+                this.tableResizer = (0, TableResizer_1.createTableResizer)(this.table, this.editor, this.isRTL, this.onStartTableResize, this.onFinishEditing, this.contentDiv, this.anchorContainer);
+            }
+        };
+        TableEditor.prototype.setResizingTd = function (td) {
+            if (this.horizontalResizer && this.horizontalResizer.node != td) {
+                this.disposeCellResizers();
+            }
+            if (!this.horizontalResizer && td) {
+                this.horizontalResizer = (0, CellResizer_1.createCellResizer)(this.editor, td, this.table, this.isRTL, true /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing, this.anchorContainer);
+                this.verticalResizer = (0, CellResizer_1.createCellResizer)(this.editor, td, this.table, this.isRTL, false /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing, this.anchorContainer);
+            }
+        };
+        /**
+         * create or remove TableInserter
+         * @param td td to attach to, set this to null to remove inserters (both horizontal and vertical)
+         */
+        TableEditor.prototype.setInserterTd = function (td, isHorizontal) {
+            var inserter = isHorizontal ? this.horizontalInserter : this.verticalInserter;
+            if (td === null || (inserter && inserter.node != td)) {
+                this.disposeTableInserter();
+            }
+            if (!this.horizontalInserter && !this.verticalInserter && td) {
+                var newInserter = (0, TableInserter_1.createTableInserter)(this.editor, td, this.table, this.isRTL, !!isHorizontal, this.onInserted, this.getOnMouseOut, this.anchorContainer);
+                if (isHorizontal) {
+                    this.horizontalInserter = newInserter;
+                }
+                else {
+                    this.verticalInserter = newInserter;
+                }
+            }
+        };
+        TableEditor.prototype.disposeTableResizer = function () {
+            if (this.tableResizer) {
+                (0, TableEditFeature_1.disposeTableEditFeature)(this.tableResizer);
+                this.tableResizer = null;
+            }
+        };
+        TableEditor.prototype.disposeTableInserter = function () {
+            if (this.horizontalInserter) {
+                (0, TableEditFeature_1.disposeTableEditFeature)(this.horizontalInserter);
+                this.horizontalInserter = null;
+            }
+            if (this.verticalInserter) {
+                (0, TableEditFeature_1.disposeTableEditFeature)(this.verticalInserter);
+                this.verticalInserter = null;
+            }
+        };
+        TableEditor.prototype.disposeCellResizers = function () {
+            if (this.horizontalResizer) {
+                (0, TableEditFeature_1.disposeTableEditFeature)(this.horizontalResizer);
+                this.horizontalResizer = null;
+            }
+            if (this.verticalResizer) {
+                (0, TableEditFeature_1.disposeTableEditFeature)(this.verticalResizer);
+                this.verticalResizer = null;
+            }
+        };
+        TableEditor.prototype.disposeTableMover = function () {
+            if (this.tableMover) {
+                (0, TableEditFeature_1.disposeTableEditFeature)(this.tableMover);
+                this.tableMover = null;
+            }
+        };
+        TableEditor.prototype.onStartResize = function () {
+            this.isCurrentlyEditing = true;
+            var range = this.editor.getDOMSelection();
+            if (range && range.type == 'range') {
+                this.range = range.range;
+            }
+            this.editor.takeSnapshot();
+        };
+        return TableEditor;
+    }());
+    exports.TableEditor = TableEditor;
+});
+//# sourceMappingURL=TableEditor.js.map

package/lib-amd/tableEdit/editors/TableEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableEditor.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/tableEdit/editors/TableEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { createCellResizer } from './features/CellResizer';\nimport { createTableInserter } from './features/TableInserter';\nimport { createTableMover } from './features/TableMover';\nimport { createTableResizer } from './features/TableResizer';\nimport { disposeTableEditFeature } from './features/TableEditFeature';\nimport { isNodeOfType, normalizeRect } from 'roosterjs-content-model-dom';\nimport type { TableEditFeature } from './features/TableEditFeature';\nimport type { IEditor, TableSelection } from 'roosterjs-content-model-types';\n\nconst INSERTER_HOVER_OFFSET = 6;\nconst enum TOP_OR_SIDE {\n    top = 0,\n    side = 1,\n}\n/**\n * @internal\n *\n * A table has 6 hot areas to be resized/edited (take LTR example):\n *\n *   [6]  [                ]\n *       +[      1         ]+--------------------+\n *       |[                ]|                    |\n *      [ ]               [ ]                    |\n *      [ ]               [ ]                    |\n *      [2]               [3]                    |\n *      [ ]               [ ]                    |\n *      [ ][       4       ]|                    |\n *       +------------------+--------------------+\n *       |                  |                    |\n *       |                  |                    |\n *       |                  |                    |\n *       +------------------+--------------------+\n *                                                [5]\n *\n * 1 - Hover area to show insert column button\n * 2 - Hover area to show insert row button\n * 3 - Hover area to show vertical resizing bar\n * 4 - Hover area to show horizontal resizing bar\n * 5 - Hover area to show whole table resize handle\n * 6 - Hover area to show whole table mover handle\n *\n * When set a different current table or change current TD, we need to update these areas\n */\nexport class TableEditor {\n    // 1, 2 - Insert a column or a row\n    private horizontalInserter: TableEditFeature | null = null;\n    private verticalInserter: TableEditFeature | null = null;\n\n    // 3, 4 - Resize a column or a row from a cell\n    private horizontalResizer: TableEditFeature | null = null;\n    private verticalResizer: TableEditFeature | null = null;\n\n    // 5 - Resize whole table\n    private tableResizer: TableEditFeature | null = null;\n\n    // 6 - Move as well as select whole table\n    private tableMover: TableEditFeature | null = null;\n\n    private isRTL: boolean;\n    private range: Range | null = null;\n    private isCurrentlyEditing: boolean;\n\n    constructor(\n        private editor: IEditor,\n        public readonly table: HTMLTableElement,\n        private onChanged: () => void,\n        private anchorContainer?: HTMLElement,\n        private contentDiv?: EventTarget | null\n    ) {\n        this.isRTL = editor.getDocument().defaultView?.getComputedStyle(table).direction == 'rtl';\n        this.setEditorFeatures();\n        this.isCurrentlyEditing = false;\n    }\n\n    dispose() {\n        this.disposeTableResizer();\n        this.disposeCellResizers();\n        this.disposeTableInserter();\n        this.disposeTableMover();\n    }\n\n    isEditing(): boolean {\n        return this.isCurrentlyEditing;\n    }\n\n    isOwnedElement(node: Node) {\n        return [\n            this.tableResizer,\n            this.tableMover,\n            this.horizontalInserter,\n            this.verticalInserter,\n            this.horizontalResizer,\n            this.verticalResizer,\n        ]\n            .filter(feature => !!feature?.div)\n            .some(feature => feature?.div == node);\n    }\n\n    onMouseMove(x: number, y: number) {\n        // Get whole table rect\n        const tableRect = normalizeRect(this.table.getBoundingClientRect());\n\n        //console.log('>>>tableRect', tableRect);\n        if (!tableRect) {\n            return;\n        }\n\n        // Determine if cursor is on top or side\n        const topOrSide =\n            y <= tableRect.top + INSERTER_HOVER_OFFSET\n                ? TOP_OR_SIDE.top\n                : this.isRTL\n                ? x >= tableRect.right - INSERTER_HOVER_OFFSET\n                    ? TOP_OR_SIDE.side\n                    : undefined\n                : x <= tableRect.left + INSERTER_HOVER_OFFSET\n                ? TOP_OR_SIDE.side\n                : undefined;\n        const topOrSideBinary = topOrSide ? 1 : 0;\n\n        // i is row index, j is column index\n        for (let i = 0; i < this.table.rows.length; i++) {\n            const tr = this.table.rows[i];\n            let j = 0;\n            for (; j < tr.cells.length; j++) {\n                const td = tr.cells[j];\n                const tdRect = normalizeRect(td.getBoundingClientRect());\n\n                if (!tdRect || !tableRect) {\n                    continue;\n                }\n\n                // Determine the cell the cursor is in range of\n                // Offset is only used for first row and column\n                const lessThanBottom = y <= tdRect.bottom;\n                const lessThanRight = this.isRTL\n                    ? x <= tdRect.right + INSERTER_HOVER_OFFSET * topOrSideBinary\n                    : x <= tdRect.right;\n                const moreThanLeft = this.isRTL\n                    ? x >= tdRect.left\n                    : x >= tdRect.left - INSERTER_HOVER_OFFSET * topOrSideBinary;\n\n                if (lessThanBottom && lessThanRight && moreThanLeft) {\n                    if (i === 0 && topOrSide == TOP_OR_SIDE.top) {\n                        const center = (tdRect.left + tdRect.right) / 2;\n                        const isOnRightHalf = this.isRTL ? x < center : x > center;\n                        this.setInserterTd(\n                            isOnRightHalf ? td : tr.cells[j - 1],\n                            false /*isHorizontal*/\n                        );\n                    } else if (j === 0 && topOrSide == TOP_OR_SIDE.side) {\n                        const tdAbove = this.table.rows[i - 1]?.cells[0];\n                        const tdAboveRect = tdAbove\n                            ? normalizeRect(tdAbove.getBoundingClientRect())\n                            : null;\n\n                        const isTdNotAboveMerged = !tdAboveRect\n                            ? null\n                            : this.isRTL\n                            ? tdAboveRect.right === tdRect.right\n                            : tdAboveRect.left === tdRect.left;\n\n                        this.setInserterTd(\n                            y < (tdRect.top + tdRect.bottom) / 2 && isTdNotAboveMerged\n                                ? tdAbove\n                                : td,\n                            true /*isHorizontal*/\n                        );\n                    } else {\n                        this.setInserterTd(null);\n                    }\n\n                    this.setResizingTd(td);\n\n                    //Cell found\n                    break;\n                }\n            }\n\n            if (j < tr.cells.length) {\n                break;\n            }\n        }\n\n        // Create Mover and Resizer\n        this.setEditorFeatures();\n    }\n\n    private setEditorFeatures() {\n        if (!this.tableMover) {\n            this.tableMover = createTableMover(\n                this.table,\n                this.editor,\n                this.isRTL,\n                this.onSelect,\n                this.getOnMouseOut,\n                this.contentDiv,\n                this.anchorContainer\n            );\n        }\n\n        if (!this.tableResizer) {\n            this.tableResizer = createTableResizer(\n                this.table,\n                this.editor,\n                this.isRTL,\n                this.onStartTableResize,\n                this.onFinishEditing,\n                this.contentDiv,\n                this.anchorContainer\n            );\n        }\n    }\n\n    private setResizingTd(td: HTMLTableCellElement) {\n        if (this.horizontalResizer && this.horizontalResizer.node != td) {\n            this.disposeCellResizers();\n        }\n\n        if (!this.horizontalResizer && td) {\n            this.horizontalResizer = createCellResizer(\n                this.editor,\n                td,\n                this.table,\n                this.isRTL,\n                true /*isHorizontal*/,\n                this.onStartCellResize,\n                this.onFinishEditing,\n                this.anchorContainer\n            );\n            this.verticalResizer = createCellResizer(\n                this.editor,\n                td,\n                this.table,\n                this.isRTL,\n                false /*isHorizontal*/,\n                this.onStartCellResize,\n                this.onFinishEditing,\n                this.anchorContainer\n            );\n        }\n    }\n\n    /**\n     * create or remove TableInserter\n     * @param td td to attach to, set this to null to remove inserters (both horizontal and vertical)\n     */\n    private setInserterTd(td: HTMLTableCellElement | null, isHorizontal?: boolean) {\n        const inserter = isHorizontal ? this.horizontalInserter : this.verticalInserter;\n        if (td === null || (inserter && inserter.node != td)) {\n            this.disposeTableInserter();\n        }\n\n        if (!this.horizontalInserter && !this.verticalInserter && td) {\n            const newInserter = createTableInserter(\n                this.editor,\n                td,\n                this.table,\n                this.isRTL,\n                !!isHorizontal,\n                this.onInserted,\n                this.getOnMouseOut,\n                this.anchorContainer\n            );\n            if (isHorizontal) {\n                this.horizontalInserter = newInserter;\n            } else {\n                this.verticalInserter = newInserter;\n            }\n        }\n    }\n\n    private disposeTableResizer() {\n        if (this.tableResizer) {\n            disposeTableEditFeature(this.tableResizer);\n            this.tableResizer = null;\n        }\n    }\n\n    private disposeTableInserter() {\n        if (this.horizontalInserter) {\n            disposeTableEditFeature(this.horizontalInserter);\n            this.horizontalInserter = null;\n        }\n        if (this.verticalInserter) {\n            disposeTableEditFeature(this.verticalInserter);\n            this.verticalInserter = null;\n        }\n    }\n\n    private disposeCellResizers() {\n        if (this.horizontalResizer) {\n            disposeTableEditFeature(this.horizontalResizer);\n            this.horizontalResizer = null;\n        }\n        if (this.verticalResizer) {\n            disposeTableEditFeature(this.verticalResizer);\n            this.verticalResizer = null;\n        }\n    }\n\n    private disposeTableMover() {\n        if (this.tableMover) {\n            disposeTableEditFeature(this.tableMover);\n            this.tableMover = null;\n        }\n    }\n\n    private onFinishEditing = (): false => {\n        this.editor.focus();\n\n        if (this.range) {\n            this.editor.setDOMSelection({ type: 'range', range: this.range, isReverted: false });\n        }\n\n        this.editor.takeSnapshot(); // Pass in an empty callback to make sure ContentChangedEvent is triggered\n        this.onChanged();\n        this.isCurrentlyEditing = false;\n\n        return false;\n    };\n\n    private onStartTableResize = () => {\n        this.isCurrentlyEditing = true;\n        this.onStartResize();\n    };\n\n    private onStartCellResize = () => {\n        this.isCurrentlyEditing = true;\n        this.disposeTableResizer();\n        this.onStartResize();\n    };\n\n    private onStartResize() {\n        this.isCurrentlyEditing = true;\n        const range = this.editor.getDOMSelection();\n\n        if (range && range.type == 'range') {\n            this.range = range.range;\n        }\n\n        this.editor.takeSnapshot();\n    }\n\n    private onInserted = () => {\n        this.disposeTableResizer();\n        this.onFinishEditing();\n    };\n\n    /**\n     * Public only for testing purposes\n     * @param table the table to select\n     */\n    public onSelect = (table: HTMLTableElement) => {\n        this.editor.focus();\n\n        if (table) {\n            const selection: TableSelection = {\n                table: table,\n                firstRow: 0,\n                firstColumn: 0,\n                lastRow: table.rows.length - 1,\n                lastColumn: table.rows[table.rows.length - 1].cells.length - 1,\n                type: 'table',\n            };\n\n            this.editor.setDOMSelection(selection);\n        }\n    };\n\n    private getOnMouseOut = (feature: HTMLElement) => {\n        return (ev: MouseEvent) => {\n            if (\n                feature &&\n                ev.relatedTarget != feature &&\n                isNodeOfType(this.contentDiv as Node, 'ELEMENT_NODE') &&\n                isNodeOfType(ev.relatedTarget as Node, 'ELEMENT_NODE') &&\n                !(this.contentDiv == ev.relatedTarget)\n            ) {\n                this.dispose();\n            }\n        };\n    };\n}\n"]}

package/lib-amd/tableEdit/editors/features/CellResizer.d.ts

@@ -0,0 +1,6 @@
+import type { IEditor } from 'roosterjs-content-model-types';
+import type { TableEditFeature } from './TableEditFeature';
+/**
+ * @internal
+ */
+export declare function createCellResizer(editor: IEditor, td: HTMLTableCellElement, table: HTMLTableElement, isRTL: boolean, isHorizontal: boolean, onStart: () => void, onEnd: () => false, anchorContainer?: HTMLElement): TableEditFeature | null;