@atlaskit/editor-plugin-table 1.7.2 → 2.0.0

package/src/__tests__/unit/analytics.ts

@@ -44,9 +44,9 @@ import tablePlugin from '../../plugins/table-plugin';
 import typeAheadPlugin from '@atlaskit/editor-core/src/plugins/type-ahead';
 import quickInsertPlugin from '@atlaskit/editor-core/src/plugins/quick-insert';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
-import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 
 const defaultTableDoc = doc(
   table()(
@@ -59,6 +59,16 @@ const defaultTableDoc = doc(
 const secondRow: Rect = { left: 0, top: 1, bottom: 2, right: 3 };
 const secondColumn: Rect = { left: 1, top: 0, bottom: 3, right: 2 };
 
+// We don't need to test if the analytics implementation works (tested elsewhere)
+// We just want to know if the action is called.
+const mockAttachPayload = jest.fn();
+const analyticsPluginFake = () => ({
+  name: 'analytics',
+  actions: {
+    attachAnalyticsEvent: mockAttachPayload.mockImplementation(() => () => {}),
+  },
+});
+
 describe('Table analytic events', () => {
   let editorAnalyticsAPIFake: EditorAnalyticsAPI;
   const analyticFireMock = jest.fn().mockReturnValue(jest.fn());
@@ -83,15 +93,15 @@ describe('Table analytic events', () => {
       doc,
       preset: new Preset<LightEditorPlugin>()
         .add([featureFlagsPlugin, {}])
-        .add([analyticsPlugin, {}])
+        .add([
+          analyticsPluginFake as unknown as typeof analyticsPlugin,
+          { createAnalyticsEvent: jest.fn() },
+        ])
         .add(typeAheadPlugin)
         .add(contentInsertionPlugin)
         .add(quickInsertPlugin)
         .add(widthPlugin)
-        .add([
-          tablePlugin,
-          { tableOptions, editorAnalyticsAPI: editorAnalyticsAPIFake },
-        ]),
+        .add([tablePlugin, { tableOptions }]),
       pluginKey,
     });
 
@@ -105,7 +115,7 @@ describe('Table analytic events', () => {
     });
 
     it('should fire v3 analytics', () => {
-      expect(analyticFireMock).toBeCalledWith({
+      expect(mockAttachPayload).toBeCalledWith({
         action: 'inserted',
         actionSubject: 'document',
         actionSubjectId: 'table',
@@ -218,7 +228,7 @@ describe('Table analytic events', () => {
       });
 
       it('should fire v3 analytics', () => {
-        expect(analyticFireMock).toHaveBeenCalledWith({
+        expect(mockAttachPayload).toHaveBeenCalledWith({
           action: 'cleared',
           actionSubject: 'table',
           actionSubjectId: null,
@@ -578,7 +588,7 @@ describe('Table analytic events', () => {
         });
 
         it('should fire v3 analytics', () => {
-          expect(analyticFireMock).toHaveBeenCalledWith({
+          expect(mockAttachPayload).toHaveBeenCalledWith({
             action: 'addedRow',
             actionSubject: 'table',
             actionSubjectId: null,
@@ -608,7 +618,7 @@ describe('Table analytic events', () => {
         });
 
         it('should fire v3 analytics', () => {
-          expect(analyticFireMock).toHaveBeenCalledWith({
+          expect(mockAttachPayload).toHaveBeenCalledWith({
             action: 'addedRow',
             actionSubject: 'table',
             actionSubjectId: null,

package/src/__tests__/unit/keymap.ts

@@ -8,7 +8,6 @@ import {
 } from '@atlaskit/editor-tables/utils';
 import { PluginKey } from 'prosemirror-state';
 
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {
   createProsemirrorEditorFactory,
   LightEditorPlugin,
@@ -29,10 +28,6 @@ import {
 import { pmNodeBuilder } from '@atlaskit/editor-test-helpers/schema-element-builder';
 import defaultSchema from '@atlaskit/editor-test-helpers/schema';
 import sendKeyToPm from '@atlaskit/editor-test-helpers/send-key-to-pm';
-import {
-  CreateUIAnalyticsEvent,
-  UIAnalyticsEvent,
-} from '@atlaskit/analytics-next';
 import { uuid } from '@atlaskit/adf-schema';
 import { uuid as tablesUuid } from '@atlaskit/editor-tables';
 
@@ -42,8 +37,7 @@ import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
 import tasksDecisionsPlugin from '@atlaskit/editor-core/src/plugins/tasks-and-decisions';
 import selectionPlugin from '@atlaskit/editor-core/src/plugins/selection';
 import mediaPlugin from '@atlaskit/editor-core/src/plugins/media';
-import deprecatedAnalyticsPlugin from '@atlaskit/editor-core/src/plugins/analytics';
-import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import listPlugin from '@atlaskit/editor-core/src/plugins/list';
 import blockTypePlugin from '@atlaskit/editor-core/src/plugins/block-type';
 import codeBlockPlugin from '@atlaskit/editor-core/src/plugins/code-block';
@@ -67,6 +61,16 @@ import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
+// We don't need to test if the analytics implementation works (tested elsewhere)
+// We just want to know if the action is called.
+const mockAttachPayload = jest.fn();
+const analyticsPluginFake = () => ({
+  name: 'analytics',
+  actions: {
+    attachAnalyticsEvent: mockAttachPayload.mockImplementation(() => () => {}),
+  },
+});
+
 describe('table keymap', () => {
   beforeAll(() => {
     uuid.setStatic(TABLE_LOCAL_ID);
@@ -78,27 +82,16 @@ describe('table keymap', () => {
     tablesUuid.setStatic(false);
   });
 
-  let editorAnalyticsAPIFake: EditorAnalyticsAPI = {
-    attachAnalyticsEvent: jest.fn().mockReturnValue(jest.fn()),
-  };
-  const createAnalyticsEvent: CreateUIAnalyticsEvent = jest.fn(
-    () => ({ fire() {} } as UIAnalyticsEvent),
-  );
-
   const createEditor = createProsemirrorEditorFactory();
   const preset = new Preset<LightEditorPlugin>()
     .add([featureFlagsPlugin, {}])
-    .add([analyticsPlugin, { createAnalyticsEvent }])
-    .add([deprecatedAnalyticsPlugin, { createAnalyticsEvent }])
+    .add([analyticsPluginFake as unknown as typeof analyticsPlugin, {}])
     .add(contentInsertionPlugin)
     .add(decorationsPlugin)
     .add(widthPlugin)
     .add(gridPlugin)
     .add(selectionPlugin)
-    .add([
-      tablePlugin,
-      { tableOptions: {}, editorAnalyticsAPI: editorAnalyticsAPIFake },
-    ])
+    .add([tablePlugin, { tableOptions: {} }])
     .add(expandPlugin)
     .add(tasksDecisionsPlugin)
     .add(panelPlugin)
@@ -604,7 +597,7 @@ describe('table keymap', () => {
     });
 
     it('should dispatch analytics event', () => {
-      expect(editorAnalyticsAPIFake.attachAnalyticsEvent).toBeCalledWith({
+      expect(mockAttachPayload).toBeCalledWith({
         action: 'inserted',
         actionSubject: 'document',
         actionSubjectId: 'table',

package/src/__tests__/unit/pm-plugins/table-resizing/event-handlers.ts

@@ -25,7 +25,6 @@ import { TextSelection, NodeSelection, EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import panelPlugin from '@atlaskit/editor-core/src/plugins/panel';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {
   akEditorFullPageMaxWidth,
   akEditorDefaultLayoutWidth,
@@ -35,10 +34,17 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
+// We don't need to test if the analytics implementation works (tested elsewhere)
+// We just want to know if the action is called.
+const mockAttachPayload = jest.fn();
+const analyticsPluginFake = () => ({
+  name: 'analytics',
+  actions: {
+    attachAnalyticsEvent: mockAttachPayload.mockImplementation(() => () => {}),
+  },
+});
+
 describe('table-resizing/event-handlers', () => {
-  const editorAnalyticsAPIFake: EditorAnalyticsAPI = {
-    attachAnalyticsEvent: jest.fn().mockReturnValue(() => jest.fn()),
-  };
   let editor: any;
   beforeEach(() => {
     const createEditor = createProsemirrorEditorFactory();
@@ -48,7 +54,7 @@ describe('table-resizing/event-handlers', () => {
         attachTo: document.body,
         preset: new Preset<LightEditorPlugin>()
           .add([featureFlagsPlugin, {}])
-          .add([analyticsPlugin, {}])
+          .add([analyticsPluginFake as unknown as typeof analyticsPlugin, {}])
           .add(contentInsertionPlugin)
           .add(decorationsPlugin)
           .add(widthPlugin)
@@ -56,7 +62,6 @@ describe('table-resizing/event-handlers', () => {
             tablePlugin,
             {
               tableOptions: { allowColumnResizing: true },
-              editorAnalyticsAPI: editorAnalyticsAPIFake,
             },
           ])
           .add(panelPlugin),
@@ -72,7 +77,7 @@ describe('table-resizing/event-handlers', () => {
 
       resizeColumn(view, 12, 150, 250);
 
-      expect(editorAnalyticsAPIFake.attachAnalyticsEvent).toHaveBeenCalledWith(
+      expect(mockAttachPayload).toHaveBeenCalledWith(
         expect.objectContaining({
           action: TABLE_ACTION.ATTEMPTED_TABLE_WIDTH_CHANGE,
           actionSubject: ACTION_SUBJECT.TABLE,

package/src/__tests__/visual-regression/__image_snapshots__/sticky-header-ts-snapshot-test-table-sticky-header-should-align-with-table-cell-when-active-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7e4711c029f049a837051d496f231798f2242062e12e31917fa6ea29e6b8c642
-size 20453
+oid sha256:ebb86471508f57976e27a1c2d32d7ef690f19699443550444ba6fabbb30b1d7c
+size 20020

package/src/__tests__/visual-regression/__image_snapshots__/sticky-header-ts-snapshot-test-table-sticky-header-should-align-with-table-cell-when-active-2-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a063075cc5504c85ba5809ece337a3a687f58a74fdb9e2b820e8ab6d234b8dd7
-size 19687
+oid sha256:f24f89698026674f09e57abf0de63a7cba9490251e8238d670653d8ddc6bb077
+size 19266

package/src/__tests__/visual-regression/sticky-header.ts

@@ -38,11 +38,12 @@ describe('Snapshot Test: Table', () => {
   });
 
   describe('sticky header', () => {
-    // FIXME: This test was automatically skipped due to failure on 21/06/2023: https://product-fabric.atlassian.net/browse/ED-18903
-    it.skip('should align with table cell when active', async () => {
+    it('should align with table cell when active', async () => {
       await initEditor(page, stickyHeaderWithHorizontalScroll);
 
       await clickFirstCell(page, true);
+      // Mouse was inside the table and would cause the column resizer to trigger occasionally
+      await page.mouse.move(0, 0);
 
       // scroll to bottom center to see scroll shadows
       await scrollToElement(page, 'ol > li');

package/src/plugins/table/index.tsx

@@ -32,7 +32,6 @@ import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/
 
 import { IconTable } from '@atlaskit/editor-common/icons';
 
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 
 import { pluginConfig } from './create-plugin-config';
@@ -80,7 +79,6 @@ interface TablePluginOptions {
   // TODO these two need to be rethought
   fullWidthEnabled?: boolean;
   wasFullWidthEnabled?: boolean;
-  editorAnalyticsAPI?: EditorAnalyticsAPI;
   editorSelectionAPI?: EditorSelectionAPI;
   getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
@@ -110,6 +108,7 @@ const tablesPlugin: NextEditorPlugin<
     };
     return api?.dependencies.width.sharedState.currentState() ?? defaultState;
   };
+  const editorAnalyticsAPI = api?.dependencies.analytics?.actions;
 
   return {
     name: 'table',
@@ -165,13 +164,8 @@ const tablesPlugin: NextEditorPlugin<
               wasFullWidthEnabled,
               breakoutEnabled,
               tableOptions,
-              editorAnalyticsAPI,
               getEditorFeatureFlags,
-            } =
-              options ||
-              ({
-                editorAnalyticsAPI: api?.dependencies.analytics?.actions,
-              } as TablePluginOptions);
+            } = options || ({} as TablePluginOptions);
             return createPlugin(
               dispatchAnalyticsEvent,
               dispatch,
@@ -191,12 +185,8 @@ const tablesPlugin: NextEditorPlugin<
         {
           name: 'tablePMColResizing',
           plugin: ({ dispatch }) => {
-            const {
-              fullWidthEnabled,
-              tableOptions,
-              editorAnalyticsAPI,
-              getEditorFeatureFlags,
-            } = options || ({} as TablePluginOptions);
+            const { fullWidthEnabled, tableOptions, getEditorFeatureFlags } =
+              options || ({} as TablePluginOptions);
             const { allowColumnResizing } = pluginConfig(tableOptions);
             return allowColumnResizing
               ? createFlexiResizingPlugin(
@@ -217,10 +207,7 @@ const tablesPlugin: NextEditorPlugin<
         {
           name: 'tableKeymap',
           plugin: () =>
-            keymapPlugin(
-              defaultGetEditorContainerWidth,
-              options?.editorAnalyticsAPI,
-            ),
+            keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI),
         },
         {
           name: 'tableSelectionKeymap',
@@ -239,7 +226,7 @@ const tablesPlugin: NextEditorPlugin<
                 tr: Transaction;
                 reason: string;
               }) => {
-                options?.editorAnalyticsAPI?.attachAnalyticsEvent({
+                editorAnalyticsAPI?.attachAnalyticsEvent({
                   action: TABLE_ACTION.FIXED,
                   actionSubject: ACTION_SUBJECT.TABLE,
                   actionSubjectId: null,
@@ -374,7 +361,7 @@ const tablesPlugin: NextEditorPlugin<
                     !!resizingPluginState && !!resizingPluginState.dragging
                   }
                   stickyHeader={stickyHeader}
-                  editorAnalyticsAPI={options?.editorAnalyticsAPI}
+                  editorAnalyticsAPI={editorAnalyticsAPI}
                 />
               ) : null;
 
@@ -415,7 +402,7 @@ const tablesPlugin: NextEditorPlugin<
                       scrollableElement={popupsScrollableElement}
                       hasStickyHeaders={stickyHeader && stickyHeader.sticky}
                       dispatchAnalyticsEvent={dispatchAnalyticsEvent}
-                      editorAnalyticsAPI={options?.editorAnalyticsAPI}
+                      editorAnalyticsAPI={editorAnalyticsAPI}
                       getEditorContainerWidth={defaultGetEditorContainerWidth}
                     />
                   )}
@@ -426,7 +413,7 @@ const tablesPlugin: NextEditorPlugin<
                     targetCellPosition={targetCellPosition}
                     isOpen={Boolean(isContextualMenuOpen)}
                     pluginConfig={pluginConfig}
-                    editorAnalyticsAPI={options?.editorAnalyticsAPI}
+                    editorAnalyticsAPI={editorAnalyticsAPI}
                     getEditorContainerWidth={defaultGetEditorContainerWidth}
                     getEditorFeatureFlags={
                       options?.getEditorFeatureFlags ||
@@ -445,7 +432,7 @@ const tablesPlugin: NextEditorPlugin<
                       isNumberColumnEnabled={
                         tableNode && tableNode.attrs.isNumberColumnEnabled
                       }
-                      editorAnalyticsAPI={options?.editorAnalyticsAPI}
+                      editorAnalyticsAPI={editorAnalyticsAPI}
                     />
                   )}
                   {LayoutContent}
@@ -473,7 +460,7 @@ const tablesPlugin: NextEditorPlugin<
                 schema: state.schema,
               }),
             );
-            options?.editorAnalyticsAPI?.attachAnalyticsEvent({
+            editorAnalyticsAPI?.attachAnalyticsEvent({
               action: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: ACTION_SUBJECT_ID.TABLE,
@@ -486,7 +473,7 @@ const tablesPlugin: NextEditorPlugin<
       ],
       floatingToolbar: getToolbarConfig(
         defaultGetEditorContainerWidth,
-        options?.editorAnalyticsAPI,
+        editorAnalyticsAPI,
         options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
         () => editorViewRef.current,
       )(pluginConfig(options?.tableOptions)),

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

@@ -87,10 +87,13 @@ export default class TableView extends ReactNodeView<Props> {
     const rendered = DOMSerializer.renderSpec(
       document,
       toDOM(this.node, this.reactComponentProps as Props),
-    );
+    ) as {
+      dom: HTMLElement;
+      contentDOM?: HTMLElement;
+    };
 
     if (rendered.dom) {
-      this.table = rendered.dom as HTMLElement;
+      this.table = rendered.dom;
     }
 
     return rendered;

package/src/plugins/table/pm-plugins/main.ts

@@ -167,7 +167,7 @@ export const createPlugin = (
     state: state,
     key: pluginKey,
     appendTransaction: (
-      transactions: Transaction[],
+      transactions: readonly Transaction[],
       oldState: EditorState,
       newState: EditorState,
     ) => {

package/src/plugins/table/pm-plugins/safari-delete-composition-text-issue-workaround.ts

@@ -59,7 +59,7 @@ export const createPlugin = () => {
     props: {
       decorations: (state) =>
         tableSafariDeleteCompositionTextIssueWorkaroundKey.getState(state)
-          .decorations,
+          ?.decorations,
       handleDOMEvents: {
         beforeinput: (view: EditorView, event: Event): boolean => {
           if ((event as InputEvent)?.inputType !== 'deleteCompositionText') {

package/src/plugins/table/pm-plugins/table-resizing/utils/misc.ts

@@ -57,7 +57,7 @@ export function getDefaultLayoutMaxWidth(containerWidth?: number): number {
 }
 
 // Does the current position point at a cell.
-export function pointsAtCell($pos: ResolvedPos<any>) {
+export function pointsAtCell($pos: ResolvedPos) {
   return (
     ($pos.parent.type.spec as NodeSpec & { tableRole: string }).tableRole ===
       'row' && $pos.nodeAfter

package/src/plugins/table/toolbar.tsx

@@ -45,7 +45,6 @@ import {
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import {
-  ColumnResizingPluginState,
   ToolbarMenuConfig,
   ToolbarMenuState,
   ToolbarMenuContext,
@@ -440,8 +439,7 @@ export const getToolbarConfig =
   (state, intl) => {
     const tableObject = findTable(state.selection);
     const pluginState = getPluginState(state);
-    const resizeState: ColumnResizingPluginState | undefined =
-      tableResizingPluginKey.getState(state);
+    const resizeState = tableResizingPluginKey.getState(state);
     if (tableObject && pluginState.editorHasFocus) {
       const nodeType = state.schema.nodes.table;
       const menu = getToolbarMenuConfig(

package/src/plugins/table/ui/FloatingContextualMenu/index.tsx

@@ -31,7 +31,7 @@ import ContextualMenu from './ContextualMenu';
 
 // offset of the contextual menu dropdown
 const calculateOffset = (targetCellRef: HTMLElement, state: EditorState) => {
-  const { tableRef } = pluginKey.getState(state);
+  const { tableRef } = pluginKey.getState(state) || {};
   let top = -contextualMenuTriggerSize;
 
   if (tableRef && targetCellRef) {

package/src/plugins/table/utils/collapse.ts

@@ -1,14 +1,14 @@
-import { NodeType, NodeRange, Schema } from 'prosemirror-model';
+import { NodeType, NodeRange } from 'prosemirror-model';
 import { Transaction, ReadonlyTransaction } from 'prosemirror-state';
 import { findWrapping } from 'prosemirror-transform';
 
 import { findTable } from '@atlaskit/editor-tables/utils';
 
-interface IsTableCollapsibleResult<S extends Schema = any> {
+interface IsTableCollapsibleResult {
   tableIsCollapsible: boolean;
   range?: NodeRange;
   findWrappingRes?:
-    | Array<{ type: NodeType<S>; attrs?: { [key: string]: any } | null }>
+    | Array<{ type: NodeType; attrs?: { [key: string]: any } | null }>
     | null
     | undefined;
 }

package/src/plugins/table/utils/nodes.ts

@@ -60,18 +60,18 @@ export const checkIfNumberColumnEnabled = (selection: Selection): boolean =>
   );
 
 export const isLayoutSupported = (state: EditorState): boolean => {
-  const { permittedLayouts } = pluginKey.getState(state).pluginConfig;
+  const { permittedLayouts } = pluginKey.getState(state)?.pluginConfig || {};
   const { bodiedExtension, layoutSection, expand } = state.schema.nodes;
 
   return (
     !hasParentNodeOfType([expand, layoutSection, bodiedExtension])(
       state.selection,
     ) &&
-    permittedLayouts &&
+    !!permittedLayouts &&
     (permittedLayouts === 'all' ||
       (permittedLayouts.indexOf('default') > -1 &&
         permittedLayouts.indexOf('wide') > -1 &&
-        permittedLayouts.indexOf('full-page') > -1))
+        permittedLayouts.indexOf('full-width') > -1))
   );
 };
 

package/src/plugins/table/utils/update-plugin-state-decorations.ts

@@ -7,7 +7,7 @@ import { TableDecorations } from '../types';
 import { updateDecorations } from './decoration';
 
 export const updatePluginStateDecorations = (
-  state: EditorState<any>,
+  state: EditorState,
   decorations: Decoration[],
   key: TableDecorations,
 ): DecorationSet =>

package/tmp/api-report-tmp.d.ts

@@ -8,7 +8,6 @@ import { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { Command } from '@atlaskit/editor-common/types';
 import type { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
@@ -76,8 +75,6 @@ interface TablePluginOptions {
     // (undocumented)
     breakoutEnabled?: boolean;
     // (undocumented)
-    editorAnalyticsAPI?: EditorAnalyticsAPI;
-    // (undocumented)
     editorSelectionAPI?: EditorSelectionAPI;
     // (undocumented)
     fullWidthEnabled?: boolean;