roosterjs-content-model-plugins 9.1.0 → 9.3.0

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

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

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

@@ -10,4 +10,4 @@ export interface TableEditFeature {
 /**
  * @internal
  */
-export declare function disposeTableEditFeature(resizer: TableEditFeature | null): void;
+export declare function disposeTableEditFeature(feature: TableEditFeature | null): void;

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

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

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

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

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

@@ -0,0 +1,4 @@
+/**
+ * Names of table edit features
+ */
+export declare type TableEditFeatureName = 'HorizontalTableInserter' | 'VerticalTableInserter' | 'TableMover' | 'TableResizer' | 'TableSelector' | 'CellResizer';

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TableEditFeatureName.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableEditFeatureName.js","sourceRoot":"","sources":["../../../../../../packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableEditFeatureName.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Names of table edit features\n */\nexport type TableEditFeatureName =\n    | 'HorizontalTableInserter'\n    | 'VerticalTableInserter'\n    | 'TableMover'\n    | 'TableResizer'\n    | 'TableSelector'\n    | 'CellResizer';\n"]}

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

@@ -1,6 +1,15 @@
 import type { TableEditFeature } from './TableEditFeature';
+import type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';
 import type { IEditor } from 'roosterjs-content-model-types';
 /**
  * @internal
  */
-export declare function createTableInserter(editor: IEditor, td: HTMLTableCellElement, table: HTMLTableElement, isRTL: boolean, isHorizontal: boolean, onInsert: () => void, getOnMouseOut: (feature: HTMLElement) => (ev: MouseEvent) => void, anchorContainer?: HTMLElement): TableEditFeature | null;
+export declare const HORIZONTAL_INSERTER_ID = "horizontalInserter";
+/**
+ * @internal
+ */
+export declare const VERTICAL_INSERTER_ID = "verticalInserter";
+/**
+ * @internal
+ */
+export declare function createTableInserter(editor: IEditor, td: HTMLTableCellElement, table: HTMLTableElement, isRTL: boolean, isHorizontal: boolean, onInsert: () => void, anchorContainer?: HTMLElement, onTableEditorCreated?: OnTableEditorCreatedCallback): TableEditFeature | null;

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

@@ -9,7 +9,15 @@ var INSERTER_BORDER_SIZE = 1;
 /**
  * @internal
  */
-export function createTableInserter(editor, td, table, isRTL, isHorizontal, onInsert, getOnMouseOut, anchorContainer) {
+export var HORIZONTAL_INSERTER_ID = 'horizontalInserter';
+/**
+ * @internal
+ */
+export var VERTICAL_INSERTER_ID = 'verticalInserter';
+/**
+ * @internal
+ */
+export function createTableInserter(editor, td, table, isRTL, isHorizontal, onInsert, anchorContainer, onTableEditorCreated) {
     var tdRect = normalizeRect(td.getBoundingClientRect());
     var viewPort = editor.getVisibleViewport();
     var tableRect = table && viewPort ? getIntersectedRect([table], [viewPort]) : null;
@@ -20,7 +28,7 @@ export function createTableInserter(editor, td, table, isRTL, isHorizontal, onIn
         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.id = HORIZONTAL_INSERTER_ID;
             div.style.left = (isRTL
                 ? tableRect.right
                 : tableRect.left - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE)) + "px";
@@ -28,20 +36,20 @@ export function createTableInserter(editor, td, table, isRTL, isHorizontal, onIn
             div.firstChild.style.width = tableRect.right - tableRect.left + "px";
         }
         else {
-            div.id = 'verticalInserter';
+            div.id = VERTICAL_INSERTER_ID;
             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);
+        var handler = new TableInsertHandler(div, td, table, isHorizontal, editor, onInsert, onTableEditorCreated);
         return { div: div, featureHandler: handler, node: td };
     }
     return null;
 }
 var TableInsertHandler = /** @class */ (function () {
-    function TableInsertHandler(div, td, table, isHorizontal, editor, onInsert, getOnMouseOut) {
+    function TableInsertHandler(div, td, table, isHorizontal, editor, onInsert, onTableEditorCreated) {
         var _this = this;
         this.div = div;
         this.td = td;
@@ -76,15 +84,13 @@ var TableInsertHandler = /** @class */ (function () {
             _this.onInsert();
         };
         this.div.addEventListener('click', this.insertTd);
-        this.onMouseOutEvent = getOnMouseOut(div);
-        this.div.addEventListener('mouseout', this.onMouseOutEvent);
+        this.disposer = onTableEditorCreated === null || onTableEditorCreated === void 0 ? void 0 : onTableEditorCreated(isHorizontal ? 'HorizontalTableInserter' : 'VerticalTableInserter', div);
     }
     TableInsertHandler.prototype.dispose = function () {
+        var _a;
         this.div.removeEventListener('click', this.insertTd);
-        if (this.onMouseOutEvent) {
-            this.div.removeEventListener('mouseout', this.onMouseOutEvent);
-        }
-        this.onMouseOutEvent = null;
+        (_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.disposer = undefined;
     };
     return TableInsertHandler;
 }());

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

@@ -1 +1 @@
-{"version":3,"file":"TableInserter.js","sourceRoot":"","sources":["../../../../../../packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableInserter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kDAAkD,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EACH,2BAA2B,EAC3B,iBAAiB,EACjB,cAAc,GACjB,MAAM,6BAA6B,CAAC;AAMrC,IAAM,cAAc,GAAG,SAAS,CAAC;AACjC,IAAM,wBAAwB,GAAG,OAAO,CAAC;AACzC,IAAM,oBAAoB,GAAG,EAAE,CAAC;AAChC,IAAM,oBAAoB,GAAG,CAAC,CAAC;AAE/B;;GAEG;AACH,MAAM,UAAU,mBAAmB,CAC/B,MAAe,EACf,EAAwB,EACxB,KAAuB,EACvB,KAAc,EACd,YAAqB,EACrB,QAAoB,EACpB,aAAiE,EACjE,eAA6B;IAE7B,IAAM,MAAM,GAAG,aAAa,CAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC,CAAC;IACzD,IAAM,QAAQ,GAAG,MAAM,CAAC,kBAAkB,EAAE,CAAC;IAC7C,IAAM,SAAS,GAAG,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAErF,wBAAwB;IACxB,IAAI,MAAM,IAAI,SAAS,EAAE;QACrB,IAAM,UAAQ,GAAG,EAAE,CAAC,aAAa,CAAC;QAClC,IAAM,iBAAiB,GAAG,oBAAoB,CAC1C,YAAY,EACZ,MAAM,CAAC,UAAU,EAAE,EACnB,KAAK,EACL,MAAM,CAAC,YAAY,EAAE,CAAC,WAAW,CAAC,iBAAiB,CAAC,IAAI,OAAO,CAClE,CAAC;QAEF,IAAM,GAAG,GAAG,aAAa,CAAC,iBAAiB,EAAE,UAAQ,CAAmB,CAAC;QAEzE,IAAI,YAAY,EAAE;YACd,yFAAyF;YACzF,GAAG,CAAC,EAAE,GAAG,oBAAoB,CAAC;YAC9B,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,CACb,KAAK;gBACD,CAAC,CAAC,SAAS,CAAC,KAAK;gBACjB,CAAC,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,oBAAoB,GAAG,CAAC,GAAG,CAAC,GAAG,oBAAoB,CAAC,QAC5E,CAAC;YACL,GAAG,CAAC,KAAK,CAAC,GAAG,GAAM,MAAM,CAAC,MAAM,GAAG,CAAC,OAAI,CAAC;YACxC,GAAG,CAAC,UAA0B,CAAC,KAAK,CAAC,KAAK,GAAM,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,IAAI,OAAI,CAAC;SACzF;aAAM;YACH,GAAG,CAAC,EAAE,GAAG,kBAAkB,CAAC;YAC5B,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,CAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,QAAI,CAAC;YACnE,6EAA6E;YAC7E,GAAG,CAAC,KAAK,CAAC,GAAG,GACT,SAAS,CAAC,GAAG,GAAG,CAAC,oBAAoB,GAAG,CAAC,GAAG,CAAC,GAAG,oBAAoB,CAAC,OACrE,CAAC;YACJ,GAAG,CAAC,UAA0B,CAAC,KAAK,CAAC,MAAM,GAAM,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,GAAG,OAAI,CAAC;SAC1F;QAED,CAAC,eAAe,IAAI,UAAQ,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAEpD,IAAM,OAAO,GAAG,IAAI,kBAAkB,CAClC,GAAG,EACH,EAAE,EACF,KAAK,EACL,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,aAAa,CAChB,CAAC;QAEF,OAAO,EAAE,GAAG,KAAA,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;KACrD;IAED,OAAO,IAAI,CAAC;AAChB,CAAC;AAED;IAEI,4BACY,GAAmB,EACnB,EAAwB,EACxB,KAAuB,EACvB,YAAqB,EACrB,MAAe,EACf,QAAoB,EAC5B,aAAiE;QAPrE,iBAYC;QAXW,QAAG,GAAH,GAAG,CAAgB;QACnB,OAAE,GAAF,EAAE,CAAsB;QACxB,UAAK,GAAL,KAAK,CAAkB;QACvB,iBAAY,GAAZ,YAAY,CAAS;QACrB,WAAM,GAAN,MAAM,CAAS;QACf,aAAQ,GAAR,QAAQ,CAAY;QAkBxB,aAAQ,GAAG;YACf,uBAAuB;YACvB,IAAM,WAAW,GAAG,KAAI,CAAC,EAAE,CAAC,SAAS,CAAC;YACtC,IAAM,GAAG,GACL,KAAI,CAAC,EAAE,CAAC,aAAa,IAAI,eAAe,CAAC,KAAI,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC;gBACjE,CAAC,CAAC,KAAI,CAAC,EAAE,CAAC,aAAa;gBACvB,CAAC,CAAC,SAAS,CAAC;YACpB,IAAM,QAAQ,GAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;YAErC,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,KAAI,SAAS,IAAI,QAAQ,IAAI,SAAS,EAAE;gBAClD,OAAO;aACV;YAED,uBAAuB;YACvB,2BAA2B,CACvB,KAAI,CAAC,MAAM,EACX,iBAAiB,EACjB,UAAA,UAAU;gBACN,KAAI,CAAC,YAAY;oBACb,CAAC,CAAC,cAAc,CAAC,UAAU,EAAE,aAAa,CAAC;oBAC3C,CAAC,CAAC,iBAAiB,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;YACvD,CAAC,EAAE,gCAAgC;YACnC;gBACI,IAAI,EAAE,OAAO;gBACb,WAAW,EAAE,WAAW;gBACxB,QAAQ,EAAE,QAAQ;gBAClB,UAAU,EAAE,WAAW;gBACvB,OAAO,EAAE,QAAQ;gBACjB,KAAK,EAAE,KAAI,CAAC,KAAK;aACpB,CACJ,CAAC;YAEF,KAAI,CAAC,QAAQ,EAAE,CAAC;QACpB,CAAC,CAAC;QAhDE,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClD,IAAI,CAAC,eAAe,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;QAC1C,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAChE,CAAC;IAED,oCAAO,GAAP;QACI,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAErD,IAAI,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;SAClE;QAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;IAChC,CAAC;IAoCL,yBAAC;AAAD,CAAC,AA5DD,IA4DC;AAED,SAAS,oBAAoB,CACzB,YAAqB,EACrB,MAAe,EACf,KAAc,EACd,eAAuB;IAEvB,IAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,cAAc,CAAC;IACzE,IAAM,aAAa,GAAG,6BAA2B,oBAAoB,oBAAe,oBAAoB,wIAAmI,oBAAoB,WAAM,aAAa,gDAA2C,eAAiB,CAAC;IAC/U,IAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAC7C,IAAM,eAAe,GAAG,mEAAiE,eAAe,MAAG,CAAC;IAC5G,IAAM,SAAS,GAAsB;QACjC,GAAG,EAAE,KAAK;QACV,KAAK,EACD,eAAe;YACf,CAAC,YAAY;gBACT,CAAC,CAAI,WAAW,6DAAwD,aAAa,mCAA8B,aAAa,kCAA6B,aAAa,wBAAqB;gBAC/L,CAAC,CAAC,8DAA4D,aAAa,kCAA6B,aAAa,mCAA8B,aAAa,uBAAoB,CAAC;KAChM,CAAC;IAEF,OAAO;QACH,GAAG,EAAE,KAAK;QACV,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE,CAAC,SAAS,EAAE,GAAG,CAAC;KAC7B,CAAC;AACN,CAAC","sourcesContent":["import { createElement } from '../../../pluginUtils/CreateElement/createElement';\nimport { getIntersectedRect } from '../../../pluginUtils/Rect/getIntersectedRect';\nimport { isElementOfType, normalizeRect } 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 './TableEditFeature';\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 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"]}
+{"version":3,"file":"TableInserter.js","sourceRoot":"","sources":["../../../../../../packages/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 { isElementOfType, normalizeRect } from 'roosterjs-content-model-dom';\nimport type { TableEditFeature } from './TableEditFeature';\nimport type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';\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 { 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 * @internal\n */\nexport const HORIZONTAL_INSERTER_ID = 'horizontalInserter';\n/**\n * @internal\n */\nexport const VERTICAL_INSERTER_ID = 'verticalInserter';\n\n/**\n * @internal\n */\nexport function createTableInserter(\n    editor: IEditor,\n    td: HTMLTableCellElement,\n    table: HTMLTableElement,\n    isRTL: boolean,\n    isHorizontal: boolean,\n    onInsert: () => void,\n    anchorContainer?: HTMLElement,\n    onTableEditorCreated?: OnTableEditorCreatedCallback\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 = HORIZONTAL_INSERTER_ID;\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 = VERTICAL_INSERTER_ID;\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            onTableEditorCreated\n        );\n\n        return { div, featureHandler: handler, node: td };\n    }\n\n    return null;\n}\n\nclass TableInsertHandler implements Disposable {\n    private disposer: undefined | (() => 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        onTableEditorCreated?: OnTableEditorCreatedCallback\n    ) {\n        this.div.addEventListener('click', this.insertTd);\n        this.disposer = onTableEditorCreated?.(\n            isHorizontal ? 'HorizontalTableInserter' : 'VerticalTableInserter',\n            div\n        );\n    }\n\n    dispose() {\n        this.div.removeEventListener('click', this.insertTd);\n        this.disposer?.();\n        this.disposer = undefined;\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

@@ -1,8 +1,53 @@
-import type { IEditor } from 'roosterjs-content-model-types';
 import type { TableEditFeature } from './TableEditFeature';
+import type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';
+import type { ContentModelTable, DOMSelection, IEditor, Rect } from 'roosterjs-content-model-types';
 /**
  * @internal
+ */
+export declare const TABLE_MOVER_ID = "_Table_Mover";
+/**
+ * @internal
+ * Allows user to move table to another position
  * Contains the function to select whole table
- * Moving behavior not implemented yet
  */
-export declare function createTableMover(table: HTMLTableElement, editor: IEditor, isRTL: boolean, onFinishDragging: (table: HTMLTableElement) => void, getOnMouseOut: (feature: HTMLElement) => (ev: MouseEvent) => void, contentDiv?: EventTarget | null, anchorContainer?: HTMLElement): TableEditFeature | null;
+export declare function createTableMover(table: HTMLTableElement, editor: IEditor, isRTL: boolean, onFinishDragging: (table: HTMLTableElement) => void, onStart: () => void, onEnd: () => void, contentDiv?: EventTarget | null, anchorContainer?: HTMLElement, onTableEditorCreated?: OnTableEditorCreatedCallback, disableMovement?: boolean): TableEditFeature | null;
+/**
+ * @internal
+ * Exported for testing
+ */
+export interface TableMoverContext {
+    table: HTMLTableElement;
+    zoomScale: number;
+    rect: Rect | null;
+    isRTL: boolean;
+    editor: IEditor;
+    div: HTMLElement;
+    onFinishDragging: (table: HTMLTableElement) => void;
+    onStart: () => void;
+    onEnd: () => void;
+    disableMovement?: boolean;
+}
+/**
+ * @internal
+ * Exported for testing
+ */
+export interface TableMoverInitValue {
+    cmTable: ContentModelTable | undefined;
+    initialSelection: DOMSelection | null;
+    tableRect: HTMLDivElement;
+}
+/**
+ * @internal
+ * Exported for testing
+ */
+export declare function onDragStart(context: TableMoverContext): TableMoverInitValue;
+/**
+ * @internal
+ * Exported for testing
+ */
+export declare function onDragging(context: TableMoverContext, event: MouseEvent, initValue: TableMoverInitValue): boolean;
+/**
+ * @internal
+ * Exported for testing
+ */
+export declare function onDragEnd(context: TableMoverContext, event: MouseEvent, initValue: TableMoverInitValue | undefined): boolean;

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

@@ -1,15 +1,20 @@
-import { __extends } from "tslib";
+import { __extends, __read } from "tslib";
 import { createElement } from '../../../pluginUtils/CreateElement/createElement';
 import { DragAndDropHelper } from '../../../pluginUtils/DragAndDrop/DragAndDropHelper';
-import { isNodeOfType, normalizeRect } from 'roosterjs-content-model-dom';
+import { formatInsertPointWithContentModel } from 'roosterjs-content-model-api';
+import { createContentModelDocument, createSelectionMarker, getFirstSelectedTable, isNodeOfType, mergeModel, normalizeRect, setParagraphNotImplicit, setSelection, } from 'roosterjs-content-model-dom';
 var TABLE_MOVER_LENGTH = 12;
-var TABLE_MOVER_ID = '_Table_Mover';
 /**
  * @internal
+ */
+export var 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
  */
-export function createTableMover(table, editor, isRTL, onFinishDragging, getOnMouseOut, contentDiv, anchorContainer) {
+export function createTableMover(table, editor, isRTL, onFinishDragging, onStart, onEnd, contentDiv, anchorContainer, onTableEditorCreated, disableMovement) {
     var rect = normalizeRect(table.getBoundingClientRect());
     if (!isTableTopVisible(editor, rect, contentDiv)) {
         return null;
@@ -18,7 +23,7 @@ export function createTableMover(table, editor, isRTL, onFinishDragging, getOnMo
     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 = createElement(createElementData, document);
     div.id = TABLE_MOVER_ID;
@@ -30,34 +35,35 @@ export function createTableMover(table, editor, isRTL, onFinishDragging, getOnMo
         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 };
 }
 var TableMoverFeature = /** @class */ (function (_super) {
     __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));
@@ -76,4 +82,183 @@ function isTableTopVisible(editor, rect, contentDiv) {
     }
     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
+ */
+export 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 = 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 = __read(getFirstSelectedTable(editor.getContentModelCopy('disconnected')), 1), cmTable = _b[0];
+    // Restore selection
+    editor.setDOMSelection(initialSelection);
+    return {
+        cmTable: cmTable,
+        initialSelection: initialSelection,
+        tableRect: tableRect,
+    };
+}
+/**
+ * @internal
+ * Exported for testing
+ */
+export 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;
+}
+/**
+ * @internal
+ * Exported for testing
+ */
+export 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
+            formatInsertPointWithContentModel(editor, insertPosition, function (model, context, ip) {
+                var _a;
+                // Remove old table
+                var _b = __read(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 = createContentModelDocument();
+                    doc.blocks.push(initValue.cmTable);
+                    insertionSuccess_1 = !!mergeModel(model, doc, context, {
+                        mergeFormat: 'none',
+                        insertPosition: ip,
+                    });
+                    if (insertionSuccess_1) {
+                        // After mergeModel, the new table should be selected
+                        var finalTable = (_a = 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 = createSelectionMarker(model.format);
+                                markerParagraph.segments.unshift(marker);
+                                setParagraphNotImplicit(markerParagraph);
+                                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;
+    }
+}
 //# sourceMappingURL=TableMover.js.map