Optimise content model table fetching for Table Edit Plugins (#2656)

* optimise cmTable fetching * create getCMTableFromTable
microsoft · May 24, 2024 · 40dec70 · 40dec70
1 parent 2b74dcb
commit 40dec70
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 59 deletions.
diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts
@@ -1,10 +1,10 @@
 import { createElement } from '../../../pluginUtils/CreateElement/createElement';
 import { DragAndDropHelper } from '../../../pluginUtils/DragAndDrop/DragAndDropHelper';
+import { getCMTableFromTable } from '../utils/getTableFromContentModel';
 import type { TableEditFeature } from './TableEditFeature';
 import {
     isElementOfType,
     normalizeRect,
-    getFirstSelectedTable,
     MIN_ALLOWED_TABLE_CELL_WIDTH,
     normalizeTable,
 } from 'roosterjs-content-model-dom';
@@ -107,24 +107,8 @@ function onDragStart(context: DragAndDropContext, event: MouseEvent): DragAndDro
 
     const { editor, table } = context;
 
-    // Get current selection
-    const selection = editor.getDOMSelection();
-
-    // Select first cell of the table
-    editor.setDOMSelection({
-        type: 'table',
-        firstColumn: 0,
-        firstRow: 0,
-        lastColumn: 0,
-        lastRow: 0,
-        table: table,
-    });
-
-    // Get the table content model
-    const cmTable = getFirstSelectedTable(editor.getContentModelCopy('disconnected'))[0];
-
-    // Restore selection
-    editor.setDOMSelection(selection);
+    // Get Table block in content model
+    const cmTable = getCMTableFromTable(editor, table);
 
     if (rect && cmTable) {
         onStart();

diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableMover.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableMover.ts
@@ -1,6 +1,7 @@
 import { createElement } from '../../../pluginUtils/CreateElement/createElement';
 import { DragAndDropHelper } from '../../../pluginUtils/DragAndDrop/DragAndDropHelper';
 import { formatInsertPointWithContentModel } from 'roosterjs-content-model-api';
+import { getCMTableFromTable } from '../utils/getTableFromContentModel';
 import type { TableEditFeature } from './TableEditFeature';
 import type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';
 import type { DragAndDropHandler } from '../../../pluginUtils/DragAndDrop/DragAndDropHandler';
@@ -234,24 +235,11 @@ export function onDragStart(context: TableMoverContext): TableMoverInitValue {
     tableRect.style.left = `${trect.left}px`;
     div.parentNode?.appendChild(tableRect);
 
-    // Get current selection
+    // Get drag start selection
     const 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
-    const [cmTable] = getFirstSelectedTable(editor.getContentModelCopy('disconnected'));
-
-    // Restore selection
-    editor.setDOMSelection(initialSelection);
+    // Get Table block in content model
+    const cmTable = getCMTableFromTable(editor, table);
 
     return {
         cmTable,

diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts
@@ -1,13 +1,9 @@
 import { createElement } from '../../../pluginUtils/CreateElement/createElement';
 import { DragAndDropHelper } from '../../../pluginUtils/DragAndDrop/DragAndDropHelper';
+import { getCMTableFromTable } from '../utils/getTableFromContentModel';
+import { isNodeOfType, normalizeRect, normalizeTable } from 'roosterjs-content-model-dom';
 import type { TableEditFeature } from './TableEditFeature';
 import type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';
-import {
-    getFirstSelectedTable,
-    isNodeOfType,
-    normalizeRect,
-    normalizeTable,
-} from 'roosterjs-content-model-dom';
 import type { ContentModelTable, IEditor, Rect } from 'roosterjs-content-model-types';
 import type { DragAndDropHandler } from '../../../pluginUtils/DragAndDrop/DragAndDropHandler';
 
@@ -129,24 +125,8 @@ function onDragStart(context: DragAndDropContext, event: MouseEvent) {
 
     const { editor, table } = context;
 
-    // Get current selection
-    const selection = editor.getDOMSelection();
-
-    // Select first cell of the table
-    editor.setDOMSelection({
-        type: 'table',
-        firstColumn: 0,
-        firstRow: 0,
-        lastColumn: 0,
-        lastRow: 0,
-        table: table,
-    });
-
-    // Get the table content model
-    const cmTable = getFirstSelectedTable(editor.getContentModelCopy('disconnected'))[0];
-
-    // Restore selection
-    editor.setDOMSelection(selection);
+    // Get Table block in content model
+    const cmTable = getCMTableFromTable(editor, table);
 
     // Save original widths and heights
     const heights: number[] = [];

diff --git a/...s/roosterjs-content-model-plugins/lib/tableEdit/editors/utils/getTableFromContentModel.ts b/...s/roosterjs-content-model-plugins/lib/tableEdit/editors/utils/getTableFromContentModel.ts
@@ -0,0 +1,29 @@
+import { getFirstSelectedTable } from 'roosterjs-content-model-dom';
+import type { ContentModelTable, IEditor } from 'roosterjs-content-model-types';
+
+/**
+ * @internal
+ * Get ContentModelTable from a table element if it is present in the content model
+ */
+export function getCMTableFromTable(editor: IEditor, table: HTMLTableElement) {
+    let cmTable: ContentModelTable | undefined;
+
+    editor.formatContentModel(
+        model => {
+            [cmTable] = getFirstSelectedTable(model);
+            return false;
+        },
+        {
+            selectionOverride: {
+                type: 'table',
+                firstColumn: 0,
+                firstRow: 0,
+                lastColumn: 0,
+                lastRow: 0,
+                table: table,
+            },
+        }
+    );
+
+    return cmTable;
+}