npm - roosterjs-content-model-plugins - Versions diffs - 9.2.0 → 9.3.1 - Mend

roosterjs-content-model-plugins 9.2.0 → 9.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (118) hide show

package/lib/tableEdit/editors/features/CellResizer.js CHANGED Viewed

@@ -1,11 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createCellResizer = void 0;
+exports.createCellResizer = exports.VERTICAL_RESIZER_ID = exports.HORIZONTAL_RESIZER_ID = void 0;
 var tslib_1 = require("tslib");
 var createElement_1 = require("../../../pluginUtils/CreateElement/createElement");
 var DragAndDropHelper_1 = require("../../../pluginUtils/DragAndDrop/DragAndDropHelper");
 var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
 var CELL_RESIZER_WIDTH = 4;
+/**
+ * @internal
+ */
+exports.HORIZONTAL_RESIZER_ID = 'horizontalResizer';
+/**
+ * @internal
+ */
+exports.VERTICAL_RESIZER_ID = 'verticalResizer';
 /**
  * @internal
  */
@@ -147,7 +155,7 @@ function setHorizontalPosition(context, trigger) {
     var td = context.td;
     var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(td.getBoundingClientRect());
     if (rect) {
-        trigger.id = 'horizontalResizer';
+        trigger.id = exports.HORIZONTAL_RESIZER_ID;
         trigger.style.top = rect.bottom - CELL_RESIZER_WIDTH + 'px';
         trigger.style.left = rect.left + 'px';
         trigger.style.width = rect.right - rect.left + 'px';
@@ -158,7 +166,7 @@ function setVerticalPosition(context, trigger) {
     var td = context.td, isRTL = context.isRTL;
     var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(td.getBoundingClientRect());
     if (rect) {
-        trigger.id = 'verticalResizer';
+        trigger.id = exports.VERTICAL_RESIZER_ID;
         trigger.style.top = rect.top + 'px';
         trigger.style.left = (isRTL ? rect.left : rect.right) - CELL_RESIZER_WIDTH + 1 + 'px';
         trigger.style.width = CELL_RESIZER_WIDTH + 'px';

package/lib/tableEdit/editors/features/CellResizer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CellResizer.js","sourceRoot":"","sources":["../../../../../../packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts"],"names":[],"mappings":";;;;AAAA,kFAAiF;AACjF,wFAAuF;AACvF,2EAMqC;AAKrC,IAAM,kBAAkB,GAAG,CAAC,CAAC;AAE7B;;GAEG;AACH,SAAgB,iBAAiB,CAC7B,MAAe,EACf,EAAwB,EACxB,KAAuB,EACvB,KAAc,EACd,YAAqB,EACrB,OAAmB,EACnB,KAAkB,EAClB,eAA6B;IAE7B,IAAM,QAAQ,GAAG,EAAE,CAAC,aAAa,CAAC;IAClC,IAAM,iBAAiB,GAAG;QACtB,GAAG,EAAE,KAAK;QACV,KAAK,EAAE,+BAA4B,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,gCAA4B;KAC9F,CAAC;IACF,IAAM,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC,kBAAkB,EAAE,CAAC;IAE7D,IAAM,GAAG,GAAG,IAAA,6BAAa,EAAC,iBAAiB,EAAE,QAAQ,CAAmB,CAAC;IAEzE,CAAC,eAAe,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAEpD,IAAM,OAAO,GAAuB,EAAE,MAAM,QAAA,EAAE,EAAE,IAAA,EAAE,KAAK,OAAA,EAAE,KAAK,OAAA,EAAE,SAAS,WAAA,EAAE,OAAO,SAAA,EAAE,CAAC;IACrF,IAAM,WAAW,GAAG,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAC/E,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAE1B,IAAM,OAAO,GAAiE;QAC1E,WAAW,aAAA;QACX,iEAAiE;QACjE,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,kBAAkB;QACpE,SAAS,EAAE,KAAK;KACnB,CAAC;IAEF,IAAM,cAAc,GAAG,IAAI,qCAAiB,CACxC,GAAG,EACH,OAAO,EACP,WAAW,EACX,OAAO,EACP,SAAS,EACT,MAAM,CAAC,cAAc,EAAE,CAAC,gBAAgB,CAC3C,CAAC;IAEF,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,KAAA,EAAE,cAAc,gBAAA,EAAE,CAAC;AAC7C,CAAC;AA1CD,8CA0CC;AAmBD,SAAS,WAAW,CAAC,OAA2B,EAAE,KAAiB;IACvD,IAAA,EAAE,GAAc,OAAO,GAArB,EAAE,OAAO,GAAK,OAAO,QAAZ,CAAa;IAChC,IAAM,IAAI,GAAG,IAAA,2CAAa,EAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC,CAAC;IAEvD,uBAAuB;IACvB,IAAM,WAAW,GAAG,EAAE,CAAC,SAAS,CAAC;IACjC,IAAM,GAAG,GACL,EAAE,CAAC,aAAa,IAAI,IAAA,6CAAe,EAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/F,IAAM,QAAQ,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,CAAC;IAE/B,IAAI,QAAQ,IAAI,SAAS,EAAE;QACvB,OAAO;YACH,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,SAAS;YACvB,SAAS,EAAE,SAAS;YACpB,eAAe,EAAE,CAAC,CAAC;YACnB,SAAS,EAAE,EAAE;SAChB,CAAC,CAAC,kBAAkB;KACxB;IAEO,IAAA,MAAM,GAAY,OAAO,OAAnB,EAAE,KAAK,GAAK,OAAO,MAAZ,CAAa;IAElC,wBAAwB;IACxB,IAAM,SAAS,GAAG,MAAM,CAAC,eAAe,EAAE,CAAC;IAE3C,iCAAiC;IACjC,MAAM,CAAC,eAAe,CAAC;QACnB,IAAI,EAAE,OAAO;QACb,WAAW,EAAE,CAAC;QACd,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,CAAC;QACb,OAAO,EAAE,CAAC;QACV,KAAK,EAAE,KAAK;KACf,CAAC,CAAC;IAEH,8BAA8B;IAC9B,IAAM,OAAO,GAAG,IAAA,mDAAqB,EAAC,MAAM,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAErF,oBAAoB;IACpB,MAAM,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IAElC,IAAI,IAAI,IAAI,OAAO,EAAE;QACjB,OAAO,EAAE,CAAC;QAEV,OAAO;YACH,OAAO,SAAA;YACP,YAAY,EAAE,WAAW;YACzB,SAAS,EAAE,QAAQ;YACnB,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM;YAC9C,SAAS,qDAAM,OAAO,CAAC,MAAM,SAAC;SACjC,CAAC;KACL;SAAM;QACH,OAAO;YACH,OAAO,SAAA;YACP,YAAY,EAAE,SAAS;YACvB,SAAS,EAAE,SAAS;YACpB,eAAe,EAAE,CAAC,CAAC;YACnB,SAAS,EAAE,EAAE;SAChB,CAAC,CAAC,kBAAkB;KACxB;AACL,CAAC;AAED,SAAS,oBAAoB,CACzB,OAA2B,EAC3B,KAAiB,EACjB,SAA+B,EAC/B,MAAc,EACd,MAAc;IAEN,IAAA,KAAK,GAAK,OAAO,MAAZ,CAAa;IAClB,IAAA,OAAO,GAAiC,SAAS,QAA1C,EAAE,SAAS,GAAsB,SAAS,UAA/B,EAAE,eAAe,GAAK,SAAS,gBAAd,CAAe;IAE1D,gDAAgD;IAChD,IAAI,OAAO,IAAI,SAAS,IAAI,SAAS,EAAE;QACnC,2BAA2B;QAC3B,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,CAAC,CAAC,GAAG,MAAM,CAAC;QAEjE,sBAAsB;QACtB,IAAA,4CAAc,EAAC,OAAO,CAAC,CAAC;QAExB,+CAA+C;QAC/C,IAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE;YAClD,IAAM,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC/B,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC;SAC3D;QAED,OAAO,IAAI,CAAC;KACf;SAAM;QACH,OAAO,KAAK,CAAC;KAChB;AACL,CAAC;AAED,SAAS,kBAAkB,CACvB,OAA2B,EAC3B,KAAiB,EACjB,SAA+B,EAC/B,MAAc;IAEN,IAAA,KAAK,GAAY,OAAO,MAAnB,EAAE,KAAK,GAAK,OAAO,MAAZ,CAAa;IACzB,IAAA,OAAO,GAA8B,SAAS,QAAvC,EAAE,YAAY,GAAgB,SAAS,aAAzB,EAAE,SAAS,GAAK,SAAS,UAAd,CAAe;IAEvD,gDAAgD;IAChD,IAAI,OAAO,IAAI,YAAY,IAAI,SAAS,EAAE;QACtC,2BAA2B;QAC3B,IAAM,UAAU,GAAG,YAAY,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAC7D,IAAM,MAAM,GAAG,MAAM,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACzC,0BAA0B;QAC1B,IAAI,UAAU,EAAE;YACZ,+BAA+B;YAC/B,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,GAAG,MAAM,CAAC;SACnE;aAAM;YACH,wBAAwB;YACxB,IAAM,YAAY,GAAG,SAAS,CAAC,YAAY,CAAC,GAAG,MAAM,CAAC;YACtD,IAAM,gBAAgB,GAAG,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC;YAC9D,IACI,YAAY,GAAG,0DAA4B;gBAC3C,gBAAgB,GAAG,0DAA4B,EACjD;gBACE,OAAO,KAAK,CAAC;aAChB;YACD,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,GAAG,YAAY,CAAC;YAC5C,OAAO,CAAC,MAAM,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,gBAAgB,CAAC;SACvD;QAED,sBAAsB;QACtB,IAAA,4CAAc,EAAC,OAAO,CAAC,CAAC;QAExB,+CAA+C;QAC/C,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE;YAC9C,IAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACjC,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE;gBAClD,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;aAChE;SACJ;QAED,OAAO,IAAI,CAAC;KACf;SAAM;QACH,OAAO,KAAK,CAAC;KAChB;AACL,CAAC;AAED,SAAS,qBAAqB,CAAC,OAA2B,EAAE,OAAoB;IACpE,IAAA,EAAE,GAAK,OAAO,GAAZ,CAAa;IACvB,IAAM,IAAI,GAAG,IAAA,2CAAa,EAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC,CAAC;IACvD,IAAI,IAAI,EAAE;QACN,OAAO,CAAC,EAAE,GAAG,mBAAmB,CAAC;QACjC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,kBAAkB,GAAG,IAAI,CAAC;QAC5D,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACtC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACpD,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,kBAAkB,GAAG,IAAI,CAAC;KACpD;AACL,CAAC;AAED,SAAS,mBAAmB,CAAC,OAA2B,EAAE,OAAoB;IAClE,IAAA,EAAE,GAAY,OAAO,GAAnB,EAAE,KAAK,GAAK,OAAO,MAAZ,CAAa;IAC9B,IAAM,IAAI,GAAG,IAAA,2CAAa,EAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC,CAAC;IACvD,IAAI,IAAI,EAAE;QACN,OAAO,CAAC,EAAE,GAAG,iBAAiB,CAAC;QAC/B,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;QACpC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC;QACtF,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,kBAAkB,GAAG,IAAI,CAAC;QAChD,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;KACxD;AACL,CAAC","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"]}
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 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/tableEdit/editors/features/TableEditFeature.d.ts CHANGED Viewed

@@ -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/tableEdit/editors/features/TableEditFeature.js CHANGED Viewed

@@ -4,13 +4,13 @@ exports.disposeTableEditFeature = void 0;
 /**
  * @internal
  */
-function disposeTableEditFeature(resizer) {
+function disposeTableEditFeature(feature) {
     var _a, _b, _c;
-    if (resizer) {
-        (_a = resizer.featureHandler) === null || _a === void 0 ? void 0 : _a.dispose();
-        resizer.featureHandler = null;
-        (_c = (_b = resizer.div) === null || _b === void 0 ? void 0 : _b.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(resizer.div);
-        resizer.div = 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;
     }
 }
 exports.disposeTableEditFeature = disposeTableEditFeature;

package/lib/tableEdit/editors/features/TableEditFeature.js.map CHANGED Viewed

	@@ -1 +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';\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~~.featureHandler?.dispose();\n ~~resizer~~.featureHandler = null;\n ~~resizer~~.div?.parentNode?.removeChild(~~resizer~~.div);\n ~~resizer~~.div = null;\n }\n}\n"]}
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';\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 ADDED Viewed

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

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

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

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

@@ -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/tableEdit/editors/features/TableInserter.d.ts CHANGED Viewed

@@ -1,6 +1,14 @@
-import type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';
 import type { TableEditFeature } from './TableEditFeature';
+import type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';
 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
  */

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createTableInserter = void 0;
+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");
@@ -9,6 +9,14 @@ 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
  */
@@ -23,7 +31,7 @@ function createTableInserter(editor, td, table, isRTL, isHorizontal, onInsert, a
         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 = 'horizontalInserter';
+            div.id = exports.HORIZONTAL_INSERTER_ID;
             div.style.left = (isRTL
                 ? tableRect.right
                 : tableRect.left - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE)) + "px";
@@ -31,7 +39,7 @@ function createTableInserter(editor, td, table, isRTL, isHorizontal, onInsert, a
             div.firstChild.style.width = tableRect.right - tableRect.left + "px";
         }
         else {
-            div.id = 'verticalInserter';
+            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";

package/lib/tableEdit/editors/features/TableInserter.js.map CHANGED Viewed

	@@ -1 +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';\nimport { getIntersectedRect } from '../../../pluginUtils/Rect/getIntersectedRect';\nimport { isElementOfType, normalizeRect } from 'roosterjs-content-model-dom';\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 { 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 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 = '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 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"]}
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';\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/tableEdit/editors/features/TableMover.d.ts CHANGED Viewed

@@ -1,9 +1,53 @@
-import type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';
-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, contentDiv?: EventTarget | null, anchorContainer?: HTMLElement, onTableEditorCreated?: OnTableEditorCreatedCallback): 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/tableEdit/editors/features/TableMover.js CHANGED Viewed

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