@atlaskit/editor-plugin-table 5.4.6 → 5.4.8

package/src/__tests__/unit/pm-plugins/analytics.ts

@@ -0,0 +1,327 @@
+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';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { __serializeForClipboard } from '@atlaskit/editor-prosemirror/view';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+// eslint-disable-next-line import/no-extraneous-dependencies
+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 dispatchPasteEvent from '@atlaskit/editor-test-helpers/dispatch-paste-event';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  doc,
+  p,
+  table,
+  td,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
+
+// eslint-disable-next-line @atlassian/tangerine/import/no-relative-package-imports
+import tablePlugin from '../../../plugins/table';
+import {
+  insertColumn,
+  insertRow,
+  selectColumn,
+  selectRow,
+} from '../../../plugins/table/commands';
+import { pluginKey } from '../../../plugins/table/pm-plugins/analytics/plugin-key';
+
+jest.mock('@atlaskit/platform-feature-flags', () => ({
+  getBooleanFF: jest.fn().mockImplementation(() => false),
+}));
+
+describe('analytics', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const editor = (doc: DocBuilder) => {
+    return createEditor({
+      doc,
+      preset: new Preset<LightEditorPlugin>()
+        .add([featureFlagsPlugin, {}])
+        .add([analyticsPlugin, {}])
+        .add(contentInsertionPlugin)
+        .add(widthPlugin)
+        .add(guidelinePlugin)
+        .add(selectionPlugin)
+        .add([
+          tablePlugin,
+          {
+            tableOptions: {
+              allowHeaderRow: true,
+              allowMergeCells: true,
+            },
+          },
+        ]),
+      pluginKey,
+      attachTo: document.body,
+    });
+  };
+
+  describe('rowOrColumnMoved', () => {
+    describe('should update plugin state when row is copied', () => {
+      ffTest(
+        'platform.editor.table.analytics-plugin-moved-event',
+        () => {
+          const { editorView } = editor(
+            doc(
+              table()(
+                tr(td({})(p('{<cell}a1')), td({})(p('a2{cell>}'))),
+                tr(td({})(p('b1')), td({})(p('b2'))),
+              ),
+            ),
+          );
+
+          __serializeForClipboard(
+            editorView,
+            editorView.state.selection.content(),
+          );
+
+          const { rowOrColumnMoved } =
+            pluginKey.getState(editorView.state) || {};
+
+          expect(rowOrColumnMoved).toEqual({
+            type: 'row',
+            numberOfCells: 2,
+            currentActions: ['copyOrCut'],
+          });
+        },
+        () => {
+          const { editorView } = editor(
+            doc(
+              table()(
+                tr(td({})(p('{<cell}a1')), td({})(p('a2{cell>}'))),
+                tr(td({})(p('b1')), td({})(p('b2'))),
+              ),
+            ),
+          );
+
+          __serializeForClipboard(
+            editorView,
+            editorView.state.selection.content(),
+          );
+
+          const { rowOrColumnMoved } =
+            pluginKey.getState(editorView.state) || {};
+
+          expect(rowOrColumnMoved).toEqual(undefined);
+        },
+      );
+    });
+
+    describe('should update plugin state when column is copied', () => {
+      ffTest(
+        'platform.editor.table.analytics-plugin-moved-event',
+        () => {
+          const { editorView } = editor(
+            doc(
+              table()(
+                tr(td({})(p('{<cell}a1')), td({})(p('a2'))),
+                tr(td({})(p('b1{cell>}')), td({})(p('b2'))),
+              ),
+            ),
+          );
+
+          __serializeForClipboard(
+            editorView,
+            editorView.state.selection.content(),
+          );
+
+          const { rowOrColumnMoved } =
+            pluginKey.getState(editorView.state) || {};
+
+          expect(rowOrColumnMoved).toEqual({
+            type: 'column',
+            numberOfCells: 2,
+            currentActions: ['copyOrCut'],
+          });
+        },
+        () => {
+          const { editorView } = editor(
+            doc(
+              table()(
+                tr(td({})(p('{<cell}a1')), td({})(p('a2'))),
+                tr(td({})(p('b1{cell>}')), td({})(p('b2'))),
+              ),
+            ),
+          );
+
+          __serializeForClipboard(
+            editorView,
+            editorView.state.selection.content(),
+          );
+
+          const { rowOrColumnMoved } =
+            pluginKey.getState(editorView.state) || {};
+
+          expect(rowOrColumnMoved).toEqual(undefined);
+        },
+      );
+    });
+
+    describe('should update plugin state when row is inserted and then copied', () => {
+      ffTest(
+        'platform.editor.table.analytics-plugin-moved-event',
+        () => {
+          const { editorView } = editor(
+            doc(
+              table()(
+                tr(td({})(p('{<cell}a1')), td({})(p('a2{cell>}'))),
+                tr(td({})(p('b1')), td({})(p('b2'))),
+              ),
+            ),
+          );
+
+          insertRow(0, false)(editorView.state, editorView.dispatch);
+          selectRow(0)(editorView.state, editorView.dispatch);
+
+          __serializeForClipboard(
+            editorView,
+            editorView.state.selection.content(),
+          );
+
+          const { rowOrColumnMoved } =
+            pluginKey.getState(editorView.state) || {};
+
+          expect(rowOrColumnMoved).toEqual({
+            type: 'row',
+            numberOfCells: 2,
+            currentActions: ['addRowOrColumn', 'copyOrCut'],
+          });
+        },
+        () => {
+          const { editorView } = editor(
+            doc(
+              table()(
+                tr(td({})(p('{<cell}a1')), td({})(p('a2{cell>}'))),
+                tr(td({})(p('b1')), td({})(p('b2'))),
+              ),
+            ),
+          );
+
+          const { rowOrColumnMoved } =
+            pluginKey.getState(editorView.state) || {};
+          expect(rowOrColumnMoved).toEqual(undefined);
+        },
+      );
+    });
+
+    describe('should update plugin state when column is inserted and then copied', () => {
+      ffTest(
+        'platform.editor.table.analytics-plugin-moved-event',
+        () => {
+          const { editorView } = editor(
+            doc(
+              table()(
+                tr(td({})(p('{<cell}a1')), td({})(p('a2{cell>}'))),
+                tr(td({})(p('b1')), td({})(p('b2'))),
+              ),
+            ),
+          );
+
+          insertColumn(
+            jest.fn().mockReturnValue({ containerWidth: { width: 760 } }),
+          )(0)(editorView.state, editorView.dispatch, editorView);
+          selectColumn(0)(editorView.state, editorView.dispatch);
+
+          __serializeForClipboard(
+            editorView,
+            editorView.state.selection.content(),
+          );
+
+          const { rowOrColumnMoved } =
+            pluginKey.getState(editorView.state) || {};
+
+          expect(rowOrColumnMoved).toEqual({
+            type: 'column',
+            numberOfCells: 2,
+            currentActions: ['addRowOrColumn', 'copyOrCut'],
+          });
+        },
+        () => {
+          const { editorView } = editor(
+            doc(
+              table()(
+                tr(td({})(p('{<cell}a1')), td({})(p('a2{cell>}'))),
+                tr(td({})(p('b1')), td({})(p('b2'))),
+              ),
+            ),
+          );
+
+          const { rowOrColumnMoved } =
+            pluginKey.getState(editorView.state) || {};
+          expect(rowOrColumnMoved).toEqual(undefined);
+        },
+      );
+    });
+
+    describe('should remove plugin state when row is inserted and then copied and pasted', () => {
+      ffTest(
+        'platform.editor.table.analytics-plugin-moved-event',
+        () => {
+          const { editorView } = editor(
+            doc(
+              table()(
+                tr(td({})(p('a1')), td({})(p('a2'))),
+                tr(td({})(p('b1')), td({})(p('b2'))),
+              ),
+            ),
+          );
+
+          insertRow(0, false)(editorView.state, editorView.dispatch);
+          selectRow(0)(editorView.state, editorView.dispatch);
+
+          const { dom, text } = __serializeForClipboard(
+            editorView,
+            editorView.state.selection.content(),
+          );
+
+          // place cursor in first cell
+          editorView.dispatch(
+            editorView.state.tr.setSelection(
+              new TextSelection(
+                editorView.state.doc.resolve(4),
+                editorView.state.doc.resolve(4),
+              ),
+            ),
+          );
+
+          dispatchPasteEvent(editorView, { html: dom.innerHTML, plain: text });
+
+          const { rowOrColumnMoved } =
+            pluginKey.getState(editorView.state) || {};
+
+          expect(rowOrColumnMoved).toEqual({
+            type: undefined,
+            numberOfCells: undefined,
+            currentActions: [],
+          });
+        },
+        () => {
+          const { editorView } = editor(
+            doc(
+              table()(
+                tr(td({})(p('{<cell}a1')), td({})(p('a2{cell>}'))),
+                tr(td({})(p('b1')), td({})(p('b2'))),
+              ),
+            ),
+          );
+
+          const { rowOrColumnMoved } =
+            pluginKey.getState(editorView.state) || {};
+          expect(rowOrColumnMoved).toEqual(undefined);
+        },
+      );
+    });
+  });
+});

