From 40dec7004f1079646299eaf3c3b354ffdfd75d37 Mon Sep 17 00:00:00 2001 From: Andres-CT98 <107568016+Andres-CT98@users.noreply.github.com> Date: Fri, 24 May 2024 12:50:01 -0600 Subject: [PATCH] Optimise content model table fetching for Table Edit Plugins (#2656) * optimise cmTable fetching * create getCMTableFromTable --- .../tableEdit/editors/features/CellResizer.ts | 22 ++------------ .../tableEdit/editors/features/TableMover.ts | 20 +++---------- .../editors/features/TableResizer.ts | 28 +++--------------- .../editors/utils/getTableFromContentModel.ts | 29 +++++++++++++++++++ 4 files changed, 40 insertions(+), 59 deletions(-) create mode 100644 packages/roosterjs-content-model-plugins/lib/tableEdit/editors/utils/getTableFromContentModel.ts 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 index 982bdac877e..759025c1493 100644 --- 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 index 6af1d7482a0..cacc513e56e 100644 --- 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 index 4ee986a1bdc..9e256cad719 100644 --- 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/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/utils/getTableFromContentModel.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/utils/getTableFromContentModel.ts new file mode 100644 index 00000000000..cfc21aa6585 --- /dev/null +++ b/packages/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; +}