@atlaskit/editor-plugin-table 5.7.10 → 5.8.0

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -1,16 +1,28 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
+import { useState } from 'react';
+
 import { jsx } from '@emotion/react';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 import type {
   Command,
   GetEditorContainerWidth,
 } from '@atlaskit/editor-common/types';
+import {
+  backgroundPaletteTooltipMessages,
+  cellBackgroundColorPalette,
+  ColorPalette,
+} from '@atlaskit/editor-common/ui-color';
 import {
   ArrowKeyNavigationType,
   DropdownMenu,
 } from '@atlaskit/editor-common/ui-menu';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
+import { closestElement } from '@atlaskit/editor-common/utils';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -21,13 +33,26 @@ import {
   getSelectionRect,
   isSelectionType,
 } from '@atlaskit/editor-tables/utils';
-import { token } from '@atlaskit/tokens';
+import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import Toggle from '@atlaskit/toggle';
 
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
+import {
+  setColorWithAnalytics,
+  toggleHeaderColumnWithAnalytics,
+  toggleHeaderRowWithAnalytics,
+  toggleNumberColumnWithAnalytics,
+} from '../../commands-with-analytics';
 import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
 import { getPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
+import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
 import type { PluginConfig, TableDirection } from '../../types';
+import { TableCssClassName as ClassName } from '../../types';
 import {
+  checkIfHeaderColumnEnabled,
+  checkIfHeaderRowEnabled,
+  checkIfNumberColumnEnabled,
   getMergedCellsPositions,
   getSelectedColumnIndexes,
   getSelectedRowIndexes,
@@ -38,6 +63,12 @@ import type { DragMenuConfig } from '../../utils/drag-menu';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
 
+import {
+  cellColourPreviewStyles,
+  dragMenuBackgroundColorStyles,
+  toggleStyles,
+} from './styles';
+
 type DragMenuProps = {
   direction?: TableDirection;
   index?: number;
@@ -91,7 +122,6 @@ const convertToDropdownItems = (dragMenuConfig: DragMenuConfig[]) => {
       elemBefore: item.icon ? (
         <div
           style={{
-            marginRight: token('space.negative.075', '-6px'),
             display: 'flex',
           }}
         >
@@ -125,11 +155,13 @@ export const DragMenu = ({
   getEditorContainerWidth,
   canDrag,
   editorAnalyticsAPI,
+  pluginConfig,
 }: DragMenuProps) => {
-  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
-
   const { state, dispatch } = editorView;
   const { selection } = state;
+  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+  const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+
   const selectionRect = isSelectionType(selection, 'cell')
     ? getSelectionRect(selection)!
     : findCellRectClosestToPos(selection.$from);
@@ -141,6 +173,7 @@ export const DragMenu = ({
     index !== undefined && hasMergedCells(index)(selection);
 
   const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
+  const allowBackgroundColor = pluginConfig?.allowBackgroundColor ?? false;
 
   const dragMenuConfig = getDragMenuConfig(
     direction,
@@ -157,9 +190,136 @@ export const DragMenu = ({
 
   const { menuItems, menuCallback } = convertToDropdownItems(dragMenuConfig);
 
+  const handleSubMenuRef = (ref: HTMLDivElement | null) => {
+    const parent = closestElement(
+      editorView.dom as HTMLElement,
+      '.fabric-editor-popup-scroll-parent',
+    );
+    if (!(parent && ref)) {
+      return;
+    }
+    const boundariesRect = parent.getBoundingClientRect();
+    const rect = ref.getBoundingClientRect();
+    if (rect.left + rect.width > boundariesRect.width) {
+      ref.style.left = `-${rect.width}px`;
+    }
+  };
+
+  const setColor = (color: string) => {
+    const { targetCellPosition } = getTablePluginState(editorView.state);
+    const { state, dispatch } = editorView;
+    setColorWithAnalytics(editorAnalyticsAPI)(
+      INPUT_METHOD.CONTEXT_MENU,
+      color,
+      targetCellPosition,
+    )(state, dispatch);
+    closeMenu();
+    setIsSubmenuOpen(false);
+  };
+
+  const createBackgroundColorMenuItem = () => {
+    const { targetCellPosition } = getTablePluginState(editorView.state);
+    const node = targetCellPosition
+      ? state.doc.nodeAt(targetCellPosition)
+      : null;
+    const background = hexToEditorBackgroundPaletteColor(
+      node?.attrs?.background || '#ffffff',
+    );
+    return {
+      content: 'Background color',
+      value: { name: 'background' },
+      elemBefore: (
+        <EditorBackgroundColorIcon label={'background color'} size="medium" />
+      ),
+      elemAfter: (
+        <div
+          className={DropdownMenuSharedCssClassName.SUBMENU}
+          css={dragMenuBackgroundColorStyles}
+        >
+          <div
+            css={cellColourPreviewStyles(background)}
+            className={ClassName.DRAG_SUBMENU_ICON}
+          />
+          {isSubmenuOpen && (
+            <div className={ClassName.DRAG_SUBMENU} ref={handleSubMenuRef}>
+              <ColorPalette
+                cols={7}
+                onClick={setColor}
+                selectedColor={background}
+                paletteOptions={{
+                  palette: cellBackgroundColorPalette,
+                  paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
+                  hexToPaletteColor: hexToEditorBackgroundPaletteColor,
+                }}
+              />
+            </div>
+          )}
+        </div>
+      ),
+    } as MenuItem;
+  };
+
+  const toggleHeaderColumn = () => {
+    toggleHeaderColumnWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+  };
+
+  const toggleHeaderRow = () => {
+    toggleHeaderRowWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+  };
+
+  const toggleRowNumbers = () => {
+    toggleNumberColumnWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+  };
+
+  const createhHeaderRowColumnMenuItem = (direction: TableDirection) => {
+    return direction === 'column'
+      ? ({
+          content: 'Header column',
+          value: { name: 'header_column' },
+          elemAfter: (
+            <div css={toggleStyles}>
+              <Toggle
+                id="toggle-header-column"
+                onChange={toggleHeaderColumn}
+                isChecked={checkIfHeaderColumnEnabled(selection)}
+              />
+            </div>
+          ),
+        } as MenuItem)
+      : ({
+          content: 'Header row',
+          value: { name: 'header_row' },
+          elemAfter: (
+            <div css={toggleStyles}>
+              <Toggle
+                id="toggle-header-row"
+                onChange={toggleHeaderRow}
+                isChecked={checkIfHeaderRowEnabled(selection)}
+              />
+            </div>
+          ),
+        } as MenuItem);
+  };
+
+  const createRowNumbersMenuItem = () => {
+    return {
+      content: 'Row numbers',
+      value: { name: 'row_numbers' },
+      elemAfter: (
+        <div css={toggleStyles}>
+          <Toggle
+            id="toggle-row-numbers"
+            onChange={toggleRowNumbers}
+            isChecked={checkIfNumberColumnEnabled(selection)}
+          />
+        </div>
+      ),
+    } as MenuItem;
+  };
+
   /**
    * This function is to check if the menu should be closed or not.
-   * As when continously clicking on drag handle on different rows/columns,
+   * As when continously clicking on tyle handle on different rows/columns,
    * should open the menu corresponding to the position of the drag handle.
    * @returns true when the menu should be closed, false otherwise
    */
@@ -194,11 +354,40 @@ export const DragMenu = ({
 
   const handleMenuItemActivated = ({ item }: { item: MenuItem }) => {
     menuCallback[item.value.name]?.(state, dispatch);
-    closeMenu();
+
+    switch (item.value.name) {
+      case 'header_column':
+        toggleHeaderColumn();
+        break;
+      case 'header_row':
+        toggleHeaderRow();
+        break;
+      case 'row_numbers':
+        toggleRowNumbers();
+        break;
+      default:
+        break;
+    }
+
+    if (
+      ['header_column', 'header_row', 'row_numbers', 'background'].indexOf(
+        item.value.name,
+      ) <= -1
+    ) {
+      closeMenu();
+    }
   };
 
   const handleItemMouseEnter = ({ item }: { item: MenuItem }) => {
-    if (!selectionRect || !item.value.name?.startsWith('delete')) {
+    if (!selectionRect) {
+      return;
+    }
+
+    if (item.value.name === 'background' && !isSubmenuOpen) {
+      setIsSubmenuOpen(true);
+    }
+
+    if (!item.value.name?.startsWith('delete')) {
       return;
     }
 
@@ -208,6 +397,10 @@ export const DragMenu = ({
   };
 
   const handleItemMouseLeave = ({ item }: { item: any }) => {
+    if (item.value.name === 'background' && isSubmenuOpen) {
+      setIsSubmenuOpen(false);
+    }
+
     if (
       [
         'sort_column_asc',
@@ -224,6 +417,32 @@ export const DragMenu = ({
     return null;
   }
 
+  if (
+    allowBackgroundColor &&
+    getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
+  ) {
+    menuItems[0].items.unshift(createBackgroundColorMenuItem());
+  }
+
+  // If first row, add toggle for Hearder row, default is true
+  // If first column, add toggle for Header column, default is false
+  if (
+    getBooleanFF('platform.editor.table.new-cell-context-menu-styling') &&
+    index === 0
+  ) {
+    menuItems.push({ items: [createhHeaderRowColumnMenuItem(direction)] });
+  }
+
+  // All rows, add toggle for numbered rows, default is false
+  if (
+    getBooleanFF('platform.editor.table.new-cell-context-menu-styling') &&
+    direction === 'row'
+  ) {
+    index === 0
+      ? menuItems[menuItems.length - 1].items.push(createRowNumbersMenuItem())
+      : menuItems.push({ items: [createRowNumbersMenuItem()] });
+  }
+
   return (
     <DropdownMenu
       mountTo={mountPoint}

package/src/ui/FloatingDragMenu/index.tsx

@@ -12,7 +12,7 @@ import {
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { TableDirection } from '../../types';
+import type { PluginConfig, TableDirection } from '../../types';
 import { dragMenuDropdownWidth } from '../consts';
 
 import { DragMenu } from './DragMenu';
@@ -32,6 +32,7 @@ export interface Props {
   canDrag?: boolean;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
   stickyHeaders?: RowStickyState;
+  pluginConfig?: PluginConfig;
 }
 
 const FloatingDragMenu = ({
@@ -48,6 +49,7 @@ const FloatingDragMenu = ({
   canDrag,
   editorAnalyticsAPI,
   stickyHeaders,
+  pluginConfig,
 }: Props) => {
   if (
     !isOpen ||
@@ -105,6 +107,7 @@ const FloatingDragMenu = ({
         getEditorContainerWidth={getEditorContainerWidth}
         canDrag={canDrag}
         editorAnalyticsAPI={editorAnalyticsAPI}
+        pluginConfig={pluginConfig}
       />
     </Popup>
   );

package/src/ui/FloatingDragMenu/styles.ts

@@ -0,0 +1,71 @@
+import { css } from '@emotion/react';
+
+import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
+import { N60A, N90 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+
+import { TableCssClassName as ClassName } from '../../types';
+import { dragMenuDropdownWidth } from '../consts';
+
+export const cellColourPreviewStyles = (selectedColor: string) => css`
+  &::before {
+    background: ${selectedColor};
+  }
+`;
+
+export const dragMenuBackgroundColorStyles = css`
+  .${ClassName.DRAG_SUBMENU} {
+    border-radius: ${token('border.radius', '3px')};
+    background: ${token('elevation.surface.overlay', 'white')};
+    box-shadow: ${token(
+      'elevation.shadow.overlay',
+      `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`,
+    )};
+    display: block;
+    position: absolute;
+    top: 0;
+    left: ${dragMenuDropdownWidth}px;
+    padding: ${token('space.100', '8px')};
+
+    > div {
+      padding: 0;
+    }
+  }
+
+  .${ClassName.DRAG_SUBMENU_ICON} {
+    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)};
+    }
+  }
+`;
+
+export const toggleStyles = css`
+  display: flex;
+  input[type='checkbox'] {
+    width: 30px;
+    height: 14px;
+    pointer-events: initial;
+    cursor: pointer;
+  }
+  > label {
+    margin: 0px;
+    pointer-events: none;
+    > span {
+      pointer-events: none;
+    }
+  }
+`;

package/src/ui/consts.ts

@@ -13,6 +13,7 @@ import {
   akEditorUnitZIndex,
   akRichMediaResizeZIndex,
 } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import {
   B200,
   N0,
@@ -118,7 +119,11 @@ export const resizeLineWidth = 2;
 export const resizeHandlerZIndex =
   columnControlsZIndex + akRichMediaResizeZIndex;
 export const contextualMenuTriggerSize = 16;
-export const contextualMenuDropdownWidth = 180;
+export const contextualMenuDropdownWidth = getBooleanFF(
+  'platform.editor.table.drag-and-drop',
+)
+  ? 250
+  : 180;
 export const stickyRowZIndex = resizeHandlerZIndex + 2;
 export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;

package/tsconfig.app.json

@@ -84,6 +84,9 @@
     {
       "path": "../../design-system/theme/tsconfig.app.json"
     },
+    {
+      "path": "../../design-system/toggle/tsconfig.app.json"
+    },
     {
       "path": "../../design-system/tokens/tsconfig.app.json"
     },