roosterjs-content-model-plugins 0.26.3 → 0.27.0

package/lib-mjs/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 default 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-mjs/tableEdit/editors/TableEditor.js

@@ -0,0 +1,292 @@
+import createCellResizer from './features/CellResizer';
+import createTableInserter from './features/TableInserter';
+import createTableMover from './features/TableMover';
+import createTableResizer from './features/TableResizer';
+import normalizeRect from '../../pluginUtils/Rect/normalizeRect';
+import { disposeTableEditFeature } from './features/TableEditorFeature';
+import { isNodeOfType } from 'roosterjs-content-model-dom';
+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 &&
+                    isNodeOfType(_this.contentDiv, 'ELEMENT_NODE') &&
+                    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 = 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 = 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
+                            ? 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 = createTableMover(this.table, this.editor, this.isRTL, this.onSelect, this.getOnMouseOut, this.contentDiv, this.anchorContainer);
+        }
+        if (!this.tableResizer) {
+            this.tableResizer = 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 = createCellResizer(this.editor, td, this.table, this.isRTL, true /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing, this.anchorContainer);
+            this.verticalResizer = 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 = 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) {
+            disposeTableEditFeature(this.tableResizer);
+            this.tableResizer = null;
+        }
+    };
+    TableEditor.prototype.disposeTableInserter = function () {
+        if (this.horizontalInserter) {
+            disposeTableEditFeature(this.horizontalInserter);
+            this.horizontalInserter = null;
+        }
+        if (this.verticalInserter) {
+            disposeTableEditFeature(this.verticalInserter);
+            this.verticalInserter = null;
+        }
+    };
+    TableEditor.prototype.disposeCellResizers = function () {
+        if (this.horizontalResizer) {
+            disposeTableEditFeature(this.horizontalResizer);
+            this.horizontalResizer = null;
+        }
+        if (this.verticalResizer) {
+            disposeTableEditFeature(this.verticalResizer);
+            this.verticalResizer = null;
+        }
+    };
+    TableEditor.prototype.disposeTableMover = function () {
+        if (this.tableMover) {
+            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;
+}());
+export default TableEditor;
+//# sourceMappingURL=TableEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableEditor.js","sourceRoot":"","sources":["../../../../../packages-content-model/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 normalizeRect from '../../pluginUtils/Rect/normalizeRect';\nimport { disposeTableEditFeature } from './features/TableEditorFeature';\nimport { isNodeOfType } from 'roosterjs-content-model-dom';\nimport type TableEditFeature from './features/TableEditorFeature';\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 default 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-mjs/tableEdit/editors/features/CellResizer.d.ts

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

package/lib-mjs/tableEdit/editors/features/CellResizer.js

