@atlaskit/editor-plugin-table 7.3.0 → 7.3.1

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+
+import { DropList } from '@atlaskit/editor-common/ui';
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
+import {
+  ArrowKeyNavigationProvider,
+  ArrowKeyNavigationType,
+  DropdownMenuItem,
+} from '@atlaskit/editor-common/ui-menu';
+import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { MenuGroup, Section } from '@atlaskit/menu';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
+import { dragMenuDropdownWidth } from '../consts';
+
+const DropListWithOutsideListeners =
+  withReactEditorViewOuterListeners(DropList);
+
+type DropdownMenuProps = {
+  target?: HTMLElement;
+  items: Array<{
+    items: MenuItem[];
+  }>;
+  /**
+   * use to toggle top level menu keyboard navigation and action keys
+   * e.g. should be false if submenu is rendered as a child to avoid multiple keydown handlers
+   */
+  disableKeyboardHandling: boolean;
+  section: { hasSeparator?: boolean; title?: string };
+  onItemActivated?: (attrs: {
+    item: MenuItem;
+    shouldCloseMenu?: boolean;
+  }) => void;
+  handleClose: (focusTarget: 'editor' | 'handle') => void;
+  onMouseEnter: (attrs: { item: MenuItem }) => void;
+  onMouseLeave: (attrs: { item: MenuItem }) => void;
+};
+
+export const DropdownMenu = ({
+  target,
+  items,
+  section,
+  disableKeyboardHandling,
+  onItemActivated,
+  handleClose,
+  onMouseEnter,
+  onMouseLeave,
+}: DropdownMenuProps) => {
+  const innerMenu = () => {
+    return (
+      <DropListWithOutsideListeners
+        isOpen
+        shouldFitContainer
+        position={['bottom', 'left'].join(' ')}
+        handleClickOutside={() => handleClose('editor')}
+        handleEscapeKeydown={() => {
+          if (!disableKeyboardHandling) {
+            handleClose('handle');
+          }
+        }}
+        handleEnterKeydown={(e: KeyboardEvent) => {
+          if (!disableKeyboardHandling) {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        }}
+        targetRef={target}
+      >
+        <div style={{ height: 0, minWidth: dragMenuDropdownWidth }} />
+        <MenuGroup role="menu">
+          {items.map((group, index) => (
+            <Section
+              hasSeparator={section?.hasSeparator && index > 0}
+              title={section?.title}
+              key={index}
+            >
+              {group.items.map((item) => (
+                <DropdownMenuItem
+                  shouldUseDefaultRole={false}
+                  key={item.key ?? String(item.content)}
+                  item={item}
+                  onItemActivated={onItemActivated}
+                  onMouseEnter={onMouseEnter}
+                  onMouseLeave={onMouseLeave}
+                />
+              ))}
+            </Section>
+          ))}
+        </MenuGroup>
+      </DropListWithOutsideListeners>
+    );
+  };
+
+  if (disableKeyboardHandling) {
+    return innerMenu();
+  }
+
+  return (
+    <ArrowKeyNavigationProvider
+      closeOnTab
+      type={ArrowKeyNavigationType.MENU}
+      onSelection={(index) => {
+        const results = items.flatMap((item) =>
+          'items' in item ? item.items : item,
+        );
+
+        // onSelection is called when any focusable element is 'activated'
+        // this is an issue as some menu items have toggles, which cause the index value
+        // in the callback to be outside of array length.
+        // The logic below normalises the index value based on the number
+        // of menu items with 2 focusable elements, and adjusts the index to ensure
+        // the correct menu item is sent in onItemActivated callback
+        if (
+          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
+        ) {
+          const keys = ['row_numbers', 'header_row', 'header_column'];
+          let doubleItemCount = 0;
+
+          const firstIndex = results.findIndex((value) =>
+            keys.includes(value.key!),
+          );
+
+          if (firstIndex === -1 || index <= firstIndex) {
+            onItemActivated && onItemActivated({ item: results[index] });
+            return;
+          }
+
+          for (let i = firstIndex; i < results.length; i += 1) {
+            if (keys.includes(results[i].key!)) {
+              doubleItemCount += 1;
+            }
+            if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
+              onItemActivated && onItemActivated({ item: results[i] });
+              return;
+            }
+
+            if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+              onItemActivated && onItemActivated({ item: results[i] });
+              return;
+            }
+          }
+        } else {
+          onItemActivated && onItemActivated({ item: results[index] });
+        }
+      }}
+    >
+      {innerMenu()}
+    </ArrowKeyNavigationProvider>
+  );
+};

package/src/ui/FloatingDragMenu/index.tsx

