roosterjs-content-model-plugins 0.26.3 → 0.27.0

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

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

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

@@ -0,0 +1,110 @@
+import createElement from '../../../pluginUtils/CreateElement/createElement';
+import getIntersectedRect from '../../../pluginUtils/Rect/getIntersectedRect';
+import normalizeRect from '../../../pluginUtils/Rect/normalizeRect';
+import { isElementOfType } from 'roosterjs-content-model-dom';
+import { formatTableWithContentModel, insertTableColumn, insertTableRow, } from 'roosterjs-content-model-api';
+var INSERTER_COLOR = '#4A4A4A';
+var INSERTER_COLOR_DARK_MODE = 'white';
+var INSERTER_SIDE_LENGTH = 12;
+var INSERTER_BORDER_SIZE = 1;
+/**
+ * @internal
+ */
+export default function createTableInserter(editor, td, table, isRTL, isHorizontal, onInsert, getOnMouseOut, anchorContainer) {
+    var tdRect = normalizeRect(td.getBoundingClientRect());
+    var viewPort = editor.getVisibleViewport();
+    var tableRect = table && viewPort ? getIntersectedRect([table], [viewPort]) : null;
+    // set inserter position
+    if (tdRect && tableRect) {
+        var document_1 = td.ownerDocument;
+        var createElementData = getInsertElementData(isHorizontal, editor.isDarkMode(), isRTL, editor.getDOMHelper().getDomStyle('backgroundColor') || 'white');
+        var div = createElement(createElementData, document_1);
+        if (isHorizontal) {
+            // tableRect.left/right is used because the Inserter is always intended to be on the side
+            div.id = 'horizontalInserter';
+            div.style.left = (isRTL
+                ? tableRect.right
+                : tableRect.left - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE)) + "px";
+            div.style.top = tdRect.bottom - 8 + "px";
+            div.firstChild.style.width = tableRect.right - tableRect.left + "px";
+        }
+        else {
+            div.id = 'verticalInserter';
+            div.style.left = (isRTL ? tdRect.left - 8 : tdRect.right - 8) + "px";
+            // tableRect.top is used because the Inserter is always intended to be on top
+            div.style.top = tableRect.top - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE) + "px";
+            div.firstChild.style.height = tableRect.bottom - tableRect.top + "px";
+        }
+        (anchorContainer || document_1.body).appendChild(div);
+        var handler = new TableInsertHandler(div, td, table, isHorizontal, editor, onInsert, getOnMouseOut);
+        return { div: div, featureHandler: handler, node: td };
+    }
+    return null;
+}
+var TableInsertHandler = /** @class */ (function () {
+    function TableInsertHandler(div, td, table, isHorizontal, editor, onInsert, getOnMouseOut) {
+        var _this = this;
+        this.div = div;
+        this.td = td;
+        this.table = table;
+        this.isHorizontal = isHorizontal;
+        this.editor = editor;
+        this.onInsert = onInsert;
+        this.insertTd = function () {
+            // Get cell coordinates
+            var columnIndex = _this.td.cellIndex;
+            var row = _this.td.parentElement && isElementOfType(_this.td.parentElement, 'tr')
+                ? _this.td.parentElement
+                : undefined;
+            var rowIndex = row && row.rowIndex;
+            if ((row === null || row === void 0 ? void 0 : row.cells) == undefined || rowIndex == undefined) {
+                return;
+            }
+            // Insert row or column
+            formatTableWithContentModel(_this.editor, 'editTablePlugin', function (tableModel) {
+                _this.isHorizontal
+                    ? insertTableRow(tableModel, 'insertBelow')
+                    : insertTableColumn(tableModel, 'insertRight');
+            }, // Select cell to make insertion
+            {
+                type: 'table',
+                firstColumn: columnIndex,
+                firstRow: rowIndex,
+                lastColumn: columnIndex,
+                lastRow: rowIndex,
+                table: _this.table,
+            });
+            _this.onInsert();
+        };
+        this.div.addEventListener('click', this.insertTd);
+        this.onMouseOutEvent = getOnMouseOut(div);
+        this.div.addEventListener('mouseout', this.onMouseOutEvent);
+    }
+    TableInsertHandler.prototype.dispose = function () {
+        this.div.removeEventListener('click', this.insertTd);
+        if (this.onMouseOutEvent) {
+            this.div.removeEventListener('mouseout', this.onMouseOutEvent);
+        }
+        this.onMouseOutEvent = null;
+    };
+    return TableInsertHandler;
+}());
+function getInsertElementData(isHorizontal, isDark, isRTL, backgroundColor) {
+    var inserterColor = isDark ? INSERTER_COLOR_DARK_MODE : INSERTER_COLOR;
+    var outerDivStyle = "position: fixed; width: " + INSERTER_SIDE_LENGTH + "px; height: " + INSERTER_SIDE_LENGTH + "px; font-size: 16px; color: black; line-height: 8px; vertical-align: middle; text-align: center; cursor: pointer; border: solid " + INSERTER_BORDER_SIZE + "px " + inserterColor + "; border-radius: 50%; background-color: " + backgroundColor;
+    var leftOrRight = isRTL ? 'right' : 'left';
+    var childBaseStyles = "position: absolute; box-sizing: border-box; background-color: " + backgroundColor + ";";
+    var childInfo = {
+        tag: 'div',
+        style: childBaseStyles +
+            (isHorizontal
+                ? leftOrRight + ": 12px; top: 5px; height: 3px; border-top: 1px solid " + inserterColor + "; border-bottom: 1px solid " + inserterColor + "; border-right: 1px solid " + inserterColor + "; border-left: 0px;"
+                : "left: 5px; top: 12px; width: 3px; border-left: 1px solid " + inserterColor + "; border-right: 1px solid " + inserterColor + "; border-bottom: 1px solid " + inserterColor + "; border-top: 0px;"),
+    };
+    return {
+        tag: 'div',
+        style: outerDivStyle,
+        children: [childInfo, '+'],
+    };
+}
+//# sourceMappingURL=TableInserter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableInserter.js","sourceRoot":"","sources":["../../../../../../packages-content-model/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableInserter.ts"],"names":[],"mappings":"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","sourcesContent":["import createElement from '../../../pluginUtils/CreateElement/createElement';\nimport getIntersectedRect from '../../../pluginUtils/Rect/getIntersectedRect';\nimport normalizeRect from '../../../pluginUtils/Rect/normalizeRect';\nimport { isElementOfType } from 'roosterjs-content-model-dom';\nimport {\n    formatTableWithContentModel,\n    insertTableColumn,\n    insertTableRow,\n} from 'roosterjs-content-model-api';\nimport type CreateElementData from '../../../pluginUtils/CreateElement/CreateElementData';\nimport type Disposable from '../../../pluginUtils/Disposable';\nimport type TableEditFeature from './TableEditorFeature';\nimport type { IEditor } from 'roosterjs-content-model-types';\n\nconst INSERTER_COLOR = '#4A4A4A';\nconst INSERTER_COLOR_DARK_MODE = 'white';\nconst INSERTER_SIDE_LENGTH = 12;\nconst INSERTER_BORDER_SIZE = 1;\n\n/**\n * @internal\n */\nexport default function createTableInserter(\n    editor: IEditor,\n    td: HTMLTableCellElement,\n    table: HTMLTableElement,\n    isRTL: boolean,\n    isHorizontal: boolean,\n    onInsert: () => void,\n    getOnMouseOut: (feature: HTMLElement) => (ev: MouseEvent) => void,\n    anchorContainer?: HTMLElement\n): TableEditFeature | null {\n    const tdRect = normalizeRect(td.getBoundingClientRect());\n    const viewPort = editor.getVisibleViewport();\n    const tableRect = table && viewPort ? getIntersectedRect([table], [viewPort]) : null;\n\n    // set inserter position\n    if (tdRect && tableRect) {\n        const document = td.ownerDocument;\n        const createElementData = getInsertElementData(\n            isHorizontal,\n            editor.isDarkMode(),\n            isRTL,\n            editor.getDOMHelper().getDomStyle('backgroundColor') || 'white'\n        );\n\n        const div = createElement(createElementData, document) as HTMLDivElement;\n\n        if (isHorizontal) {\n            // tableRect.left/right is used because the Inserter is always intended to be on the side\n            div.id = 'horizontalInserter';\n            div.style.left = `${\n                isRTL\n                    ? tableRect.right\n                    : tableRect.left - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE)\n            }px`;\n            div.style.top = `${tdRect.bottom - 8}px`;\n            (div.firstChild as HTMLElement).style.width = `${tableRect.right - tableRect.left}px`;\n        } else {\n            div.id = 'verticalInserter';\n            div.style.left = `${isRTL ? tdRect.left - 8 : tdRect.right - 8}px`;\n            // tableRect.top is used because the Inserter is always intended to be on top\n            div.style.top = `${\n                tableRect.top - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE)\n            }px`;\n            (div.firstChild as HTMLElement).style.height = `${tableRect.bottom - tableRect.top}px`;\n        }\n\n        (anchorContainer || document.body).appendChild(div);\n\n        const handler = new TableInsertHandler(\n            div,\n            td,\n            table,\n            isHorizontal,\n            editor,\n            onInsert,\n            getOnMouseOut\n        );\n\n        return { div, featureHandler: handler, node: td };\n    }\n\n    return null;\n}\n\nclass TableInsertHandler implements Disposable {\n    private onMouseOutEvent: null | ((ev: MouseEvent) => void);\n    constructor(\n        private div: HTMLDivElement,\n        private td: HTMLTableCellElement,\n        private table: HTMLTableElement,\n        private isHorizontal: boolean,\n        private editor: IEditor,\n        private onInsert: () => void,\n        getOnMouseOut: (feature: HTMLElement) => (ev: MouseEvent) => void\n    ) {\n        this.div.addEventListener('click', this.insertTd);\n        this.onMouseOutEvent = getOnMouseOut(div);\n        this.div.addEventListener('mouseout', this.onMouseOutEvent);\n    }\n\n    dispose() {\n        this.div.removeEventListener('click', this.insertTd);\n\n        if (this.onMouseOutEvent) {\n            this.div.removeEventListener('mouseout', this.onMouseOutEvent);\n        }\n\n        this.onMouseOutEvent = null;\n    }\n\n    private insertTd = () => {\n        // Get cell coordinates\n        const columnIndex = this.td.cellIndex;\n        const row =\n            this.td.parentElement && isElementOfType(this.td.parentElement, 'tr')\n                ? this.td.parentElement\n                : undefined;\n        const rowIndex = row && row.rowIndex;\n\n        if (row?.cells == undefined || rowIndex == undefined) {\n            return;\n        }\n\n        // Insert row or column\n        formatTableWithContentModel(\n            this.editor,\n            'editTablePlugin',\n            tableModel => {\n                this.isHorizontal\n                    ? insertTableRow(tableModel, 'insertBelow')\n                    : insertTableColumn(tableModel, 'insertRight');\n            }, // Select cell to make insertion\n            {\n                type: 'table',\n                firstColumn: columnIndex,\n                firstRow: rowIndex,\n                lastColumn: columnIndex,\n                lastRow: rowIndex,\n                table: this.table,\n            }\n        );\n\n        this.onInsert();\n    };\n}\n\nfunction getInsertElementData(\n    isHorizontal: boolean,\n    isDark: boolean,\n    isRTL: boolean,\n    backgroundColor: string\n): CreateElementData {\n    const inserterColor = isDark ? INSERTER_COLOR_DARK_MODE : INSERTER_COLOR;\n    const outerDivStyle = `position: fixed; width: ${INSERTER_SIDE_LENGTH}px; height: ${INSERTER_SIDE_LENGTH}px; font-size: 16px; color: black; line-height: 8px; vertical-align: middle; text-align: center; cursor: pointer; border: solid ${INSERTER_BORDER_SIZE}px ${inserterColor}; border-radius: 50%; background-color: ${backgroundColor}`;\n    const leftOrRight = isRTL ? 'right' : 'left';\n    const childBaseStyles = `position: absolute; box-sizing: border-box; background-color: ${backgroundColor};`;\n    const childInfo: CreateElementData = {\n        tag: 'div',\n        style:\n            childBaseStyles +\n            (isHorizontal\n                ? `${leftOrRight}: 12px; top: 5px; height: 3px; border-top: 1px solid ${inserterColor}; border-bottom: 1px solid ${inserterColor}; border-right: 1px solid ${inserterColor}; border-left: 0px;`\n                : `left: 5px; top: 12px; width: 3px; border-left: 1px solid ${inserterColor}; border-right: 1px solid ${inserterColor}; border-bottom: 1px solid ${inserterColor}; border-top: 0px;`),\n    };\n\n    return {\n        tag: 'div',\n        style: outerDivStyle,\n        children: [childInfo, '+'],\n    };\n}\n"]}

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

