@atlaskit/editor-plugin-table 5.3.1 → 5.3.2

package/src/__tests__/unit/pm-plugins/decorations/plugin.ts

@@ -23,6 +23,7 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import tablePlugin from '../../../../plugins/table';
 import { selectColumn } from '../../../../plugins/table/commands';
@@ -53,28 +54,92 @@ describe('decorations plugin', () => {
 
   // ED-8457
   describe('when there is a selection pointer set', () => {
-    it('should remove the column selected decorations', () => {
-      const { editorView } = editor(
-        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-      );
+    describe('should remove the column selected decorations', () => {
+      ffTest(
+        'platform.editor.table.drag-and-drop',
+        () => {
+          const { editorView } = editor(
+            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+          );
+
+          selectColumn(1)(editorView.state, editorView.dispatch);
+
+          const { tr: transaction } = editorView.state;
+
+          transaction.setMeta('pointer', true);
+          transaction.setSelection(Selection.atStart(transaction.doc));
+          editorView.dispatch(transaction);
+
+          const decorationSet = getDecorations(editorView.state);
+
+          const columnSelectedDecorations = decorationSet.find(
+            undefined,
+            undefined,
+            (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
+          );
+
+          expect(columnSelectedDecorations).toHaveLength(0);
+        },
+        () => {
+          const { editorView } = editor(
+            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+          );
 
-      selectColumn(1)(editorView.state, editorView.dispatch);
+          selectColumn(1)(editorView.state, editorView.dispatch);
 
-      const { tr: transaction } = editorView.state;
+          const { tr: transaction } = editorView.state;
 
-      transaction.setMeta('pointer', true);
-      transaction.setSelection(Selection.atStart(transaction.doc));
-      editorView.dispatch(transaction);
+          transaction.setMeta('pointer', true);
+          transaction.setSelection(Selection.atStart(transaction.doc));
+          editorView.dispatch(transaction);
 
-      const decorationSet = getDecorations(editorView.state);
+          const decorationSet = getDecorations(editorView.state);
 
-      const columnSelectedDecorations = decorationSet.find(
-        undefined,
-        undefined,
-        (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
+          const columnSelectedDecorations = decorationSet.find(
+            undefined,
+            undefined,
+            (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
+          );
+
+          expect(columnSelectedDecorations).toHaveLength(0);
+        },
       );
+    });
+  });
+
+  describe('when the hovered cell state changes', () => {
+    describe('should add column control decorations', () => {
+      ffTest('platform.editor.table.drag-and-drop', () => {
+        const pluginState = DecorationSet.empty;
+        const { editorView } = editor(
+          doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+        );
 
-      expect(columnSelectedDecorations).toHaveLength(0);
+        const transaction = editorView.state.tr.setMeta(pluginKey, {
+          type: 'HOVER_CELL',
+          data: {
+            colIndex: 0,
+            rowIndex: 0,
+          },
+        });
+
+        const oldState = handleDocOrSelectionChanged(
+          transaction,
+          pluginState,
+          editorView.state,
+          editorView.state,
+        );
+
+        editorView.dispatch(transaction);
+        const newState = handleDocOrSelectionChanged(
+          transaction,
+          oldState,
+          editorView.state,
+          editorView.state,
+        );
+
+        expect(oldState).not.toEqual(newState);
+      });
     });
   });
 
@@ -104,37 +169,76 @@ describe('decorations plugin', () => {
   });
 
   describe('when the table changed', () => {
-    it('should re-create the column controls decorations', () => {
-      const { editorView } = editor(
-        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-      );
-      const { state } = editorView;
+    describe('should re-create the column controls decorations', () => {
+      ffTest(
+        'platform.editor.table.drag-and-drop',
+        () => {
+          const { editorView } = editor(
+            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+          );
+          const { state } = editorView;
 
-      const nextPluginState = handleDocOrSelectionChanged(
-        editorView.state.tr,
-        DecorationSet.empty,
-        editorView.state,
-        state,
-      );
+          const nextPluginState = handleDocOrSelectionChanged(
+            editorView.state.tr,
+            DecorationSet.empty,
+            editorView.state,
+            state,
+          );
 
-      const { tr: transaction } = state;
-      editorView.dispatch(addColumnAt(2)(transaction));
+          const { tr: transaction } = state;
+          editorView.dispatch(addColumnAt(2)(transaction));
 
-      const newState = handleDocOrSelectionChanged(
-        transaction,
-        nextPluginState,
-        editorView.state,
-        state,
-      );
-      const expectedDecorationSet = newState;
-      const decorations = expectedDecorationSet.find(
-        undefined,
-        undefined,
-        (spec) =>
-          spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) > -1,
-      );
+          const newState = handleDocOrSelectionChanged(
+            transaction,
+            nextPluginState,
+            editorView.state,
+            state,
+          );
+          const expectedDecorationSet = newState;
+          const decorations = expectedDecorationSet.find(
+            undefined,
+            undefined,
+            (spec) =>
+              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
+              -1,
+          );
+
+          expect(decorations).toHaveLength(3);
+        },
+        () => {
+          const { editorView } = editor(
+            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+          );
+          const { state } = editorView;
+
+          const nextPluginState = handleDocOrSelectionChanged(
+            editorView.state.tr,
+            DecorationSet.empty,
+            editorView.state,
+            state,
+          );
 
-      expect(decorations).toHaveLength(3);
+          const { tr: transaction } = state;
+          editorView.dispatch(addColumnAt(2)(transaction));
+
+          const newState = handleDocOrSelectionChanged(
+            transaction,
+            nextPluginState,
+            editorView.state,
+            state,
+          );
+          const expectedDecorationSet = newState;
+          const decorations = expectedDecorationSet.find(
+            undefined,
+            undefined,
+            (spec) =>
+              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
+              -1,
+          );
+
+          expect(decorations).toHaveLength(3);
+        },
+      );
     });
   });
 

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

@@ -0,0 +1,148 @@
+import React from 'react';
+
+import { fireEvent, 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,
+  tdEmpty,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import tablePlugin from '../../../plugins/table-plugin';
+import { getPluginState } from '../../../plugins/table/pm-plugins/plugin-factory';
+import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+// import type { TablePluginState } from '../../../plugins/table/types';
+import { TableCssClassName as ClassName } from '../../../plugins/table/types';
+import NumberColumn from '../../../plugins/table/ui/TableFloatingControls/NumberColumn';
+
+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 update plugin state for hovered cell - when drag and drop is enabled', () => {
+    const { editorView } = editor(
+      doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
+      { dragAndDropEnabled: true },
+    );
+    const ref = editorView.dom.querySelector('table');
+
+    const { container } = render(
+      <IntlProvider locale="en">
+        <NumberColumn
+          tableRef={ref!}
+          tableActive
+          editorView={editorView}
+          hoverRows={jest.fn()}
+          selectRow={jest.fn()}
+          isDragAndDropEnabled
+        />
+      </IntlProvider>,
+    );
+
+    const firstNumberedCell = container.querySelector(
+      `.${ClassName.NUMBERED_COLUMN} > div`,
+    );
+
+    fireEvent.mouseOver(firstNumberedCell!);
+
+    const pluginState = getPluginState(editorView.state);
+    // colIndex is not defined yet, keep undefined
+    expect(pluginState.hoveredCell).toEqual({
+      colIndex: undefined,
+      rowIndex: 0,
+    });
+  });
+
+  it('should render button disabled numbered column cells - when drag and drop is enabled', () => {
+    const { editorView } = editor(
+      doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
+      { dragAndDropEnabled: true },
+    );
+    const ref = editorView.dom.querySelector('table');
+
+    const { container } = render(
+      <IntlProvider locale="en">
+        <NumberColumn
+          tableRef={ref!}
+          tableActive
+          editorView={editorView}
+          hoverRows={jest.fn()}
+          selectRow={jest.fn()}
+          isDragAndDropEnabled
+        />
+      </IntlProvider>,
+    );
+
+    const firstNumberedCells = container.querySelectorAll(
+      `.${ClassName.NUMBERED_COLUMN} > div`,
+    );
+
+    firstNumberedCells.forEach((cell) => {
+      expect(
+        cell.classList.contains(ClassName.NUMBERED_COLUMN_BUTTON_DISABLED),
+      ).toBeTruthy();
+    });
+  });
+
+  it('should render buttons for numbered column cells - when drag and drop is disabled', () => {
+    const { editorView } = editor(
+      doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
+      { dragAndDropEnabled: false },
+    );
+    const ref = editorView.dom.querySelector('table');
+
+    const { container } = render(
+      <IntlProvider locale="en">
+        <NumberColumn
+          tableRef={ref!}
+          tableActive
+          editorView={editorView}
+          hoverRows={jest.fn()}
+          selectRow={jest.fn()}
+          isDragAndDropEnabled={false}
+        />
+      </IntlProvider>,
+    );
+
+    const firstNumberedCells = container.querySelectorAll(
+      `.${ClassName.NUMBERED_COLUMN} > div`,
+    );
+
+    firstNumberedCells.forEach((cell) => {
+      expect(
+        cell.classList.contains(ClassName.NUMBERED_COLUMN_BUTTON_DISABLED),
+      ).toBeFalsy();
+    });
+  });
+});

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

@@ -41,7 +41,6 @@ import { RowControls } from '../../../plugins/table/ui/TableFloatingControls/Row
 
 describe('RowControls', () => {
   const createEditor = createProsemirrorEditorFactory();
-  const fakeGetEditorFeatureFlags = jest.fn(() => ({}));
   let originalResizeObserver: any;
 
   beforeAll(() => {
@@ -94,7 +93,8 @@ describe('RowControls', () => {
               tableRef={ref}
               tableActive
               editorView={editorView}
-              getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+              isDragAndDropEnabled={false}
+              selection={editorView.state.selection}
             />
           </IntlProvider>,
         );
@@ -116,7 +116,6 @@ describe('RowControls', () => {
           tableRef={ref}
           tableActive={false}
           editorView={editorView}
-          getEditorFeatureFlags={fakeGetEditorFeatureFlags}
         />
       </IntlProvider>,
     );
@@ -145,7 +144,8 @@ describe('RowControls', () => {
               tableRef={ref}
               tableActive
               editorView={editorView}
-              getEditorFeatureFlags={fakeGetEditorFeatureFlags}
+              isDragAndDropEnabled={false}
+              selection={editorView.state.selection}
             />
           </IntlProvider>,
         );

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