@atlaskit/editor-plugin-table 5.4.6 → 5.4.7

package/dist/types-ts4.5/plugins/table/pm-plugins/analytics/actions.d.ts

@@ -0,0 +1,17 @@
+import type { RowOrColumnMovedState } from './types';
+export declare enum AnalyticPluginTypes {
+    UpdateOverflowTriggerNameAction = 0,
+    UpdateRowOrColumnMovedAction = 1,
+    RemoveRowOrColumnMovedAction = 2,
+    RemoveOverFlowTriggerNameAction = 3,
+    UpdateRowOrColumnMovedAndOverflowTrigger = 4
+}
+export type UpdateRowOrColumnMovedAction = {
+    type: AnalyticPluginTypes.UpdateRowOrColumnMovedAction;
+    data: RowOrColumnMovedState;
+};
+export type RemoveRowOrColumnMovedAction = {
+    type: AnalyticPluginTypes.RemoveRowOrColumnMovedAction;
+    data: undefined;
+};
+export type AnalyticPluginAction = UpdateRowOrColumnMovedAction | RemoveRowOrColumnMovedAction;

package/dist/types-ts4.5/plugins/table/pm-plugins/analytics/commands.d.ts

@@ -0,0 +1,5 @@
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { ActionType, RowOrColumnMovedState } from './types';
+export declare const updateRowOrColumnMoved: (nextState: Omit<RowOrColumnMovedState, 'currentActions'>, nextAction: ActionType) => import("@atlaskit/editor-common/types").Command;
+export declare const resetRowOrColumnMovedTransform: () => (tr: Transaction) => Transaction;
+export declare const updateRowOrColumnMovedTransform: (nextState: Omit<RowOrColumnMovedState, 'currentActions'>, nextAction: ActionType) => (state: EditorState, tr: Transaction) => Transaction;

package/dist/types-ts4.5/plugins/table/pm-plugins/analytics/plugin-factory.d.ts

@@ -0,0 +1 @@
+export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: import("./types").AnalyticPluginState | ((state: import("prosemirror-state").EditorState) => import("./types").AnalyticPluginState)) => import("prosemirror-state").SafeStateField<import("./types").AnalyticPluginState>, createCommand: <A = import("./actions").AnalyticPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => import("./types").AnalyticPluginState;

package/dist/types-ts4.5/plugins/table/pm-plugins/analytics/plugin-key.d.ts

@@ -0,0 +1,3 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { AnalyticPluginState } from './types';
+export declare const pluginKey: PluginKey<AnalyticPluginState>;

package/dist/types-ts4.5/plugins/table/pm-plugins/analytics/plugin.d.ts

@@ -0,0 +1,4 @@
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent) => SafePlugin<import("./types").AnalyticPluginState>;

package/dist/types-ts4.5/plugins/table/pm-plugins/analytics/reducer.d.ts

@@ -0,0 +1,3 @@
+import type { AnalyticPluginAction } from './actions';
+import type { AnalyticPluginState } from './types';
+export declare const reducer: (state: AnalyticPluginState, action: AnalyticPluginAction) => AnalyticPluginState;

package/dist/types-ts4.5/plugins/table/pm-plugins/analytics/types.d.ts

@@ -0,0 +1,11 @@
+export type ActionType = 'none' | 'addRowOrColumn' | 'copyOrCut' | 'pasted';
+export type RowOrColumnMovedState = {
+    type?: 'row' | 'column';
+    /** used to confirm if same number of cells was copied and pasted */
+    numberOfCells?: number;
+    currentActions: Array<ActionType>;
+};
+export type AnalyticPluginState = {
+    rowOrColumnMoved: RowOrColumnMovedState;
+};
+export declare const defaultState: AnalyticPluginState;

package/dist/types-ts4.5/plugins/table/pm-plugins/analytics/utils/moved-event.d.ts

@@ -0,0 +1,6 @@
+import type { ActionType, RowOrColumnMovedState } from '../types';
+export declare const getMovedPayload: (nextState: Omit<RowOrColumnMovedState, 'currentActions'>, nextAction: ActionType, prevState: RowOrColumnMovedState) => RowOrColumnMovedState | {
+    currentActions: string[];
+    numberOfCells: number | undefined;
+    type: "row" | "column" | undefined;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.4.6",
+  "version": "5.4.7",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -141,6 +141,9 @@
     },
     "platform.editor.table.alternative-sticky-header-logic": {
       "type": "boolean"
+    },
+    "platform.editor.table.analytics-plugin-moved-event": {
+      "type": "boolean"
     }
   }
 }

package/src/__tests__/unit/index-with-fake-timers.ts

@@ -86,6 +86,7 @@ describe.skip('TableView', () => {
       getEditorContainerWidth,
       getEditorFeatureFlags: fakeGetEditorFeatureFlags,
       hasIntlContext: true,
+      dispatchAnalyticsEvent: jest.fn(),
     }).init();
 
     // we expect to have a contentDOM after instanciating the NodeView so that

package/src/__tests__/unit/nodeviews/table.ts

@@ -84,6 +84,7 @@ describe('table -> nodeviews -> table.tsx', () => {
           getEditorContainerWidth: () => ({ width: 500 }),
           getEditorFeatureFlags: () => ({}),
           hasIntlContext: true,
+          dispatchAnalyticsEvent: jest.fn(),
         }).init();
 
         renderSpy = jest.spyOn(tableNodeView, 'render');

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/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

@@ -13,7 +13,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';
@@ -232,6 +236,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: () => {