roosterjs-content-model-plugins 9.45.0 → 9.45.2

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

@@ -1,17 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.disposeTableEditFeature = void 0;
-/**
- * @internal
- */
-function disposeTableEditFeature(feature) {
-    var _a, _b, _c;
-    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;
-    }
-}
-exports.disposeTableEditFeature = disposeTableEditFeature;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.disposeTableEditFeature = void 0;
+/**
+ * @internal
+ */
+function disposeTableEditFeature(feature) {
+    var _a, _b, _c;
+    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;
+    }
+}
+exports.disposeTableEditFeature = disposeTableEditFeature;
 //# sourceMappingURL=TableEditFeature.js.map

package/lib/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,SAAgB,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;AAPD,0DAOC","sourcesContent":["import type { Disposable } from '../../../pluginUtils/Disposable';\r\n\r\n/**\r\n * @internal\r\n */\r\nexport interface TableEditFeature {\r\n    node: Node;\r\n    div: HTMLDivElement | null;\r\n    featureHandler: Disposable | null;\r\n}\r\n\r\n/**\r\n * @internal\r\n */\r\nexport function disposeTableEditFeature(feature: TableEditFeature | null) {\r\n    if (feature) {\r\n        feature.featureHandler?.dispose();\r\n        feature.featureHandler = null;\r\n        feature.div?.parentNode?.removeChild(feature.div);\r\n        feature.div = null;\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"TableEditFeature.js","sourceRoot":"","sources":["../../../../../../packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableEditFeature.ts"],"names":[],"mappings":";;;AAWA;;GAEG;AACH,SAAgB,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;AAPD,0DAOC","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/tableEdit/editors/features/TableEditFeatureName.d.ts

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

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

@@ -1,3 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=TableEditFeatureName.js.map

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

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

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

@@ -1,33 +1,33 @@
-import type { TableEditFeature } from './TableEditFeature';
-import type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';
-import type { Disposable } from '../../../pluginUtils/Disposable';
-import type { IEditor } from 'roosterjs-content-model-types';
-/**
- * @internal
- */
-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, onBeforeInsert: () => void, onAfterInserted: () => void, anchorContainer?: HTMLElement, onTableEditorCreated?: OnTableEditorCreatedCallback): TableEditFeature | null;
-/**
- * @internal
- * Exported for test only
- */
-export declare class TableInsertHandler implements Disposable {
-    private div;
-    private td;
-    private table;
-    private isHorizontal;
-    private editor;
-    private onBeforeInsert;
-    private onAfterInsert;
-    private disposer;
-    constructor(div: HTMLDivElement, td: HTMLTableCellElement, table: HTMLTableElement, isHorizontal: boolean, editor: IEditor, onBeforeInsert: () => void, onAfterInsert: () => void, onTableEditorCreated?: OnTableEditorCreatedCallback);
-    dispose(): void;
-    private insertTd;
-}
+import type { TableEditFeature } from './TableEditFeature';
+import type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';
+import type { Disposable } from '../../../pluginUtils/Disposable';
+import type { IEditor } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+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, onBeforeInsert: () => void, onAfterInserted: () => void, anchorContainer?: HTMLElement, onTableEditorCreated?: OnTableEditorCreatedCallback): TableEditFeature | null;
+/**
+ * @internal
+ * Exported for test only
+ */
+export declare class TableInsertHandler implements Disposable {
+    private div;
+    private td;
+    private table;
+    private isHorizontal;
+    private editor;
+    private onBeforeInsert;
+    private onAfterInsert;
+    private disposer;
+    constructor(div: HTMLDivElement, td: HTMLTableCellElement, table: HTMLTableElement, isHorizontal: boolean, editor: IEditor, onBeforeInsert: () => void, onAfterInsert: () => void, onTableEditorCreated?: OnTableEditorCreatedCallback);
+    dispose(): void;
+    private insertTd;
+}

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