package/src/__tests__/unit/pm-plugins/decorations/column-controls.ts

@@ -9,47 +9,57 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { ffTest } from '@atlassian/feature-flags-test-utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { buildColumnControlsDecorations } from '../../../../plugins/table/pm-plugins/decorations/utils';
 import { TableDecorations } from '../../../../plugins/table/types';
 
+// Mock Feature flags instead of using ffTest because we don't use the feature flag directly
+jest.mock('@atlaskit/platform-feature-flags', () => ({
+  getBooleanFF: jest.fn().mockImplementation(() => false),
+}));
+
+afterEach(() => {
+  (getBooleanFF as jest.Mock).mockReset();
+});
+
 describe('tables: column controls decorations', () => {
-  describe(`should return a decorationSet with 2 ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type when drag and drop disabled`, () => {
-    ffTest(
-      'platform.editor.table.drag-and-drop',
-      () => {
-        const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
-        const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
-        const nextDecorationSet = buildColumnControlsDecorations({
-          decorationSet: DecorationSet.empty,
-          tr: state.tr,
-        });
-
-        const decorations = nextDecorationSet.find(
-          undefined,
-          undefined,
-          (spec: any) => spec.key.indexOf(decorationKey) > -1,
-        );
-
-        expect(decorations).toHaveLength(0);
-      },
-      () => {
-        const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
-        const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
-        const nextDecorationSet = buildColumnControlsDecorations({
-          decorationSet: DecorationSet.empty,
-          tr: state.tr,
-        });
-
-        const decorations = nextDecorationSet.find(
-          undefined,
-          undefined,
-          (spec: any) => spec.key.indexOf(decorationKey) > -1,
-        );
-
-        expect(decorations).toHaveLength(2);
-      },
+  it(`should return an empty decorationSet ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type when drag and drop is enabled`, () => {
+    (getBooleanFF as jest.Mock).mockImplementation(
+      (name) => name === 'platform.editor.table.drag-and-drop',
     );
+    const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
+    const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
+    const nextDecorationSet = buildColumnControlsDecorations({
+      decorationSet: DecorationSet.empty,
+      tr: state.tr,
+      options: { isDragAndDropEnabled: true },
+    });
+
+    const decorations = nextDecorationSet.find(
+      undefined,
+      undefined,
+      (spec: any) => spec.key.indexOf(decorationKey) > -1,
+    );
+
+    expect(decorations).toHaveLength(0);
+  });
+
+  it(`should return an empty decorationSet ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type when drag and drop is disabled`, () => {
+    const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
+    const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
+    const nextDecorationSet = buildColumnControlsDecorations({
+      decorationSet: DecorationSet.empty,
+      tr: state.tr,
+      options: { isDragAndDropEnabled: false },
+    });
+
+    const decorations = nextDecorationSet.find(
+      undefined,
+      undefined,
+      (spec: any) => spec.key.indexOf(decorationKey) > -1,
+    );
+
+    expect(decorations).toHaveLength(2);
   });
 });

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

@@ -17,14 +17,14 @@ import {
   findTable,
   selectedRect,
 } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
+import { updateRowOrColumnMovedTransform } from '../pm-plugins/analytics/commands';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { rescaleColumns } from '../transforms/column-width';
 import { checkIfHeaderRowEnabled, copyPreviousRow } from '../utils';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 
-// #endregion
-
 function addColumnAtCustomStep(column: number) {
   return (tr: Transaction) => {
     const table = findTable(tr.selection);
@@ -55,9 +55,21 @@ export function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth) {
           updatedTr,
         );
       }
+
+      if (
+        getBooleanFF('platform.editor.table.analytics-plugin-moved-event') &&
+        view
+      ) {
+        updatedTr = updateRowOrColumnMovedTransform(
+          { type: 'column' },
+          'addRowOrColumn',
+        )(view.state, updatedTr);
+      }
+
       updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
         name: TABLE_OVERFLOW_CHANGE_TRIGGER.ADDED_COLUMN,
       });
+
       return updatedTr;
     };
   };
