@atlaskit/editor-plugin-table 5.6.7 → 5.7.0

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
@@ -14,6 +15,10 @@ import { closestElement } from '@atlaskit/editor-common/utils';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 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, hoverColumns, hoverMergedCells, hoverRows, toggleContextualMenu } from '../../commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics } from '../../commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
@@ -22,6 +27,7 @@ import { canMergeCells } from '../../transforms';
 import { TableCssClassName as ClassName } from '../../types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { contextualMenuDropdownWidth } from '../consts';
+import { AddColRightIcon, AddRowBelowIcon, MergeCellsIcon, SplitCellIcon } from '../icons';
 import { cellColourPreviewStyles } from './styles';
 export class ContextualMenu extends Component {
   constructor(...args) {
@@ -40,46 +46,43 @@ export class ContextualMenu extends Component {
         ref.style.left = `-${rect.width}px`;
       }
     });
-    _defineProperty(this, "createItems", () => {
+    _defineProperty(this, "createBackgroundColorItem", () => {
       const {
-        allowMergeCells,
-        allowColumnSorting,
         allowBackgroundColor,
         editorView: {
           state
         },
         isOpen,
-        selectionRect,
         intl: {
           formatMessage
         },
         editorView
       } = this.props;
-      const items = [];
       const {
         isSubmenuOpen
       } = this.state;
-      // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       const {
         targetCellPosition,
-        pluginConfig: {
-          allowDistributeColumns
-        }
+        isDragAndDropEnabled
       } = getPluginState(editorView.state);
       if (allowBackgroundColor) {
         var _node$attrs;
         const node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
         const background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _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') ? jsx(EditorBackgroundColorIcon, {
+            label: formatMessage(messages.backgroundColor),
+            size: "medium"
+          }) : undefined,
           elemAfter: jsx("div", {
             className: DropdownMenuSharedCssClassName.SUBMENU
           }, jsx("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 && jsx("div", {
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: this.handleSubMenuRef
@@ -93,26 +96,95 @@ export class ContextualMenu extends Component {
               hexToPaletteColor: hexToEditorBackgroundPaletteColor
             }
           })))
-        });
+        };
       }
-      items.push({
-        content: formatMessage(messages.insertColumn),
+    });
+    _defineProperty(this, "createMergeSplitCellItems", () => {
+      const {
+        allowMergeCells,
+        editorView: {
+          state
+        },
+        intl: {
+          formatMessage
+        },
+        editorView
+      } = this.props;
+      const {
+        isDragAndDropEnabled
+      } = getPluginState(editorView.state);
+      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') ? jsx(MergeCellsIcon, null) : undefined
+        }, {
+          content: formatMessage(messages.splitCell),
+          value: {
+            name: 'split'
+          },
+          isDisabled: !splitCell(state),
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(SplitCellIcon, null) : undefined
+        }];
+      }
+      return [];
+    });
+    _defineProperty(this, "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: jsx("div", {
           css: shortcutStyle
-        }, tooltip(addColumnAfter))
-      });
-      items.push({
-        content: formatMessage(messages.insertRow),
+        }, tooltip(addColumnAfter)),
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(AddColRightIcon, null) : undefined
+      };
+    });
+    _defineProperty(this, "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: jsx("div", {
           css: shortcutStyle
-        }, tooltip(addRowAfter))
-      });
+        }, tooltip(addRowAfter)),
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(AddRowBelowIcon, null) : undefined
+      };
+    });
+    _defineProperty(this, "createClearCellsItem", () => {
+      const {
+        selectionRect,
+        intl: {
+          formatMessage
+        },
+        editorView
+      } = this.props;
+      const {
+        isDragAndDropEnabled
+      } = getPluginState(editorView.state);
       const {
         top,
         bottom,
@@ -121,85 +193,186 @@ export class ContextualMenu extends Component {
       } = 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: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(backspace)),
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(CrossCircleIcon, {
+          label: formatMessage(messages.clearCells, {
+            0: Math.max(noOfColumns, noOfRows)
+          })
+        }) : undefined
+      };
+    });
+    _defineProperty(this, "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'
-        }
-      });
-      items.push({
+        },
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(RemoveIcon, {
+          label: formatMessage(messages.removeColumns, {
+            0: noOfColumns
+          })
+        }) : undefined
+      };
+    });
+    _defineProperty(this, "createDeleteRowItem", () => {
+      const {
+        selectionRect,
+        intl: {
+          formatMessage
+        },
+        editorView
+      } = this.props;
+      const {
+        isDragAndDropEnabled
+      } = getPluginState(editorView.state);
+      const {
+        bottom,
+        top
+      } = selectionRect;
+      const noOfRows = bottom - top;
+      return {
         content: formatMessage(messages.removeRows, {
           0: noOfRows
         }),
         value: {
           name: 'delete_row'
+        },
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(RemoveIcon, {
+          label: formatMessage(messages.removeRows, {
+            0: noOfRows
+          })
+        }) : undefined
+      };
+    });
+    _defineProperty(this, "createDistributeColumnsItem", () => {
+      const {
+        selectionRect,
+        intl: {
+          formatMessage
+        },
+        editorView,
+        getEditorContainerWidth
+      } = this.props;
+      const {
+        isDragAndDropEnabled,
+        pluginConfig: {
+          allowDistributeColumns
         }
-      });
-      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)
-        });
-      }
-      if (allowDistributeColumns) {
+      } = getPluginState(editorView.state);
+      if (allowDistributeColumns && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
         var _newResizeState$chang;
-        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), this.props.getEditorContainerWidth);
+        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
         const wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