@@ -1,126 +1,133 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableInsertHandler = exports.createTableInserter = exports.VERTICAL_INSERTER_ID = exports.HORIZONTAL_INSERTER_ID = void 0;
-var createElement_1 = require("../../../pluginUtils/CreateElement/createElement");
-var getIntersectedRect_1 = require("../../../pluginUtils/Rect/getIntersectedRect");
-var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
-var roosterjs_content_model_api_1 = require("roosterjs-content-model-api");
-var INSERTER_COLOR = '#4A4A4A';
-var INSERTER_COLOR_DARK_MODE = 'white';
-var INSERTER_SIDE_LENGTH = 12;
-var INSERTER_BORDER_SIZE = 1;
-/**
- * @internal
- */
-exports.HORIZONTAL_INSERTER_ID = 'horizontalInserter';
-/**
- * @internal
- */
-exports.VERTICAL_INSERTER_ID = 'verticalInserter';
-/**
- * @internal
- */
-function createTableInserter(editor, td, table, isRTL, isHorizontal, onBeforeInsert, onAfterInserted, anchorContainer, onTableEditorCreated) {
-    var tdRect = (0, roosterjs_content_model_dom_1.normalizeRect)(td.getBoundingClientRect());
-    var viewPort = editor.getVisibleViewport();
-    var tableRect = table && viewPort ? (0, getIntersectedRect_1.getIntersectedRect)([table], [viewPort]) : null;
-    // set inserter position
-    if (tdRect && tableRect) {
-        var document_1 = td.ownerDocument;
-        var createElementData = getInsertElementData(isHorizontal, editor.isDarkMode(), isRTL, editor.getDOMHelper().getDomStyle('backgroundColor') || 'white');
-        var div = (0, createElement_1.createElement)(createElementData, document_1);
-        if (isHorizontal) {
-            // tableRect.left/right is used because the Inserter is always intended to be on the side
-            div.id = exports.HORIZONTAL_INSERTER_ID;
-            div.style.left = (isRTL
-                ? tableRect.right
-                : tableRect.left - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE)) + "px";
-            div.style.top = tdRect.bottom - 8 + "px";
-            div.firstChild.style.width = tableRect.right - tableRect.left + "px";
-        }
-        else {
-            div.id = exports.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, onBeforeInsert, onAfterInserted, onTableEditorCreated);
-        return { div: div, featureHandler: handler, node: td };
-    }
-    return null;
-}
-exports.createTableInserter = createTableInserter;
-/**
- * @internal
- * Exported for test only
- */
-var TableInsertHandler = /** @class */ (function () {
-    function TableInsertHandler(div, td, table, isHorizontal, editor, onBeforeInsert, onAfterInsert, onTableEditorCreated) {
-        var _this = this;
-        this.div = div;
-        this.td = td;
-        this.table = table;
-        this.isHorizontal = isHorizontal;
-        this.editor = editor;
-        this.onBeforeInsert = onBeforeInsert;
-        this.onAfterInsert = onAfterInsert;
-        this.insertTd = function () {
-            // Get cell coordinates
-            var columnIndex = _this.td.cellIndex;
-            var row = _this.td.parentElement && (0, roosterjs_content_model_dom_1.isElementOfType)(_this.td.parentElement, 'tr')
-                ? _this.td.parentElement
-                : undefined;
-            var rowIndex = row && row.rowIndex;
-            if ((row === null || row === void 0 ? void 0 : row.cells) == undefined || rowIndex == undefined) {
-                return;
-            }
-            _this.onBeforeInsert();
-            // Insert row or column
-            (0, roosterjs_content_model_api_1.formatTableWithContentModel)(_this.editor, 'editTablePlugin', function (tableModel) {
-                _this.isHorizontal
-                    ? (0, roosterjs_content_model_api_1.insertTableRow)(tableModel, 'insertBelow')
-                    : (0, roosterjs_content_model_api_1.insertTableColumn)(tableModel, 'insertRight');
-            }, // Select cell to make insertion
-            {
-                type: 'table',
-                firstColumn: columnIndex,
-                firstRow: rowIndex,
-                lastColumn: columnIndex,
-                lastRow: rowIndex,
-                table: _this.table,
-            });
-            _this.onAfterInsert();
-        };
-        this.div.addEventListener('click', this.insertTd);
-        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);
-        (_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.disposer = undefined;
-    };
-    return TableInsertHandler;
-}());
-exports.TableInsertHandler = TableInsertHandler;
-function getInsertElementData(isHorizontal, isDark, isRTL, backgroundColor) {
-    var inserterColor = isDark ? INSERTER_COLOR_DARK_MODE : INSERTER_COLOR;
-    var outerDivStyle = "position: fixed; width: " + INSERTER_SIDE_LENGTH + "px; height: " + INSERTER_SIDE_LENGTH + "px; font-size: 16px; color: black; line-height: 8px; vertical-align: middle; text-align: center; cursor: pointer; border: solid " + INSERTER_BORDER_SIZE + "px " + inserterColor + "; border-radius: 50%; background-color: " + backgroundColor;
-    var leftOrRight = isRTL ? 'right' : 'left';
-    var childBaseStyles = "position: absolute; box-sizing: border-box; background-color: " + backgroundColor + ";";
-    var childInfo = {
-        tag: 'div',
-        style: childBaseStyles +
-            (isHorizontal
-                ? leftOrRight + ": 12px; top: 5px; height: 3px; border-top: 1px solid " + inserterColor + "; border-bottom: 1px solid " + inserterColor + "; border-right: 1px solid " + inserterColor + "; border-left: 0px;"
-                : "left: 5px; top: 12px; width: 3px; border-left: 1px solid " + inserterColor + "; border-right: 1px solid " + inserterColor + "; border-bottom: 1px solid " + inserterColor + "; border-top: 0px;"),
-    };
-    return {
-        tag: 'div',
-        style: outerDivStyle,
-        children: [childInfo, '+'],
-    };
-}
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableInsertHandler = exports.createTableInserter = exports.VERTICAL_INSERTER_ID = exports.HORIZONTAL_INSERTER_ID = void 0;
+var createElement_1 = require("../../../pluginUtils/CreateElement/createElement");
+var getIntersectedRect_1 = require("../../../pluginUtils/Rect/getIntersectedRect");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+var roosterjs_content_model_api_1 = require("roosterjs-content-model-api");
+var INSERTER_COLOR = '#4A4A4A';
+var INSERTER_COLOR_DARK_MODE = 'white';
+var INSERTER_SIDE_LENGTH = 12;
+var INSERTER_BORDER_SIZE = 1;
+/**
+ * @internal
+ */
+exports.HORIZONTAL_INSERTER_ID = 'horizontalInserter';
+/**
+ * @internal
+ */
+exports.VERTICAL_INSERTER_ID = 'verticalInserter';
+/**
+ * @internal
+ */
+function createTableInserter(editor, td, table, isRTL, isHorizontal, onBeforeInsert, onAfterInserted, anchorContainer, onTableEditorCreated) {
+    var tdRect = (0, roosterjs_content_model_dom_1.normalizeRect)(td.getBoundingClientRect());
+    var viewPort = editor.getVisibleViewport();
+    if (tdRect && viewPort) {
+        var isOutsideTop = tdRect.top <= viewPort.top;
+        var isOutsideBottom = tdRect.bottom >= viewPort.bottom;
+        if (isOutsideBottom || isOutsideTop) {
+            return null;
+        }
+        var tableRect = table ? (0, getIntersectedRect_1.getIntersectedRect)([table], [viewPort]) : null;
+        // set inserter position
+        if (tableRect) {
+            var document_1 = td.ownerDocument;
+            var createElementData = getInsertElementData(isHorizontal, editor.isDarkMode(), isRTL, editor.getDOMHelper().getDomStyle('backgroundColor') || 'white');
+            var div = (0, createElement_1.createElement)(createElementData, document_1);
+            if (isHorizontal) {
+                // tableRect.left/right is used because the Inserter is always intended to be on the side
+                div.id = exports.HORIZONTAL_INSERTER_ID;
+                div.style.left = (isRTL
+                    ? tableRect.right
+                    : tableRect.left - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE)) + "px";
+                div.style.top = tdRect.bottom - 8 + "px";
+                div.firstChild.style.width = tableRect.right - tableRect.left + "px";
+            }
+            else {
+                div.id = exports.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, onBeforeInsert, onAfterInserted, onTableEditorCreated);
+            return { div: div, featureHandler: handler, node: td };
+        }
+    }
+    return null;
+}
+exports.createTableInserter = createTableInserter;
+/**
+ * @internal
+ * Exported for test only
+ */
+var TableInsertHandler = /** @class */ (function () {
+    function TableInsertHandler(div, td, table, isHorizontal, editor, onBeforeInsert, onAfterInsert, onTableEditorCreated) {
+        var _this = this;
+        this.div = div;
+        this.td = td;
+        this.table = table;
+        this.isHorizontal = isHorizontal;
+        this.editor = editor;
+        this.onBeforeInsert = onBeforeInsert;
+        this.onAfterInsert = onAfterInsert;
+        this.insertTd = function () {
+            // Get cell coordinates
+            var columnIndex = _this.td.cellIndex;
+            var row = _this.td.parentElement && (0, roosterjs_content_model_dom_1.isElementOfType)(_this.td.parentElement, 'tr')
+                ? _this.td.parentElement
+                : undefined;
+            var rowIndex = row && row.rowIndex;
+            if ((row === null || row === void 0 ? void 0 : row.cells) == undefined || rowIndex == undefined) {
+                return;
+            }
+            _this.onBeforeInsert();
+            // Insert row or column
+            (0, roosterjs_content_model_api_1.formatTableWithContentModel)(_this.editor, 'editTablePlugin', function (tableModel) {
+                _this.isHorizontal
+                    ? (0, roosterjs_content_model_api_1.insertTableRow)(tableModel, 'insertBelow')
+                    : (0, roosterjs_content_model_api_1.insertTableColumn)(tableModel, 'insertRight');
+            }, // Select cell to make insertion
+            {
+                type: 'table',
+                firstColumn: columnIndex,
+                firstRow: rowIndex,
+                lastColumn: columnIndex,
+                lastRow: rowIndex,
+                table: _this.table,
+            });
+            _this.onAfterInsert();
+        };
+        this.div.addEventListener('click', this.insertTd);
+        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);
+        (_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.disposer = undefined;
+    };
+    return TableInsertHandler;
+}());
+exports.TableInsertHandler = TableInsertHandler;
+function getInsertElementData(isHorizontal, isDark, isRTL, backgroundColor) {
+    var inserterColor = isDark ? INSERTER_COLOR_DARK_MODE : INSERTER_COLOR;
+    var outerDivStyle = "position: fixed; width: " + INSERTER_SIDE_LENGTH + "px; height: " + INSERTER_SIDE_LENGTH + "px; font-size: 16px; color: black; line-height: 8px; vertical-align: middle; text-align: center; cursor: pointer; border: solid " + INSERTER_BORDER_SIZE + "px " + inserterColor + "; border-radius: 50%; background-color: " + backgroundColor;
+    var leftOrRight = isRTL ? 'right' : 'left';
+    var childBaseStyles = "position: absolute; box-sizing: border-box; background-color: " + backgroundColor + ";";
+    var childInfo = {
+        tag: 'div',
+        style: childBaseStyles +
+            (isHorizontal
+                ? leftOrRight + ": 12px; top: 5px; height: 3px; border-top: 1px solid " + inserterColor + "; border-bottom: 1px solid " + inserterColor + "; border-right: 1px solid " + inserterColor + "; border-left: 0px;"
+                : "left: 5px; top: 12px; width: 3px; border-left: 1px solid " + inserterColor + "; border-right: 1px solid " + inserterColor + "; border-bottom: 1px solid " + inserterColor + "; border-top: 0px;"),
+    };
+    return {
+        tag: 'div',
+        style: outerDivStyle,
+        children: [childInfo, '+'],
+    };
+}
 //# sourceMappingURL=TableInserter.js.map

