@atlaskit/editor-plugin-table 5.6.6 → 5.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.6.6",
+  "version": "5.7.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,12 +24,13 @@
   "atlassian": {
     "team": "Editor: Jenga",
     "singleton": true,
-    "releaseModel": "continuous"
+    "releaseModel": "continuous",
+    "runReact18": false
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^35.2.0",
     "@atlaskit/custom-steps": "^0.0.10",
-    "@atlaskit/editor-common": "^76.27.0",
+    "@atlaskit/editor-common": "^76.29.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -46,8 +47,8 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
     "@atlaskit/primitives": "^1.15.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.30.0",
-    "@atlaskit/tooltip": "^18.0.0",
+    "@atlaskit/tokens": "^1.31.0",
+    "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "classnames": "^2.2.5",
@@ -141,6 +142,12 @@
     },
     "platform.editor.a11y.table-selection_9uv33": {
       "type": "boolean"
+    },
+    "platform.editor.table.new-cell-context-menu-styling": {
+      "type": "boolean"
+    },
+    "platform.editor.menu.group-items": {
+      "type": "boolean"
     }
   }
 }

package/src/types.ts

@@ -368,6 +368,7 @@ export const TableCssClassName = {
   CONTEXTUAL_MENU_BUTTON: `${tablePrefixSelector}-contextual-menu-button`,
   CONTEXTUAL_MENU_BUTTON_FIXED: `${tablePrefixSelector}-contextual-menu-button-fixed`,
   CONTEXTUAL_MENU_ICON: `${tablePrefixSelector}-contextual-submenu-icon`,
+  CONTEXTUAL_MENU_ICON_SMALL: `${tablePrefixSelector}-contextual-submenu-icon-small`,
 
   // come from prosemirror-table
   SELECTED_CELL: 'selectedCell',

package/src/ui/FloatingContextualButton/index.tsx

@@ -17,7 +17,6 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import type { ThemeProps } from '@atlaskit/theme/types';
 
 import { toggleContextualMenu } from '../../commands';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
@@ -83,10 +82,9 @@ const FloatingContextualButtonInner = React.memo(
 
     const button = (
       <div
-        css={(theme: ThemeProps) => [
-          tableFloatingCellButtonStyles({ theme }),
-          isContextualMenuOpen &&
-            tableFloatingCellButtonSelectedStyles({ theme }),
+        css={[
+          tableFloatingCellButtonStyles(),
+          isContextualMenuOpen && tableFloatingCellButtonSelectedStyles(),
         ]}
       >
         <ToolbarButton

package/src/ui/FloatingContextualButton/styles.ts

@@ -1,28 +1,21 @@
 import { css } from '@emotion/react';
 
-import { B75, DN0, DN60, N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
-import type { ThemeProps } from '@atlaskit/theme/types';
+import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 import { contextualMenuTriggerSize } from '../consts';
 
-export const tableFloatingCellButtonStyles = (props: ThemeProps) => css`
+export const tableFloatingCellButtonStyles = () => css`
   > div {
     // Sits behind button to provide surface-color background
     background: ${token('elevation.surface', N20)};
-    border-radius: ${borderRadius()}px;
+    border-radius: ${token('border.radius', '3px')};
     display: flex;
     height: ${contextualMenuTriggerSize + 2}px;
     flex-direction: column;
   }
   && button {
-    background: ${themed({
-      light: token('color.background.neutral', 'none'),
-      dark: token('color.background.neutral', 'none'),
-    })(props)};
+    background: ${token('color.background.neutral', 'none')};
     flex-direction: column;
     margin: ${token('space.025', '2px')};
     outline: 2px solid ${token('elevation.surface', N0)};
@@ -32,19 +25,13 @@ export const tableFloatingCellButtonStyles = (props: ThemeProps) => css`
     display: flex;
   }
   && button:hover {
-    background: ${themed({
-      light: token('color.background.neutral.hovered', N30A),
-      dark: token('color.background.neutral.hovered', DN60),
-    })(props)};
+    background: ${token('color.background.neutral.hovered', N30A)};
   }
   && button:active {
-    background: ${themed({
-      light: token(
-        'color.background.neutral.pressed',
-        'rgba(179, 212, 255, 0.6)',
-      ),
-      dark: token('color.background.neutral.pressed', B75),
-    })(props)};
+    background: ${token(
+      'color.background.neutral.pressed',
+      'rgba(179, 212, 255, 0.6)',
+    )};
   }
   && button > span {
     margin: 0px ${token('space.negative.050', '-4px')};
@@ -54,23 +41,14 @@ export const tableFloatingCellButtonStyles = (props: ThemeProps) => css`
   }
 `;
 
-export const tableFloatingCellButtonSelectedStyles = (props: ThemeProps) => css`
+export const tableFloatingCellButtonSelectedStyles = () => css`
   && button {
-    background: ${themed({
-      light: token('color.background.selected', N700),
-      dark: token('color.background.selected', DN0),
-    })(props)};
+    background: ${token('color.background.selected', N700)};
   }
   && button:hover {
-    background: ${themed({
-      light: token('color.background.selected.hovered', N700),
-      dark: token('color.background.selected.hovered', DN0),
-    })(props)};
+    background: ${token('color.background.selected.hovered', N700)};
   }
   && button:active {
-    background: ${themed({
-      light: token('color.background.selected.pressed', N700),
-      dark: token('color.background.selected.pressed', DN0),
-    })(props)};
+    background: ${token('color.background.selected.pressed', N700)};
   }
 `;

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
 import { Component } from 'react';
 
@@ -39,6 +40,10 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import { splitCell } from '@atlaskit/editor-tables/utils';
+import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   clearHoverSelection,
@@ -69,6 +74,12 @@ import {
   getSelectedRowIndexes,
 } from '../../utils';
 import { contextualMenuDropdownWidth } from '../consts';
+import {
+  AddColRightIcon,
+  AddRowBelowIcon,
+  MergeCellsIcon,
+  SplitCellIcon,
+} from '../icons';
 
 import { cellColourPreviewStyles } from './styles';
 
@@ -105,11 +116,14 @@ export class ContextualMenu extends Component<
   };
 
   render() {
-    const { isOpen, mountPoint, offset, boundariesElement } = this.props;
-    const items = this.createItems();
-    if (!items) {
-      return null;
-    }
+    const { isOpen, mountPoint, offset, boundariesElement, editorView } =
+      this.props;
+    const { isDragAndDropEnabled } = getPluginState(editorView.state);
+    const items =
+      isDragAndDropEnabled &&
+      getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
+        ? this.createNewContextMenuItems()
+        : this.createOriginalContextMenuItems();
 
     return (
       <div
@@ -134,6 +148,15 @@ export class ContextualMenu extends Component<
           fitWidth={contextualMenuDropdownWidth}
           boundariesElement={boundariesElement}
           offset={offset}
+          section={
+            isDragAndDropEnabled &&
+            getBooleanFF(
+              'platform.editor.table.new-cell-context-menu-styling',
+            ) &&
+            getBooleanFF('platform.editor.menu.group-items')
+              ? { hasSeparator: true }
+              : undefined
+          }
         />
       </div>
     );
@@ -154,24 +177,19 @@ export class ContextualMenu extends Component<
     }
   };
 
-  private createItems = () => {
+  private createBackgroundColorItem = () => {
     const {
-      allowMergeCells,
-      allowColumnSorting,
       allowBackgroundColor,
       editorView: { state },
       isOpen,
-      selectionRect,
       intl: { formatMessage },
       editorView,
     } = this.props;
-    const items: any[] = [];
     const { isSubmenuOpen } = this.state;
-    // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-    const {
-      targetCellPosition,
-      pluginConfig: { allowDistributeColumns },
-    } = getPluginState(editorView.state);
+    const { targetCellPosition, isDragAndDropEnabled } = getPluginState(
+      editorView.state,
+    );
+
     if (allowBackgroundColor) {
       const node =
         isOpen && targetCellPosition
@@ -180,14 +198,35 @@ export class ContextualMenu extends Component<
       const background = hexToEditorBackgroundPaletteColor(
         node?.attrs?.background || '#ffffff',
       );
-      items.push({
-        content: formatMessage(messages.cellBackground),
+      return {
+        content:
+          isDragAndDropEnabled &&
+          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
+            ? formatMessage(messages.backgroundColor)
+            : formatMessage(messages.cellBackground),
         value: { name: 'background' },
+        elemBefore:
+          isDragAndDropEnabled &&
+          getBooleanFF(
+            'platform.editor.table.new-cell-context-menu-styling',
+          ) ? (
+            <EditorBackgroundColorIcon
+              label={formatMessage(messages.backgroundColor)}
+              size="medium"
+            />
+          ) : undefined,
         elemAfter: (
           <div className={DropdownMenuSharedCssClassName.SUBMENU}>
             <div
               css={cellColourPreviewStyles(background)}
-              className={ClassName.CONTEXTUAL_MENU_ICON}
+              className={
+                isDragAndDropEnabled &&
+                getBooleanFF(
+                  'platform.editor.table.new-cell-context-menu-styling',
+                )
+                  ? ClassName.CONTEXTUAL_MENU_ICON_SMALL
+                  : ClassName.CONTEXTUAL_MENU_ICON
+              }
             />
             {isSubmenuOpen && (
               <div
@@ -209,72 +248,232 @@ export class ContextualMenu extends Component<
             )}
           </div>
         ),
-      });
+      } as MenuItem;
     }
+  };
+
+  private createMergeSplitCellItems = () => {
+    const {
+      allowMergeCells,
+      editorView: { state },
+      intl: { formatMessage },
+      editorView,
+    } = this.props;
+    const { isDragAndDropEnabled } = getPluginState(editorView.state);
 
-    items.push({
-      content: formatMessage(messages.insertColumn),
+    if (allowMergeCells) {
+      return [
+        {
+          content: formatMessage(messages.mergeCells),
+          value: { name: 'merge' },
+          isDisabled: !canMergeCells(state.tr),
+          elemBefore:
+            isDragAndDropEnabled &&
+            getBooleanFF(
+              'platform.editor.table.new-cell-context-menu-styling',
+            ) ? (
+              <MergeCellsIcon />
+            ) : undefined,
+        },
+        {
+          content: formatMessage(messages.splitCell),
+          value: { name: 'split' },
+          isDisabled: !splitCell(state),
+          elemBefore:
+            isDragAndDropEnabled &&
+            getBooleanFF(
+              'platform.editor.table.new-cell-context-menu-styling',
+            ) ? (
+              <SplitCellIcon />
+            ) : undefined,
+        },
+      ] as MenuItem[];
+    }
+    return [];
+  };
+
+  private createInsertColumnItem = () => {
+    const {
+      intl: { formatMessage },
+      editorView,
+    } = this.props;
+    const { isDragAndDropEnabled } = getPluginState(editorView.state);
+
+    return {
+      content: formatMessage(
+        isDragAndDropEnabled &&
+          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
+          ? messages.addColumn
+          : messages.insertColumn,
+      ),
       value: { name: 'insert_column' },
       elemAfter: <div css={shortcutStyle}>{tooltip(addColumnAfter)}</div>,
-    });
+      elemBefore:
+        isDragAndDropEnabled &&
+        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
+          <AddColRightIcon />
+        ) : undefined,
+    } as MenuItem;
+  };
 
-    items.push({
-      content: formatMessage(messages.insertRow),
+  private createInsertRowItem = () => {
+    const {
+      intl: { formatMessage },
+      editorView,
+    } = this.props;
+    const { isDragAndDropEnabled } = getPluginState(editorView.state);
+
+    return {
+      content: formatMessage(
+        isDragAndDropEnabled &&
+          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
+          ? messages.addRow
+          : messages.insertRow,
+      ),
       value: { name: 'insert_row' },
       elemAfter: <div css={shortcutStyle}>{tooltip(addRowAfter)}</div>,
-    });
+      elemBefore:
+        isDragAndDropEnabled &&
+        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
+          <AddRowBelowIcon />
+        ) : undefined,
+    } as MenuItem;
+  };
 
+  private createClearCellsItem = () => {
+    const {
+      selectionRect,
+      intl: { formatMessage },
+      editorView,
+    } = this.props;
+    const { isDragAndDropEnabled } = getPluginState(editorView.state);
     const { top, bottom, right, left } = selectionRect;
     const noOfColumns = right - left;
     const noOfRows = bottom - top;
 
-    items.push({
+    return {
+      content: formatMessage(messages.clearCells, {
+        0: Math.max(noOfColumns, noOfRows),
+      }),
+      value: { name: 'clear' },
+      elemAfter: <div css={shortcutStyle}>{tooltip(backspace)}</div>,
+      elemBefore:
+        isDragAndDropEnabled &&
+        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
+          <CrossCircleIcon
+            label={formatMessage(messages.clearCells, {
+              0: Math.max(noOfColumns, noOfRows),
+            })}
+          />
+        ) : undefined,
+    } as MenuItem;
+  };
+
+  private createDeleteColumnItem = () => {
+    const {
+      selectionRect,
+      intl: { formatMessage },
+      editorView,
+    } = this.props;
+    const { isDragAndDropEnabled } = getPluginState(editorView.state);
+
+    const { right, left } = selectionRect;
+    const noOfColumns = right - left;
+
+    return {
       content: formatMessage(messages.removeColumns, {
         0: noOfColumns,
       }),
       value: { name: 'delete_column' },
-    });
+      elemBefore:
+        isDragAndDropEnabled &&
+        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
+          <RemoveIcon
+            label={formatMessage(messages.removeColumns, {
+              0: noOfColumns,
+            })}
+          />
+        ) : undefined,
+    } as MenuItem;
+  };
+
+  private createDeleteRowItem = () => {
+    const {
+      selectionRect,
+      intl: { formatMessage },
+      editorView,
+    } = this.props;
+    const { isDragAndDropEnabled } = getPluginState(editorView.state);
 
-    items.push({
+    const { bottom, top } = selectionRect;
+    const noOfRows = bottom - top;
+
+    return {
       content: formatMessage(messages.removeRows, {
         0: noOfRows,
       }),
       value: { name: 'delete_row' },
-    });
-
-    if (allowMergeCells) {
-      items.push({
-        content: formatMessage(messages.mergeCells),
-        value: { name: 'merge' },
-        isDisabled: !canMergeCells(state.tr),
-      });
-      items.push({
-        content: formatMessage(messages.splitCell),
-        value: { name: 'split' },
-        isDisabled: !splitCell(state),
-      });
-    }
+      elemBefore:
+        isDragAndDropEnabled &&
+        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
+          <RemoveIcon
+            label={formatMessage(messages.removeRows, {
+              0: noOfRows,
+            })}
+          />
+        ) : undefined,
+    } as MenuItem;
+  };
 
