@atlaskit/editor-plugin-table 7.2.3 → 7.3.1

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
-import { useState } from 'react';
+/** @jsxFrag */
+import React, { useEffect, useState } from 'react';
 
 import { jsx } from '@emotion/react';
 import type {
@@ -18,14 +19,16 @@ import type {
   Command,
   GetEditorContainerWidth,
 } from '@atlaskit/editor-common/types';
+import { withOuterListeners } from '@atlaskit/editor-common/ui';
 import {
   backgroundPaletteTooltipMessages,
   cellBackgroundColorPalette,
   ColorPalette,
+  getSelectedRowAndColumnFromPalette,
 } from '@atlaskit/editor-common/ui-color';
 import {
+  ArrowKeyNavigationProvider,
   ArrowKeyNavigationType,
-  DropdownMenu,
 } from '@atlaskit/editor-common/ui-menu';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import { closestElement } from '@atlaskit/editor-common/utils';
@@ -72,8 +75,9 @@ import type {
   DragMenuOptionIdType,
 } from '../../utils/drag-menu';
 import { getDragMenuConfig } from '../../utils/drag-menu';
-import { dragMenuDropdownWidth } from '../consts';
+import { colorPalletteColumns } from '../consts';
 
+import { DropdownMenu } from './DropdownMenu';
 import {
   cellColourPreviewStyles,
   dragMenuBackgroundColorStyles,
@@ -84,14 +88,11 @@ import {
 type DragMenuProps = {
   direction?: TableDirection;
   index?: number;
-  tableRef?: HTMLTableElement;
+  target?: Element;
   tableNode?: PmNode;
   editorView: EditorView;
   isOpen?: boolean;
   targetCellPosition?: number;
-  mountPoint?: HTMLElement;
-  boundariesElement?: HTMLElement;
-  scrollableElement?: HTMLElement;
   pluginConfig?: PluginConfig;
   getEditorContainerWidth: GetEditorContainerWidth;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
@@ -253,336 +254,387 @@ const convertToDropdownItems = (
   return { menuItems, menuCallback };
 };
 
-export const DragMenu = ({
-  direction = 'row',
-  index,
-  isOpen,
-  editorView,
-  tableNode,
-  mountPoint,
-  boundariesElement,
-  scrollableElement,
-  targetCellPosition,
-  getEditorContainerWidth,
-  editorAnalyticsAPI,
-  pluginConfig,
-  intl: { formatMessage },
-}: DragMenuProps & WrappedComponentProps) => {
-  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);
-
-  const hasMergedCells =
-    direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
-
-  const shouldMoveDisabled =
-    index !== undefined && hasMergedCells(index)(selection);
-
-  const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
-  const allowBackgroundColor = pluginConfig?.allowBackgroundColor ?? false;
-
-  const dragMenuConfig = getDragMenuConfig(
-    direction,
-    getEditorContainerWidth,
-    !shouldMoveDisabled,
-    hasMergedCellsInTable,
-    editorView,
-    tableMap,
+const ColorPaletteWithListeners = withOuterListeners(ColorPalette);
+
+export const DragMenu = React.memo(
+  ({
+    direction = 'row',
     index,
+    target,
+    isOpen,
+    editorView,
+    tableNode,
     targetCellPosition,
-    selectionRect,
+    getEditorContainerWidth,
     editorAnalyticsAPI,
-  );
-
-  const { menuItems, menuCallback } = convertToDropdownItems(
-    dragMenuConfig,
-    formatMessage,
-    selectionRect,
-  );
-
-  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);
+    pluginConfig,
+    intl: { formatMessage },
+  }: DragMenuProps & WrappedComponentProps) => {
     const { state, dispatch } = editorView;
-    setColorWithAnalytics(editorAnalyticsAPI)(
-      INPUT_METHOD.CONTEXT_MENU,
-      color,
+    const { selection } = state;
+    const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+    const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+    const { isKeyboardModeActive } = getPluginState(state);
+
+    const selectionRect = isSelectionType(selection, 'cell')
+      ? getSelectionRect(selection)!
+      : findCellRectClosestToPos(selection.$from);
+
+    const hasMergedCells =
+      direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
+
+    const shouldMoveDisabled =
+      index !== undefined && hasMergedCells(index)(selection);
+
+    const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
+    const allowBackgroundColor = pluginConfig?.allowBackgroundColor ?? false;
+
+    const dragMenuConfig = getDragMenuConfig(
+      direction,
+      getEditorContainerWidth,
+      !shouldMoveDisabled,
+      hasMergedCellsInTable,
+      editorView,
+      tableMap,
+      index,
       targetCellPosition,
-    )(state, dispatch);
-    closeMenu();
-    setIsSubmenuOpen(false);
-  };
+      selectionRect,
+      editorAnalyticsAPI,
+    );
 
-  const createBackgroundColorMenuItem = () => {
-    const { targetCellPosition } = getTablePluginState(editorView.state);
-    const node = targetCellPosition
-      ? state.doc.nodeAt(targetCellPosition)
-      : null;
-    const background = hexToEditorBackgroundPaletteColor(
-      node?.attrs?.background || '#ffffff',
+    const { menuItems, menuCallback } = convertToDropdownItems(
+      dragMenuConfig,
+      formatMessage,
+      selectionRect,
     );
-    return {
-      content: formatMessage(messages.backgroundColor),
-      value: { name: 'background' },
-      elemBefore: (
-        <span css={elementBeforeIconStyles}>
-          <EditorBackgroundColorIcon
-            label={formatMessage(messages.backgroundColor)}
-            size="medium"
-          />
-        </span>
-      ),
-      elemAfter: (
-        <div
-          className={DropdownMenuSharedCssClassName.SUBMENU}
-          css={dragMenuBackgroundColorStyles}
-        >
+
+    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',
+      );
+
+      const { selectedRowIndex, selectedColumnIndex } =
+        getSelectedRowAndColumnFromPalette(
+          cellBackgroundColorPalette,
+          background,
+          colorPalletteColumns,
+        );
+
+      return {
+        key: 'background',
+        content: formatMessage(messages.backgroundColor),
+        value: { name: 'background' },
+        elemBefore: (
+          <span css={elementBeforeIconStyles}>
+            <EditorBackgroundColorIcon
+              label={formatMessage(messages.backgroundColor)}
+              size="medium"
+            />
+          </span>
+        ),
+        elemAfter: (
           <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;
-  };
+            className={DropdownMenuSharedCssClassName.SUBMENU}
+            css={dragMenuBackgroundColorStyles}
+          >
+            <div
+              css={cellColourPreviewStyles(background)}
+              className={ClassName.DRAG_SUBMENU_ICON}
+            />
+            {isSubmenuOpen && (
+              <div className={ClassName.DRAG_SUBMENU} ref={handleSubMenuRef}>
+                <ArrowKeyNavigationProvider
+                  type={ArrowKeyNavigationType.COLOR}
+                  selectedRowIndex={selectedRowIndex}
+                  selectedColumnIndex={selectedColumnIndex}
+                  handleClose={() => {
+                    const keyboardEvent = new KeyboardEvent('keydown', {
+                      key: 'ArrowDown',
+                      bubbles: true,
+                    });
+                    setIsSubmenuOpen(false);
+                    (target as HTMLElement)?.focus();
+                    target?.dispatchEvent(keyboardEvent);
+                  }}
+                  isPopupPositioned={true}
+                  isOpenedByKeyboard={isKeyboardModeActive}
+                >
+                  <ColorPaletteWithListeners
+                    cols={colorPalletteColumns}
+                    onClick={(color) => {
+                      setColor(color);
+                    }}
+                    selectedColor={background}
+                    paletteOptions={{
+                      palette: cellBackgroundColorPalette,
+                      paletteColorTooltipMessages:
+                        backgroundPaletteTooltipMessages,
+                      hexToPaletteColor: hexToEditorBackgroundPaletteColor,
+                    }}
+                  />
+                </ArrowKeyNavigationProvider>
+              </div>
+            )}
+          </div>
+        ),
+      } as MenuItem;
+    };
+
+    const toggleHeaderColumn = () => {
+      toggleHeaderColumnWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+    };
+
+    const toggleHeaderRow = () => {
+      toggleHeaderRowWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+    };
+
+    const toggleRowNumbers = () => {
+      toggleNumberColumnWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+    };
+
+    const createHeaderRowColumnMenuItem = (direction: TableDirection) => {
+      return direction === 'column'
+        ? ({
+            key: 'header_column',
+            content: formatMessage(messages.headerColumn),
+            value: { name: 'header_column' },
+            elemAfter: (
+              <div css={toggleStyles}>
+                <Toggle
+                  id="toggle-header-column"
+                  onChange={toggleHeaderColumn}
+                  isChecked={checkIfHeaderColumnEnabled(selection)}
+                />
+              </div>
+            ),
+          } as MenuItem)
+        : ({
+            key: 'header_row',
+            content: formatMessage(messages.headerRow),
+            value: { name: 'header_row' },
+            elemAfter: (
+              <div css={toggleStyles}>
+                <Toggle
+                  id="toggle-header-row"
+                  onChange={toggleHeaderRow}
+                  isChecked={checkIfHeaderRowEnabled(selection)}
+                />
+              </div>
+            ),
+          } as MenuItem);
+    };
+
+    const createRowNumbersMenuItem = () => {
+      return {
+        key: 'row_numbers',
+        content: formatMessage(messages.rowNumbers),
+        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 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
+     */
+    const shouldCloseMenu = (state: EditorState) => {
+      let {
+        isDragMenuOpen: previousOpenState,
+        dragMenuDirection: previousDragMenuDirection,
+        dragMenuIndex: previousDragMenuIndex,
+      } = getPluginState(state);
+
+      // menu open but menu direction changed, means user clicked on drag handle of different row/column
+      // menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
+      // 2 scenarios above , menu should not be closed.
+      if (
+        (previousOpenState === true &&
+          previousDragMenuDirection !== direction) ||
+        (previousOpenState === true &&
+          previousDragMenuDirection === direction &&
+          previousDragMenuIndex !== index)
+      ) {
+        return false;
+      } else {
+        return true;
+      }
+    };
+
+    const closeMenu = (focusTarget: 'editor' | 'handle' = 'handle') => {
+      const { state, dispatch } = editorView;
+      if (shouldCloseMenu(state)) {
+        if (target && focusTarget === 'handle') {
+          (target as HTMLElement | null)?.focus();
+        } else {
+          editorView.dom.focus();
+        }
+        toggleDragMenu(false, direction, index)(state, dispatch);
+      }
+    };
 
-  const toggleHeaderColumn = () => {
-    toggleHeaderColumnWithAnalytics(editorAnalyticsAPI)(state, dispatch);
-  };
+    const handleMenuItemActivated = ({ item }: { item: MenuItem }) => {
+      menuCallback[item.value.name]?.(state, dispatch);
 
-  const toggleHeaderRow = () => {
-    toggleHeaderRowWithAnalytics(editorAnalyticsAPI)(state, dispatch);
-  };
+      switch (item.value.name) {
+        case 'background':
+          setIsSubmenuOpen(!isSubmenuOpen);
+          break;
+        case 'header_column':
+          toggleHeaderColumn();
+          break;
+        case 'header_row':
+          toggleHeaderRow();
+          break;
+        case 'row_numbers':
+          toggleRowNumbers();
+          break;
+        default:
+          break;
+      }
 
-  const toggleRowNumbers = () => {
-    toggleNumberColumnWithAnalytics(editorAnalyticsAPI)(state, dispatch);
-  };
+      if (
+        ['header_column', 'header_row', 'row_numbers', 'background'].indexOf(
+          item.value.name,
+        ) <= -1
+      ) {
+        closeMenu('editor');
+      }
+    };
 
-  const createhHeaderRowColumnMenuItem = (direction: TableDirection) => {
-    return direction === 'column'
-      ? ({
-          content: formatMessage(messages.headerColumn),
-          value: { name: 'header_column' },
-          elemAfter: (
-            <div css={toggleStyles}>
-              <Toggle
-                id="toggle-header-column"
-                onChange={toggleHeaderColumn}
-                isChecked={checkIfHeaderColumnEnabled(selection)}
-              />
-            </div>
-          ),
-        } as MenuItem)
-      : ({
-          content: formatMessage(messages.headerRow),
-          value: { name: 'header_row' },
-          elemAfter: (
-            <div css={toggleStyles}>
-              <Toggle
-                id="toggle-header-row"
-                onChange={toggleHeaderRow}
-                isChecked={checkIfHeaderRowEnabled(selection)}
-              />
-            </div>
-          ),
-        } as MenuItem);
-  };
+    const handleItemMouseEnter = ({ item }: { item: MenuItem }) => {
+      if (!selectionRect) {
+        return;
+      }
 
-  const createRowNumbersMenuItem = () => {
-    return {
-      content: formatMessage(messages.rowNumbers),
-      value: { name: 'row_numbers' },
-      elemAfter: (
-        <div css={toggleStyles}>
-          <Toggle
-            id="toggle-row-numbers"
-            onChange={toggleRowNumbers}
-            isChecked={checkIfNumberColumnEnabled(selection)}
-          />
-        </div>
-      ),
-    } as MenuItem;
-  };
+      if (item.value.name === 'background' && !isSubmenuOpen) {
+        setIsSubmenuOpen(true);
+      }
 
-  /**
-   * This function is to check if the menu should be closed or not.
-   * 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
-   */
-  const shouldCloseMenu = (state: EditorState) => {
-    let {
-      isDragMenuOpen: previousOpenState,
-      dragMenuDirection: previousDragMenuDirection,
-      dragMenuIndex: previousDragMenuIndex,
-    } = getPluginState(state);
-
-    // menu open but menu direction changed, means user clicked on drag handle of different row/column
-    // menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
-    // 2 scenarios above , menu should not be closed.
-    if (
-      (previousOpenState === true && previousDragMenuDirection !== direction) ||
-      (previousOpenState === true &&
-        previousDragMenuDirection === direction &&
-        previousDragMenuIndex !== index)
-    ) {
-      return false;
-    } else {
-      return true;
-    }
-  };
+      if (!item.value.name?.startsWith('delete')) {
+        return;
+      }
 
-  const closeMenu = () => {
-    const { state, dispatch } = editorView;
-    if (shouldCloseMenu(state)) {
-      toggleDragMenu(false, direction, index)(state, dispatch);
-    }
-  };
+      (item.value.name === 'delete_column'
+        ? hoverColumns(getSelectedColumnIndexes(selectionRect), true)
+        : hoverRows(getSelectedRowIndexes(selectionRect), true))(
+        state,
+        dispatch,
+      );
+    };
+
+    const handleItemMouseLeave = ({ item }: { item: any }) => {
+      if (item.value.name === 'background' && isSubmenuOpen) {
+        setIsSubmenuOpen(false);
+      }
 
-  const handleMenuItemActivated = ({ item }: { item: MenuItem }) => {
-    menuCallback[item.value.name]?.(state, dispatch);
-
-    switch (item.value.name) {
-      case 'header_column':
-        toggleHeaderColumn();
-        break;
-      case 'header_row':
-        toggleHeaderRow();
-        break;
-      case 'row_numbers':
-        toggleRowNumbers();
-        break;
-      default:
-        break;
+      if (
+        [
+          'sort_column_asc',
+          'sort_column_desc',
+          'delete_column',
+          'delete_row',
+        ].indexOf(item.value.name) > -1
+      ) {
+        clearHoverSelection()(state, dispatch);
+      }
+    };
+
+    useEffect(() => {
+      // focus on first menu item automatically when menu renders
+      // and user is using keyboard
+      if (isOpen && target && isKeyboardModeActive) {
+        const keyboardEvent = new KeyboardEvent('keydown', {
+          key: 'ArrowDown',
+          bubbles: true,
+        });
+        target.dispatchEvent(keyboardEvent);
+      }
+    }, [isOpen, target, isKeyboardModeActive]);
+
+    if (!menuItems) {
+      return null;
     }
 
     if (
-      ['header_column', 'header_row', 'row_numbers', 'background'].indexOf(
-        item.value.name,
-      ) <= -1
+      allowBackgroundColor &&
+      getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
     ) {
-      closeMenu();
-    }
-  };
-
-  const handleItemMouseEnter = ({ item }: { item: MenuItem }) => {
-    if (!selectionRect) {
-      return;
-    }
-
-    if (item.value.name === 'background' && !isSubmenuOpen) {
-      setIsSubmenuOpen(true);
-    }
-
-    if (!item.value.name?.startsWith('delete')) {
-      return;
+      menuItems[0].items.unshift(createBackgroundColorMenuItem());
     }
 
-    (item.value.name === 'delete_column'
-      ? hoverColumns(getSelectedColumnIndexes(selectionRect), true)
-      : hoverRows(getSelectedRowIndexes(selectionRect), true))(state, dispatch);
-  };
-
-  const handleItemMouseLeave = ({ item }: { item: any }) => {
-    if (item.value.name === 'background' && isSubmenuOpen) {
-      setIsSubmenuOpen(false);
+    // If first row, add toggle for Header 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: [createHeaderRowColumnMenuItem(direction)] });
     }
 
+    // All rows, add toggle for numbered rows, default is false
     if (
-      [
-        'sort_column_asc',
-        'sort_column_desc',
-        'delete_column',
-        'delete_row',
-      ].indexOf(item.value.name) > -1
+      getBooleanFF('platform.editor.table.new-cell-context-menu-styling') &&
+      direction === 'row'
     ) {
-      clearHoverSelection()(state, dispatch);
+      index === 0
+        ? menuItems[menuItems.length - 1].items.push(createRowNumbersMenuItem())
+        : menuItems.push({ items: [createRowNumbersMenuItem()] });
     }
-  };
 
-  if (!menuItems) {
-    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}
-      //This needs be removed when the a11y is completely handled
-      //Disabling key navigation now as it works only partially
-      arrowKeyNavigationProviderOptions={{
-        type: ArrowKeyNavigationType.MENU,
-        disableArrowKeyNavigation: true,
-      }}
-      items={menuItems}
-      isOpen={isOpen}
-      onOpenChange={closeMenu}
-      onItemActivated={handleMenuItemActivated}
-      onMouseEnter={handleItemMouseEnter}
-      onMouseLeave={handleItemMouseLeave}
-      fitWidth={dragMenuDropdownWidth}
-      boundariesElement={boundariesElement}
-      section={{ hasSeparator: true }}
-    />
-  );
-};
+    return (
+      <DropdownMenu
+        disableKeyboardHandling={isSubmenuOpen}
+        section={{ hasSeparator: true }}
+        target={target as HTMLElement | undefined}
+        items={menuItems}
+        onItemActivated={handleMenuItemActivated}
+        onMouseEnter={handleItemMouseEnter}
+        onMouseLeave={handleItemMouseLeave}
+        handleClose={closeMenu}
+      />
+    );
+  },
+);
 
 export default injectIntl(DragMenu);