package/lib/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":"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","sourcesContent":["import { createElement } from '../../../pluginUtils/CreateElement/createElement';\r\nimport { getIntersectedRect } from '../../../pluginUtils/Rect/getIntersectedRect';\r\nimport { isElementOfType, normalizeRect } from 'roosterjs-content-model-dom';\r\nimport type { TableEditFeature } from './TableEditFeature';\r\nimport type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';\r\nimport {\r\n    formatTableWithContentModel,\r\n    insertTableColumn,\r\n    insertTableRow,\r\n} from 'roosterjs-content-model-api';\r\nimport type { CreateElementData } from '../../../pluginUtils/CreateElement/CreateElementData';\r\nimport type { Disposable } from '../../../pluginUtils/Disposable';\r\nimport type { IEditor } from 'roosterjs-content-model-types';\r\n\r\nconst INSERTER_COLOR = '#4A4A4A';\r\nconst INSERTER_COLOR_DARK_MODE = 'white';\r\nconst INSERTER_SIDE_LENGTH = 12;\r\nconst INSERTER_BORDER_SIZE = 1;\r\n/**\r\n * @internal\r\n */\r\nexport const HORIZONTAL_INSERTER_ID = 'horizontalInserter';\r\n/**\r\n * @internal\r\n */\r\nexport const VERTICAL_INSERTER_ID = 'verticalInserter';\r\n\r\n/**\r\n * @internal\r\n */\r\nexport function createTableInserter(\r\n    editor: IEditor,\r\n    td: HTMLTableCellElement,\r\n    table: HTMLTableElement,\r\n    isRTL: boolean,\r\n    isHorizontal: boolean,\r\n    onBeforeInsert: () => void,\r\n    onAfterInserted: () => void,\r\n    anchorContainer?: HTMLElement,\r\n    onTableEditorCreated?: OnTableEditorCreatedCallback\r\n): TableEditFeature | null {\r\n    const tdRect = normalizeRect(td.getBoundingClientRect());\r\n    const viewPort = editor.getVisibleViewport();\r\n    const tableRect = table && viewPort ? getIntersectedRect([table], [viewPort]) : null;\r\n\r\n    // set inserter position\r\n    if (tdRect && tableRect) {\r\n        const document = td.ownerDocument;\r\n        const createElementData = getInsertElementData(\r\n            isHorizontal,\r\n            editor.isDarkMode(),\r\n            isRTL,\r\n            editor.getDOMHelper().getDomStyle('backgroundColor') || 'white'\r\n        );\r\n\r\n        const div = createElement(createElementData, document) as HTMLDivElement;\r\n\r\n        if (isHorizontal) {\r\n            // tableRect.left/right is used because the Inserter is always intended to be on the side\r\n            div.id = HORIZONTAL_INSERTER_ID;\r\n            div.style.left = `${\r\n                isRTL\r\n                    ? tableRect.right\r\n                    : tableRect.left - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE)\r\n            }px`;\r\n            div.style.top = `${tdRect.bottom - 8}px`;\r\n            (div.firstChild as HTMLElement).style.width = `${tableRect.right - tableRect.left}px`;\r\n        } else {\r\n            div.id = VERTICAL_INSERTER_ID;\r\n            div.style.left = `${isRTL ? tdRect.left - 8 : tdRect.right - 8}px`;\r\n            // tableRect.top is used because the Inserter is always intended to be on top\r\n            div.style.top = `${\r\n                tableRect.top - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE)\r\n            }px`;\r\n            (div.firstChild as HTMLElement).style.height = `${tableRect.bottom - tableRect.top}px`;\r\n        }\r\n\r\n        (anchorContainer || document.body).appendChild(div);\r\n\r\n        const handler = new TableInsertHandler(\r\n            div,\r\n            td,\r\n            table,\r\n            isHorizontal,\r\n            editor,\r\n            onBeforeInsert,\r\n            onAfterInserted,\r\n            onTableEditorCreated\r\n        );\r\n\r\n        return { div, featureHandler: handler, node: td };\r\n    }\r\n\r\n    return null;\r\n}\r\n\r\n/**\r\n * @internal\r\n * Exported for test only\r\n */\r\nexport class TableInsertHandler implements Disposable {\r\n    private disposer: undefined | (() => void);\r\n    constructor(\r\n        private div: HTMLDivElement,\r\n        private td: HTMLTableCellElement,\r\n        private table: HTMLTableElement,\r\n        private isHorizontal: boolean,\r\n        private editor: IEditor,\r\n        private onBeforeInsert: () => void,\r\n        private onAfterInsert: () => void,\r\n        onTableEditorCreated?: OnTableEditorCreatedCallback\r\n    ) {\r\n        this.div.addEventListener('click', this.insertTd);\r\n        this.disposer = onTableEditorCreated?.(\r\n            isHorizontal ? 'HorizontalTableInserter' : 'VerticalTableInserter',\r\n            div\r\n        );\r\n    }\r\n\r\n    dispose() {\r\n        this.div.removeEventListener('click', this.insertTd);\r\n        this.disposer?.();\r\n        this.disposer = undefined;\r\n    }\r\n\r\n    private insertTd = () => {\r\n        // Get cell coordinates\r\n        const columnIndex = this.td.cellIndex;\r\n        const row =\r\n            this.td.parentElement && isElementOfType(this.td.parentElement, 'tr')\r\n                ? this.td.parentElement\r\n                : undefined;\r\n        const rowIndex = row && row.rowIndex;\r\n\r\n        if (row?.cells == undefined || rowIndex == undefined) {\r\n            return;\r\n        }\r\n\r\n        this.onBeforeInsert();\r\n\r\n        // Insert row or column\r\n        formatTableWithContentModel(\r\n            this.editor,\r\n            'editTablePlugin',\r\n            tableModel => {\r\n                this.isHorizontal\r\n                    ? insertTableRow(tableModel, 'insertBelow')\r\n                    : insertTableColumn(tableModel, 'insertRight');\r\n            }, // Select cell to make insertion\r\n            {\r\n                type: 'table',\r\n                firstColumn: columnIndex,\r\n                firstRow: rowIndex,\r\n                lastColumn: columnIndex,\r\n                lastRow: rowIndex,\r\n                table: this.table,\r\n            }\r\n        );\r\n\r\n        this.onAfterInsert();\r\n    };\r\n}\r\n\r\nfunction getInsertElementData(\r\n    isHorizontal: boolean,\r\n    isDark: boolean,\r\n    isRTL: boolean,\r\n    backgroundColor: string\r\n): CreateElementData {\r\n    const inserterColor = isDark ? INSERTER_COLOR_DARK_MODE : INSERTER_COLOR;\r\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}`;\r\n    const leftOrRight = isRTL ? 'right' : 'left';\r\n    const childBaseStyles = `position: absolute; box-sizing: border-box; background-color: ${backgroundColor};`;\r\n    const childInfo: CreateElementData = {\r\n        tag: 'div',\r\n        style:\r\n            childBaseStyles +\r\n            (isHorizontal\r\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;`\r\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;`),\r\n    };\r\n\r\n    return {\r\n        tag: 'div',\r\n        style: outerDivStyle,\r\n        children: [childInfo, '+'],\r\n    };\r\n}\r\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    onBeforeInsert: () => void,\n    onAfterInserted: () => void,\n    anchorContainer?: HTMLElement,\n    onTableEditorCreated?: OnTableEditorCreatedCallback\n): TableEditFeature | null {\n    const tdRect = normalizeRect(td.getBoundingClientRect());\n    const viewPort = editor.getVisibleViewport();\n    if (tdRect && viewPort) {\n        const isOutsideTop = tdRect.top <= viewPort.top;\n        const isOutsideBottom = tdRect.bottom >= viewPort.bottom;\n\n        if (isOutsideBottom || isOutsideTop) {\n            return null;\n        }\n        const tableRect = table ? getIntersectedRect([table], [viewPort]) : null;\n        // set inserter position\n        if (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 = `${\n                    tableRect.right - tableRect.left\n                }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 = `${\n                    tableRect.bottom - tableRect.top\n                }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                onBeforeInsert,\n                onAfterInserted,\n                onTableEditorCreated\n            );\n\n            return { div, featureHandler: handler, node: td };\n        }\n    }\n\n    return null;\n}\n\n/**\n * @internal\n * Exported for test only\n */\nexport class 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 onBeforeInsert: () => void,\n        private onAfterInsert: () => 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        this.onBeforeInsert();\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.onAfterInsert();\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/tableEdit/editors/features/TableMover.d.ts