@@ -63,6 +63,8 @@ const FloatingDragMenu = ({
       ? document.querySelector('#drag-handle-button-row')
       : document.querySelector('#drag-handle-button-column');
 
+  const offset = direction === 'row' ? [-9, 6] : [0, -7];
+
   if (
     !targetHandleRef ||
     !(editorView.state.selection instanceof CellSelection)
@@ -70,8 +72,6 @@ const FloatingDragMenu = ({
     return null;
   }
 
-  const offset = direction === 'row' ? [-9, 6] : [0, -7];
-
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return (
     <Popup
@@ -97,10 +97,10 @@ const FloatingDragMenu = ({
       <DragMenu
         editorView={editorView}
         isOpen={isOpen}
-        boundariesElement={boundariesElement}
         tableNode={tableNode}
         direction={direction}
         index={index}
+        target={targetHandleRef || undefined}
         targetCellPosition={targetCellPosition}
         getEditorContainerWidth={getEditorContainerWidth}
         editorAnalyticsAPI={editorAnalyticsAPI}

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -17,9 +17,11 @@ import {
   selectColumns,
 } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import type { TriggerType } from '../../../pm-plugins/drag-and-drop/types';
 import type { CellHoverMeta, HandleTypes } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
+import type { DragHandleAppearance } from '../../DragHandle';
 import { DragHandle } from '../../DragHandle';
 
 export interface ColumnControlsProps {
@@ -28,7 +30,6 @@ export interface ColumnControlsProps {
   isInDanger?: boolean;
   tableRef: HTMLTableElement;
   hoveredCell?: CellHoverMeta;
-  isResizing?: boolean;
   stickyTop?: number;
   localId?: string;
   rowHeights?: number[];
@@ -57,7 +58,6 @@ export const ColumnControls = ({
   tableActive,
   tableRef,
   hoveredCell,
-  isResizing,
   stickyTop,
   localId,
   isInDanger,
@@ -158,14 +158,13 @@ export const ColumnControls = ({
     }
   }, [editorView, tableActive]);
 
-  const handleMouseUp = useCallback(
-    (event) => {
+  const toggleDragMenuHandler = useCallback(
+    (trigger: TriggerType, event) => {
       const { state, dispatch } = editorView;
-      if (event.shiftKey) {
+      if (event?.shiftKey) {
         return;
       }
-
-      toggleDragMenu(undefined, 'column', colIndex)(state, dispatch);
+      toggleDragMenu(undefined, 'column', colIndex, trigger)(state, dispatch);
     },
     [editorView, colIndex],
   );
@@ -178,52 +177,15 @@ export const ColumnControls = ({
     columnControlsRef.current.scrollLeft = getScrollOffset?.() ?? 0;
   }
 
-  const generateHandleByType = (type: HandleTypes): JSX.Element | null => {
-    if (!hoveredCell || !colWidths?.length) {
-      return null;
-    }
+  const generateHandleByType = (
+    type: HandleTypes,
+    appearance: DragHandleAppearance,
+    gridColumn: string,
+    indexes: number[],
+  ) => {
     const isHover = type === 'hover';
-
-    const isColumnsSelected = selectedColIndexes.length > 0;
     const previewHeight = rowHeights?.reduce((sum, cur) => sum + cur, 0) ?? 0;
 
-    const showCondition = isHover
-      ? isColumnsSelected &&
-        !selectedColIndexes.includes(colIndex!) &&
-        Number.isFinite(hoveredCell?.colIndex)
-      : selectedColIndexes.length < colWidths?.length &&
-        Number.isFinite(hoveredCell?.colIndex);
-
-    if (!showCondition) {
-      return null;
-    }
-
-    const gridColumnPosition = `${colIndex! + 1} / span 1`;
-    const selectedColumnPosition = `${selectedColIndexes[0] + 1} / span ${
-      selectedColIndexes.length
-    }`;
-
-    const hoveredAppearance = selectedColIndexes.includes(colIndex!)
-      ? isInDanger
-        ? 'danger'
-        : 'selected'
-      : 'default';
-
-    const currentSelectionAppearance = isColumnsSelected
-      ? isInDanger
-        ? 'danger'
-        : 'selected'
-      : hoveredAppearance;
-
-    const isSelecting = isColumnsSelected && !isHover;
-
-    // this indexes are used to calculate the drag and drop source
-    const indexes = isColumnsSelected
-      ? isHover
-        ? colIndexes
-        : selectedColIndexes
-      : colIndexes;
-
     const previewWidth =
       colWidths?.reduce<number>(
         (sum, v, i) =>
@@ -235,7 +197,8 @@ export const ColumnControls = ({
       <div
         key={type}
         style={{
-          gridColumn: isSelecting ? selectedColumnPosition : gridColumnPosition,
+          gridColumn,
+          gridRow: '1',
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
@@ -245,9 +208,8 @@ export const ColumnControls = ({
           width: '100%',
           position: 'relative',
         }}
-        data-column-control-index={hoveredCell.colIndex}
         data-testid={`table-floating-column-${
-          isSelecting ? selectedColIndexes[0] : colIndex!
+          isHover ? colIndex : selectedColIndexes[0]
         }-drag-handle`}
       >
         <DragHandle
@@ -255,39 +217,62 @@ export const ColumnControls = ({
           direction="column"
           tableLocalId={localId || ''}
           indexes={indexes}
-          forceDefaultHandle={isHover ? false : isColumnsSelected}
           previewWidth={previewWidth}
+          forceDefaultHandle={!isHover}
           previewHeight={previewHeight}
-          appearance={
-            isSelecting ? currentSelectionAppearance : hoveredAppearance
-          }
+          appearance={appearance}
           onClick={handleClick}
           onMouseOver={handleMouseOver}
           onMouseOut={handleMouseOut}
-          onMouseUp={handleMouseUp}
+          toggleDragMenu={toggleDragMenuHandler}
           editorView={editorView}
         />
       </div>
     );
   };
 
-  const columnHandles = (hoveredCell: CellHoverMeta | undefined) => {
-    if (!hoveredCell) {
+  const columnHandles = () => {
+    const handles = [];
+    const isColumnSelected = selectedColIndexes.length > 0;
+    const isEntireTableSelected =
+      (colWidths || []).length > selectedColIndexes.length;
+
+    if (!tableActive) {
       return null;
     }
 
-    if (hoveredCell.colIndex === undefined) {
-      return generateHandleByType('selected');
-    }
+    // placeholder / selected need to always render at least one handle
+    // so it can be focused via keyboard shortcuts
+    handles.push(
+      generateHandleByType(
+        'selected',
+        isColumnSelected && isEntireTableSelected
+          ? isInDanger
+            ? 'danger'
+            : 'selected'
+          : 'placeholder',
+        `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`,
+        selectedColIndexes,
+      ),
+    );
 
-    const sortedHandles = [
-      generateHandleByType('hover'),
-      generateHandleByType('selected'),
-    ];
+    if (
+      hoveredCell &&
+      isTableHovered &&
+      colIndex !== undefined &&
+      !selectedColIndexes.includes(colIndex)
+    ) {
+      handles.push(
+        generateHandleByType(
+          'hover',
+          'default',
+          `${colIndex! + 1} / span 1`,
+          colIndexes,
+        ),
+      );
+    }
 
-    return hoveredCell.colIndex < selectedColIndexes[0]
-      ? sortedHandles
-      : sortedHandles.reverse();
+    return handles;
   };
 
   const containerWidth =
@@ -312,28 +297,24 @@ export const ColumnControls = ({
           pointerEvents: isDragging ? 'none' : undefined,
         }}
       >
-        {!isResizing &&
-          columnParams.map(({ startIndex, endIndex }, index) => (
+        {columnParams.map(({ startIndex, endIndex }, index) => (
+          <div
+            style={{
+              gridColumn: `${startIndex + 1} / span 1`,
+            }}
+            data-start-index={startIndex}
+            data-end-index={endIndex}
+            className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER}
+            contentEditable={false}
+            key={index}
+          >
             <div
-              style={{
-                gridColumn: `${startIndex + 1} / span 1`,
-              }}
-              data-start-index={startIndex}
-              data-end-index={endIndex}
-              className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER}
-              contentEditable={false}
-              key={index}
-            >
-              <div
-                className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
-                style={columnParams.length - 1 === index ? { right: '0' } : {}}
-              />
-            </div>
-          ))}
-        {tableActive &&
-          isTableHovered &&
-          !isResizing &&
-          columnHandles(hoveredCell)}
+              className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
+              style={columnParams.length - 1 === index ? { right: '0' } : {}}
+            />
+          </div>
+        ))}
+        {columnHandles()}
       </div>
     </div>
   );

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -121,7 +121,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
     return [0];
   }, [tableRef, tableRect.height]);
 
-  if (!tableRef || !tableActive) {
+  if (!tableRef || !tableActive || isResizing) {
     return null;
   }
 
@@ -148,7 +148,6 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         editorView={editorView}
         hoveredCell={hoveredCell}
         tableRef={tableRef}
-        isResizing={isResizing}
         tableActive={tableActive}
         isTableHovered={isTableHovered}
         stickyTop={tableActive ? stickyTop : undefined}

package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx

@@ -19,6 +19,7 @@ import type { CornerControlProps } from './types';
 const DragCornerControlsComponent = ({
   editorView,
   isInDanger,
+  isResizing,
   intl: { formatMessage },
 }: CornerControlProps & WrappedComponentProps) => {
   const handleOnClick = () => {
@@ -40,6 +41,10 @@ const DragCornerControlsComponent = ({
     return isTableSelected(selection);
   }, [editorView.state]);
 
+  if (isResizing) {
+    return null;
+  }
+
   return (
     <button
       className={classnames(ClassName.DRAG_CORNER_BUTTON, {