@atlaskit/editor-plugin-table 7.5.4 → 7.5.6

package/src/commands/insert.ts

@@ -11,12 +11,7 @@ import {
   EVENT_TYPE,
   TABLE_OVERFLOW_CHANGE_TRIGGER,
 } from '@atlaskit/editor-common/analytics';
-import type {
-  Command,
-  EditorCommand,
-  GetEditorContainerWidth,
-  GetEditorFeatureFlags,
-} from '@atlaskit/editor-common/types';
+import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
@@ -50,10 +45,7 @@ function addColumnAtCustomStep(column: number) {
   };
 }
 
-export function addColumnAt(
-  getEditorContainerWidth: GetEditorContainerWidth,
-  tablePreserveWidth = false,
-) {
+export function addColumnAt(isTableScalingEnabled = false) {
   return (
     column: number,
     allowAddColumnCustomStep: boolean = false,
@@ -69,7 +61,9 @@ export function addColumnAt(
       const table = findTable(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = rescaleColumns(tablePreserveWidth)(table, view)(updatedTr);
+        updatedTr = rescaleColumns(isTableScalingEnabled)(table, view)(
+          updatedTr,
+        );
       }
 
       if (
@@ -94,10 +88,7 @@ export function addColumnAt(
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
 export const addColumnBefore =
-  (
-    getEditorContainerWidth: GetEditorContainerWidth,
-    tablePreserveWidth = false,
-  ): Command =>
+  (isTableScalingEnabled = false): Command =>
   (state, dispatch, view) => {
     const table = findTable(state.selection);
     if (!table) {
@@ -106,7 +97,7 @@ export const addColumnBefore =
     if (dispatch) {
       let rect = selectedRect(state);
       dispatch(
-        addColumnAt(getEditorContainerWidth, tablePreserveWidth)(
+        addColumnAt(isTableScalingEnabled)(
           rect.left,
           getAllowAddColumnCustomStep(state),
           view,
@@ -119,7 +110,7 @@ export const addColumnBefore =
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column after the column with the selection.
 export const addColumnAfter =
-  (getEditorContainerWidth: GetEditorContainerWidth): Command =>
+  (isTableScalingEnabled?: boolean): Command =>
   (state, dispatch, view) => {
     const table = findTable(state.selection);
     if (!table) {
@@ -128,7 +119,7 @@ export const addColumnAfter =
     if (dispatch) {
       let rect = selectedRect(state);
       dispatch(
-        addColumnAt(getEditorContainerWidth)(
+        addColumnAt(isTableScalingEnabled)(
           rect.right,
           getAllowAddColumnCustomStep(state),
           view,
@@ -139,13 +130,10 @@ export const addColumnAfter =
   };
 
 export const insertColumn =
-  (
-    getEditorContainerWidth: GetEditorContainerWidth,
-    tablePreserveWidth = false,
-  ) =>
+  (isTableScalingEnabled = false) =>
   (column: number): Command =>
   (state, dispatch, view) => {
-    let tr = addColumnAt(getEditorContainerWidth, tablePreserveWidth)(
+    let tr = addColumnAt(isTableScalingEnabled)(
       column,
       getAllowAddColumnCustomStep(state),
       view,
@@ -213,13 +201,13 @@ export const insertRow =
 
 export const createTable =
   (
+    isTableScalingEnabled?: boolean,
     isFullWidthModeEnabled?: boolean,
-    getEditorFeatureFlags?: GetEditorFeatureFlags,
   ): Command =>
   (state, dispatch) => {
     const table = createTableWithWidth(
+      isTableScalingEnabled,
       isFullWidthModeEnabled,
-      getEditorFeatureFlags,
     )(state.schema);
 
     if (dispatch) {
@@ -231,7 +219,7 @@ export const createTable =
 export const insertTableWithSize =
   (
     isFullWidthModeEnabled?: boolean,
-    getEditorFeatureFlags?: GetEditorFeatureFlags,
+    isTableScalingEnabled?: boolean,
     editorAnalyticsAPI?: EditorAnalyticsAPI,
   ) =>
   (
@@ -241,8 +229,8 @@ export const insertTableWithSize =
   ): EditorCommand => {
     return ({ tr }) => {
       const tableNode = createTableWithWidth(
+        isTableScalingEnabled,
         isFullWidthModeEnabled,
-        getEditorFeatureFlags,
         {
           rowsCount: rowsCount,
           colsCount: colsCount,

package/src/commands-with-analytics.ts

@@ -257,7 +257,7 @@ export const changeColumnWidthByStepWithAnalytics =
   (
     stepSize: number,
     getEditorContainerWidth: GetEditorContainerWidth,
-    tablePreserveWidth: boolean,
+    isTableScalingEnabled: boolean,
     inputMethod: INPUT_METHOD.SHORTCUT,
   ) =>
     withEditorAnalyticsAPI((state) => {
@@ -286,15 +286,14 @@ export const changeColumnWidthByStepWithAnalytics =
       changeColumnWidthByStep(
         stepSize,
         getEditorContainerWidth,
-        tablePreserveWidth,
+        isTableScalingEnabled,
       ),
     );
 
 export const insertColumnWithAnalytics =
   (
-    getEditorContainerWidth: GetEditorContainerWidth,
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-    tablePreserveWidth = false,
+    isTableScalingEnabled = false,
   ) =>
   (
     inputMethod:
@@ -321,9 +320,7 @@ export const insertColumnWithAnalytics =
         },
         eventType: EVENT_TYPE.TRACK,
       };
-    })(editorAnalyticsAPI)(
-      insertColumn(getEditorContainerWidth, tablePreserveWidth)(position),
-    );
+    })(editorAnalyticsAPI)(insertColumn(isTableScalingEnabled)(position));
 
 export const deleteRowsWithAnalytics =
   (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
@@ -364,7 +361,7 @@ export const deleteRowsWithAnalytics =
 export const deleteColumnsWithAnalytics =
   (
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-    tablePreserveWidth = false,
+    isTableScalingEnabled = false,
   ) =>
   (
     inputMethod:
@@ -392,7 +389,7 @@ export const deleteColumnsWithAnalytics =
         },
         eventType: EVENT_TYPE.TRACK,
       };
-    })(editorAnalyticsAPI)(deleteColumnsCommand(rect, tablePreserveWidth));
+    })(editorAnalyticsAPI)(deleteColumnsCommand(rect, isTableScalingEnabled));
 
 export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut =
   (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null): Command =>

package/src/event-handlers.ts

@@ -1,3 +1,5 @@
+import rafSchedule from 'raf-schd';
+
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {
   ACTION_SUBJECT,
@@ -47,7 +49,6 @@ import { getPluginState as getDragDropPluginState } from './pm-plugins/drag-and-
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
-import type { ElementContentRects } from './types';
 import {
   TableCssClassName as ClassName,
   RESIZE_HANDLE_AREA_DECORATION_GAP,
@@ -406,104 +407,119 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
   return false;
 };
 
-export const handleMouseMove = (
-  view: EditorView,
-  event: Event,
-  elementContentRects?: ElementContentRects,
-) => {
-  if (!(event.target instanceof HTMLElement)) {
-    return false;
-  }
-  const element = event.target;
-
-  if (
-    isColumnControlsDecorations(element) ||
-    isDragColumnFloatingInsertDot(element)
-  ) {
-    const { state, dispatch } = view;
-    const { insertColumnButtonIndex, isDragAndDropEnabled } =
-      getPluginState(state);
-    const [startIndex, endIndex] = getColumnOrRowIndex(element);
-
-    const positionColumn =
-      getMousePositionHorizontalRelativeByElement(
-        event as MouseEvent,
-        elementContentRects,
-        undefined,
-        isDragAndDropEnabled,
-      ) === 'right'
-        ? endIndex
-        : startIndex;
+// IMPORTANT: The mouse move handler has been setup with RAF schedule to avoid Reflows which will occur as some methods
+// need to access the mouse event offset position and also the target clientWidth vallue.
+const handleMouseMoveDebounce = rafSchedule(
+  (view: EditorView, event: MouseEvent, offsetX: number) => {
+    if (!(event.target instanceof HTMLElement)) {
+      return false;
+    }
+    const element = event.target;
 
-    if (positionColumn !== insertColumnButtonIndex) {
-      return showInsertColumnButton(positionColumn)(state, dispatch);
+    if (
+      isColumnControlsDecorations(element) ||
+      isDragColumnFloatingInsertDot(element)
+    ) {
+      const { state, dispatch } = view;
+      const { insertColumnButtonIndex } = getPluginState(state);
+      const [startIndex, endIndex] = getColumnOrRowIndex(element);
+
+      const positionColumn =
+        getMousePositionHorizontalRelativeByElement(
+          event,
+          offsetX,
+          undefined,
+        ) === 'right'
+          ? endIndex
+          : startIndex;
+
+      if (positionColumn !== insertColumnButtonIndex) {
+        return showInsertColumnButton(positionColumn)(state, dispatch);
+      }
     }
-  }
 
-  if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
-    const { state, dispatch } = view;
-    const { insertRowButtonIndex } = getPluginState(state);
-    const [startIndex, endIndex] = getColumnOrRowIndex(element);
+    if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
+      const { state, dispatch } = view;
+      const { insertRowButtonIndex } = getPluginState(state);
+      const [startIndex, endIndex] = getColumnOrRowIndex(element);
 
-    const positionRow =
-      getMousePositionVerticalRelativeByElement(event as MouseEvent) ===
-      'bottom'
-        ? endIndex
-        : startIndex;
+      const positionRow =
+        getMousePositionVerticalRelativeByElement(event) === 'bottom'
+          ? endIndex
+          : startIndex;
 
-    if (positionRow !== insertRowButtonIndex) {
-      return showInsertRowButton(positionRow)(state, dispatch);
+      if (positionRow !== insertRowButtonIndex) {
+        return showInsertRowButton(positionRow)(state, dispatch);
+      }
     }
-  }
-
-  if (!isResizeHandleDecoration(element) && isCell(element)) {
-    const positionColumn = getMousePositionHorizontalRelativeByElement(
-      event as MouseEvent,
-      elementContentRects,
-      RESIZE_HANDLE_AREA_DECORATION_GAP,
-    );
 
-    if (positionColumn !== null) {
-      const { state, dispatch } = view;
-      const { resizeHandleColumnIndex, resizeHandleRowIndex } =
-        getPluginState(state);
-
-      const isKeyboardResize = getBooleanFF(
-        'platform.editor.a11y-column-resizing_emcvz',
-      )
-        ? getPluginState(state).isKeyboardResize
-        : false;
-      const tableCell = closestElement(
-        element,
-        'td, th',
-      ) as HTMLTableCellElement;
-      const cellStartPosition = view.posAtDOM(tableCell, 0);
-      const rect = findCellRectClosestToPos(
-        state.doc.resolve(cellStartPosition),
+    if (!isResizeHandleDecoration(element) && isCell(element)) {
+      const positionColumn = getMousePositionHorizontalRelativeByElement(
+        event,
+        offsetX,
+        RESIZE_HANDLE_AREA_DECORATION_GAP,
       );
 
-      if (rect) {
-        const columnEndIndexTarget =
-          positionColumn === 'left' ? rect.left : rect.right;
-
-        const rowIndexTarget = rect.top;
-
-        if (
-          (columnEndIndexTarget !== resizeHandleColumnIndex ||
-            rowIndexTarget !== resizeHandleRowIndex ||
-            !hasResizeHandler({ target: element, columnEndIndexTarget })) &&
-          !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
-        ) {
-          return addResizeHandleDecorations(
-            rowIndexTarget,
-            columnEndIndexTarget,
-            true,
-          )(state, dispatch);
+      if (positionColumn !== null) {
+        const { state, dispatch } = view;
+        const { resizeHandleColumnIndex, resizeHandleRowIndex } =
+          getPluginState(state);
+
+        const isKeyboardResize = getBooleanFF(
+          'platform.editor.a11y-column-resizing_emcvz',
+        )
+          ? getPluginState(state).isKeyboardResize
+          : false;
+        const tableCell = closestElement(
+          element,
+          'td, th',
+        ) as HTMLTableCellElement;
+        const cellStartPosition = view.posAtDOM(tableCell, 0);
+        const rect = findCellRectClosestToPos(
+          state.doc.resolve(cellStartPosition),
+        );
+
+        if (rect) {
+          const columnEndIndexTarget =
+            positionColumn === 'left' ? rect.left : rect.right;
+
+          const rowIndexTarget = rect.top;
+
+          if (
+            (columnEndIndexTarget !== resizeHandleColumnIndex ||
+              rowIndexTarget !== resizeHandleRowIndex ||
+              !hasResizeHandler({ target: element, columnEndIndexTarget })) &&
+            !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
+          ) {
+            return addResizeHandleDecorations(
+              rowIndexTarget,
+              columnEndIndexTarget,
+              true,
+            )(state, dispatch);
+          }
         }
       }
     }
+
+    return false;
+  },
+);
+
+export const handleMouseMove = (view: EditorView, event: Event) => {
+  if (!(event.target instanceof HTMLElement)) {
+    return false;
   }
 
+  // NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
+  // within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
+  // a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
+  // in the deferred callback handler.
+  // Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
+  handleMouseMoveDebounce(
+    view,
+    event as MouseEvent,
+    browser.gecko ? (event as MouseEvent).offsetX : NaN,
+  );
   return false;
 };
 
@@ -538,7 +554,7 @@ export const handleCut = (
   newState: EditorState,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
   editorView?: EditorView,
-  tablePreserveWidth = false,
+  isTableScalingEnabled = false,
 ): Transaction => {
   const oldSelection = oldState.tr.selection;
   let { tr } = newState;
@@ -595,7 +611,7 @@ export const handleCut = (
               rect,
               getAllowAddColumnCustomStep(oldState),
               editorView,
-              tablePreserveWidth,
+              isTableScalingEnabled,
             )(tr);
           }
         }
@@ -614,20 +630,13 @@ export const isTableInFocus = (view: EditorView) => {
 };
 
 export const whenTableInFocus =
-  (
-    eventHandler: (
-      view: EditorView,
-      mouseEvent: Event,
-      elementContentRects?: ElementContentRects,
-    ) => boolean,
-    elementContentRects?: ElementContentRects,
-  ) =>
+  (eventHandler: (view: EditorView, mouseEvent: Event) => boolean) =>
   (view: EditorView, mouseEvent: Event): boolean => {
     if (!isTableInFocus(view)) {
       return false;
     }
 
-    return eventHandler(view, mouseEvent, elementContentRects);
+    return eventHandler(view, mouseEvent);
   };
 
 const trackCellLocation = (view: EditorView, mouseEvent: Event) => {
@@ -681,14 +690,7 @@ const trackCellLocation = (view: EditorView, mouseEvent: Event) => {
 };
 
 export const withCellTracking =
-  (
-    eventHandler: (
-      view: EditorView,
-      mouseEvent: Event,
-      elementContentRects?: ElementContentRects,
-    ) => boolean,
-    elementContentRects?: ElementContentRects,
-  ) =>
+  (eventHandler: (view: EditorView, mouseEvent: Event) => boolean) =>
   (view: EditorView, mouseEvent: Event): boolean => {
     if (
       getPluginState(view.state).isDragAndDropEnabled &&
@@ -696,5 +698,5 @@ export const withCellTracking =
     ) {
       trackCellLocation(view, mouseEvent);
     }
-    return eventHandler(view, mouseEvent, elementContentRects);
+    return eventHandler(view, mouseEvent);
   };

package/src/nodeviews/OverflowShadowsObserver.ts

@@ -1,3 +1,5 @@
+import rafSchedule from 'raf-schd';
+
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
@@ -82,11 +84,8 @@ export class OverflowShadowsObserver {
     if (!stickyCell) {
       return;
     }
-    const newStickyRowHeight = stickyCell.clientHeight + 1;
-    if (newStickyRowHeight! === this.stickyRowHeight) {
-      this.stickyRowHeight = newStickyRowHeight;
-      this.updateStickyShadows(this.stickyRowHeight);
-    }
+
+    this.updateStickyShadows();
   }
 
   private getStickyCell() {
@@ -96,8 +95,14 @@ export class OverflowShadowsObserver {
   }
 
   observeShadowSentinels = (isSticky?: boolean) => {
+    if (this.isSticky === isSticky) {
+      return;
+    }
+
     this.isSticky = !!isSticky;
 
+    // reset height
+    this.stickyRowHeight = 0;
     // update sticky shadows
     this.updateStickyShadowsHeightIfChanged();
 
@@ -126,7 +131,7 @@ export class OverflowShadowsObserver {
    * e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
    * reading it from sticky cell
    */
-  updateStickyShadows = (stickyRowHeight?: number) => {
+  updateStickyShadows = rafSchedule((stickyRowHeight?: number) => {
     if (!this.isSticky) {
       return;
     }
@@ -134,21 +139,27 @@ export class OverflowShadowsObserver {
     if (!stickyCell || !this.wrapper?.parentElement) {
       return;
     }
-    const heightStyleOrCompute = `${
-      stickyRowHeight || stickyCell.clientHeight + 1
-    }px`;
-    // Use getElementsByClassName here for a live node list to capture
-    // sticky shadows
-    const liveRightShadows =
-      this.wrapper?.parentElement?.getElementsByClassName(
-        `${ClassName.TABLE_RIGHT_SHADOW}`,
-      );
-    const liveLeftShadows = this.wrapper?.parentElement?.getElementsByClassName(
-      `${ClassName.TABLE_LEFT_SHADOW}`,
-    );
-    updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
-    updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
-  };
+
+    // Reflow Warning! - stickyCell.clientHeight
+    const newStickyRowHeight = stickyRowHeight || stickyCell.clientHeight + 1;
+
+    if (newStickyRowHeight !== this.stickyRowHeight) {
+      this.stickyRowHeight = newStickyRowHeight;
+      const heightStyleOrCompute = `${newStickyRowHeight}px`;
+      // Use getElementsByClassName here for a live node list to capture
+      // sticky shadows
+      const liveRightShadows =
+        this.wrapper?.parentElement?.getElementsByClassName(
+          `${ClassName.TABLE_RIGHT_SHADOW}`,
+        );
+      const liveLeftShadows =
+        this.wrapper?.parentElement?.getElementsByClassName(
+          `${ClassName.TABLE_LEFT_SHADOW}`,
+        );
+      updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
+      updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
+    }
+  });
 
   dispose() {
     if (this.tableIntersectionObserver) {

package/src/nodeviews/TableCell.ts

@@ -1,13 +1,9 @@
-import uuid from 'uuid';
-
 import type { CellDomAttrs } from '@atlaskit/adf-schema';
 import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 
-import { getPluginState } from '../pm-plugins/plugin-factory';
-
 import TableNodeView from './TableNodeViewBase';
 
 const DEFAULT_COL_SPAN = 1;
@@ -22,26 +18,10 @@ export default class TableCell
     view: EditorView,
     getPos: () => number | undefined,
     eventDispatcher: EventDispatcher,
-    private readonly observer?: ResizeObserver,
   ) {
     super(node, view, getPos, eventDispatcher);
-
-    const { pluginConfig, isDragAndDropEnabled } = getPluginState(view.state);
-
-    this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
-    this.isDragAndDropEnabled = !!isDragAndDropEnabled;
-
-    if (observer) {
-      this.contentDOM.id = uuid();
-      observer.observe(this.contentDOM);
-    }
   }
 
-  // @ts-ignore
-  private isStickyHeaderEnabled: boolean;
-  // @ts-ignore
-  private isDragAndDropEnabled: boolean;
-
   update(node: PMNode) {
     const didUpdate = this.updateNodeView(node);
     if (didUpdate) {
@@ -50,12 +30,6 @@ export default class TableCell
     return didUpdate;
   }
 
-  destroy() {
-    if (this.observer) {
-      this.observer.unobserve(this.contentDOM);
-    }
-  }
-
   private updateNodeView(node: PMNode) {
     if (this.node.type !== node.type) {
       return false;