@atlaskit/editor-plugin-table 5.3.22 → 5.3.23

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 5.3.23
+
+### Patch Changes
+
+- [#42746](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42746) [`ea352517252`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ea352517252) - Update editor dropdown menu component to support section behind platform.editor.menu.group-items FF
+
 ## 5.3.22
 
 ### Patch Changes

package/dist/cjs/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DragMenu = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
@@ -16,11 +18,20 @@ var _dragMenu = require("../../utils/drag-menu");
 var _consts = require("../consts");
 /** @jsx jsx */
 
+var 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']];
 var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
-  var menuItems = [];
+  var menuItemsArr = (0, _toConsumableArray2.default)(Array(groupedDragMenuConfig.length)).map(function () {
+    return [];
+  });
   var menuCallback = {};
   dragMenuConfig.forEach(function (item) {
-    menuItems.push({
+    var menuGroupIndex = groupedDragMenuConfig.findIndex(function (group) {
+      return group.includes(item.id);
+    });
+    if (menuGroupIndex === -1) {
+      return;
+    }
+    menuItemsArr[menuGroupIndex].push({
       key: item.id,
       content: item.title,
       value: {
@@ -41,6 +52,12 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
     });
     item.onClick && (menuCallback[item.id] = item.onClick);
   });
+  var menuItems = menuItemsArr.reduce(function (acc, curr) {
+    (curr === null || curr === void 0 ? void 0 : curr.length) > 0 && acc.push({
+      items: curr
+    });
+    return acc;
+  }, []);
   return {
     menuItems: menuItems,
     menuCallback: menuCallback
@@ -104,15 +121,16 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
       type: _uiMenu.ArrowKeyNavigationType.MENU,
       disableArrowKeyNavigation: true
     },
-    items: [{
-      items: menuItems
-    }],
+    items: menuItems,
     isOpen: isOpen,
     onOpenChange: closeMenu,
     onItemActivated: handleMenuItemActivated,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
     fitWidth: _consts.dragMenuDropdownWidth,
-    boundariesElement: boundariesElement
+    boundariesElement: boundariesElement,
+    section: {
+      hasSeparator: true
+    }
   });
 };

package/dist/es2019/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -9,11 +9,16 @@ import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
+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 => {
-  let menuItems = [];
+  let menuItemsArr = [...Array(groupedDragMenuConfig.length)].map(() => []);
   let menuCallback = {};
   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: {
@@ -34,6 +39,12 @@ const convertToDropdownItems = dragMenuConfig => {
     });
     item.onClick && (menuCallback[item.id] = item.onClick);
   });
+  const menuItems = menuItemsArr.reduce((acc, curr) => {
+    (curr === null || curr === void 0 ? void 0 : curr.length) > 0 && acc.push({
+      items: curr
+    });
+    return acc;
+  }, []);
   return {
     menuItems,
     menuCallback
@@ -107,15 +118,16 @@ export const DragMenu = ({
       type: ArrowKeyNavigationType.MENU,
       disableArrowKeyNavigation: true
     },
-    items: [{
-      items: menuItems
-    }],
+    items: menuItems,
     isOpen: isOpen,
     onOpenChange: closeMenu,
     onItemActivated: handleMenuItemActivated,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
     fitWidth: dragMenuDropdownWidth,
-    boundariesElement: boundariesElement
+    boundariesElement: boundariesElement,
+    section: {
+      hasSeparator: true
+    }
   });
 };

package/dist/esm/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
@@ -9,11 +10,20 @@ import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
+var 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']];
 var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
