@atlaskit/editor-plugin-table 5.6.7 → 5.7.0

package/dist/types-ts4.5/ui/FloatingContextualMenu/ContextualMenu.d.ts

@@ -28,9 +28,19 @@ export declare class ContextualMenu extends Component<Props & WrappedComponentPr
     static defaultProps: {
         boundariesElement: HTMLElement | undefined;
     };
-    render(): jsx.JSX.Element | null;
+    render(): jsx.JSX.Element;
     private handleSubMenuRef;
-    private createItems;
+    private createBackgroundColorItem;
+    private createMergeSplitCellItems;
+    private createInsertColumnItem;
+    private createInsertRowItem;
+    private createClearCellsItem;
+    private createDeleteColumnItem;
+    private createDeleteRowItem;
+    private createDistributeColumnsItem;
+    private createSortColumnItems;
+    private createOriginalContextMenuItems;
+    private createNewContextMenuItems;
     private onMenuItemActivated;
     private toggleOpen;
     private handleOpenChange;

package/dist/types-ts4.5/ui/icons/MergeCellsIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MergeCellsIcon: () => JSX.Element;

package/dist/types-ts4.5/ui/icons/SplitCellIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SplitCellIcon: () => JSX.Element;

package/dist/types-ts4.5/ui/icons/index.d.ts

@@ -2,6 +2,8 @@ export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
 export { MinimisedHandleIcon } from './MinimisedHandle';
+export { MergeCellsIcon } from './MergeCellsIcon';
+export { SplitCellIcon } from './SplitCellIcon';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.6.7",
+  "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,7 +47,7 @@
     "@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/tokens": "^1.31.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -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/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 }) => {

package/src/ui/FloatingContextualMenu/styles.ts

@@ -53,4 +53,24 @@ export const tablePopupStyles = css`
       color: ${token('color.icon', N90)};
     }
   }
+
+  .${ClassName.CONTEXTUAL_MENU_ICON_SMALL} {
+    display: flex;
+
+    &::before {
+      content: '';
+      display: block;
+      border: 1px solid ${tableBackgroundBorderColor};
+      border-radius: ${token('border.radius', '3px')};
+      width: 14px;
+      height: 14px;
+    }
+
+    &::after {
+      content: '›';
+      margin-left: ${token('space.050', '4px')};
+      line-height: 14px;
+      color: ${token('color.icon', N90)};
+    }
+  }
 `;

package/src/ui/icons/MergeCellsIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export const MergeCellsIcon = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 19C10.5523 19 11 18.5523 11 18C11 17.4477 10.5523 17 10 17H6V7L10 7C10.5523 7 11 6.55228 11 6C11 5.44771 10.5523 5 10 5H6C4.89543 5 4 5.89543 4 7V17C4 18.1046 4.89543 19 6 19H10ZM14 5C13.4477 5 13 5.44772 13 6C13 6.55228 13.4477 7 14 7H18V17L14 17C13.4477 17 13 17.4477 13 18C13 18.5523 13.4477 19 14 19H18C19.1046 19 20 18.1046 20 17V7C20 5.89543 19.1046 5 18 5H14Z"
+      fill="currentColor"
+    />
+    <path
+      d="M15.75 10L13.75 12L15.75 14"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.25 14L10.25 12L8.25 10"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/ui/icons/SplitCellIcon.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export const SplitCellIcon = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19 18L14 18L14 6L19 6"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5 6L10 6L9.99999 18L5 18"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7 10L5 12L7 14"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M17 14L19 12L17 10"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);