diff --git a/packages/roosterjs-editor-plugins/lib/plugins/TableResize/TableResize.ts b/packages/roosterjs-editor-plugins/lib/plugins/TableResize/TableResize.ts index 43332912b44..9c227030cea 100644 --- a/packages/roosterjs-editor-plugins/lib/plugins/TableResize/TableResize.ts +++ b/packages/roosterjs-editor-plugins/lib/plugins/TableResize/TableResize.ts @@ -1,4 +1,4 @@ -import TableEditor, { TEF_CLASS_NAME } from './editors/TableEditor'; +import TableEditor from './editors/TableEditor'; import { normalizeRect, safeInstanceOf } from 'roosterjs-editor-dom'; import { CreateElementData, @@ -85,16 +85,9 @@ export default class TableResize implements EditorPlugin { case PluginEventType.ContentChanged: case PluginEventType.Scroll: case PluginEventType.ZoomChanged: - case PluginEventType.SelectionChanged: this.setTableEditor(null); this.invalidateTableRects(); break; - case PluginEventType.ExtractContentWithDom: - const divClass = 'div.' + TEF_CLASS_NAME; - e.clonedRoot.querySelectorAll(divClass).forEach(div => { - div.parentNode?.removeChild(div); - }); - break; } } diff --git a/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableEditor.ts b/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableEditor.ts index 820a2afb8d7..0b53439ddd2 100644 --- a/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableEditor.ts +++ b/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableEditor.ts @@ -24,13 +24,6 @@ const enum TOP_OR_SIDE { top = 0, side = 1, } - -/** - * @internal - * Class name for Table edit feature divs - */ -export const TEF_CLASS_NAME = '_roosterjsTableEditFeature'; - /** * @internal * diff --git a/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableResizer.ts b/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableResizer.ts index 30d14127772..f383ffcb5b4 100644 --- a/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableResizer.ts +++ b/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableResizer.ts @@ -2,7 +2,6 @@ import DragAndDropHelper from '../../../pluginUtils/DragAndDropHelper'; import TableEditFeature from './TableEditorFeature'; import { createElement, normalizeRect, VTable } from 'roosterjs-editor-dom'; import { CreateElementData } from 'roosterjs-editor-types'; -import { TEF_CLASS_NAME } from './TableEditor'; const TABLE_RESIZER_LENGTH = 12; const MIN_CELL_WIDTH = 30; @@ -25,8 +24,7 @@ export default function createTableResizer( const document = table.ownerDocument; const createElementData = { tag: 'div', - className: TEF_CLASS_NAME, - style: `position: absolute; cursor: ${ + style: `position: fixed; cursor: ${ isRTL ? 'ne' : 'nw' }-resize; user-select: none; border: 1px solid #808080`, }; @@ -37,7 +35,7 @@ export default function createTableResizer( div.style.width = `${TABLE_RESIZER_LENGTH}px`; div.style.height = `${TABLE_RESIZER_LENGTH}px`; - table.insertAdjacentElement('afterend', div); + document.body.appendChild(div); const context: DragAndDropContext = { isRTL, @@ -140,12 +138,13 @@ function onDragging( } function setResizeDivPosition(context: DragAndDropContext, trigger: HTMLElement) { - const { table, isRTL, zoomScale } = context; + const { table, isRTL } = context; const rect = normalizeRect(table.getBoundingClientRect()); if (rect) { - isRTL - ? (trigger.style.marginRight = `${(rect.right - rect.left) / zoomScale}px`) - : (trigger.style.marginLeft = `${(rect.right - rect.left) / zoomScale}px`); + trigger.style.top = `${rect.bottom}px`; + trigger.style.left = isRTL + ? `${rect.left - TABLE_RESIZER_LENGTH - 2}px` + : `${rect.right}px`; } } diff --git a/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableSelector.ts b/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableSelector.ts index 49e1e9769d7..35b507828a5 100644 --- a/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableSelector.ts +++ b/packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableSelector.ts @@ -1,14 +1,8 @@ import DragAndDropHandler from '../../../pluginUtils/DragAndDropHandler'; import DragAndDropHelper from '../../../pluginUtils/DragAndDropHelper'; import TableEditorFeature from './TableEditorFeature'; +import { createElement, normalizeRect, safeInstanceOf } from 'roosterjs-editor-dom'; import { CreateElementData, IEditor, Rect } from 'roosterjs-editor-types'; -import { TEF_CLASS_NAME } from './TableEditor'; -import { - createElement, - getComputedStyle, - normalizeRect, - safeInstanceOf, -} from 'roosterjs-editor-dom'; const TABLE_SELECTOR_LENGTH = 12; const TABLE_SELECTOR_ID = '_Table_Selector'; @@ -37,9 +31,7 @@ export default function createTableSelector( const document = table.ownerDocument; const createElementData = { tag: 'div', - className: TEF_CLASS_NAME, - style: - 'position: absolute; cursor: all-scroll; user-select: none; border: 1px solid #808080;', + style: 'position: fixed; cursor: all-scroll; user-select: none; border: 1px solid #808080', }; onShowHelperElement?.(createElementData, 'TableSelector'); @@ -49,13 +41,12 @@ export default function createTableSelector( div.id = TABLE_SELECTOR_ID; div.style.width = `${TABLE_SELECTOR_LENGTH}px`; div.style.height = `${TABLE_SELECTOR_LENGTH}px`; - table.insertAdjacentElement('beforebegin', div); + document.body.appendChild(div); const context: TableSelectorContext = { table, zoomScale, rect, - isRTL: getComputedStyle(table, 'direction') == 'rtl', }; setSelectorDivPosition(context, div); @@ -85,7 +76,6 @@ interface TableSelectorContext { table: HTMLTableElement; zoomScale: number; rect: Rect | null; - isRTL: boolean; } interface TableSelectorInitValue { @@ -119,12 +109,10 @@ class TableSelectorFeature extends DragAndDropHelper