@@ -1,53 +1,53 @@
-import type { TableEditFeature } from './TableEditFeature';
-import type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';
-import type { DOMSelection, IEditor, ReadonlyContentModelTable, 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
- */
-export declare function createTableMover(table: HTMLTableElement, editor: IEditor, isRTL: boolean, onFinishDragging: (table: HTMLTableElement) => void, onStart: () => void, onEnd: (disposeHandler: boolean) => 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: (disposeHandler: boolean) => void;
-    disableMovement?: boolean;
-}
-/**
- * @internal
- * Exported for testing
- */
-export interface TableMoverInitValue {
-    cmTable: ReadonlyContentModelTable | 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;
+import type { TableEditFeature } from './TableEditFeature';
+import type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';
+import type { DOMSelection, IEditor, ReadonlyContentModelTable, 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
+ */
+export declare function createTableMover(table: HTMLTableElement, editor: IEditor, isRTL: boolean, onFinishDragging: (table: HTMLTableElement) => void, onStart: () => void, onEnd: (disposeHandler: boolean) => 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: (disposeHandler: boolean) => void;
+    disableMovement?: boolean;
+}
+/**
+ * @internal
+ * Exported for testing
+ */
+export interface TableMoverInitValue {
+    cmTable: ReadonlyContentModelTable | 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;