-        items.push({
+        return {
           content: formatMessage(messages.distributeColumns),
           value: {
             name: 'distribute_columns'
           },
           isDisabled: !wouldChange
-        });
+        };
       }
-      if (allowColumnSorting) {
-        const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
+      return null;
+    });
+    _defineProperty(this, "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(editorView.state.tr).length > 0;
         const warning = hasMergedCellsInTable ? {
           tooltipDescription: formatMessage(messages.canNotSortTable),
           isDisabled: true
         } : {};
-        items.push({
+        return [{
           content: formatMessage(messages.sortColumnASC),
           value: {
             name: 'sort_column_asc'
           },
           ...warning
-        });
-        items.push({
+        }, {
           content: formatMessage(messages.sortColumnDESC),
           value: {
             name: 'sort_column_desc'
           },
           ...warning
-        });
+        }];
       }
-      items.push({
-        content: formatMessage(messages.clearCells, {
-          0: Math.max(noOfColumns, noOfRows)
-        }),
-        value: {
-          name: 'clear'
-        },
-        elemAfter: jsx("div", {
-          css: shortcutStyle
-        }, tooltip(backspace))
-      });
-      return items.length ? [{
+      return null;
+    });
+    _defineProperty(this, "createOriginalContextMenuItems", () => {
+      let items = [];
+      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
-      }] : null;
+      }];
+    });
+    _defineProperty(this, "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: []
+      }, {
+        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;
     });
     _defineProperty(this, "onMenuItemActivated", ({
       item
@@ -369,12 +542,13 @@ export class ContextualMenu extends Component {
       isOpen,
       mountPoint,
       offset,
-      boundariesElement
+      boundariesElement,
+      editorView
     } = this.props;
-    const items = this.createItems();
-    if (!items) {
-      return null;
-    }
+    const {
+      isDragAndDropEnabled
+    } = getPluginState(editorView.state);
+    const items = isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
     return jsx("div", {
       "data-testid": "table-cell-contextual-menu",
       onMouseLeave: this.closeSubmenu
@@ -396,7 +570,10 @@ export class ContextualMenu extends Component {
       fitHeight: 188,
       fitWidth: contextualMenuDropdownWidth,
       boundariesElement: boundariesElement,
-      offset: offset
+      offset: offset,
+      section: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && getBooleanFF('platform.editor.menu.group-items') ? {
+        hasSeparator: true
+      } : undefined
     }));
   }
 }

package/dist/es2019/ui/FloatingContextualMenu/styles.js

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

package/dist/es2019/ui/icons/MergeCellsIcon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+export const MergeCellsIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("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"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M15.75 10L13.75 12L15.75 14",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M8.25 14L10.25 12L8.25 10",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}));

package/dist/es2019/ui/icons/SplitCellIcon.js

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

package/dist/es2019/ui/icons/index.js

@@ -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/dist/esm/types.js

@@ -124,6 +124,7 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   CONTEXTUAL_MENU_BUTTON: "".concat(tablePrefixSelector, "-contextual-menu-button"),
   CONTEXTUAL_MENU_BUTTON_FIXED: "".concat(tablePrefixSelector, "-contextual-menu-button-fixed"),
   CONTEXTUAL_MENU_ICON: "".concat(tablePrefixSelector, "-contextual-submenu-icon"),
+  CONTEXTUAL_MENU_ICON_SMALL: "".concat(tablePrefixSelector, "-contextual-submenu-icon-small"),
   // come from prosemirror-table
   SELECTED_CELL: 'selectedCell',
   // defined in ReactNodeView based on PM node name