@atlaskit/editor-plugin-table 5.3.22 → 5.3.24

package/src/__tests__/unit/ui/TableFloatingColumnControls.tsx

@@ -14,6 +14,7 @@ import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import {
@@ -29,10 +30,10 @@ import {
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 
-import tablePlugin from '../../../plugins/table-plugin';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import type { TablePluginState } from '../../../plugins/table/types';
 import TableFloatingColumnControls from '../../../plugins/table/ui/TableFloatingColumnControls';
+import tablePlugin from '../../../plugins/table-plugin';
 
 describe('TableFloatingColumnControls', () => {
   const createEditor = createProsemirrorEditorFactory();

package/src/__tests__/unit/ui/TableFloatingControls.tsx

@@ -12,6 +12,7 @@ import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import {
@@ -28,12 +29,12 @@ import {
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 
-import tablePlugin from '../../../plugins/table-plugin';
 import { hoverTable } from '../../../plugins/table/commands';
 import { getDecorations } from '../../../plugins/table/pm-plugins/decorations/plugin';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import type { TablePluginState } from '../../../plugins/table/types';
 import TableFloatingControls from '../../../plugins/table/ui/TableFloatingControls';
+import tablePlugin from '../../../plugins/table-plugin';
 
 describe('TableFloatingControls', () => {
   const createEditor = createProsemirrorEditorFactory();

package/src/__tests__/unit/undo-redo.ts

@@ -10,6 +10,7 @@ import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import { redo, undo } from '@atlaskit/editor-prosemirror/history';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import {

package/src/__tests__/unit/utils/collapse.ts

@@ -6,6 +6,7 @@ import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import {

package/src/__tests__/unit/utils/nodes.ts

@@ -7,6 +7,7 @@ import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import { findTable } from '@atlaskit/editor-tables/utils';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import {
@@ -25,9 +26,9 @@ import {
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 
-import tablePlugin from '../../../plugins/table-plugin';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { containsHeaderColumn } from '../../../plugins/table/utils/nodes';
+import tablePlugin from '../../../plugins/table-plugin';
 
 describe('table merging logic', () => {
   const createEditor = createProsemirrorEditorFactory();

package/src/__tests__/unit/utils/row-controls.ts

@@ -9,6 +9,7 @@ import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import {
@@ -25,9 +26,9 @@ import {
   th,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 
-import tablePlugin from '../../../plugins/table-plugin';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { copyPreviousRow } from '../../../plugins/table/utils/row-controls';
+import tablePlugin from '../../../plugins/table-plugin';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 

package/src/__tests__/unit/utils.ts

@@ -7,6 +7,7 @@ import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import {

package/src/plugins/table/nodeviews/TableRow.ts

@@ -6,8 +6,8 @@ import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -6,8 +6,8 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
-import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 
 import type { DraggableSourceData } from '../../types';
 import {

package/src/plugins/table/pm-plugins/drag-and-drop/utils/monitor.ts

@@ -1,6 +1,6 @@
+import type { ElementEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
-import type { ElementEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 
 import type {
   DraggableData,

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

@@ -28,15 +28,15 @@ import {
   moveCursorBackward,
   triggerUnlessTableHeader,
 } from '../commands';
+import {
+  addColumnAfter as addColumnAfterCommand,
+  addColumnBefore as addColumnBeforeCommand,
+} from '../commands/insert';
 import {
   addRowAroundSelection,
   deleteTableIfSelectedWithAnalytics,
   emptyMultipleCellsWithAnalytics,
 } from '../commands-with-analytics';
-import {
-  addColumnAfter as addColumnAfterCommand,
-  addColumnBefore as addColumnBeforeCommand,
-} from '../commands/insert';
 import { withEditorAnalyticsAPI } from '../utils/analytics';
 
 const createTableWithAnalytics = (

package/src/plugins/table/ui/FloatingDragMenu/DragMenu.tsx

@@ -44,11 +44,35 @@ type DragMenuProps = {
   getEditorContainerWidth: GetEditorContainerWidth;
 };
 
+const groupedDragMenuConfig = [
+  [
+    'add_row_above',
+    'add_row_below',
+    'add_column_left',
+    'add_column_right',
+    'distribute_columns',
+    'clear_cells',
+    'delete_row',
+    'delete_column',
+  ],
+  ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down'],
+  ['sort_column_asc', 'sort_column_desc'],
+];
+
 const convertToDropdownItems = (dragMenuConfig: DragMenuConfig[]) => {
-  let menuItems: MenuItem[] = [];
+  let menuItemsArr: MenuItem[][] = [...Array(groupedDragMenuConfig.length)].map(
+    () => [],
+  );
   let menuCallback: { [key: string]: Command } = {};
   dragMenuConfig.forEach((item) => {
-    menuItems.push({
+    const menuGroupIndex = groupedDragMenuConfig.findIndex((group) =>
+      group.includes(item.id),
+    );
+
+    if (menuGroupIndex === -1) {
+      return;
+    }
+    menuItemsArr[menuGroupIndex].push({
       key: item.id,
       content: item.title,
       value: { name: item.id },
@@ -69,6 +93,11 @@ const convertToDropdownItems = (dragMenuConfig: DragMenuConfig[]) => {
     });
     item.onClick && (menuCallback[item.id] = item.onClick);
   });
+
+  const menuItems = menuItemsArr.reduce((acc, curr) => {
+    curr?.length > 0 && acc.push({ items: curr });
+    return acc;
+  }, [] as { items: MenuItem[] }[]);
   return { menuItems, menuCallback };
 };
 
@@ -149,11 +178,7 @@ export const DragMenu = ({
         type: ArrowKeyNavigationType.MENU,
         disableArrowKeyNavigation: true,
       }}
-      items={[
-        {
-          items: menuItems,
-        },
-      ]}
+      items={menuItems}
       isOpen={isOpen}
       onOpenChange={closeMenu}
       onItemActivated={handleMenuItemActivated}
@@ -161,6 +186,7 @@ export const DragMenu = ({
       onMouseLeave={handleItemMouseLeave}
       fitWidth={dragMenuDropdownWidth}
       boundariesElement={boundariesElement}
+      section={{ hasSeparator: true }}
     />
   );
 };

package/src/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 
-import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 
 import type { DraggableSourceData } from '../../../types';