@@ -164,6 +176,15 @@ export const insertRow =
         tr.setSelection(selection.map(tr.doc, tr.mapping));
       }
 
+      if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event')) {
+        updateRowOrColumnMovedTransform(
+          {
+            type: 'row',
+          },
+          'addRowOrColumn',
+        )(state, tr);
+      }
+
       dispatch(tr);
     }
     return true;

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

@@ -1,4 +1,3 @@
-// #region Imports
 import type { CellAttributes } from '@atlaskit/adf-schema';
 import type { Command } from '@atlaskit/editor-common/types';
 import {
@@ -13,7 +12,11 @@ import type {
   Slice,
 } from '@atlaskit/editor-prosemirror/model';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
-import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type {
+  EditorState,
+  Selection,
+  Transaction,
+} from '@atlaskit/editor-prosemirror/state';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -72,11 +75,7 @@ export const setTableRef = (ref?: HTMLTableElement) =>
         closestElement(tableRef, `.${ClassName.TABLE_NODE_WRAPPER}`) ||
         undefined;
       const layout = tableNode ? tableNode.attrs.layout : undefined;
-      const decorationSet = updatePluginStateDecorations(
-        state,
-        createColumnControlsDecoration(state.selection),
-        TableDecorations.COLUMN_CONTROLS_DECORATIONS,
-      );
+      const { isDragAndDropEnabled } = getPluginState(state);
 
       return {
         type: 'SET_TABLE_REF',
@@ -89,7 +88,14 @@ export const setTableRef = (ref?: HTMLTableElement) =>
           isNumberColumnEnabled: checkIfNumberColumnEnabled(state.selection),
           isHeaderRowEnabled: checkIfHeaderRowEnabled(state.selection),
           isHeaderColumnEnabled: checkIfHeaderColumnEnabled(state.selection),
-          decorationSet,
+          // decoration set is drawn by the decoration plugin, skip this for DnD as all controls are floating
+          decorationSet: !isDragAndDropEnabled
+            ? updatePluginStateDecorations(
+                state,
+                createColumnControlsDecoration(state.selection),
+                TableDecorations.COLUMN_CONTROLS_DECORATIONS,
+              )
+            : undefined,
           resizeHandleRowIndex: undefined,
           resizeHandleColumnIndex: undefined,
         },
@@ -232,6 +238,85 @@ export const transformSliceToRemoveColumnsWidths = (
   });
 };
 
