@atlaskit/editor-plugin-table 0.2.2 → 0.2.3

package/src/__tests__/unit/toolbar.ts

@@ -25,9 +25,17 @@ import { canMergeCells } from '../../plugins/table/transforms';
 import { Rect } from '@atlaskit/editor-tables/table-map';
 import tablePlugin from '../../plugins/table';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
+import { getMergedCellsPositions } from '../../plugins/table/utils';
+import { getNewResizeStateFromSelectedColumns } from '../../plugins/table/pm-plugins/table-resizing/utils/resize-state';
 
 jest.mock('@atlaskit/editor-tables/utils');
 jest.mock('../../plugins/table/transforms');
+jest.mock('../../plugins/table/utils');
+jest.mock('../../plugins/table/pm-plugins/table-resizing/utils/resize-state');
+
+(getMergedCellsPositions as Function as jest.Mock<{}>).mockImplementation(
+  () => () => [],
+);
 
 const formatMessage: (t: unknown) => string = (id) => 'Lorem ipsum';
 const ctx = { formatMessage };
@@ -138,13 +146,21 @@ describe('getToolbarMenuConfig', () => {
 
 describe('getToolbarCellOptionsConfig', () => {
   const createEditor = createProsemirrorEditorFactory();
-  const {
-    editorView: { state },
-  } = createEditor({
+  const { editorView } = createEditor({
     doc: doc(table()(row(td()(p('1{cursor}'))))),
-    preset: new Preset<LightEditorPlugin>().add(tablePlugin),
+    preset: new Preset<LightEditorPlugin>().add([
+      tablePlugin,
+      {
+        tableOptions: {
+          allowDistributeColumns: true,
+          allowColumnResizing: true,
+          allowColumnSorting: true,
+        },
+      },
+    ]),
     pluginKey,
   });
+  const { state } = editorView;
   const getEditorContainerWidth = () => ({ width: 500 });
 
   const formatMessage: (t: { id: string }) => string = (message) =>
@@ -152,6 +168,7 @@ describe('getToolbarCellOptionsConfig', () => {
   const rect = new Rect(1, 1, 1, 1);
   const cellOptionsMenu = getToolbarCellOptionsConfig(
     state,
+    editorView,
     rect,
     {
       formatMessage,
@@ -193,6 +210,21 @@ describe('getToolbarCellOptionsConfig', () => {
       disabled: true,
     });
     expect(items[6]).toMatchObject({
+      title: 'fabric.editor.distributeColumns',
+      selected: false,
+      disabled: true,
+    });
+    expect(items[7]).toMatchObject({
+      title: 'fabric.editor.sortColumnASC',
+      selected: false,
+      disabled: false,
+    });
+    expect(items[8]).toMatchObject({
+      title: 'fabric.editor.sortColumnDESC',
+      selected: false,
+      disabled: false,
+    });
+    expect(items[9]).toMatchObject({
       title: 'fabric.editor.clearCells',
       selected: false,
       disabled: false,
@@ -206,6 +238,7 @@ describe('getToolbarCellOptionsConfig', () => {
     //
     const cellOptionsMenu = getToolbarCellOptionsConfig(
       state,
+      editorView,
       rect,
       {
         formatMessage,
@@ -230,6 +263,7 @@ describe('getToolbarCellOptionsConfig', () => {
     //
     const cellOptionsMenu = getToolbarCellOptionsConfig(
       state,
+      editorView,
       rect,
       {
         formatMessage,
@@ -246,4 +280,131 @@ describe('getToolbarCellOptionsConfig', () => {
       disabled: false,
     });
   });
+
+  it('should disable sorting when merged cells are detected', () => {
+    (getMergedCellsPositions as Function as jest.Mock<{}>).mockImplementation(
+      () => [1, 2, 3],
+    );
+
+    const cellOptionsMenu = getToolbarCellOptionsConfig(
+      state,
+      editorView,
+      rect,
+      {
+        formatMessage,
+      },
+      getEditorContainerWidth,
+      undefined,
+    );
+
+    const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
+    const sortItems = items.filter((item) =>
+      item.id?.startsWith('editor.table.sortColumn'),
+    );
+
+    const isDisabled = sortItems.every((item) => item.disabled);
+    const hasTooltip = sortItems.every((item) => item.tooltip);
+
+    expect(isDisabled).toBeTruthy();
+    expect(hasTooltip).toBeTruthy();
+  });
+
+  it('should allow sorting when there are no merged cells detected', () => {
+    (getMergedCellsPositions as Function as jest.Mock<{}>).mockImplementation(
+      () => [],
+    );
+
+    const cellOptionsMenu = getToolbarCellOptionsConfig(
+      state,
+      editorView,
+      rect,
+      {
+        formatMessage,
+      },
+      getEditorContainerWidth,
+      undefined,
+    );
+
+    const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
+    const sortItems = items.filter((item) =>
+      item.id?.startsWith('editor.table.sortColumn'),
+    );
+
+    const isDisabled = sortItems.every((item) => item.disabled);
+    const hasTooltip = sortItems.every((item) => item.tooltip);
+
+    expect(isDisabled).toBeFalsy();
+    expect(hasTooltip).toBeFalsy();
+  });
+
+  it('should disable distribute columns when no resize detected', () => {
+    (
+      getNewResizeStateFromSelectedColumns as Function as jest.Mock<{}>
+    ).mockImplementation(() => ({ changed: false }));
+
+    const cellOptionsMenu = getToolbarCellOptionsConfig(
+      state,
+      editorView,
+      rect,
+      {
+        formatMessage,
+      },
+      getEditorContainerWidth,
+      undefined,
+    );
+
+    const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
+    const distributeColumns = items.filter((item) =>
+      item.id?.startsWith('editor.table.distributeColumns'),
+    );
+
+    const isDisabled = distributeColumns.every((item) => item.disabled);
+    expect(isDisabled).toBeTruthy();
+  });
+
+  it('should allow distribute columns when resize detected', () => {
+    (
+      getNewResizeStateFromSelectedColumns as Function as jest.Mock<{}>
+    ).mockImplementation(() => ({ changed: true }));
+
+    const cellOptionsMenu = getToolbarCellOptionsConfig(
+      state,
+      editorView,
+      rect,
+      {
+        formatMessage,
+      },
+      getEditorContainerWidth,
+      undefined,
+    );
+
+    const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
+    const distributeColumns = items.filter((item) =>
+      item.id?.startsWith('editor.table.distributeColumns'),
+    );
+
+    const isDisabled = distributeColumns.every((item) => item.disabled);
+    expect(isDisabled).toBeFalsy();
+  });
+
+  it('should disable distribute columns when editorView is undefined', () => {
+    const cellOptionsMenu = getToolbarCellOptionsConfig(
+      state,
+      undefined,
+      rect,
+      {
+        formatMessage,
+      },
+      getEditorContainerWidth,
+      undefined,
+    );
+
+    const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
+    const distributeColumns = items.filter((item) =>
+      item.id?.startsWith('editor.table.distributeColumns'),
+    );
+
+    const isDisabled = distributeColumns.every((item) => item.disabled);
+    expect(isDisabled).toBeTruthy();
+  });
 });

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-row-menu-item-should-remove-the-table-row-on-click-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ae2a52bca4841381cd728c6e22d70aebd6a58177ce5123fedb725d5ac2aa80ac
-size 13915
+oid sha256:5cd747accdc40bfc52f004ff689a3df00173ee2f27d15c68f3a76172c11050fd
+size 13990

package/src/plugins/table/commands/hover.ts

@@ -164,6 +164,7 @@ export const clearHoverSelection = () =>
         [],
         TableDecorations.ALL_CONTROLS_HOVER,
       ),
+      isInDanger: false,
     },
   }));
 

package/src/plugins/table/event-handlers.ts

@@ -298,7 +298,6 @@ export const handleMouseMove =
   (
     view: EditorView,
     event: Event,
-    tableCellOptimization?: boolean,
     elementContentRects?: ElementContentRects,
   ) => {
     if (!(event.target instanceof HTMLElement)) {
@@ -314,7 +313,7 @@ export const handleMouseMove =
       const positionColumn =
         getMousePositionHorizontalRelativeByElement(
           event as MouseEvent,
-          tableCellOptimization,
+          false,
           elementContentRects,
         ) === 'right'
           ? endIndex
@@ -342,15 +341,11 @@ export const handleMouseMove =
     }
 
     const { mouseMoveOptimization } = getEditorFeatureFlags();
-    // we only want to allow mouseMoveOptimisation when tableCellOptimization is enabled
-    // because it relies on tableCell node view that is added  via tableCellOptimization
-    const useMouseMoveOptimisation =
-      tableCellOptimization && mouseMoveOptimization;
 
     if (!isResizeHandleDecoration(element) && isCell(element)) {
       const positionColumn = getMousePositionHorizontalRelativeByElement(
         event as MouseEvent,
-        useMouseMoveOptimisation,
+        mouseMoveOptimization,
         elementContentRects,
         RESIZE_HANDLE_AREA_DECORATION_GAP,
       );
@@ -487,7 +482,6 @@ export const whenTableInFocus =
     eventHandler: (
       view: EditorView,
       mouseEvent: Event,
-      tableCellOptimization?: boolean,
       elementContentRects?: ElementContentRects,
     ) => boolean,
     elementContentRects?: ElementContentRects,
@@ -498,17 +492,10 @@ export const whenTableInFocus =
     const isDragging =
       tableResizePluginState && !!tableResizePluginState.dragging;
     const hasTableNode = tablePluginState && tablePluginState.tableNode;
-    const tableCellOptimization =
-      tablePluginState?.pluginConfig?.tableCellOptimization;
 
     if (!hasTableNode || isDragging) {
       return false;
     }
 
-    return eventHandler(
-      view,
-      mouseEvent,
-      tableCellOptimization,
-      elementContentRects,
-    );
+    return eventHandler(view, mouseEvent, elementContentRects);
   };

package/src/plugins/table/index.tsx

@@ -458,6 +458,7 @@ const tablesPlugin = (options?: TablePluginOptions): EditorPlugin => {
         defaultGetEditorContainerWidth,
         options?.editorAnalyticsAPI,
         options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
+        () => editorViewRef.current,
       )(pluginConfig(options?.tableOptions)),
     },
   };

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -4,6 +4,7 @@ import { Node as PmNode } from 'prosemirror-model';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
 import rafSchedule from 'raf-schd';
+import { findTable } from '@atlaskit/editor-tables/utils';
 
 import {
   calcTableWidth,
@@ -19,7 +20,7 @@ import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import { parsePx } from '@atlaskit/editor-common/utils';
 
-import { autoSizeTable } from '../commands';
+import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import {
   findStickyHeaderForTable,
@@ -196,7 +197,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   }
 
   componentDidUpdate(prevProps: ComponentProps) {
-    const { getNode, isMediaFullscreen, allowColumnResizing } = this.props;
+    const { view, getNode, isMediaFullscreen, allowColumnResizing } =
+      this.props;
+    const { isInDanger } = getPluginState(view.state);
+    const table = findTable(view.state.selection);
+
+    if (isInDanger && !table) {
+      clearHoverSelection()(view.state, view.dispatch);
+    }
 
     const { tableOverflowShadowsOptimization } =
       this.props.getEditorFeatureFlags();

package/src/plugins/table/nodeviews/tableCell.tsx

@@ -53,7 +53,7 @@ export default class TableCellNodeView implements NodeView {
     }
   }
 
-  private updateNodeView(node: Node): boolean {
+  private updateNodeView(node: Node) {
     if (this.node.type !== node.type) {
       return false;
     }

package/src/plugins/table/pm-plugins/default-table-selection.ts

@@ -1,5 +1,4 @@
 export const defaultTableSelection = {
   hoveredColumns: [],
   hoveredRows: [],
-  isInDanger: false,
 };

package/src/plugins/table/pm-plugins/main.ts

@@ -125,34 +125,32 @@ export const createPlugin = (
       })
     : undefined;
 
-  const tableCellNodeview = pluginConfig.tableCellOptimization
-    ? {
-        tableCell: (
-          node: ProseMirrorNode,
-          view: EditorView,
-          getPos: getPosHandler,
-        ) =>
-          new TableCellNodeView(
-            node,
-            view,
-            getPos,
-            getEditorFeatureFlags,
-            observer,
-          ),
-        tableHeader: (
-          node: ProseMirrorNode,
-          view: EditorView,
-          getPos: getPosHandler,
-        ) =>
-          new TableCellNodeView(
-            node,
-            view,
-            getPos,
-            getEditorFeatureFlags,
-            observer,
-          ),
-      }
-    : {};
+  const tableCellNodeview = {
+    tableCell: (
+      node: ProseMirrorNode,
+      view: EditorView,
+      getPos: getPosHandler,
+    ) =>
+      new TableCellNodeView(
+        node,
+        view,
+        getPos,
+        getEditorFeatureFlags,
+        observer,
+      ),
+    tableHeader: (
+      node: ProseMirrorNode,
+      view: EditorView,
+      getPos: getPosHandler,
+    ) =>
+      new TableCellNodeView(
+        node,
+        view,
+        getPos,
+        getEditorFeatureFlags,
+        observer,
+      ),
+  };
 
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   const invalidTableIds: string[] = [];

package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts

@@ -33,19 +33,51 @@ import throttle from 'lodash/throttle';
 const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 
 // timeout for resetting the scroll class - if it’s too long then users won’t be able to click on the header cells,
-// if too short it would trigger too many dom udpates.
+// if too short it would trigger too many dom updates.
 const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 
+const anyChildCellMergedAcrossRow = (node: PmNode) =>
+  mapChildren(node, (child) => child.attrs.rowspan || 0).some(
+    (rowspan) => rowspan > 1,
+  );
+
+/**
+ * Compare two table row nodes and return true if the two table rows have a
+ * different number of table cells or if table cell row spans are different
+ */
+const rowHasDifferentMergedCells = (prevNode: PmNode, incomingNode: PmNode) => {
+  const incomingNodeChildrenRowSpan = mapChildren(
+    prevNode,
+    (child) => child.attrs.rowspan || 0,
+  );
+  const currentNodeChildrenRowSpan = mapChildren(
+    incomingNode,
+    (child) => child.attrs.rowspan || 0,
+  );
+
+  return (
+    incomingNodeChildrenRowSpan.length !== currentNodeChildrenRowSpan.length ||
+    currentNodeChildrenRowSpan.some(
+      (child, index) => child !== incomingNodeChildrenRowSpan[index],
+    )
+  );
+};
+
+/**
+ * Check if a given node is a header row with this definition:
+ *  - all children are tableHeader cells
+ *  - no table cells have been have merged with other table row cells
+ *
+ * @param node ProseMirror node
+ * @return boolean if it meets definition
+ */
 export const supportedHeaderRow = (node: PmNode) => {
   const allHeaders = mapChildren(
     node,
     (child) => child.type.name === 'tableHeader',
   ).every(Boolean);
 
-  const someMerged = mapChildren(
-    node,
-    (child) => child.attrs.rowspan || 0,
-  ).some((rowspan) => rowspan > 1);
+  const someMerged = anyChildCellMergedAcrossRow(node);
 
   return allHeaders && !someMerged;
 };
@@ -297,8 +329,8 @@ export class TableRowNodeView implements NodeView {
       { root: this.editorScrollableElement as Element },
     );
   }
-  /* paint/update loop */
 
+  /* paint/update loop */
   previousDomTop: number | undefined;
   previousPadding: number | undefined;
 
@@ -367,7 +399,6 @@ export class TableRowNodeView implements NodeView {
   };
 
   /* nodeview lifecycle */
-
   update(node: PmNode, ..._args: any[]) {
     // do nothing if nodes were identical
     if (node === this.node) {
@@ -376,11 +407,15 @@ export class TableRowNodeView implements NodeView {
 
     // see if we're changing into a header row or
     // changing away from one
-    const newNodeisHeaderRow = supportedHeaderRow(node);
-    if (this.isHeaderRow !== newNodeisHeaderRow) {
+    const newNodeIsHeaderRow = supportedHeaderRow(node);
+    if (this.isHeaderRow !== newNodeIsHeaderRow) {
       return false; // re-create nodeview
     }
 
+    if (rowHasDifferentMergedCells(this.node, node)) {
+      return false;
+    }
+
     // node is different but no need to re-create nodeview
     this.node = node;
 

package/src/plugins/table/pm-plugins/table-resizing/utils/resize-logic.ts

@@ -33,7 +33,7 @@ export const shrinkColumn = (
   selectedColumns?: number[],
 ): ResizeState => {
   // can't shrink if columns don't exist
-  if (!state.cols[colIndex] || !state.cols[colIndex + 1]) {
+  if (!state.cols[colIndex]) {
     return state;
   }
   // try to shrink dragging column by giving from the column to the right first