-  var menuItems = [];
+  var menuItemsArr = _toConsumableArray(Array(groupedDragMenuConfig.length)).map(function () {
+    return [];
+  });
   var menuCallback = {};
   dragMenuConfig.forEach(function (item) {
-    menuItems.push({
+    var menuGroupIndex = groupedDragMenuConfig.findIndex(function (group) {
+      return group.includes(item.id);
+    });
+    if (menuGroupIndex === -1) {
+      return;
+    }
+    menuItemsArr[menuGroupIndex].push({
       key: item.id,
       content: item.title,
       value: {
@@ -34,6 +44,12 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
     });
     item.onClick && (menuCallback[item.id] = item.onClick);
   });
+  var menuItems = menuItemsArr.reduce(function (acc, curr) {
+    (curr === null || curr === void 0 ? void 0 : curr.length) > 0 && acc.push({
+      items: curr
+    });
+    return acc;
+  }, []);
   return {
     menuItems: menuItems,
     menuCallback: menuCallback
@@ -97,15 +113,16 @@ export var DragMenu = function DragMenu(_ref) {
       type: ArrowKeyNavigationType.MENU,
       disableArrowKeyNavigation: true
     },
-    items: [{
-      items: menuItems
-    }],
+    items: menuItems,
     isOpen: isOpen,
     onOpenChange: closeMenu,
     onItemActivated: handleMenuItemActivated,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
     fitWidth: dragMenuDropdownWidth,
-    boundariesElement: boundariesElement
+    boundariesElement: boundariesElement,
+    section: {
+      hasSeparator: true
+    }
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.22",
+  "version": "5.3.23",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

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

@@ -0,0 +1,194 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { ReactEditorViewContext } from '@atlaskit/editor-common/ui-react';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+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';
+import * as prosemirrorUtils from '@atlaskit/editor-prosemirror/utils';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+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 {
+  createProsemirrorEditorFactory,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import {
+  doc,
+  p,
+  table,
+  tdCursor,
+  tdEmpty,
+  th,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
+
+import tablePlugin from '../../../plugins/table-plugin';
+import FloatingDragMenu from '../../../plugins/table/ui/FloatingDragMenu';
+
+describe('FloatingDragMenu', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  let editorView: EditorView;
+  let tableNode: ContentNodeWithPos | undefined;
+  beforeEach(() => {
+    ({ editorView } = createEditor({
+      doc: doc(table()(tr(th()(p('')), th()(p(''))), tr(tdCursor, tdEmpty))),
+      preset: new Preset<LightEditorPlugin>()
+        .add([featureFlagsPlugin, {}])
+        .add([analyticsPlugin, {}])
+        .add(contentInsertionPlugin)
+        .add(widthPlugin)
+        .add(guidelinePlugin)
+        .add(selectionPlugin)
+        .add(tablePlugin),
+    }));
+
+    tableNode = prosemirrorUtils.findParentNodeOfTypeClosestToPos(
+      editorView.state.selection.$from,
+      editorView.state.schema.nodes.table,
+    );
+  });
+  describe('should group the menu items correctly', () => {
+    ffTest(
+      'platform.editor.menu.group-items',
+      () => {
+        // Run test case when FF platform.editor..menu.group-items is true
+        const tableRef = editorView.dom.querySelector('table');
+        const editorRef = {
+          current: document.createElement('div'),
+        };
+        render(
+          <ReactEditorViewContext.Provider
+            value={{
+              editorRef,
+            }}
+          >
+            <FloatingDragMenu
+              editorView={editorView}
+              isOpen
+              getEditorContainerWidth={jest.fn()}
+              tableRef={tableRef as HTMLTableElement}
+              tableNode={tableNode?.node}
+              direction="row"
+              targetCellPosition={1}
+            />
+          </ReactEditorViewContext.Provider>,
+        );
+        expect(screen.getAllByRole('menu')).toHaveLength(1);
+        expect(screen.getAllByRole('group')).toHaveLength(2);
+      },
+      () => {
+        // Run test case when FF platform.editor..menu.group-items is false
+        const tableRef = editorView.dom.querySelector('table');
+        const editorRef = {
+          current: document.createElement('div'),
+        };
+        render(
+          <ReactEditorViewContext.Provider
+            value={{
+              editorRef,
+            }}
+          >
+            <FloatingDragMenu
+              editorView={editorView}
+              isOpen
+              getEditorContainerWidth={jest.fn()}
+              tableRef={tableRef as HTMLTableElement}
+              tableNode={tableNode?.node}
+              direction="row"
+              targetCellPosition={1}
+            />
+          </ReactEditorViewContext.Provider>,
+        );
+        expect(screen.getAllByRole('menu')).toHaveLength(2);
+        expect(screen.queryByRole('group')).toBeNull();
+      },
+    );
+  });
+  describe('menu items', () => {
+    it('should render the right menu items for row', () => {
+      // Run test case when FF platform.editor..menu.group-items is true
+      const tableRef = editorView.dom.querySelector('table');
+      const editorRef = {
+        current: document.createElement('div'),
+      };
+      render(
+        <ReactEditorViewContext.Provider
+          value={{
+            editorRef,
+          }}
+        >
+          <FloatingDragMenu
+            editorView={editorView}
+            isOpen
+            getEditorContainerWidth={jest.fn()}
+            tableRef={tableRef as HTMLTableElement}
+            tableNode={tableNode?.node}
+            direction="row"
+            targetCellPosition={1}
+          />
+        </ReactEditorViewContext.Provider>,
+      );
+
+      const items = screen.getAllByRole('menuitem');
+      const menuitemTextArray = items.map((item) => item.textContent);
+      expect(menuitemTextArray).toMatchInlineSnapshot(`
+          Array [
+            "Add row aboveCtrl+Alt+↑",
+            "Add row belowCtrl+Alt+↓",
+            "Clear cells⌫",
+            "Delete row",
+            "Move row up",
+            "Move row down",
+          ]
+        `);
+    });
+    it('should render the right menu items for column', () => {
+      const tableRef = editorView.dom.querySelector('table');
+      const editorRef = {
+        current: document.createElement('div'),
+      };
+      render(
+        <ReactEditorViewContext.Provider
+          value={{
+            editorRef,
+          }}
+        >
+          <FloatingDragMenu
+            editorView={editorView}
+            isOpen
+            getEditorContainerWidth={jest.fn()}
+            tableRef={tableRef as HTMLTableElement}
+            tableNode={tableNode?.node}
+            direction="column"
+            targetCellPosition={1}
+          />
+        </ReactEditorViewContext.Provider>,
+      );
+
+      const items = screen.getAllByRole('menuitem');
+      const menuitemTextArray = items.map((item) => item.textContent);
+      expect(menuitemTextArray).toMatchInlineSnapshot(`
+          Array [
+            "Add column leftCtrl+Alt+←",
+            "Add column rightCtrl+Alt+→",
+            "Distribute columns",
+            "Clear cells⌫",
+            "Delete column",
+            "Move column left",
+            "Move column right",
+            "Sort increasing",
+            "Sort decreasing",
+          ]
+        `);
+    });
+  });
+});

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 }}
     />
   );
 };