+export const countCellsInSlice = (
+  slice: Slice,
+  schema: Schema,
+  type?: 'row' | 'column',
+) => {
+  const { tableHeader, tableCell } = schema.nodes;
+  let count = 0;
+
+  if (!type) {
+    return count;
+  }
+
+  slice.content.descendants((maybeCell) => {
+    if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
+      count +=
+        type === 'row' ? maybeCell.attrs.colspan : maybeCell.attrs.rowspan;
+
+      return false;
+    }
+  });
+
+  return count;
+};
+
+export const getTableSelectionType = (selection: Selection) => {
+  if (selection instanceof CellSelection) {
+    return selection.isRowSelection()
+      ? 'row'
+      : selection.isColSelection()
+      ? 'column'
+      : undefined;
+  }
+};
+
+export const getTableElementMoveTypeBySlice = (
+  slice: Slice,
+  state: EditorState,
+) => {
+  if (!slice.content.firstChild) {
+    return;
+  }
+
+  const { schema } = state;
+
+  // if the slice only contains one table row, assume it's a row
+  if (
+    slice.content.childCount === 1 &&
+    slice.content.firstChild.type === schema.nodes.tableRow
+  ) {
+    return 'row';
+  }
+
+  const table = findTable(state.tr.selection)!;
+  const map = TableMap.get(table.node);
+  const slicedMap = TableMap.get(slice.content.firstChild);
+
+  return map.width === slicedMap.width
+    ? 'row'
+    : map.height === slicedMap.height
+    ? 'column'
+    : undefined;
+};
+
+export const isInsideFirstCellOfRowOrColumn = (
+  selection: Selection,
+  type?: 'row' | 'column',
+) => {
+  const table = findTable(selection);
+
+  if (!table || !type) {
+    return;
+  }
+  const map = TableMap.get(table.node!);
+  const cell = selectionCell(selection);
+  const index = map.map.findIndex((value) => value === cell!.pos! - 1);
+
+  return type === 'row' ? index % map.width === 0 : index < map.width;
+};
+
 export const deleteTable: Command = (state, dispatch) => {
   if (dispatch) {
     dispatch(removeTable(state.tr));

package/src/plugins/table/index.tsx

@@ -42,6 +42,8 @@ import { createTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { pluginConfig } from './create-plugin-config';
+import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
+import { pluginKey as tableAnalyticsPluginKey } from './pm-plugins/analytics/plugin-key';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import {
   createPlugin as createDragAndDropPlugin,
@@ -56,10 +58,7 @@ import {
   findStickyHeaderForTable,
   pluginKey as stickyHeadersPluginKey,
 } from './pm-plugins/sticky-headers';
-import {
-  createPlugin as createTableAnalyticsPlugin,
-  pluginKey as tableAnalyticsPluginKey,
-} from './pm-plugins/table-analytics';
+import { createPlugin as createTableOverflowAnalyticsPlugin } from './pm-plugins/table-analytics';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import {
   createPlugin as createFlexiResizingPlugin,
@@ -295,17 +294,25 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                 )
               : undefined,
         },
+        // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
         {
-          name: 'tableAnalyticsPlugin',
+          name: 'tableOverflowAnalyticsPlugin',
           plugin: ({ dispatch, dispatchAnalyticsEvent }) =>
             getBooleanFF('platform.editor.table.overflow-state-analytics')
-              ? createTableAnalyticsPlugin(
+              ? createTableOverflowAnalyticsPlugin(
                   dispatch,
                   dispatchAnalyticsEvent,
                   options?.tableResizingEnabled ?? false,
                 )
               : undefined,
         },
+        {
+          name: 'tableAnalyticsPlugin',
+          plugin: ({ dispatch, dispatchAnalyticsEvent }) =>
+            getBooleanFF('platform.editor.table.analytics-plugin-moved-event')
+              ? createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent)
+              : undefined,
+        },
         {
           name: 'tableGetEditorViewReferencePlugin',
           plugin: () => {