@@ -0,0 +1,8 @@
+import type { IEditor } from 'roosterjs-content-model-types';
+import type TableEditorFeature from './TableEditorFeature';
+/**
+ * @internal
+ * Contains the function to select whole table
+ * Moving behavior not implemented yet
+ */
+export default function createTableMover(table: HTMLTableElement, editor: IEditor, isRTL: boolean, onFinishDragging: (table: HTMLTableElement) => void, getOnMouseOut: (feature: HTMLElement) => (ev: MouseEvent) => void, contentDiv?: EventTarget | null, anchorContainer?: HTMLElement): TableEditorFeature | null;

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

@@ -0,0 +1,80 @@
+import { __extends } from "tslib";
+import createElement from '../../../pluginUtils/CreateElement/createElement';
+import DragAndDropHelper from '../../../pluginUtils/DragAndDrop/DragAndDropHelper';
+import normalizeRect from '../../../pluginUtils/Rect/normalizeRect';
+import { isNodeOfType } from 'roosterjs-content-model-dom';
+var TABLE_MOVER_LENGTH = 12;
+var TABLE_MOVER_ID = '_Table_Mover';
+/**
+ * @internal
+ * Contains the function to select whole table
+ * Moving behavior not implemented yet
+ */
+export default function createTableMover(table, editor, isRTL, onFinishDragging, getOnMouseOut, contentDiv, anchorContainer) {
+    var rect = normalizeRect(table.getBoundingClientRect());
+    if (!isTableTopVisible(editor, rect, contentDiv)) {
+        return null;
+    }
+    var zoomScale = editor.getDOMHelper().calculateZoomScale();
+    var document = table.ownerDocument;
+    var createElementData = {
+        tag: 'div',
+        style: 'position: fixed; cursor: all-scroll; user-select: none; border: 1px solid #808080',
+    };
+    var div = createElement(createElementData, document);
+    div.id = TABLE_MOVER_ID;
+    div.style.width = TABLE_MOVER_LENGTH + "px";
+    div.style.height = TABLE_MOVER_LENGTH + "px";
+    (anchorContainer || document.body).appendChild(div);
+    var context = {
+        table: table,
+        zoomScale: zoomScale,
+        rect: rect,
+        isRTL: isRTL,
+    };
+    setDivPosition(context, div);
+    var onDragEnd = function (context, event) {
+        if (event.target == div) {
+            onFinishDragging(context.table);
+        }
+        return false;
+    };
+    var featureHandler = new TableMoverFeature(div, context, setDivPosition, {
+        onDragEnd: onDragEnd,
+    }, context.zoomScale, getOnMouseOut);
+    return { div: div, featureHandler: featureHandler, node: table };
+}
+var TableMoverFeature = /** @class */ (function (_super) {
+    __extends(TableMoverFeature, _super);
+    function TableMoverFeature(div, context, onSubmit, handler, zoomScale, getOnMouseOut, forceMobile, container) {
+        var _this = _super.call(this, div, context, onSubmit, handler, zoomScale, forceMobile) || this;
+        _this.div = div;
+        _this.onMouseOut = getOnMouseOut(div);
+        div.addEventListener('mouseout', _this.onMouseOut);
+        return _this;
+    }
+    TableMoverFeature.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        if (this.onMouseOut) {
+            this.div.removeEventListener('mouseout', this.onMouseOut);
+        }
+        this.onMouseOut = null;
+    };
+    return TableMoverFeature;
+}(DragAndDropHelper));
+function setDivPosition(context, trigger) {
+    var rect = context.rect;
+    if (rect) {
+        trigger.style.top = rect.top - TABLE_MOVER_LENGTH + "px";
+        trigger.style.left = rect.left - TABLE_MOVER_LENGTH - 2 + "px";
+    }
+}
+function isTableTopVisible(editor, rect, contentDiv) {
+    var visibleViewport = editor.getVisibleViewport();
+    if (isNodeOfType(contentDiv, 'ELEMENT_NODE') && visibleViewport && rect) {
+        var containerRect = normalizeRect(contentDiv.getBoundingClientRect());
+        return !!containerRect && containerRect.top <= rect.top && visibleViewport.top <= rect.top;
+    }
+    return true;
+}
+//# sourceMappingURL=TableMover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableMover.js","sourceRoot":"","sources":["../../../../../../packages-content-model/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableMover.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 { isNodeOfType } from 'roosterjs-content-model-dom';\nimport type DragAndDropHandler from '../../../pluginUtils/DragAndDrop/DragAndDropHandler';\nimport type { IEditor, Rect } from 'roosterjs-content-model-types';\nimport type TableEditorFeature from './TableEditorFeature';\n\nconst TABLE_MOVER_LENGTH = 12;\nconst TABLE_MOVER_ID = '_Table_Mover';\n\n/**\n * @internal\n * Contains the function to select whole table\n * Moving behavior not implemented yet\n */\nexport default function createTableMover(\n    table: HTMLTableElement,\n    editor: IEditor,\n    isRTL: boolean,\n    onFinishDragging: (table: HTMLTableElement) => void,\n    getOnMouseOut: (feature: HTMLElement) => (ev: MouseEvent) => void,\n    contentDiv?: EventTarget | null,\n    anchorContainer?: HTMLElement\n): TableEditorFeature | null {\n    const rect = normalizeRect(table.getBoundingClientRect());\n\n    if (!isTableTopVisible(editor, rect, contentDiv as Node)) {\n        return null;\n    }\n\n    const zoomScale = editor.getDOMHelper().calculateZoomScale();\n    const document = table.ownerDocument;\n    const createElementData = {\n        tag: 'div',\n        style: 'position: fixed; cursor: all-scroll; user-select: none; border: 1px solid #808080',\n    };\n\n    const div = createElement(createElementData, document) as HTMLDivElement;\n\n    div.id = TABLE_MOVER_ID;\n    div.style.width = `${TABLE_MOVER_LENGTH}px`;\n    div.style.height = `${TABLE_MOVER_LENGTH}px`;\n\n    (anchorContainer || document.body).appendChild(div);\n\n    const context: TableMoverContext = {\n        table,\n        zoomScale,\n        rect,\n        isRTL,\n    };\n\n    setDivPosition(context, div);\n\n    const onDragEnd = (context: TableMoverContext, event: MouseEvent): false => {\n        if (event.target == div) {\n            onFinishDragging(context.table);\n        }\n        return false;\n    };\n\n    const featureHandler = new TableMoverFeature(\n        div,\n        context,\n        setDivPosition,\n        {\n            onDragEnd,\n        },\n        context.zoomScale,\n        getOnMouseOut\n    );\n\n    return { div, featureHandler, node: table };\n}\n\ninterface TableMoverContext {\n    table: HTMLTableElement;\n    zoomScale: number;\n    rect: Rect | null;\n    isRTL: boolean;\n}\n\ninterface TableMoverInitValue {\n    event: MouseEvent;\n}\n\nclass TableMoverFeature extends DragAndDropHelper<TableMoverContext, TableMoverInitValue> {\n    private onMouseOut: ((ev: MouseEvent) => void) | null;\n\n    constructor(\n        private div: HTMLElement,\n        context: TableMoverContext,\n        onSubmit: (\n            context: TableMoverContext,\n            trigger: HTMLElement,\n            container?: HTMLElement\n        ) => void,\n        handler: DragAndDropHandler<TableMoverContext, TableMoverInitValue>,\n        zoomScale: number,\n        getOnMouseOut: (feature: HTMLElement) => (ev: MouseEvent) => void,\n        forceMobile?: boolean | undefined,\n        container?: HTMLElement\n    ) {\n        super(div, context, onSubmit, handler, zoomScale, forceMobile);\n        this.onMouseOut = getOnMouseOut(div);\n        div.addEventListener('mouseout', this.onMouseOut);\n    }\n\n    dispose(): void {\n        super.dispose();\n        if (this.onMouseOut) {\n            this.div.removeEventListener('mouseout', this.onMouseOut);\n        }\n        this.onMouseOut = null;\n    }\n}\n\nfunction setDivPosition(context: TableMoverContext, trigger: HTMLElement) {\n    const { rect } = context;\n    if (rect) {\n        trigger.style.top = `${rect.top - TABLE_MOVER_LENGTH}px`;\n        trigger.style.left = `${rect.left - TABLE_MOVER_LENGTH - 2}px`;\n    }\n}\n\nfunction isTableTopVisible(editor: IEditor, rect: Rect | null, contentDiv?: Node | null): boolean {\n    const visibleViewport = editor.getVisibleViewport();\n    if (isNodeOfType(contentDiv, 'ELEMENT_NODE') && visibleViewport && rect) {\n        const containerRect = normalizeRect(contentDiv.getBoundingClientRect());\n\n        return !!containerRect && containerRect.top <= rect.top && visibleViewport.top <= rect.top;\n    }\n\n    return true;\n}\n"]}

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

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

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