-    if (allowDistributeColumns) {
+  private createDistributeColumnsItem = () => {
+    const {
+      selectionRect,
+      intl: { formatMessage },
+      editorView,
+      getEditorContainerWidth,
+    } = this.props;
+    const {
+      isDragAndDropEnabled,
+      pluginConfig: { allowDistributeColumns },
+    } = getPluginState(editorView.state);
+    if (
+      allowDistributeColumns &&
+      (!isDragAndDropEnabled ||
+        !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))
+    ) {
       const newResizeState = getNewResizeStateFromSelectedColumns(
         selectionRect,
-        state,
+        editorView.state,
         editorView.domAtPos.bind(editorView),
-        this.props.getEditorContainerWidth,
+        getEditorContainerWidth,
       );
 
       const wouldChange = newResizeState?.changed ?? false;
 
-      items.push({
+      return {
         content: formatMessage(messages.distributeColumns),
         value: { name: 'distribute_columns' },
         isDisabled: !wouldChange,
-      });
+      } as MenuItem;
     }
+    return null;
+  };
 
-    if (allowColumnSorting) {
+  private createSortColumnItems = () => {
+    const {
+      intl: { formatMessage },
+      editorView,
+      allowColumnSorting,
+    } = this.props;
+    const { isDragAndDropEnabled } = getPluginState(editorView.state);
+
+    if (
+      allowColumnSorting &&
+      (!isDragAndDropEnabled ||
+        !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))
+    ) {
       const hasMergedCellsInTable =
-        getMergedCellsPositions(state.tr).length > 0;
+        getMergedCellsPositions(editorView.state.tr).length > 0;
       const warning = hasMergedCellsInTable
         ? {
             tooltipDescription: formatMessage(messages.canNotSortTable),
@@ -282,28 +481,77 @@ export class ContextualMenu extends Component<
           }
         : {};
 
-      items.push({
-        content: formatMessage(messages.sortColumnASC),
-        value: { name: 'sort_column_asc' },
-        ...warning,
-      });
-
-      items.push({
-        content: formatMessage(messages.sortColumnDESC),
-        value: { name: 'sort_column_desc' },
-        ...warning,
-      });
+      return [
+        {
+          content: formatMessage(messages.sortColumnASC),
+          value: { name: 'sort_column_asc' },
+          ...warning,
+        },
+        {
+          content: formatMessage(messages.sortColumnDESC),
+          value: { name: 'sort_column_desc' },
+          ...warning,
+        },
+      ] as MenuItem[];
     }
 
-    items.push({
-      content: formatMessage(messages.clearCells, {
-        0: Math.max(noOfColumns, noOfRows),
-      }),
-      value: { name: 'clear' },
-      elemAfter: <div css={shortcutStyle}>{tooltip(backspace)}</div>,
-    });
+    return null;
+  };
+
+  private createOriginalContextMenuItems = () => {
+    let items: MenuItem[] = [];
+    const backgroundColorItem = this.createBackgroundColorItem();
+    backgroundColorItem && items.push(backgroundColorItem);
+
+    items.push(this.createInsertColumnItem());
+
+    items.push(this.createInsertRowItem());
+
+    items.push(this.createDeleteColumnItem());
+
+    items.push(this.createDeleteRowItem());
+
+    items.push(...this.createMergeSplitCellItems());
+
+    const distributeColumnsItem = this.createDistributeColumnsItem();
+    distributeColumnsItem && items.push(distributeColumnsItem);
+
+    const sortColumnItems = this.createSortColumnItems();
+    sortColumnItems && items.push(...sortColumnItems);
+
+    items.push(this.createClearCellsItem());
+
+    return [{ items }];
+  };
 
-    return items.length ? [{ items }] : null;
+  private createNewContextMenuItems = () => {
+    const backgroundColorItem = this.createBackgroundColorItem();
+    const mergeSplitCellItems = this.createMergeSplitCellItems();
+    const insertColumnItem = this.createInsertColumnItem();
+    const insertRowItem = this.createInsertRowItem();
+    const clearCellsItem = this.createClearCellsItem();
+    const deleteColumnItem = this.createDeleteColumnItem();
+    const deleteRowItem = this.createDeleteRowItem();
+
+    // Group items so when table.menu.group-items FF is enabled, a divider shows under split cell, above add column
+    let items: { items: MenuItem[] }[] = [
+      {
+        items: [],
+      },
+      {
+        items: [],
+      },
+    ];
+
+    backgroundColorItem && items[0].items.push(backgroundColorItem);
+    items[0].items.push(...mergeSplitCellItems);
+    items[1].items.push(insertColumnItem);
+    items[1].items.push(insertRowItem);
+    items[1].items.push(clearCellsItem);
+    items[1].items.push(deleteColumnItem);
+    items[1].items.push(deleteRowItem);
+
+    return items;
   };
 
   private onMenuItemActivated = ({ item }: { item: DropdownItem }) => {