@@ -0,0 +1,166 @@
+import { __read, __spreadArray } from "tslib";
+import createElement from '../../../pluginUtils/CreateElement/createElement';
+import DragAndDropHelper from '../../../pluginUtils/DragAndDrop/DragAndDropHelper';
+import normalizeRect from '../../../pluginUtils/Rect/normalizeRect';
+import { isElementOfType } from 'roosterjs-content-model-dom';
+import { getFirstSelectedTable, MIN_ALLOWED_TABLE_CELL_WIDTH, normalizeTable, } from 'roosterjs-content-model-core';
+var CELL_RESIZER_WIDTH = 4;
+/**
+ * @internal
+ */
+export default function createCellResizer(editor, td, table, isRTL, isHorizontal, onStart, onEnd, anchorContainer) {
+    var document = td.ownerDocument;
+    var createElementData = {
+        tag: 'div',
+        style: "position: fixed; cursor: " + (isHorizontal ? 'row' : 'col') + "-resize; user-select: none",
+    };
+    var zoomScale = editor.getDOMHelper().calculateZoomScale();
+    var div = createElement(createElementData, document);
+    (anchorContainer || document.body).appendChild(div);
+    var context = { editor: editor, td: td, table: table, isRTL: isRTL, zoomScale: zoomScale, onStart: onStart };
+    var setPosition = isHorizontal ? setHorizontalPosition : setVerticalPosition;
+    setPosition(context, div);
+    var handler = {
+        onDragStart: onDragStart,
+        // Horizontal modifies row height, vertical modifies column width
+        onDragging: isHorizontal ? onDraggingHorizontal : onDraggingVertical,
+        onDragEnd: onEnd,
+    };
+    var featureHandler = new DragAndDropHelper(div, context, setPosition, handler, zoomScale, editor.getEnvironment().isMobileOrTablet);
+    return { node: td, div: div, featureHandler: featureHandler };
+}
+function onDragStart(context, event) {
+    var td = context.td, onStart = context.onStart;
+    var rect = normalizeRect(td.getBoundingClientRect());
+    // Get cell coordinates
+    var columnIndex = td.cellIndex;
+    var row = td.parentElement && isElementOfType(td.parentElement, 'tr') ? td.parentElement : undefined;
+    var rowIndex = row === null || row === void 0 ? void 0 : row.rowIndex;
+    if (rowIndex == undefined) {
+        return {
+            cmTable: undefined,
+            anchorColumn: undefined,
+            anchorRow: undefined,
+            anchorRowHeight: -1,
+            allWidths: [],
+        }; // Just a fallback
+    }
+    var editor = context.editor, table = context.table;
+    // Get current selection
+    var selection = editor.getDOMSelection();
+    // Select first cell of the table
+    editor.setDOMSelection({
+        type: 'table',
+        firstColumn: 0,
+        firstRow: 0,
+        lastColumn: 0,
+        lastRow: 0,
+        table: table,
+    });
+    // Get the table content model
+    var cmTable = getFirstSelectedTable(editor.getContentModelCopy('disconnected'))[0];
+    // Restore selection
+    editor.setDOMSelection(selection);
+    if (rect && cmTable) {
+        onStart();
+        return {
+            cmTable: cmTable,
+            anchorColumn: columnIndex,
+            anchorRow: rowIndex,
+            anchorRowHeight: cmTable.rows[rowIndex].height,
+            allWidths: __spreadArray([], __read(cmTable.widths), false),
+        };
+    }
+    else {
+        return {
+            cmTable: cmTable,
+            anchorColumn: undefined,
+            anchorRow: undefined,
+            anchorRowHeight: -1,
+            allWidths: [],
+        }; // Just a fallback
+    }
+}
+function onDraggingHorizontal(context, event, initValue, deltaX, deltaY) {
+    var table = context.table;
+    var cmTable = initValue.cmTable, anchorRow = initValue.anchorRow, anchorRowHeight = initValue.anchorRowHeight;
+    // Assign new widths and heights to the CM table
+    if (cmTable && anchorRow != undefined) {
+        // Modify the CM Table size
+        cmTable.rows[anchorRow].height = (anchorRowHeight !== null && anchorRowHeight !== void 0 ? anchorRowHeight : 0) + deltaY;
+        // Normalize the table
+        normalizeTable(cmTable);
+        // Writeback CM Table size changes to DOM Table
+        var tableRow = table.rows[anchorRow];
+        for (var col = 0; col < tableRow.cells.length; col++) {
+            var td = tableRow.cells[col];
+            td.style.height = cmTable.rows[anchorRow].height + 'px';
+        }
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+function onDraggingVertical(context, event, initValue, deltaX) {
+    var table = context.table, isRTL = context.isRTL;
+    var cmTable = initValue.cmTable, anchorColumn = initValue.anchorColumn, allWidths = initValue.allWidths;
+    // Assign new widths and heights to the CM table
+    if (cmTable && anchorColumn != undefined) {
+        // Modify the CM Table size
+        var lastColumn = anchorColumn == cmTable.widths.length - 1;
+        var change = deltaX * (isRTL ? -1 : 1);
+        // This is the last column
+        if (lastColumn) {
+            // Only the last column changes
+            cmTable.widths[anchorColumn] = allWidths[anchorColumn] + change;
+        }
+        else {
+            // Any other two columns
+            var anchorChange = allWidths[anchorColumn] + change;
+            var nextAnchorChange = allWidths[anchorColumn + 1] - change;
+            if (anchorChange < MIN_ALLOWED_TABLE_CELL_WIDTH ||
+                nextAnchorChange < MIN_ALLOWED_TABLE_CELL_WIDTH) {
+                return false;
+            }
+            cmTable.widths[anchorColumn] = anchorChange;
+            cmTable.widths[anchorColumn + 1] = nextAnchorChange;
+        }
+        // Normalize the table
+        normalizeTable(cmTable);
+        // Writeback CM Table size changes to DOM Table
+        for (var row = 0; row < table.rows.length; row++) {
+            var tableRow = table.rows[row];
+            for (var col = 0; col < tableRow.cells.length; col++) {
+                tableRow.cells[col].style.width = cmTable.widths[col] + 'px';
+            }
+        }
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+function setHorizontalPosition(context, trigger) {
+    var td = context.td;
+    var rect = normalizeRect(td.getBoundingClientRect());
+    if (rect) {
+        trigger.id = 'horizontalResizer';
+        trigger.style.top = rect.bottom - CELL_RESIZER_WIDTH + 'px';
+        trigger.style.left = rect.left + 'px';
+        trigger.style.width = rect.right - rect.left + 'px';
+        trigger.style.height = CELL_RESIZER_WIDTH + 'px';
+    }
+}
+function setVerticalPosition(context, trigger) {
+    var td = context.td, isRTL = context.isRTL;
+    var rect = normalizeRect(td.getBoundingClientRect());
+    if (rect) {
+        trigger.id = 'verticalResizer';
+        trigger.style.top = rect.top + 'px';
+        trigger.style.left = (isRTL ? rect.left : rect.right) - CELL_RESIZER_WIDTH + 1 + 'px';
+        trigger.style.width = CELL_RESIZER_WIDTH + 'px';
+        trigger.style.height = rect.bottom - rect.top + 'px';
+    }
+}
+//# sourceMappingURL=CellResizer.js.map

package/lib-mjs/tableEdit/editors/features/CellResizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellResizer.js","sourceRoot":"","sources":["../../../../../../packages-content-model/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts"],"names":[],"mappings":"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","sourcesContent":["import createElement from '../../../pluginUtils/CreateElement/createElement';\nimport DragAndDropHelper from '../../../pluginUtils/DragAndDrop/DragAndDropHelper';\nimport normalizeRect from '../../../pluginUtils/Rect/normalizeRect';\nimport { isElementOfType } from 'roosterjs-content-model-dom';\nimport {\n    getFirstSelectedTable,\n    MIN_ALLOWED_TABLE_CELL_WIDTH,\n    normalizeTable,\n} from 'roosterjs-content-model-core';\nimport type DragAndDropHandler from '../../../pluginUtils/DragAndDrop/DragAndDropHandler';\nimport type { ContentModelTable, IEditor } from 'roosterjs-content-model-types';\nimport type TableEditFeature from './TableEditorFeature';\n\nconst CELL_RESIZER_WIDTH = 4;\n\n/**\n * @internal\n */\nexport default function createCellResizer(\n    editor: IEditor,\n    td: HTMLTableCellElement,\n    table: HTMLTableElement,\n    isRTL: boolean,\n    isHorizontal: boolean,\n    onStart: () => void,\n    onEnd: () => false,\n    anchorContainer?: HTMLElement\n): TableEditFeature | null {\n    const document = td.ownerDocument;\n    const createElementData = {\n        tag: 'div',\n        style: `position: fixed; cursor: ${isHorizontal ? 'row' : 'col'}-resize; user-select: none`,\n    };\n    const zoomScale = editor.getDOMHelper().calculateZoomScale();\n\n    const div = createElement(createElementData, document) as HTMLDivElement;\n\n    (anchorContainer || document.body).appendChild(div);\n\n    const context: DragAndDropContext = { editor, td, table, isRTL, zoomScale, onStart };\n    const setPosition = isHorizontal ? setHorizontalPosition : setVerticalPosition;\n    setPosition(context, div);\n\n    const handler: DragAndDropHandler<DragAndDropContext, DragAndDropInitValue> = {\n        onDragStart,\n        // Horizontal modifies row height, vertical modifies column width\n        onDragging: isHorizontal ? onDraggingHorizontal : onDraggingVertical,\n        onDragEnd: onEnd,\n    };\n\n    const featureHandler = new DragAndDropHelper<DragAndDropContext, DragAndDropInitValue>(\n        div,\n        context,\n        setPosition,\n        handler,\n        zoomScale,\n        editor.getEnvironment().isMobileOrTablet\n    );\n\n    return { node: td, div, featureHandler };\n}\n\ninterface DragAndDropContext {\n    editor: IEditor;\n    td: HTMLTableCellElement;\n    table: HTMLTableElement;\n    isRTL: boolean;\n    zoomScale: number;\n    onStart: () => void;\n}\n\ninterface DragAndDropInitValue {\n    cmTable: ContentModelTable | undefined;\n    anchorColumn: number | undefined;\n    anchorRow: number | undefined;\n    anchorRowHeight: number;\n    allWidths: number[];\n}\n\nfunction onDragStart(context: DragAndDropContext, event: MouseEvent): DragAndDropInitValue {\n    const { td, onStart } = context;\n    const rect = normalizeRect(td.getBoundingClientRect());\n\n    // Get cell coordinates\n    const columnIndex = td.cellIndex;\n    const row =\n        td.parentElement && isElementOfType(td.parentElement, 'tr') ? td.parentElement : undefined;\n    const rowIndex = row?.rowIndex;\n\n    if (rowIndex == undefined) {\n        return {\n            cmTable: undefined,\n            anchorColumn: undefined,\n            anchorRow: undefined,\n            anchorRowHeight: -1,\n            allWidths: [],\n        }; // Just a fallback\n    }\n\n    const { editor, table } = context;\n\n    // Get current selection\n    const selection = editor.getDOMSelection();\n\n    // Select first cell of the table\n    editor.setDOMSelection({\n        type: 'table',\n        firstColumn: 0,\n        firstRow: 0,\n        lastColumn: 0,\n        lastRow: 0,\n        table: table,\n    });\n\n    // Get the table content model\n    const cmTable = getFirstSelectedTable(editor.getContentModelCopy('disconnected'))[0];\n\n    // Restore selection\n    editor.setDOMSelection(selection);\n\n    if (rect && cmTable) {\n        onStart();\n\n        return {\n            cmTable,\n            anchorColumn: columnIndex,\n            anchorRow: rowIndex,\n            anchorRowHeight: cmTable.rows[rowIndex].height,\n            allWidths: [...cmTable.widths],\n        };\n    } else {\n        return {\n            cmTable,\n            anchorColumn: undefined,\n            anchorRow: undefined,\n            anchorRowHeight: -1,\n            allWidths: [],\n        }; // Just a fallback\n    }\n}\n\nfunction onDraggingHorizontal(\n    context: DragAndDropContext,\n    event: MouseEvent,\n    initValue: DragAndDropInitValue,\n    deltaX: number,\n    deltaY: number\n) {\n    const { table } = context;\n    const { cmTable, anchorRow, anchorRowHeight } = initValue;\n\n    // Assign new widths and heights to the CM table\n    if (cmTable && anchorRow != undefined) {\n        // Modify the CM Table size\n        cmTable.rows[anchorRow].height = (anchorRowHeight ?? 0) + deltaY;\n\n        // Normalize the table\n        normalizeTable(cmTable);\n\n        // Writeback CM Table size changes to DOM Table\n        const tableRow = table.rows[anchorRow];\n        for (let col = 0; col < tableRow.cells.length; col++) {\n            const td = tableRow.cells[col];\n            td.style.height = cmTable.rows[anchorRow].height + 'px';\n        }\n\n        return true;\n    } else {\n        return false;\n    }\n}\n\nfunction onDraggingVertical(\n    context: DragAndDropContext,\n    event: MouseEvent,\n    initValue: DragAndDropInitValue,\n    deltaX: number\n) {\n    const { table, isRTL } = context;\n    const { cmTable, anchorColumn, allWidths } = initValue;\n\n    // Assign new widths and heights to the CM table\n    if (cmTable && anchorColumn != undefined) {\n        // Modify the CM Table size\n        const lastColumn = anchorColumn == cmTable.widths.length - 1;\n        const change = deltaX * (isRTL ? -1 : 1);\n        // This is the last column\n        if (lastColumn) {\n            // Only the last column changes\n            cmTable.widths[anchorColumn] = allWidths[anchorColumn] + change;\n        } else {\n            // Any other two columns\n            const anchorChange = allWidths[anchorColumn] + change;\n            const nextAnchorChange = allWidths[anchorColumn + 1] - change;\n            if (\n                anchorChange < MIN_ALLOWED_TABLE_CELL_WIDTH ||\n                nextAnchorChange < MIN_ALLOWED_TABLE_CELL_WIDTH\n            ) {\n                return false;\n            }\n            cmTable.widths[anchorColumn] = anchorChange;\n            cmTable.widths[anchorColumn + 1] = nextAnchorChange;\n        }\n\n        // Normalize the table\n        normalizeTable(cmTable);\n\n        // Writeback CM Table size changes to DOM Table\n        for (let row = 0; row < table.rows.length; row++) {\n            const tableRow = table.rows[row];\n            for (let col = 0; col < tableRow.cells.length; col++) {\n                tableRow.cells[col].style.width = cmTable.widths[col] + 'px';\n            }\n        }\n\n        return true;\n    } else {\n        return false;\n    }\n}\n\nfunction setHorizontalPosition(context: DragAndDropContext, trigger: HTMLElement) {\n    const { td } = context;\n    const rect = normalizeRect(td.getBoundingClientRect());\n    if (rect) {\n        trigger.id = 'horizontalResizer';\n        trigger.style.top = rect.bottom - CELL_RESIZER_WIDTH + 'px';\n        trigger.style.left = rect.left + 'px';\n        trigger.style.width = rect.right - rect.left + 'px';\n        trigger.style.height = CELL_RESIZER_WIDTH + 'px';\n    }\n}\n\nfunction setVerticalPosition(context: DragAndDropContext, trigger: HTMLElement) {\n    const { td, isRTL } = context;\n    const rect = normalizeRect(td.getBoundingClientRect());\n    if (rect) {\n        trigger.id = 'verticalResizer';\n        trigger.style.top = rect.top + 'px';\n        trigger.style.left = (isRTL ? rect.left : rect.right) - CELL_RESIZER_WIDTH + 1 + 'px';\n        trigger.style.width = CELL_RESIZER_WIDTH + 'px';\n        trigger.style.height = rect.bottom - rect.top + 'px';\n    }\n}\n"]}

package/lib-mjs/tableEdit/editors/features/TableEditorFeature.d.ts

@@ -0,0 +1,13 @@
+import type Disposable from '../../../pluginUtils/Disposable';
+/**
+ * @internal
+ */
+export default interface TableEditFeature {
+    node: Node;
+    div: HTMLDivElement | null;
+    featureHandler: Disposable | null;
+}
+/**
+ * @internal
+ */
+export declare function disposeTableEditFeature(resizer: TableEditFeature | null): void;

package/lib-mjs/tableEdit/editors/features/TableEditorFeature.js

@@ -0,0 +1,13 @@
+/**
+ * @internal
+ */
+export function disposeTableEditFeature(resizer) {
+    var _a, _b, _c;
+    if (resizer) {
+        (_b = (_a = resizer.div) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(resizer.div);
+        resizer.div = null;
+        (_c = resizer.featureHandler) === null || _c === void 0 ? void 0 : _c.dispose();
+        resizer.featureHandler = null;
+    }
+}
+//# sourceMappingURL=TableEditorFeature.js.map

package/lib-mjs/tableEdit/editors/features/TableEditorFeature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableEditorFeature.js","sourceRoot":"","sources":["../../../../../../packages-content-model/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableEditorFeature.ts"],"names":[],"mappings":"AAWA;;GAEG;AACH,MAAM,UAAU,uBAAuB,CAAC,OAAgC;;IACpE,IAAI,OAAO,EAAE;QACT,MAAA,MAAA,OAAO,CAAC,GAAG,0CAAE,UAAU,0CAAE,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QAClD,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC;QACnB,MAAA,OAAO,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;QAClC,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC;KACjC;AACL,CAAC","sourcesContent":["import type Disposable from '../../../pluginUtils/Disposable';\n\n/**\n * @internal\n */\nexport default interface TableEditFeature {\n    node: Node;\n    div: HTMLDivElement | null;\n    featureHandler: Disposable | null;\n}\n\n/**\n * @internal\n */\nexport function disposeTableEditFeature(resizer: TableEditFeature | null) {\n    if (resizer) {\n        resizer.div?.parentNode?.removeChild(resizer.div);\n        resizer.div = null;\n        resizer.featureHandler?.dispose();\n        resizer.featureHandler = null;\n    }\n}\n"]}