@@ -0,0 +1,160 @@
+import createElement from '../../../pluginUtils/CreateElement/createElement';
+import DragAndDropHelper from '../../../pluginUtils/DragAndDrop/DragAndDropHelper';
+import normalizeRect from '../../../pluginUtils/Rect/normalizeRect';
+import { getFirstSelectedTable, normalizeTable } from 'roosterjs-content-model-core';
+import { isNodeOfType } from 'roosterjs-content-model-dom';
+var TABLE_RESIZER_LENGTH = 12;
+var TABLE_RESIZER_ID = '_Table_Resizer';
+/**
+ * @internal
+ */
+export default function createTableResizer(table, editor, isRTL, onStart, onEnd, contentDiv, anchorContainer) {
+    var rect = normalizeRect(table.getBoundingClientRect());
+    if (!isTableBottomVisible(editor, rect, contentDiv)) {
+        return null;
+    }
+    var document = table.ownerDocument;
+    var zoomScale = editor.getDOMHelper().calculateZoomScale();
+    var createElementData = {
+        tag: 'div',
+        style: "position: fixed; cursor: " + (isRTL ? 'ne' : 'nw') + "-resize; user-select: none; border: 1px solid #808080",
+    };
+    var div = createElement(createElementData, document);
+    div.id = TABLE_RESIZER_ID;
+    div.style.width = TABLE_RESIZER_LENGTH + "px";
+    div.style.height = TABLE_RESIZER_LENGTH + "px";
+    (anchorContainer || document.body).appendChild(div);
+    var context = {
+        isRTL: isRTL,
+        table: table,
+        zoomScale: zoomScale,
+        onStart: onStart,
+        onEnd: onEnd,
+        div: div,
+        editor: editor,
+        contentDiv: contentDiv,
+    };
+    setDivPosition(context, div);
+    var featureHandler = new DragAndDropHelper(div, context, hideResizer, // Resizer is hidden while dragging only
+    {
+        onDragStart: onDragStart,
+        onDragging: onDragging,
+        onDragEnd: onDragEnd,
+    }, zoomScale, editor.getEnvironment().isMobileOrTablet);
+    return { node: table, div: div, featureHandler: featureHandler };
+}
+function onDragStart(context, event) {
+    context.onStart();
+    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);
+    // Save original widths and heights
+    var heights = [];
+    cmTable === null || cmTable === void 0 ? void 0 : cmTable.rows.forEach(function (row) {
+        heights.push(row.height);
+    });
+    var widths = [];
+    cmTable === null || cmTable === void 0 ? void 0 : cmTable.widths.forEach(function (width) {
+        widths.push(width);
+    });
+    return {
+        originalRect: table.getBoundingClientRect(),
+        cmTable: cmTable,
+        originalHeights: heights !== null && heights !== void 0 ? heights : [],
+        originalWidths: widths !== null && widths !== void 0 ? widths : [],
+    };
+}
+function onDragging(context, event, initValue, deltaX, deltaY) {
+    var _a, _b;
+    var isRTL = context.isRTL, zoomScale = context.zoomScale, table = context.table;
+    var originalRect = initValue.originalRect, originalHeights = initValue.originalHeights, originalWidths = initValue.originalWidths, cmTable = initValue.cmTable;
+    var ratioX = 1.0 + (deltaX / originalRect.width) * zoomScale * (isRTL ? -1 : 1);
+    var ratioY = 1.0 + (deltaY / originalRect.height) * zoomScale;
+    var shouldResizeX = Math.abs(ratioX - 1.0) > 1e-3;
+    var shouldResizeY = Math.abs(ratioY - 1.0) > 1e-3;
+    // If the width of some external table is fixed, we need to make it resizable
+    table.style.setProperty('width', null);
+    // If the height of some external table is fixed, we need to make it resizable
+    table.style.setProperty('height', null);
+    // Assign new widths and heights to the CM table
+    if (cmTable && cmTable.rows && (shouldResizeX || shouldResizeY)) {
+        // Modify the CM Table size
+        for (var i = 0; i < cmTable.rows.length; i++) {
+            for (var j = 0; j < cmTable.rows[i].cells.length; j++) {
+                var cell = cmTable.rows[i].cells[j];
+                if (cell) {
+                    if (shouldResizeX && i == 0) {
+                        cmTable.widths[j] = ((_a = originalWidths[j]) !== null && _a !== void 0 ? _a : 0) * ratioX;
+                    }
+                    if (shouldResizeY && j == 0) {
+                        cmTable.rows[i].height = ((_b = originalHeights[i]) !== null && _b !== void 0 ? _b : 0) * ratioY;
+                    }
+                }
+            }
+        }
+        // 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];
+            if (tableRow.cells.length == 0) {
+                // Skip empty row
+                continue;
+            }
+            for (var col = 0; col < tableRow.cells.length; col++) {
+                var td = tableRow.cells[col];
+                td.style.width = cmTable.widths[col] + 'px';
+                td.style.height = cmTable.rows[row].height + 'px';
+            }
+        }
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+function onDragEnd(context, event, initValue) {
+    if (isTableBottomVisible(context.editor, normalizeRect(context.table.getBoundingClientRect()), context.contentDiv)) {
+        context.div.style.visibility = 'visible';
+        setDivPosition(context, context.div);
+    }
+    context.onEnd();
+    return false;
+}
+function setDivPosition(context, trigger) {
+    var table = context.table, isRTL = context.isRTL;
+    var rect = normalizeRect(table.getBoundingClientRect());
+    if (rect) {
+        trigger.style.top = rect.bottom + "px";
+        trigger.style.left = isRTL
+            ? rect.left - TABLE_RESIZER_LENGTH - 2 + "px"
+            : rect.right + "px";
+    }
+}
+function hideResizer(context, trigger) {
+    trigger.style.visibility = 'hidden';
+}
+function isTableBottomVisible(editor, rect, contentDiv) {
+    var visibleViewport = editor.getVisibleViewport();
+    if (isNodeOfType(contentDiv, 'ELEMENT_NODE') && visibleViewport && rect) {
+        var containerRect = normalizeRect(contentDiv.getBoundingClientRect());
+        return (!!containerRect &&
+            containerRect.bottom >= rect.bottom &&
+            visibleViewport.bottom >= rect.bottom);
+    }
+    return true;
+}
+//# sourceMappingURL=TableResizer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableResizer.js","sourceRoot":"","sources":["../../../../../../packages-content-model/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.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 { getFirstSelectedTable, normalizeTable } from 'roosterjs-content-model-core';\nimport { isNodeOfType } from 'roosterjs-content-model-dom';\nimport type { ContentModelTable, IEditor, Rect } from 'roosterjs-content-model-types';\nimport type TableEditFeature from './TableEditorFeature';\n\nconst TABLE_RESIZER_LENGTH = 12;\nconst TABLE_RESIZER_ID = '_Table_Resizer';\n\n/**\n * @internal\n */\nexport default function createTableResizer(\n    table: HTMLTableElement,\n    editor: IEditor,\n    isRTL: boolean,\n    onStart: () => void,\n    onEnd: () => false,\n    contentDiv?: EventTarget | null,\n    anchorContainer?: HTMLElement\n): TableEditFeature | null {\n    const rect = normalizeRect(table.getBoundingClientRect());\n\n    if (!isTableBottomVisible(editor, rect, contentDiv as Node)) {\n        return null;\n    }\n\n    const document = table.ownerDocument;\n    const zoomScale = editor.getDOMHelper().calculateZoomScale();\n    const createElementData = {\n        tag: 'div',\n        style: `position: fixed; cursor: ${\n            isRTL ? 'ne' : 'nw'\n        }-resize; user-select: none; border: 1px solid #808080`,\n    };\n\n    const div = createElement(createElementData, document) as HTMLDivElement;\n\n    div.id = TABLE_RESIZER_ID;\n    div.style.width = `${TABLE_RESIZER_LENGTH}px`;\n    div.style.height = `${TABLE_RESIZER_LENGTH}px`;\n\n    (anchorContainer || document.body).appendChild(div);\n\n    const context: DragAndDropContext = {\n        isRTL,\n        table,\n        zoomScale,\n        onStart,\n        onEnd,\n        div,\n        editor,\n        contentDiv,\n    };\n\n    setDivPosition(context, div);\n\n    const featureHandler = new DragAndDropHelper<DragAndDropContext, DragAndDropInitValue>(\n        div,\n        context,\n        hideResizer, // Resizer is hidden while dragging only\n        {\n            onDragStart,\n            onDragging,\n            onDragEnd,\n        },\n        zoomScale,\n        editor.getEnvironment().isMobileOrTablet\n    );\n\n    return { node: table, div, featureHandler };\n}\n\ninterface DragAndDropContext {\n    table: HTMLTableElement;\n    isRTL: boolean;\n    zoomScale: number;\n    onStart: () => void;\n    onEnd: () => false;\n    div: HTMLDivElement;\n    editor: IEditor;\n    contentDiv?: EventTarget | null;\n}\n\ninterface DragAndDropInitValue {\n    originalRect: DOMRect;\n    originalHeights: number[];\n    originalWidths: number[];\n    cmTable: ContentModelTable | undefined;\n}\n\nfunction onDragStart(context: DragAndDropContext, event: MouseEvent) {\n    context.onStart();\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    // Save original widths and heights\n    const heights: number[] = [];\n    cmTable?.rows.forEach(row => {\n        heights.push(row.height);\n    });\n    const widths: number[] = [];\n    cmTable?.widths.forEach(width => {\n        widths.push(width);\n    });\n\n    return {\n        originalRect: table.getBoundingClientRect(),\n        cmTable,\n        originalHeights: heights ?? [],\n        originalWidths: widths ?? [],\n    };\n}\n\nfunction onDragging(\n    context: DragAndDropContext,\n    event: MouseEvent,\n    initValue: DragAndDropInitValue,\n    deltaX: number,\n    deltaY: number\n) {\n    const { isRTL, zoomScale, table } = context;\n    const { originalRect, originalHeights, originalWidths, cmTable } = initValue;\n\n    const ratioX = 1.0 + (deltaX / originalRect.width) * zoomScale * (isRTL ? -1 : 1);\n    const ratioY = 1.0 + (deltaY / originalRect.height) * zoomScale;\n    const shouldResizeX = Math.abs(ratioX - 1.0) > 1e-3;\n    const shouldResizeY = Math.abs(ratioY - 1.0) > 1e-3;\n\n    // If the width of some external table is fixed, we need to make it resizable\n    table.style.setProperty('width', null);\n    // If the height of some external table is fixed, we need to make it resizable\n    table.style.setProperty('height', null);\n\n    // Assign new widths and heights to the CM table\n    if (cmTable && cmTable.rows && (shouldResizeX || shouldResizeY)) {\n        // Modify the CM Table size\n        for (let i = 0; i < cmTable.rows.length; i++) {\n            for (let j = 0; j < cmTable.rows[i].cells.length; j++) {\n                const cell = cmTable.rows[i].cells[j];\n                if (cell) {\n                    if (shouldResizeX && i == 0) {\n                        cmTable.widths[j] = (originalWidths[j] ?? 0) * ratioX;\n                    }\n                    if (shouldResizeY && j == 0) {\n                        cmTable.rows[i].height = (originalHeights[i] ?? 0) * ratioY;\n                    }\n                }\n            }\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\n            if (tableRow.cells.length == 0) {\n                // Skip empty row\n                continue;\n            }\n\n            for (let col = 0; col < tableRow.cells.length; col++) {\n                const td = tableRow.cells[col];\n                td.style.width = cmTable.widths[col] + 'px';\n                td.style.height = cmTable.rows[row].height + 'px';\n            }\n        }\n        return true;\n    } else {\n        return false;\n    }\n}\n\nfunction onDragEnd(\n    context: DragAndDropContext,\n    event: MouseEvent,\n    initValue: DragAndDropInitValue | undefined\n) {\n    if (\n        isTableBottomVisible(\n            context.editor,\n            normalizeRect(context.table.getBoundingClientRect()),\n            context.contentDiv as Node\n        )\n    ) {\n        context.div.style.visibility = 'visible';\n        setDivPosition(context, context.div);\n    }\n    context.onEnd();\n    return false;\n}\n\nfunction setDivPosition(context: DragAndDropContext, trigger: HTMLElement) {\n    const { table, isRTL } = context;\n    const rect = normalizeRect(table.getBoundingClientRect());\n\n    if (rect) {\n        trigger.style.top = `${rect.bottom}px`;\n        trigger.style.left = isRTL\n            ? `${rect.left - TABLE_RESIZER_LENGTH - 2}px`\n            : `${rect.right}px`;\n    }\n}\n\nfunction hideResizer(context: DragAndDropContext, trigger: HTMLElement) {\n    trigger.style.visibility = 'hidden';\n}\n\nfunction isTableBottomVisible(\n    editor: IEditor,\n    rect: Rect | null,\n    contentDiv?: Node | null\n): boolean {\n    const visibleViewport = editor.getVisibleViewport();\n    if (isNodeOfType(contentDiv, 'ELEMENT_NODE') && visibleViewport && rect) {\n        const containerRect = normalizeRect(contentDiv.getBoundingClientRect());\n\n        return (\n            !!containerRect &&\n            containerRect.bottom >= rect.bottom &&\n            visibleViewport.bottom >= rect.bottom\n        );\n    }\n\n    return true;\n}\n"]}

package/package.json

@@ -3,12 +3,12 @@
     "description": "Content Model for roosterjs (Under development)",
     "dependencies": {
         "tslib": "^2.3.1",
-        "roosterjs-content-model-core": "^0.26.3",
-        "roosterjs-content-model-dom": "^0.26.3",
-        "roosterjs-content-model-types": "^0.26.3",
-        "roosterjs-content-model-api": "^0.26.3"
+        "roosterjs-content-model-core": "^0.27.0",
+        "roosterjs-content-model-dom": "^0.27.0",
+        "roosterjs-content-model-types": "^0.27.0",
+        "roosterjs-content-model-api": "^0.27.0"
     },
-    "version": "0.26.3",
+    "version": "0.27.0",
     "main": "./lib/index.js",
     "typings": "./lib/index.d.ts",
     "module": "./lib-mjs/index.js",