Revert "Fix table selector and resizer (#1919)"

This reverts commit 5be7a7d.
microsoft · Jun 30, 2023 · 2171986 · 2171986
1 parent 8ee97a1
commit 2171986
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<TableSelectorContext, Table
 }
 
 function setSelectorDivPosition(context: TableSelectorContext, trigger: HTMLElement) {
-    const { rect, zoomScale } = context;
+    const { rect } = context;
     if (rect) {
-        trigger.style.marginTop = `${-TABLE_SELECTOR_LENGTH - 1}px`;
-        context.isRTL
-            ? (trigger.style.marginRight = `${(rect.right - rect.left) / zoomScale}px`)
-            : (trigger.style.marginLeft = `${-TABLE_SELECTOR_LENGTH - 1}px`);
+        trigger.style.top = `${rect.top - TABLE_SELECTOR_LENGTH}px`;
+        trigger.style.left = `${rect.left - TABLE_SELECTOR_LENGTH - 2}px`;
     }
 }