@atlaskit/editor-plugin-table 5.3.0 → 5.3.2

package/src/__tests__/unit/ui/RowDragControls.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl-next';
+
+import type { DocBuilder } from '@atlaskit/editor-common/types';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import {
+  doc,
+  p,
+  table,
+  td,
+  tdEmpty,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import tablePlugin from '../../../plugins/table-plugin';
+import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+import { TableCssClassName as ClassName } from '../../../plugins/table/types';
+import { DragControls } from '../../../plugins/table/ui/TableFloatingControls/RowControls';
+
+describe('NumberColumn', () => {
+  const createEditor = createProsemirrorEditorFactory();
+
+  const editor = (doc: DocBuilder, tableOptions = {}) =>
+    createEditor({
+      doc,
+      preset: new Preset<LightEditorPlugin>()
+        .add([featureFlagsPlugin, {}])
+        .add([analyticsPlugin, {}])
+        .add(contentInsertionPlugin)
+        .add(widthPlugin)
+        .add(guidelinePlugin)
+        .add(selectionPlugin)
+        .add([tablePlugin, { tableOptions }]),
+      pluginKey: pluginKey,
+    });
+
+  it('should only render one child container if hovered cell provided', () => {
+    const { editorView } = editor(
+      doc(
+        p('text'),
+        table()(
+          tr(tdEmpty, tdEmpty, tdEmpty),
+          tr(tdEmpty, tdEmpty, tdEmpty),
+          tr(td({})(p('\n\n\n\n\n')), tdEmpty, tdEmpty),
+        ),
+      ),
+      { dragAndDropEnabled: true },
+    );
+    const ref = editorView.dom.querySelector('table');
+
+    const { container } = render(
+      <IntlProvider locale="en">
+        <DragControls
+          tableRef={ref!}
+          tableActive
+          editorView={editorView}
+          hoveredCell={{ rowIndex: 1, colIndex: 1 }}
+        />
+      </IntlProvider>,
+    );
+
+    const dragHandleContainer = container.querySelector(
+      `.${ClassName.ROW_CONTROLS_WITH_DRAG}`,
+    );
+
+    expect(dragHandleContainer?.children.length).toBe(1);
+  });
+
+  it('should not render any drag handle containers if hoveredCell is undefined', () => {
+    const { editorView } = editor(
+      doc(
+        p('text'),
+        table()(
+          tr(tdEmpty, tdEmpty, tdEmpty),
+          tr(tdEmpty, tdEmpty, tdEmpty),
+          tr(td({})(p('\n\n\n\n\n')), tdEmpty, tdEmpty),
+        ),
+      ),
+      { dragAndDropEnabled: true },
+    );
+    const ref = editorView.dom.querySelector('table');
+
+    const { container } = render(
+      <IntlProvider locale="en">
+        <DragControls
+          tableRef={ref!}
+          tableActive
+          editorView={editorView}
+          hoveredCell={{
+            colIndex: undefined,
+            rowIndex: undefined,
+          }}
+        />
+      </IntlProvider>,
+    );
+
+    const dragHandleContainer = container.querySelector(
+      `.${ClassName.ROW_CONTROLS_WITH_DRAG}`,
+    );
+
+    expect(dragHandleContainer?.children.length).toBe(0);
+  });
+});

package/src/__tests__/unit/ui/TableFloatingControls.tsx

@@ -37,7 +37,7 @@ import TableFloatingControls from '../../../plugins/table/ui/TableFloatingContro
 
 describe('TableFloatingControls', () => {
   const createEditor = createProsemirrorEditorFactory();
-  const fakeGetEditorFeatureFlags = () => ({});
+
   const preset = new Preset<LightEditorPlugin>()
     .add([featureFlagsPlugin, {}])
     .add([analyticsPlugin, {}])
@@ -45,7 +45,10 @@ describe('TableFloatingControls', () => {
     .add(widthPlugin)
     .add(guidelinePlugin)
     .add(selectionPlugin)
-    .add(tablePlugin);
+    .add([
+      tablePlugin,
+      { tableOptions: { advanced: true }, dragAndDropEnabled: false },
+    ]);
 
   const editor = (doc: DocBuilder) =>
     createEditor<TablePluginState, PluginKey, typeof preset>({
@@ -62,7 +65,7 @@ describe('TableFloatingControls', () => {
       const { container } = render(
         <TableFloatingControls
           editorView={editorView}
-          getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+          isDragAndDropEnabled={false}
         />,
       );
       expect(container.innerHTML).toEqual('');
@@ -72,7 +75,7 @@ describe('TableFloatingControls', () => {
   describe('when tableRef is defined', () => {
     it('should render CornerControls and RowControls', () => {
       const { editorView } = editor(
-        doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
+        doc(p('text'), table()(tr(tdCursor, tdEmpty, tdEmpty))),
       );
       const ref = editorView.dom.querySelector('table') || undefined;
 
@@ -82,7 +85,8 @@ describe('TableFloatingControls', () => {
             tableRef={ref}
             tableActive={true}
             editorView={editorView}
-            getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+            isDragAndDropEnabled={false}
+            selection={editorView.state.selection}
           />
         </IntlProvider>,
       );

package/src/plugins/table/commands/hover.ts

@@ -7,7 +7,8 @@ import {
 } from '@atlaskit/editor-tables/utils';
 
 import { createCommand } from '../pm-plugins/plugin-factory';
-import { Cell, CellColumnPositioning, TableDecorations } from '../types';
+import type { Cell, CellColumnPositioning } from '../types';
+import { TableDecorations } from '../types';
 import {
   createCellHoverDecoration,
   createColumnLineResize,
@@ -15,13 +16,9 @@ import {
   getMergedCellsPositions,
   updatePluginStateDecorations,
 } from '../utils';
-// #endregion
 
-// #region Utils
 const makeArray = (n: number) => Array.from(Array(n).keys());
-// #endregion
 
-// #region Commands
 export const hoverMergedCells = () =>
   createCommand(
     (state) => {
@@ -43,7 +40,7 @@ export const hoverMergedCells = () =>
       const decorations = createCellHoverDecoration(mergedCells);
 
       return {
-        type: 'HOVER_CELLS',
+        type: 'HOVER_MERGED_CELLS',
         data: {
           decorationSet: updatePluginStateDecorations(
             state,
@@ -193,4 +190,16 @@ export const hideResizeHandleLine = () =>
       ),
     },
   }));
-// #endregion
+
+export const hoverCell = (rowIndex?: number, colIndex?: number) =>
+  createCommand(
+    () => {
+      return {
+        type: 'HOVER_CELL',
+        data: {
+          hoveredCell: { rowIndex, colIndex },
+        },
+      };
+    },
+    (tr) => tr.setMeta('addToHistory', false),
+  );

package/src/plugins/table/commands/index.ts

@@ -2,6 +2,7 @@ export {
   hoverColumns,
   hoverRows,
   hoverTable,
+  hoverCell,
   hoverMergedCells,
   clearHoverSelection,
   showResizeHandleLine,

package/src/plugins/table/commands/misc.ts

@@ -52,11 +52,7 @@ import {
   isIsolating,
 } from '../utils/nodes';
 import { updatePluginStateDecorations } from '../utils/update-plugin-state-decorations';
-// #endregion
 
-// #endregion
-
-// #region Commands
 export const setEditorFocus = (editorHasFocus: boolean) =>
   createCommand({
     type: 'SET_EDITOR_FOCUS',
@@ -588,4 +584,3 @@ export const addBoldInEmptyHeaderCells =
 
     return false;
   };
-// #endregion

package/src/plugins/table/event-handlers.ts

@@ -33,6 +33,7 @@ import {
   clearHoverSelection,
   hideInsertColumnOrRowButton,
   hideResizeHandleLine,
+  hoverCell,
   hoverColumns,
   selectColumn,
   setEditorFocus,
@@ -275,14 +276,21 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
   }
 
   const { state, dispatch } = view;
-  const { insertColumnButtonIndex, insertRowButtonIndex } =
-    getPluginState(state);
+  const {
+    insertColumnButtonIndex,
+    insertRowButtonIndex,
+    isDragAndDropEnabled,
+  } = getPluginState(state);
 
   const target = event.target;
   if (isTableControlsButton(target)) {
     return true;
   }
 
+  if (isDragAndDropEnabled) {
+    hoverCell(undefined, undefined)(state, dispatch);
+  }
+
   if (
     (typeof insertColumnButtonIndex !== 'undefined' ||
       typeof insertRowButtonIndex !== 'undefined') &&
@@ -498,3 +506,42 @@ export const whenTableInFocus =
 
     return eventHandler(view, mouseEvent, elementContentRects);
   };
+
+const trackCellLocation = (view: EditorView, mouseEvent: Event) => {
+  const target = mouseEvent.target;
+  const maybeTableCell = isElementInTableCell(
+    target as HTMLElement,
+  ) as HTMLTableCellElement | null;
+
+  if (!maybeTableCell) {
+    return;
+  }
+
+  const colIndex = maybeTableCell.cellIndex;
+  const rowElement = closestElement(
+    target as HTMLElement,
+    'tr',
+  ) as HTMLTableRowElement;
+  const rowIndex = rowElement && rowElement.rowIndex;
+  const { hoveredCell } = getPluginState(view.state);
+
+  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex) {
+    hoverCell(rowIndex, colIndex)(view.state, view.dispatch);
+  }
+};
+
+export const withCellTracking =
+  (
+    eventHandler: (
+      view: EditorView,
+      mouseEvent: Event,
+      elementContentRects?: ElementContentRects,
+    ) => boolean,
+    elementContentRects?: ElementContentRects,
+  ) =>
+  (view: EditorView, mouseEvent: Event): boolean => {
+    if (getPluginState(view.state).isDragAndDropEnabled) {
+      trackCellLocation(view, mouseEvent);
+    }
+    return eventHandler(view, mouseEvent, elementContentRects);
+  };

package/src/plugins/table/index.tsx

@@ -196,8 +196,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               getEditorFeatureFlags || defaultGetEditorFeatureFlags,
               getIntl,
               breakoutEnabled,
-              fullWidthEnabled,
               tableResizingEnabled,
+              fullWidthEnabled,
               wasFullWidthEnabled,
               dragAndDropEnabled,
               editorAnalyticsAPI,

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -403,7 +403,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     const { showBeforeShadow, showAfterShadow } = this.state;
     const node = getNode();
     // doesn't work well with WithPluginState
-    const { isInDanger, hoveredRows } = getPluginState(view.state);
+    const { isInDanger, hoveredRows, hoveredCell } = getPluginState(view.state);
 
     const tableRef = this.table || undefined;
     const headerRow = tableRef
@@ -418,10 +418,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           tableRef={tableRef}
           tableActive={tableActive}
           hoveredRows={hoveredRows}
+          hoveredCell={hoveredCell}
           isInDanger={isInDanger}
           isResizing={isResizing}
           isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
           isHeaderRowEnabled={isHeaderRowEnabled}
+          isDragAndDropEnabled={options?.isDragAndDropEnabled}
           ordering={ordering}
           isHeaderColumnEnabled={isHeaderColumnEnabled}
           hasHeaderRow={hasHeaderRow}
@@ -429,7 +431,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           selection={view.state.selection}
           headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
           stickyHeader={this.state.stickyHeader}
-          getEditorFeatureFlags={this.props.getEditorFeatureFlags}
         />
       </div>
     );

package/src/plugins/table/nodeviews/table.tsx

@@ -352,6 +352,7 @@ export const createTableView = (
     isFullWidthModeEnabled,
     wasFullWidthModeEnabled,
     isTableResizingEnabled,
+    isDragAndDropEnabled,
   } = getPluginState(view.state);
   const { allowColumnResizing } = getPluginConfig(pluginConfig);
   const hasIntlContext = true;
@@ -368,6 +369,7 @@ export const createTableView = (
       isFullWidthModeEnabled,
       wasFullWidthModeEnabled,
       isTableResizingEnabled,
+      isDragAndDropEnabled,
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,

package/src/plugins/table/nodeviews/types.ts

@@ -1,11 +1,11 @@
-import { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 import type { PluginInjectionAPI } from '../types';
 
@@ -14,6 +14,7 @@ export type TableOptions = {
   isFullWidthModeEnabled?: boolean;
   wasFullWidthModeEnabled?: boolean;
   isTableResizingEnabled?: boolean;
+  isDragAndDropEnabled?: boolean;
 };
 
 export interface Props {

package/src/plugins/table/pm-plugins/decorations/plugin.ts

@@ -1,11 +1,11 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import {
+import type {
   EditorState,
-  PluginKey,
   // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
   ReadonlyTransaction,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 
@@ -30,6 +30,7 @@ export const handleDocOrSelectionChanged = (
 ): DecorationSet => {
   const isResizing = tableWidthPluginKey.getState(newState)?.resizing;
   const wasResizing = tableWidthPluginKey.getState(oldState)?.resizing;
+
   const changedResizing = isResizing !== wasResizing;
 
   // Remove column controls when resizing
@@ -38,7 +39,8 @@ export const handleDocOrSelectionChanged = (
   } else if (
     tr.docChanged ||
     tr.selection instanceof CellSelection ||
-    changedResizing
+    changedResizing ||
+    tr.getMeta(tablePluginKey)?.type === 'HOVER_CELL'
   ) {
     return buildColumnControlsDecorations({
       decorationSet,
@@ -69,6 +71,12 @@ export const createPlugin = () => {
       apply: (tr, decorationSet, oldState, newState) => {
         let pluginState = decorationSet;
         const meta = tr.getMeta(tablePluginKey);
+        const previousHover = tablePluginKey.getState(oldState)?.hoveredCell;
+        const newHover = tablePluginKey.getState(newState)?.hoveredCell;
+        const changedCellHover =
+          previousHover?.colIndex !== newHover?.colIndex ||
+          previousHover?.rowIndex !== newHover?.rowIndex;
+
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;
         }
@@ -76,7 +84,8 @@ export const createPlugin = () => {
         if (
           tr.docChanged ||
           tr.selectionSet ||
-          tr.getMeta(tableWidthPluginKey)
+          tr.getMeta(tableWidthPluginKey) ||
+          changedCellHover
         ) {
           pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(

package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts

@@ -1,9 +1,9 @@
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-import {
+import type {
   ReadonlyTransaction,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
@@ -15,9 +15,10 @@ import {
   findControlsHoverDecoration,
   updateDecorations,
 } from '../../../utils/decoration';
+import { pluginKey as tablePluginKey } from '../../plugin-key';
 
 import { composeDecorations } from './compose-decorations';
-import { DecorationTransformer } from './types';
+import type { DecorationTransformer } from './types';
 
 const isColumnSelected = (tr: Transaction | ReadonlyTransaction): boolean =>
   tr.selection instanceof CellSelection && tr.selection.isColSelection();
@@ -49,13 +50,17 @@ const maybeUpdateColumnControlsDecoration: DecorationTransformer = ({
   tr,
 }): DecorationSet => {
   const table = findTable(tr.selection);
-  if (!table) {
+  const meta = tr.getMeta(tablePluginKey);
+
+  // avoid re-drawing state if dnd decorations don't need to be updated
+  if (!table && meta?.type !== 'HOVER_CELL') {
     return decorationSet;
   }
+
   return updateDecorations(
     tr.doc,
     decorationSet,
-    createColumnControlsDecoration(tr.selection),
+    createColumnControlsDecoration(tr.selection, meta?.data?.hoveredCell),
     TableDecorations.COLUMN_CONTROLS_DECORATIONS,
   );
 };

package/src/plugins/table/pm-plugins/default-table-selection.ts

@@ -2,3 +2,13 @@ export const defaultTableSelection = {
   hoveredColumns: [],
   hoveredRows: [],
 };
+
+/**
+ * Creating a separate object for hoveredCell so it doesn't get defaulted when `handleDocOrSelectionChanged` runs.
+ *
+ * It is safe to persist this value as it gets removed when the mouse cursor leaves the table, so no need to remove it
+ * when doc changes.
+ */
+export const defaultHoveredCell = {
+  hoveredCell: { rowIndex: undefined, colIndex: undefined },
+};

package/src/plugins/table/pm-plugins/drag-and-drop/actions.ts

@@ -1,3 +1,5 @@
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+
 import type { DropTargetType } from './consts';
 
 export interface DragAndDropAction<T, D> {
@@ -15,12 +17,15 @@ export type DragAndDropSetDropTargetAction = DragAndDropAction<
   {
     type: DropTargetType;
     index: number;
+    decorationSet: DecorationSet;
   }
 >;
 
 export type DragAndDropClearDropTargetAction = DragAndDropAction<
   typeof DragAndDropActionType.CLEAR_DROP_TARGET,
-  undefined
+  {
+    decorationSet: DecorationSet;
+  }
 >;
 
 // NOTE: This should be a Union of all possible actions

package/src/plugins/table/pm-plugins/drag-and-drop/commands.ts

@@ -1,22 +1,69 @@
-import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type {
+  EditorState,
+  Transaction,
+} from '@atlaskit/editor-prosemirror/state';
+import type { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+
+import { TableDecorations } from '../../types';
+import {
+  createColumnInsertLine,
+  createRowInsertLine,
+  updateDecorations,
+} from '../../utils';
 
 import { DragAndDropActionType } from './actions';
 import type { DropTargetType } from './consts';
-import { createCommand } from './plugin-factory';
+import { createCommand, getPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
 
 // TODO: This command is a placeholder example. Please replace this if required.
+export const getDecorations = (state: EditorState): DecorationSet => {
+  return pluginKey.getState(state)?.decorationSet || DecorationSet.empty;
+};
+
+export const updatePluginStateDecorations = (
+  state: EditorState,
+  decorations: Decoration[],
+  key: TableDecorations,
+): DecorationSet =>
+  updateDecorations(state.doc, getDecorations(state), decorations, key);
+
 export const setDropTarget = (
   type: DropTargetType,
   index: number,
   tr?: Transaction,
 ) =>
   createCommand(
-    {
-      type: DragAndDropActionType.SET_DROP_TARGET,
-      data: {
-        type,
-        index,
-      },
+    (state) => {
+      const { dropTargetType, dropTargetIndex } = getPluginState(state);
+      if (dropTargetType === type && dropTargetIndex === index) {
+        return false;
+      }
+
+      let decorationSet = DecorationSet.empty;
+      if (type === 'column') {
+        decorationSet = updatePluginStateDecorations(
+          state,
+          createColumnInsertLine(index, state.selection),
+          TableDecorations.COLUMN_INSERT_LINE,
+        );
+      } else if (type === 'row') {
+        decorationSet = updatePluginStateDecorations(
+          state,
+          createRowInsertLine(index, state.selection),
+          TableDecorations.ROW_INSERT_LINE,
+        );
+      }
+
+      return {
+        type: DragAndDropActionType.SET_DROP_TARGET,
+        data: {
+          decorationSet,
+          type,
+          index,
+        },
+      };
     },
     (originalTr: Transaction) =>
       (tr || originalTr).setMeta('addToHistory', false),
@@ -26,6 +73,9 @@ export const clearDropTarget = (tr?: Transaction) =>
   createCommand(
     {
       type: DragAndDropActionType.CLEAR_DROP_TARGET,
+      data: {
+        decorationSet: DecorationSet.empty,
+      },
     },
     (originalTr: Transaction) =>
       (tr || originalTr).setMeta('addToHistory', false),