roosterjs-content-model-plugins 9.1.0 → 9.3.0

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

@@ -1,15 +1,19 @@
-define(["require", "exports", "tslib", "../../../pluginUtils/CreateElement/createElement", "../../../pluginUtils/DragAndDrop/DragAndDropHelper", "roosterjs-content-model-dom"], function (require, exports, tslib_1, createElement_1, DragAndDropHelper_1, roosterjs_content_model_dom_1) {
+define(["require", "exports", "tslib", "../../../pluginUtils/CreateElement/createElement", "../../../pluginUtils/DragAndDrop/DragAndDropHelper", "roosterjs-content-model-api", "roosterjs-content-model-dom"], function (require, exports, tslib_1, createElement_1, DragAndDropHelper_1, roosterjs_content_model_api_1, roosterjs_content_model_dom_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.createTableMover = void 0;
+    exports.onDragEnd = exports.onDragging = exports.onDragStart = exports.createTableMover = exports.TABLE_MOVER_ID = void 0;
     var TABLE_MOVER_LENGTH = 12;
-    var TABLE_MOVER_ID = '_Table_Mover';
     /**
      * @internal
+     */
+    exports.TABLE_MOVER_ID = '_Table_Mover';
+    var TABLE_MOVER_STYLE_KEY = '_TableMoverCursorStyle';
+    /**
+     * @internal
+     * Allows user to move table to another position
      * Contains the function to select whole table
-     * Moving behavior not implemented yet
      */
-    function createTableMover(table, editor, isRTL, onFinishDragging, getOnMouseOut, contentDiv, anchorContainer) {
+    function createTableMover(table, editor, isRTL, onFinishDragging, onStart, onEnd, contentDiv, anchorContainer, onTableEditorCreated, disableMovement) {
         var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(table.getBoundingClientRect());
         if (!isTableTopVisible(editor, rect, contentDiv)) {
             return null;
@@ -18,10 +22,10 @@ define(["require", "exports", "tslib", "../../../pluginUtils/CreateElement/creat
         var document = table.ownerDocument;
         var createElementData = {
             tag: 'div',
-            style: 'position: fixed; cursor: all-scroll; user-select: none; border: 1px solid #808080',
+            style: 'position: fixed; cursor: move; user-select: none; border: 1px solid #808080',
         };
         var div = (0, createElement_1.createElement)(createElementData, document);
-        div.id = TABLE_MOVER_ID;
+        div.id = exports.TABLE_MOVER_ID;
         div.style.width = TABLE_MOVER_LENGTH + "px";
         div.style.height = TABLE_MOVER_LENGTH + "px";
         (anchorContainer || document.body).appendChild(div);
@@ -30,35 +34,36 @@ define(["require", "exports", "tslib", "../../../pluginUtils/CreateElement/creat
             zoomScale: zoomScale,
             rect: rect,
             isRTL: isRTL,
+            editor: editor,
+            div: div,
+            onFinishDragging: onFinishDragging,
+            onStart: onStart,
+            onEnd: onEnd,
+            disableMovement: disableMovement,
         };
         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 featureHandler = new TableMoverFeature(div, context, function () { }, disableMovement
+            ? { onDragEnd: onDragEnd }
+            : {
+                onDragStart: onDragStart,
+                onDragging: onDragging,
+                onDragEnd: onDragEnd,
+            }, context.zoomScale, onTableEditorCreated, editor.getEnvironment().isMobileOrTablet);
+        return { node: table, div: div, featureHandler: featureHandler };
     }
     exports.createTableMover = createTableMover;
     var TableMoverFeature = /** @class */ (function (_super) {
         (0, tslib_1.__extends)(TableMoverFeature, _super);
-        function TableMoverFeature(div, context, onSubmit, handler, zoomScale, getOnMouseOut, forceMobile, container) {
+        function TableMoverFeature(div, context, onSubmit, handler, zoomScale, onTableEditorCreated, forceMobile) {
             var _this = _super.call(this, div, context, onSubmit, handler, zoomScale, forceMobile) || this;
-            _this.div = div;
-            _this.onMouseOut = getOnMouseOut(div);
-            div.addEventListener('mouseout', _this.onMouseOut);
+            _this.disposer = onTableEditorCreated === null || onTableEditorCreated === void 0 ? void 0 : onTableEditorCreated('TableMover', div);
             return _this;
         }
         TableMoverFeature.prototype.dispose = function () {
+            var _a;
+            (_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.disposer = undefined;
             _super.prototype.dispose.call(this);
-            if (this.onMouseOut) {
-                this.div.removeEventListener('mouseout', this.onMouseOut);
-            }
-            this.onMouseOut = null;
         };
         return TableMoverFeature;
     }(DragAndDropHelper_1.DragAndDropHelper));
@@ -77,5 +82,187 @@ define(["require", "exports", "tslib", "../../../pluginUtils/CreateElement/creat
         }
         return true;
     }
+    function setTableMoverCursor(editor, state, type) {
+        var _a;
+        editor === null || editor === void 0 ? void 0 : editor.setEditorStyle(TABLE_MOVER_STYLE_KEY, state ? (_a = 'cursor: ' + type) !== null && _a !== void 0 ? _a : 'move' : null);
+    }
+    // Get insertion point from coordinate.
+    function getNodePositionFromEvent(editor, x, y) {
+        var doc = editor.getDocument();
+        var domHelper = editor.getDOMHelper();
+        if (doc.caretRangeFromPoint) {
+            // Chrome, Edge, Safari, Opera
+            var range = doc.caretRangeFromPoint(x, y);
+            if (range && domHelper.isNodeInEditor(range.startContainer)) {
+                return { node: range.startContainer, offset: range.startOffset };
+            }
+        }
+        if ('caretPositionFromPoint' in doc) {
+            // Firefox
+            var pos = doc.caretPositionFromPoint(x, y);
+            if (pos && domHelper.isNodeInEditor(pos.offsetNode)) {
+                return { node: pos.offsetNode, offset: pos.offset };
+            }
+        }
+        if (doc.elementFromPoint) {
+            // Fallback
+            var element = doc.elementFromPoint(x, y);
+            if (element && domHelper.isNodeInEditor(element)) {
+                return { node: element, offset: 0 };
+            }
+        }
+        return null;
+    }
+    /**
+     * @internal
+     * Exported for testing
+     */
+    function onDragStart(context) {
+        var _a;
+        context.onStart();
+        var editor = context.editor, table = context.table, div = context.div;
+        setTableMoverCursor(editor, true, 'move');
+        // Create table outline rectangle
+        var trect = table.getBoundingClientRect();
+        var createElementData = {
+            tag: 'div',
+            style: 'position: fixed; user-select: none; border: 1px solid #808080',
+        };
+        var tableRect = (0, createElement_1.createElement)(createElementData, document);
+        tableRect.style.width = trect.width + "px";
+        tableRect.style.height = trect.height + "px";
+        tableRect.style.top = trect.top + "px";
+        tableRect.style.left = trect.left + "px";
+        (_a = div.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(tableRect);
+        // Get current selection
+        var initialSelection = 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 _b = (0, tslib_1.__read)((0, roosterjs_content_model_dom_1.getFirstSelectedTable)(editor.getContentModelCopy('disconnected')), 1), cmTable = _b[0];
+        // Restore selection
+        editor.setDOMSelection(initialSelection);
+        return {
+            cmTable: cmTable,
+            initialSelection: initialSelection,
+            tableRect: tableRect,
+        };
+    }
+    exports.onDragStart = onDragStart;
+    /**
+     * @internal
+     * Exported for testing
+     */
+    function onDragging(context, event, initValue) {
+        var tableRect = initValue.tableRect;
+        var editor = context.editor;
+        // Move table outline rectangle
+        tableRect.style.top = event.clientY + TABLE_MOVER_LENGTH + "px";
+        tableRect.style.left = event.clientX + TABLE_MOVER_LENGTH + "px";
+        var pos = getNodePositionFromEvent(editor, event.clientX, event.clientY);
+        if (pos) {
+            var range = editor.getDocument().createRange();
+            range.setStart(pos.node, pos.offset);
+            range.collapse(true);
+            editor.setDOMSelection({ type: 'range', range: range, isReverted: false });
+            return true;
+        }
+        return false;
+    }
+    exports.onDragging = onDragging;
+    /**
+     * @internal
+     * Exported for testing
+     */
+    function onDragEnd(context, event, initValue) {
+        var _a, _b;
+        var editor = context.editor, table = context.table, selectWholeTable = context.onFinishDragging, disableMovement = context.disableMovement;
+        var element = event.target;
+        // Remove table outline rectangle
+        initValue === null || initValue === void 0 ? void 0 : initValue.tableRect.remove();
+        // Reset cursor
+        setTableMoverCursor(editor, false);
+        if (element == context.div) {
+            // Table mover was only clicked, select whole table
+            selectWholeTable(table);
+            context.onEnd();
+            return true;
+        }
+        else {
+            // Check if table was dragged on itself, element is not in editor, or movement is disabled
+            if (table.contains(element) ||
+                !editor.getDOMHelper().isNodeInEditor(element) ||
+                disableMovement) {
+                editor.setDOMSelection((_a = initValue === null || initValue === void 0 ? void 0 : initValue.initialSelection) !== null && _a !== void 0 ? _a : null);
+                context.onEnd();
+                return false;
+            }
+            var insertionSuccess_1 = false;
+            // Get position to insert table
+            var insertPosition = getNodePositionFromEvent(editor, event.clientX, event.clientY);
+            if (insertPosition) {
+                // Move table to new position
+                (0, roosterjs_content_model_api_1.formatInsertPointWithContentModel)(editor, insertPosition, function (model, context, ip) {
+                    var _a;
+                    // Remove old table
+                    var _b = (0, tslib_1.__read)((0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model), 2), oldTable = _b[0], path = _b[1];
+                    if (oldTable) {
+                        var index = path[0].blocks.indexOf(oldTable);
+                        path[0].blocks.splice(index, 1);
+                    }
+                    if (ip && (initValue === null || initValue === void 0 ? void 0 : initValue.cmTable)) {
+                        // Insert new table
+                        var doc = (0, roosterjs_content_model_dom_1.createContentModelDocument)();
+                        doc.blocks.push(initValue.cmTable);
+                        insertionSuccess_1 = !!(0, roosterjs_content_model_dom_1.mergeModel)(model, doc, context, {
+                            mergeFormat: 'none',
+                            insertPosition: ip,
+                        });
+                        if (insertionSuccess_1) {
+                            // After mergeModel, the new table should be selected
+                            var finalTable = (_a = (0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model)[0]) !== null && _a !== void 0 ? _a : initValue.cmTable;
+                            if (finalTable) {
+                                // Add selection marker to the first cell of the table
+                                var FirstCell = finalTable.rows[0].cells[0];
+                                var markerParagraph = FirstCell === null || FirstCell === void 0 ? void 0 : FirstCell.blocks[0];
+                                if ((markerParagraph === null || markerParagraph === void 0 ? void 0 : markerParagraph.blockType) == 'Paragraph') {
+                                    var marker = (0, roosterjs_content_model_dom_1.createSelectionMarker)(model.format);
+                                    markerParagraph.segments.unshift(marker);
+                                    (0, roosterjs_content_model_dom_1.setParagraphNotImplicit)(markerParagraph);
+                                    (0, roosterjs_content_model_dom_1.setSelection)(FirstCell, marker);
+                                }
+                            }
+                        }
+                        return insertionSuccess_1;
+                    }
+                }, {
+                    // Select first cell of the old table
+                    selectionOverride: {
+                        type: 'table',
+                        firstColumn: 0,
+                        firstRow: 0,
+                        lastColumn: 0,
+                        lastRow: 0,
+                        table: table,
+                    },
+                    apiName: 'TableMover',
+                });
+            }
+            else {
+                // No movement, restore initial selection
+                editor.setDOMSelection((_b = initValue === null || initValue === void 0 ? void 0 : initValue.initialSelection) !== null && _b !== void 0 ? _b : null);
+            }
+            context.onEnd();
+            return insertionSuccess_1;
+        }
+    }
+    exports.onDragEnd = onDragEnd;
 });
 //# sourceMappingURL=TableMover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableMover.js","sourceRoot":"","sources":["../../../../../../packages/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 { isNodeOfType, normalizeRect } from 'roosterjs-content-model-dom';\nimport type { DragAndDropHandler } from '../../../pluginUtils/DragAndDrop/DragAndDropHandler';\nimport type { IEditor, Rect } from 'roosterjs-content-model-types';\nimport type { TableEditFeature } from './TableEditFeature';\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 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): TableEditFeature | 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"]}
+{"version":3,"file":"TableMover.js","sourceRoot":"","sources":["../../../../../../packages/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 { formatInsertPointWithContentModel } from 'roosterjs-content-model-api';\nimport type { TableEditFeature } from './TableEditFeature';\nimport type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';\nimport type { DragAndDropHandler } from '../../../pluginUtils/DragAndDrop/DragAndDropHandler';\nimport {\n    createContentModelDocument,\n    createSelectionMarker,\n    getFirstSelectedTable,\n    isNodeOfType,\n    mergeModel,\n    normalizeRect,\n    setParagraphNotImplicit,\n    setSelection,\n} from 'roosterjs-content-model-dom';\nimport type {\n    ContentModelTable,\n    DOMInsertPoint,\n    DOMSelection,\n    IEditor,\n    Rect,\n} from 'roosterjs-content-model-types';\n\nconst TABLE_MOVER_LENGTH = 12;\n/**\n * @internal\n */\nexport const TABLE_MOVER_ID = '_Table_Mover';\nconst TABLE_MOVER_STYLE_KEY = '_TableMoverCursorStyle';\n\n/**\n * @internal\n * Allows user to move table to another position\n * Contains the function to select whole table\n */\nexport function createTableMover(\n    table: HTMLTableElement,\n    editor: IEditor,\n    isRTL: boolean,\n    onFinishDragging: (table: HTMLTableElement) => void,\n    onStart: () => void,\n    onEnd: () => void,\n    contentDiv?: EventTarget | null,\n    anchorContainer?: HTMLElement,\n    onTableEditorCreated?: OnTableEditorCreatedCallback,\n    disableMovement?: boolean\n): TableEditFeature | 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: move; 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        editor,\n        div,\n        onFinishDragging,\n        onStart,\n        onEnd,\n        disableMovement,\n    };\n\n    setDivPosition(context, div);\n\n    const featureHandler = new TableMoverFeature(\n        div,\n        context,\n        () => {},\n        disableMovement\n            ? { onDragEnd }\n            : {\n                  onDragStart,\n                  onDragging,\n                  onDragEnd,\n              },\n        context.zoomScale,\n        onTableEditorCreated,\n        editor.getEnvironment().isMobileOrTablet\n    );\n\n    return { node: table, div, featureHandler };\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport interface TableMoverContext {\n    table: HTMLTableElement;\n    zoomScale: number;\n    rect: Rect | null;\n    isRTL: boolean;\n    editor: IEditor;\n    div: HTMLElement;\n    onFinishDragging: (table: HTMLTableElement) => void;\n    onStart: () => void;\n    onEnd: () => void;\n    disableMovement?: boolean;\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport interface TableMoverInitValue {\n    cmTable: ContentModelTable | undefined;\n    initialSelection: DOMSelection | null;\n    tableRect: HTMLDivElement;\n}\n\nclass TableMoverFeature extends DragAndDropHelper<TableMoverContext, TableMoverInitValue> {\n    private disposer: undefined | (() => void);\n\n    constructor(\n        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        onTableEditorCreated?: OnTableEditorCreatedCallback,\n        forceMobile?: boolean | undefined\n    ) {\n        super(div, context, onSubmit, handler, zoomScale, forceMobile);\n        this.disposer = onTableEditorCreated?.('TableMover', div);\n    }\n\n    dispose(): void {\n        this.disposer?.();\n        this.disposer = undefined;\n        super.dispose();\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\nfunction setTableMoverCursor(editor: IEditor, state: boolean, type?: 'move' | 'copy') {\n    editor?.setEditorStyle(TABLE_MOVER_STYLE_KEY, state ? 'cursor: ' + type ?? 'move' : null);\n}\n\n// Get insertion point from coordinate.\nfunction getNodePositionFromEvent(editor: IEditor, x: number, y: number): DOMInsertPoint | null {\n    const doc = editor.getDocument();\n    const domHelper = editor.getDOMHelper();\n\n    if (doc.caretRangeFromPoint) {\n        // Chrome, Edge, Safari, Opera\n        const range = doc.caretRangeFromPoint(x, y);\n        if (range && domHelper.isNodeInEditor(range.startContainer)) {\n            return { node: range.startContainer, offset: range.startOffset };\n        }\n    }\n\n    if ('caretPositionFromPoint' in doc) {\n        // Firefox\n        const pos = (doc as any).caretPositionFromPoint(x, y);\n        if (pos && domHelper.isNodeInEditor(pos.offsetNode)) {\n            return { node: pos.offsetNode, offset: pos.offset };\n        }\n    }\n\n    if (doc.elementFromPoint) {\n        // Fallback\n        const element = doc.elementFromPoint(x, y);\n        if (element && domHelper.isNodeInEditor(element)) {\n            return { node: element, offset: 0 };\n        }\n    }\n\n    return null;\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport function onDragStart(context: TableMoverContext): TableMoverInitValue {\n    context.onStart();\n\n    const { editor, table, div } = context;\n\n    setTableMoverCursor(editor, true, 'move');\n\n    // Create table outline rectangle\n    const trect = table.getBoundingClientRect();\n    const createElementData = {\n        tag: 'div',\n        style: 'position: fixed; user-select: none; border: 1px solid #808080',\n    };\n    const tableRect = createElement(createElementData, document) as HTMLDivElement;\n    tableRect.style.width = `${trect.width}px`;\n    tableRect.style.height = `${trect.height}px`;\n    tableRect.style.top = `${trect.top}px`;\n    tableRect.style.left = `${trect.left}px`;\n    div.parentNode?.appendChild(tableRect);\n\n    // Get current selection\n    const initialSelection = 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'));\n\n    // Restore selection\n    editor.setDOMSelection(initialSelection);\n\n    return {\n        cmTable,\n        initialSelection,\n        tableRect,\n    };\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport function onDragging(\n    context: TableMoverContext,\n    event: MouseEvent,\n    initValue: TableMoverInitValue\n) {\n    const { tableRect } = initValue;\n    const { editor } = context;\n\n    // Move table outline rectangle\n    tableRect.style.top = `${event.clientY + TABLE_MOVER_LENGTH}px`;\n    tableRect.style.left = `${event.clientX + TABLE_MOVER_LENGTH}px`;\n\n    const pos = getNodePositionFromEvent(editor, event.clientX, event.clientY);\n    if (pos) {\n        const range = editor.getDocument().createRange();\n        range.setStart(pos.node, pos.offset);\n        range.collapse(true);\n\n        editor.setDOMSelection({ type: 'range', range, isReverted: false });\n        return true;\n    }\n    return false;\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport function onDragEnd(\n    context: TableMoverContext,\n    event: MouseEvent,\n    initValue: TableMoverInitValue | undefined\n) {\n    const { editor, table, onFinishDragging: selectWholeTable, disableMovement } = context;\n    const element = event.target;\n\n    // Remove table outline rectangle\n    initValue?.tableRect.remove();\n\n    // Reset cursor\n    setTableMoverCursor(editor, false);\n\n    if (element == context.div) {\n        // Table mover was only clicked, select whole table\n        selectWholeTable(table);\n        context.onEnd();\n        return true;\n    } else {\n        // Check if table was dragged on itself, element is not in editor, or movement is disabled\n        if (\n            table.contains(element as Node) ||\n            !editor.getDOMHelper().isNodeInEditor(element as Node) ||\n            disableMovement\n        ) {\n            editor.setDOMSelection(initValue?.initialSelection ?? null);\n            context.onEnd();\n            return false;\n        }\n\n        let insertionSuccess: boolean = false;\n\n        // Get position to insert table\n        const insertPosition = getNodePositionFromEvent(editor, event.clientX, event.clientY);\n        if (insertPosition) {\n            // Move table to new position\n            formatInsertPointWithContentModel(\n                editor,\n                insertPosition,\n                (model, context, ip) => {\n                    // Remove old table\n                    const [oldTable, path] = getFirstSelectedTable(model);\n                    if (oldTable) {\n                        const index = path[0].blocks.indexOf(oldTable);\n                        path[0].blocks.splice(index, 1);\n                    }\n\n                    if (ip && initValue?.cmTable) {\n                        // Insert new table\n                        const doc = createContentModelDocument();\n                        doc.blocks.push(initValue.cmTable);\n                        insertionSuccess = !!mergeModel(model, doc, context, {\n                            mergeFormat: 'none',\n                            insertPosition: ip,\n                        });\n\n                        if (insertionSuccess) {\n                            // After mergeModel, the new table should be selected\n                            const finalTable = getFirstSelectedTable(model)[0] ?? initValue.cmTable;\n                            if (finalTable) {\n                                // Add selection marker to the first cell of the table\n                                const FirstCell = finalTable.rows[0].cells[0];\n                                const markerParagraph = FirstCell?.blocks[0];\n                                if (markerParagraph?.blockType == 'Paragraph') {\n                                    const marker = createSelectionMarker(model.format);\n\n                                    markerParagraph.segments.unshift(marker);\n                                    setParagraphNotImplicit(markerParagraph);\n                                    setSelection(FirstCell, marker);\n                                }\n                            }\n                        }\n                        return insertionSuccess;\n                    }\n                },\n                {\n                    // Select first cell of the old table\n                    selectionOverride: {\n                        type: 'table',\n                        firstColumn: 0,\n                        firstRow: 0,\n                        lastColumn: 0,\n                        lastRow: 0,\n                        table: table,\n                    },\n                    apiName: 'TableMover',\n                }\n            );\n        } else {\n            // No movement, restore initial selection\n            editor.setDOMSelection(initValue?.initialSelection ?? null);\n        }\n        context.onEnd();\n        return insertionSuccess;\n    }\n}\n"]}

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

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

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

@@ -1,13 +1,16 @@
-define(["require", "exports", "../../../pluginUtils/CreateElement/createElement", "../../../pluginUtils/DragAndDrop/DragAndDropHelper", "roosterjs-content-model-dom"], function (require, exports, createElement_1, DragAndDropHelper_1, roosterjs_content_model_dom_1) {
+define(["require", "exports", "tslib", "../../../pluginUtils/CreateElement/createElement", "../../../pluginUtils/DragAndDrop/DragAndDropHelper", "roosterjs-content-model-dom"], function (require, exports, tslib_1, createElement_1, DragAndDropHelper_1, roosterjs_content_model_dom_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.createTableResizer = void 0;
+    exports.createTableResizer = exports.TABLE_RESIZER_ID = void 0;
     var TABLE_RESIZER_LENGTH = 12;
-    var TABLE_RESIZER_ID = '_Table_Resizer';
     /**
      * @internal
      */
-    function createTableResizer(table, editor, isRTL, onStart, onEnd, contentDiv, anchorContainer) {
+    exports.TABLE_RESIZER_ID = '_Table_Resizer';
+    /**
+     * @internal
+     */
+    function createTableResizer(table, editor, isRTL, onStart, onEnd, contentDiv, anchorContainer, onTableEditorCreated) {
         var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(table.getBoundingClientRect());
         if (!isTableBottomVisible(editor, rect, contentDiv)) {
             return null;
@@ -19,7 +22,7 @@ define(["require", "exports", "../../../pluginUtils/CreateElement/createElement"
             style: "position: fixed; cursor: " + (isRTL ? 'ne' : 'nw') + "-resize; user-select: none; border: 1px solid #808080",
         };
         var div = (0, createElement_1.createElement)(createElementData, document);
-        div.id = TABLE_RESIZER_ID;
+        div.id = exports.TABLE_RESIZER_ID;
         div.style.width = TABLE_RESIZER_LENGTH + "px";
         div.style.height = TABLE_RESIZER_LENGTH + "px";
         (anchorContainer || document.body).appendChild(div);
@@ -34,15 +37,30 @@ define(["require", "exports", "../../../pluginUtils/CreateElement/createElement"
             contentDiv: contentDiv,
         };
         setDivPosition(context, div);
-        var featureHandler = new DragAndDropHelper_1.DragAndDropHelper(div, context, hideResizer, // Resizer is hidden while dragging only
+        var featureHandler = new TableResizer(div, context, hideResizer, // Resizer is hidden while dragging only
         {
             onDragStart: onDragStart,
             onDragging: onDragging,
             onDragEnd: onDragEnd,
-        }, zoomScale, editor.getEnvironment().isMobileOrTablet);
+        }, zoomScale, editor.getEnvironment().isMobileOrTablet, onTableEditorCreated);
         return { node: table, div: div, featureHandler: featureHandler };
     }
     exports.createTableResizer = createTableResizer;
+    var TableResizer = /** @class */ (function (_super) {
+        (0, tslib_1.__extends)(TableResizer, _super);
+        function TableResizer(trigger, context, onSubmit, handler, zoomScale, forceMobile, onTableEditorCreated) {
+            var _this = _super.call(this, trigger, context, onSubmit, handler, zoomScale, forceMobile) || this;
+            _this.disposer = onTableEditorCreated === null || onTableEditorCreated === void 0 ? void 0 : onTableEditorCreated('TableResizer', trigger);
+            return _this;
+        }
+        TableResizer.prototype.dispose = function () {
+            var _a;
+            (_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.disposer = undefined;
+            _super.prototype.dispose.call(this);
+        };
+        return TableResizer;
+    }(DragAndDropHelper_1.DragAndDropHelper));
     function onDragStart(context, event) {
         context.onStart();
         var editor = context.editor, table = context.table;

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

@@ -1 +1 @@
-{"version":3,"file":"TableResizer.js","sourceRoot":"","sources":["../../../../../../packages/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 {\n    getFirstSelectedTable,\n    isNodeOfType,\n    normalizeRect,\n    normalizeTable,\n} from 'roosterjs-content-model-dom';\nimport type { ContentModelTable, IEditor, Rect } from 'roosterjs-content-model-types';\nimport type { TableEditFeature } from './TableEditFeature';\n\nconst TABLE_RESIZER_LENGTH = 12;\nconst TABLE_RESIZER_ID = '_Table_Resizer';\n\n/**\n * @internal\n */\nexport 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 (context.editor.isDisposed()) {\n        return false;\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"]}
+{"version":3,"file":"TableResizer.js","sourceRoot":"","sources":["../../../../../../packages/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 type { TableEditFeature } from './TableEditFeature';\nimport type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';\nimport {\n    getFirstSelectedTable,\n    isNodeOfType,\n    normalizeRect,\n    normalizeTable,\n} from 'roosterjs-content-model-dom';\nimport type { ContentModelTable, IEditor, Rect } from 'roosterjs-content-model-types';\nimport type { DragAndDropHandler } from '../../../pluginUtils/DragAndDrop/DragAndDropHandler';\n\nconst TABLE_RESIZER_LENGTH = 12;\n/**\n * @internal\n */\nexport const TABLE_RESIZER_ID = '_Table_Resizer';\n\n/**\n * @internal\n */\nexport 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    onTableEditorCreated?: OnTableEditorCreatedCallback\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 TableResizer(\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        onTableEditorCreated\n    );\n\n    return { node: table, div, featureHandler };\n}\n\nclass TableResizer extends DragAndDropHelper<DragAndDropContext, DragAndDropInitValue> {\n    private disposer: undefined | (() => void);\n\n    constructor(\n        trigger: HTMLElement,\n        context: DragAndDropContext,\n        onSubmit: (context: DragAndDropContext, trigger: HTMLElement) => void,\n        handler: DragAndDropHandler<DragAndDropContext, DragAndDropInitValue>,\n        zoomScale: number,\n        forceMobile?: boolean,\n        onTableEditorCreated?: OnTableEditorCreatedCallback\n    ) {\n        super(trigger, context, onSubmit, handler, zoomScale, forceMobile);\n        this.disposer = onTableEditorCreated?.('TableResizer', trigger);\n    }\n\n    dispose(): void {\n        this.disposer?.();\n        this.disposer = undefined;\n        super.dispose();\n    }\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 (context.editor.isDisposed()) {\n        return false;\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/lib-amd/watermark/WatermarkPlugin.d.ts

@@ -4,7 +4,7 @@ import type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model
  * A watermark plugin to manage watermark string for roosterjs
  */
 export declare class WatermarkPlugin implements EditorPlugin {
-    private watermark;
+    protected watermark: string;
     private editor;
     private format;
     private isShowing;

package/lib-amd/watermark/WatermarkPlugin.js

@@ -54,7 +54,8 @@ define(["require", "exports", "roosterjs-content-model-dom", "./isModelEmptyFast
             if (!editor) {
                 return;
             }
-            if (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') {
+            if ((event.eventType == 'input' && event.rawEvent.inputType == 'insertText') ||
+                event.eventType == 'compositionEnd') {
                 // When input text, editor must not be empty, so we can do hide watermark now without checking content model
                 this.showHide(editor, false /*isEmpty*/);
             }

package/lib-amd/watermark/WatermarkPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"WatermarkPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/watermark/WatermarkPlugin.ts"],"names":[],"mappings":"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","sourcesContent":["import { getObjectKeys } from 'roosterjs-content-model-dom';\nimport { isModelEmptyFast } from './isModelEmptyFast';\nimport type { WatermarkFormat } from './WatermarkFormat';\nimport type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';\n\nconst WATERMARK_CONTENT_KEY = '_WatermarkContent';\nconst styleMap: Record<keyof WatermarkFormat, string> = {\n    fontFamily: 'font-family',\n    fontSize: 'font-size',\n    textColor: 'color',\n};\n\n/**\n * A watermark plugin to manage watermark string for roosterjs\n */\nexport class WatermarkPlugin implements EditorPlugin {\n    private editor: IEditor | null = null;\n    private format: WatermarkFormat;\n    private isShowing = false;\n\n    /**\n     * Create an instance of Watermark plugin\n     * @param watermark The watermark string\n     */\n    constructor(private watermark: string, format?: WatermarkFormat) {\n        this.format = format || {\n            fontSize: '14px',\n            textColor: '#AAAAAA',\n        };\n    }\n\n    /**\n     * Get a friendly name of  this plugin\n     */\n    getName() {\n        return 'Watermark';\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    }\n\n    /**\n     * Dispose this plugin\n     */\n    dispose() {\n        this.editor = null;\n    }\n\n    /**\n     * Handle events triggered from editor\n     * @param event PluginEvent object\n     */\n    onPluginEvent(event: PluginEvent) {\n        const editor = this.editor;\n\n        if (!editor) {\n            return;\n        }\n\n        if (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') {\n            // When input text, editor must not be empty, so we can do hide watermark now without checking content model\n            this.showHide(editor, false /*isEmpty*/);\n        } else if (\n            event.eventType == 'editorReady' ||\n            event.eventType == 'contentChanged' ||\n            event.eventType == 'input' ||\n            event.eventType == 'beforeDispose'\n        ) {\n            editor.formatContentModel(model => {\n                const isEmpty = isModelEmptyFast(model);\n\n                this.showHide(editor, isEmpty);\n\n                return false;\n            });\n        }\n    }\n\n    private showHide(editor: IEditor, isEmpty: boolean) {\n        if (this.isShowing && !isEmpty) {\n            this.hide(editor);\n        } else if (!this.isShowing && isEmpty) {\n            this.show(editor);\n        }\n    }\n\n    protected show(editor: IEditor) {\n        let rule = `position: absolute; pointer-events: none; content: \"${this.watermark}\";`;\n\n        getObjectKeys(styleMap).forEach(x => {\n            if (this.format[x]) {\n                rule += `${styleMap[x]}: ${this.format[x]}!important;`;\n            }\n        });\n\n        editor.setEditorStyle(WATERMARK_CONTENT_KEY, rule, 'before');\n\n        this.isShowing = true;\n    }\n\n    protected hide(editor: IEditor) {\n        editor.setEditorStyle(WATERMARK_CONTENT_KEY, null);\n        this.isShowing = false;\n    }\n}\n"]}
+{"version":3,"file":"WatermarkPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/watermark/WatermarkPlugin.ts"],"names":[],"mappings":"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","sourcesContent":["import { getObjectKeys } from 'roosterjs-content-model-dom';\nimport { isModelEmptyFast } from './isModelEmptyFast';\nimport type { WatermarkFormat } from './WatermarkFormat';\nimport type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';\n\nconst WATERMARK_CONTENT_KEY = '_WatermarkContent';\nconst styleMap: Record<keyof WatermarkFormat, string> = {\n    fontFamily: 'font-family',\n    fontSize: 'font-size',\n    textColor: 'color',\n};\n\n/**\n * A watermark plugin to manage watermark string for roosterjs\n */\nexport class WatermarkPlugin implements EditorPlugin {\n    private editor: IEditor | null = null;\n    private format: WatermarkFormat;\n    private isShowing = false;\n\n    /**\n     * Create an instance of Watermark plugin\n     * @param watermark The watermark string\n     */\n    constructor(protected watermark: string, format?: WatermarkFormat) {\n        this.format = format || {\n            fontSize: '14px',\n            textColor: '#AAAAAA',\n        };\n    }\n\n    /**\n     * Get a friendly name of  this plugin\n     */\n    getName() {\n        return 'Watermark';\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    }\n\n    /**\n     * Dispose this plugin\n     */\n    dispose() {\n        this.editor = null;\n    }\n\n    /**\n     * Handle events triggered from editor\n     * @param event PluginEvent object\n     */\n    onPluginEvent(event: PluginEvent) {\n        const editor = this.editor;\n\n        if (!editor) {\n            return;\n        }\n\n        if (\n            (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') ||\n            event.eventType == 'compositionEnd'\n        ) {\n            // When input text, editor must not be empty, so we can do hide watermark now without checking content model\n            this.showHide(editor, false /*isEmpty*/);\n        } else if (\n            event.eventType == 'editorReady' ||\n            event.eventType == 'contentChanged' ||\n            event.eventType == 'input' ||\n            event.eventType == 'beforeDispose'\n        ) {\n            editor.formatContentModel(model => {\n                const isEmpty = isModelEmptyFast(model);\n\n                this.showHide(editor, isEmpty);\n\n                return false;\n            });\n        }\n    }\n\n    private showHide(editor: IEditor, isEmpty: boolean) {\n        if (this.isShowing && !isEmpty) {\n            this.hide(editor);\n        } else if (!this.isShowing && isEmpty) {\n            this.show(editor);\n        }\n    }\n\n    protected show(editor: IEditor) {\n        let rule = `position: absolute; pointer-events: none; content: \"${this.watermark}\";`;\n\n        getObjectKeys(styleMap).forEach(x => {\n            if (this.format[x]) {\n                rule += `${styleMap[x]}: ${this.format[x]}!important;`;\n            }\n        });\n\n        editor.setEditorStyle(WATERMARK_CONTENT_KEY, rule, 'before');\n\n        this.isShowing = true;\n    }\n\n    protected hide(editor: IEditor) {\n        editor.setEditorStyle(WATERMARK_CONTENT_KEY, null);\n        this.isShowing = false;\n    }\n}\n"]}

package/lib-amd/watermark/isModelEmptyFast.js

@@ -28,6 +28,10 @@ define(["require", "exports"], function (require, exports) {
         })) {
             return false; // Has meaningful segments, it is not empty
         }
+        else if ((firstBlock.format.marginRight && parseFloat(firstBlock.format.marginRight) > 0) ||
+            (firstBlock.format.marginLeft && parseFloat(firstBlock.format.marginLeft) > 0)) {
+            return false; // Has margin (indentation is changed), it is not empty
+        }
         else {
             return firstBlock.segments.filter(function (x) { return x.segmentType == 'Br'; }).length <= 1; // If there are more than one BR, it is not empty, otherwise it is empty
         }

package/lib-amd/watermark/isModelEmptyFast.js.map

@@ -1 +1 @@
-{"version":3,"file":"isModelEmptyFast.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/watermark/isModelEmptyFast.ts"],"names":[],"mappings":";;;;IAEA;;;OAGG;IACH,SAAgB,gBAAgB,CAAC,KAA2B;QACxD,IAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAEnC,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YACzB,OAAO,KAAK,CAAC,CAAC,sCAAsC;SACvD;aAAM,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO,IAAI,CAAC,CAAC,wBAAwB;SACxC;aAAM,IAAI,UAAU,CAAC,SAAS,IAAI,WAAW,EAAE;YAC5C,OAAO,KAAK,CAAC,CAAC,mDAAmD;SACpE;aAAM,IAAI,UAAU,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,EAAE;YACxC,OAAO,IAAI,CAAC,CAAC,0BAA0B;SAC1C;aAAM,IACH,UAAU,CAAC,QAAQ,CAAC,IAAI,CACpB,UAAA,CAAC;YACG,OAAA,CAAC,CAAC,WAAW,IAAI,QAAQ;gBACzB,CAAC,CAAC,WAAW,IAAI,OAAO;gBACxB,CAAC,CAAC,WAAW,IAAI,SAAS;gBAC1B,CAAC,CAAC,CAAC,WAAW,IAAI,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC;QAHnC,CAGmC,CAC1C,EACH;YACE,OAAO,KAAK,CAAC,CAAC,2CAA2C;SAC5D;aAAM;YACH,OAAO,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,WAAW,IAAI,IAAI,EAArB,CAAqB,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,wEAAwE;SACtJ;IACL,CAAC;IAxBD,4CAwBC","sourcesContent":["import type { ContentModelDocument } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * A fast way to check if content model is empty\n */\nexport function isModelEmptyFast(model: ContentModelDocument): boolean {\n    const firstBlock = model.blocks[0];\n\n    if (model.blocks.length > 1) {\n        return false; // Multiple blocks, treat as not empty\n    } else if (!firstBlock) {\n        return true; // No block, it is empty\n    } else if (firstBlock.blockType != 'Paragraph') {\n        return false; // First block is not paragraph, treat as not empty\n    } else if (firstBlock.segments.length == 0) {\n        return true; // No segment, it is empty\n    } else if (\n        firstBlock.segments.some(\n            x =>\n                x.segmentType == 'Entity' ||\n                x.segmentType == 'Image' ||\n                x.segmentType == 'General' ||\n                (x.segmentType == 'Text' && x.text)\n        )\n    ) {\n        return false; // Has meaningful segments, it is not empty\n    } else {\n        return firstBlock.segments.filter(x => x.segmentType == 'Br').length <= 1; // If there are more than one BR, it is not empty, otherwise it is empty\n    }\n}\n"]}
+{"version":3,"file":"isModelEmptyFast.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/watermark/isModelEmptyFast.ts"],"names":[],"mappings":";;;;IAEA;;;OAGG;IACH,SAAgB,gBAAgB,CAAC,KAA2B;QACxD,IAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAEnC,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YACzB,OAAO,KAAK,CAAC,CAAC,sCAAsC;SACvD;aAAM,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO,IAAI,CAAC,CAAC,wBAAwB;SACxC;aAAM,IAAI,UAAU,CAAC,SAAS,IAAI,WAAW,EAAE;YAC5C,OAAO,KAAK,CAAC,CAAC,mDAAmD;SACpE;aAAM,IAAI,UAAU,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,EAAE;YACxC,OAAO,IAAI,CAAC,CAAC,0BAA0B;SAC1C;aAAM,IACH,UAAU,CAAC,QAAQ,CAAC,IAAI,CACpB,UAAA,CAAC;YACG,OAAA,CAAC,CAAC,WAAW,IAAI,QAAQ;gBACzB,CAAC,CAAC,WAAW,IAAI,OAAO;gBACxB,CAAC,CAAC,WAAW,IAAI,SAAS;gBAC1B,CAAC,CAAC,CAAC,WAAW,IAAI,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC;QAHnC,CAGmC,CAC1C,EACH;YACE,OAAO,KAAK,CAAC,CAAC,2CAA2C;SAC5D;aAAM,IACH,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,IAAI,UAAU,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;YAChF,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU,IAAI,UAAU,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAChF;YACE,OAAO,KAAK,CAAC,CAAC,uDAAuD;SACxE;aAAM;YACH,OAAO,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,WAAW,IAAI,IAAI,EAArB,CAAqB,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,wEAAwE;SACtJ;IACL,CAAC;IA7BD,4CA6BC","sourcesContent":["import type { ContentModelDocument } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * A fast way to check if content model is empty\n */\nexport function isModelEmptyFast(model: ContentModelDocument): boolean {\n    const firstBlock = model.blocks[0];\n\n    if (model.blocks.length > 1) {\n        return false; // Multiple blocks, treat as not empty\n    } else if (!firstBlock) {\n        return true; // No block, it is empty\n    } else if (firstBlock.blockType != 'Paragraph') {\n        return false; // First block is not paragraph, treat as not empty\n    } else if (firstBlock.segments.length == 0) {\n        return true; // No segment, it is empty\n    } else if (\n        firstBlock.segments.some(\n            x =>\n                x.segmentType == 'Entity' ||\n                x.segmentType == 'Image' ||\n                x.segmentType == 'General' ||\n                (x.segmentType == 'Text' && x.text)\n        )\n    ) {\n        return false; // Has meaningful segments, it is not empty\n    } else if (\n        (firstBlock.format.marginRight && parseFloat(firstBlock.format.marginRight) > 0) ||\n        (firstBlock.format.marginLeft && parseFloat(firstBlock.format.marginLeft) > 0)\n    ) {\n        return false; // Has margin (indentation is changed), it is not empty\n    } else {\n        return firstBlock.segments.filter(x => x.segmentType == 'Br').length <= 1; // If there are more than one BR, it is not empty, otherwise it is empty\n    }\n}\n"]}

package/lib-mjs/autoFormat/AutoFormatPlugin.d.ts

@@ -6,23 +6,31 @@ export declare type AutoFormatOptions = {
     /**
      * When true, after type *, ->, -, --, => , —, > and space key a type of bullet list will be triggered. @default true
      */
-    autoBullet: boolean;
+    autoBullet?: boolean;
     /**
      * When true, after type 1, A, a, i, I followed by ., ), - or between () and space key a type of numbering list will be triggered. @default true
      */
-    autoNumbering: boolean;
+    autoNumbering?: boolean;
     /**
      * When press backspace before a link, remove the hyperlink
      */
-    autoUnlink: boolean;
+    autoUnlink?: boolean;
     /**
      * When paste content, create hyperlink for the pasted link
      */
-    autoLink: boolean;
+    autoLink?: boolean;
     /**
      * Transform -- into hyphen, if typed between two words
      */
-    autoHyphen: boolean;
+    autoHyphen?: boolean;
+    /**
+     * Transform 1/2, 1/4, 3/4 into fraction character
+     */
+    autoFraction?: boolean;
+    /**
+     * Transform ordinal numbers into superscript
+     */
+    autoOrdinals?: boolean;
 };
 /**
  * Auto Format plugin handles auto formatting, such as transforming * characters into a bullet list.
@@ -38,6 +46,8 @@ export declare class AutoFormatPlugin implements EditorPlugin {
      *  - autoLink: A boolean that enables or disables automatic hyperlink creation when pasting or typing content. Defaults to false.
      *  - autoUnlink: A boolean that enables or disables automatic hyperlink removal when pressing backspace. Defaults to false.
      *  - autoHyphen: A boolean that enables or disables automatic hyphen transformation. Defaults to false.
+     *  - autoFraction: A boolean that enables or disables automatic fraction transformation. Defaults to false.
+     *  - autoOrdinals: A boolean that enables or disables automatic ordinal number transformation. Defaults to false.
      */
     constructor(options?: AutoFormatOptions);
     /**