@atlaskit/editor-plugin-table 2.12.5 → 2.13.0

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

@@ -3,15 +3,16 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl-next';
 
+import selectionPlugin from '@atlaskit/editor-core/src/plugins/selection';
 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 { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
@@ -41,6 +42,7 @@ describe('FloatingContextualMenu', () => {
           .add(contentInsertionPlugin)
           .add(widthPlugin)
           .add(guidelinePlugin)
+          .add(selectionPlugin)
           .add(tablePlugin),
       }));
     });

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

@@ -4,6 +4,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl-next';
 
 import { setTextSelection } from '@atlaskit/editor-common/utils';
+import selectionPlugin from '@atlaskit/editor-core/src/plugins/selection';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
@@ -67,6 +68,7 @@ describe('RowControls', () => {
         .add(contentInsertionPlugin)
         .add(widthPlugin)
         .add(guidelinePlugin)
+        .add(selectionPlugin)
         .add(tablePlugin),
       pluginKey,
     });

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

@@ -3,6 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl-next';
 
+import selectionPlugin from '@atlaskit/editor-core/src/plugins/selection';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
@@ -40,6 +41,7 @@ describe('TableFloatingControls', () => {
     .add(contentInsertionPlugin)
     .add(widthPlugin)
     .add(guidelinePlugin)
+    .add(selectionPlugin)
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>

package/src/__tests__/unit/undo-redo.ts

@@ -1,5 +1,6 @@
 import clone from 'lodash/clone';
 
+import selectionPlugin from '@atlaskit/editor-core/src/plugins/selection';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
@@ -70,6 +71,7 @@ describe('undo/redo with tables', () => {
         .add(contentInsertionPlugin)
         .add(widthPlugin)
         .add(guidelinePlugin)
+        .add(selectionPlugin)
         .add([tablePlugin, { tableOptions }]),
       pluginKey: tablePluginKey,
     });

package/src/__tests__/unit/utils/collapse.ts

@@ -1,3 +1,4 @@
+import selectionPlugin from '@atlaskit/editor-core/src/plugins/selection';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
@@ -29,6 +30,7 @@ describe('collapse', () => {
       .add(contentInsertionPlugin)
       .add(widthPlugin)
       .add(guidelinePlugin)
+      .add(selectionPlugin)
       .add(tablePlugin);
 
     return createEditor({ doc, preset });

package/src/__tests__/unit/utils/nodes.ts

@@ -1,3 +1,4 @@
+import selectionPlugin from '@atlaskit/editor-core/src/plugins/selection';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
@@ -37,6 +38,7 @@ describe('table merging logic', () => {
         .add(contentInsertionPlugin)
         .add(widthPlugin)
         .add(guidelinePlugin)
+        .add(selectionPlugin)
         .add(tablePlugin),
       pluginKey,
     });

package/src/__tests__/unit/utils/row-controls.ts

@@ -1,4 +1,5 @@
 import { uuid } from '@atlaskit/adf-schema';
+import selectionPlugin from '@atlaskit/editor-core/src/plugins/selection';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
@@ -46,6 +47,7 @@ describe('table plugin: utils/row-controls.js', () => {
         .add(contentInsertionPlugin)
         .add(widthPlugin)
         .add(guidelinePlugin)
+        .add(selectionPlugin)
         .add(tablePlugin),
       pluginKey,
     });

package/src/__tests__/unit/utils.ts

@@ -1,3 +1,4 @@
+import selectionPlugin from '@atlaskit/editor-core/src/plugins/selection';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
@@ -43,6 +44,7 @@ describe('table plugin: utils', () => {
     .add(contentInsertionPlugin)
     .add(widthPlugin)
     .add(guidelinePlugin)
+    .add(selectionPlugin)
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>

package/src/plugins/table/index.tsx

@@ -24,10 +24,12 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 import type {
   Command,
+  EditorCommand,
   EditorPlugin,
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
   NextEditorPlugin,
+  OptionalPlugin,
 } from '@atlaskit/editor-common/types';
 import { browser } from '@atlaskit/editor-common/utils';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
@@ -86,6 +88,16 @@ interface TablePluginOptions {
 
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
 
+// TODO: duplicated SelectionPlugin type as it's still in editor-core, doing this avoid
+// circular dependencies
+type SelectionPlugin = NextEditorPlugin<
+  'selection',
+  {
+    pluginConfiguration: unknown;
+    commands: { displayGapCursor: (toggle: boolean) => EditorCommand };
+  }
+>;
+
 const defaultGetEditorFeatureFlags = () => ({});
 
 export type TablePlugin = NextEditorPlugin<
@@ -100,6 +112,7 @@ export type TablePlugin = NextEditorPlugin<
       ContentInsertionPlugin,
       WidthPlugin,
       GuidelinePlugin,
+      OptionalPlugin<SelectionPlugin>,
     ];
   }
 >;

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

@@ -342,7 +342,19 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         ({ visibility: visible ? 'visible' : 'hidden' } as CSSProperties),
     );
 
-    const isNested = isTableNested(view.state, getPos());
+    /**
+     *  ED-19838
+     *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch
+     *  before CR6 lands in production
+     */
+    let tablePos: number | undefined;
+    try {
+      tablePos = getPos ? getPos() : undefined;
+    } catch (e) {
+      tablePos = undefined;
+    }
+
+    const isNested = isTableNested(view.state, tablePos);
 
     return (
       <TableContainer

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

@@ -136,6 +136,17 @@ export const ResizableTableContainer = ({
     [pluginInjectionApi],
   );
 
+  const displayGapCursor = useCallback(
+    (toggle) => {
+      return (
+        pluginInjectionApi?.core?.actions.execute(
+          pluginInjectionApi?.selection?.commands.displayGapCursor(toggle),
+        ) ?? false
+      );
+    },
+    [pluginInjectionApi],
+  );
+
   const tableWidth = getTableContainerWidth(node);
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   const responsiveContainerWidth = containerWidth - 76;
@@ -167,6 +178,7 @@ export const ResizableTableContainer = ({
         tableRef={tableRef}
         displayGuideline={displayGuideline}
         attachAnalyticsEvent={attachAnalyticsEvent}
+        displayGapCursor={displayGapCursor}
       >
         <InnerContainer className={className} node={node}>
           {children}

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

@@ -1,5 +1,11 @@
 import type { PropsWithChildren } from 'react';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import rafSchd from 'raf-schd';
 import { defineMessages, useIntl } from 'react-intl-next';
@@ -51,6 +57,7 @@ interface TableResizerProps {
   attachAnalyticsEvent: (
     payload: TableEventPayload,
   ) => ((tr: Transaction) => boolean) | undefined;
+  displayGapCursor: (toggle: boolean) => boolean;
 }
 
 const messages = defineMessages({
@@ -134,8 +141,11 @@ export const TableResizer = ({
   tableRef,
   displayGuideline,
   attachAnalyticsEvent,
+  displayGapCursor,
 }: PropsWithChildren<TableResizerProps>) => {
   const currentGap = useRef(0);
+  // track resizing state - use ref over state to avoid re-render
+  const isResizing = useRef(false);
   const [snappingEnabled, setSnappingEnabled] = useState(false);
   const { formatMessage } = useIntl();
 
@@ -176,22 +186,41 @@ export const TableResizer = ({
     [snappingEnabled],
   );
 
+  useEffect(() => {
+    return () => {
+      // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
+      // deleted this table
+      if (isResizing.current) {
+        displayGapCursor(true);
+        displayGuideline([]);
+      }
+    };
+  }, [displayGuideline, displayGapCursor]);
+
   const handleResizeStart = useCallback(() => {
     startMeasure();
-
+    isResizing.current = true;
     const {
       dispatch,
       state: { tr },
     } = editorView;
+    tr.setMeta(tableWidthPluginKey, { resizing: true });
+    displayGapCursor(false);
 
-    dispatch(tr.setMeta(tableWidthPluginKey, { resizing: true }));
+    dispatch(tr);
 
     const visibleGuidelines = getVisibleGuidelines(
       defaultGuidelines,
       containerWidth,
     );
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-  }, [displayGuideline, editorView, startMeasure, containerWidth]);
+  }, [
+    displayGapCursor,
+    displayGuideline,
+    editorView,
+    startMeasure,
+    containerWidth,
+  ]);
 
   const handleResize = useCallback(
     (originalState, delta) => {
@@ -242,6 +271,7 @@ export const TableResizer = ({
 
   const handleResizeStop = useCallback<HandleResize>(
     (originalState, delta) => {
+      isResizing.current = false;
       const newWidth = originalState.width + delta.width;
       const { state, dispatch } = editorView;
       const pos = getPos();
@@ -287,7 +317,7 @@ export const TableResizer = ({
           }),
         )?.(tr);
       }
-
+      displayGapCursor(true);
       dispatch(tr);
 
       // Hide guidelines when resizing stops
@@ -298,6 +328,7 @@ export const TableResizer = ({
       return newWidth;
     },
     [
+      displayGapCursor,
       updateWidth,
       editorView,
       getPos,

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

@@ -225,12 +225,11 @@ export default class TableView extends ReactNodeView<Props> {
           /**
            *  ED-19810
            *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch
-           *  before CR6 lands in production
+           *  directly to confluence since this bug is now in production.
            */
           let tablePos: number | undefined;
           try {
-            tablePos =
-              typeof props.getPos === 'function' ? props.getPos() : undefined;
+            tablePos = props.getPos ? props.getPos() : undefined;
           } catch (e) {
             tablePos = undefined;
           }
@@ -332,7 +331,6 @@ export default class TableView extends ReactNodeView<Props> {
     }
 
     this.eventDispatcher?.emit('TABLE_DELETED', this.node);
-
     super.destroy();
   }
 }

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

@@ -8,10 +8,12 @@ import type { 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 { EditorCommand } from '@atlaskit/editor-common/types';
 import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { TableLayout } from '@atlaskit/adf-schema';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 
@@ -69,6 +71,14 @@ interface PluginConfig {
     tableRenderOptimization?: boolean;
 }
 
+// @public (undocumented)
+type SelectionPlugin = NextEditorPlugin<'selection', {
+    pluginConfiguration: unknown;
+    commands: {
+        displayGapCursor: (toggle: boolean) => EditorCommand;
+    };
+}>;
+
 // @public (undocumented)
 export type TablePlugin = NextEditorPlugin<'table', {
     pluginConfiguration: TablePluginOptions | undefined;
@@ -79,7 +89,8 @@ export type TablePlugin = NextEditorPlugin<'table', {
     AnalyticsPlugin,
     ContentInsertionPlugin,
     WidthPlugin,
-    GuidelinePlugin
+    GuidelinePlugin,
+    OptionalPlugin<SelectionPlugin>
     ];
 }>;
 

package/tsconfig.app.json

@@ -54,9 +54,6 @@
     {
       "path": "../editor-plugin-width/tsconfig.app.json"
     },
-    {
-      "path": "../editor-prosemirror/tsconfig.app.json"
-    },
     {
       "path": "../editor-shared-styles/tsconfig.app.json"
     },

package/tsconfig.dev.json

@@ -45,6 +45,9 @@
     {
       "path": "../../design-system/button/tsconfig.app.json"
     },
+    {
+      "path": "../../../build/website/docs/tsconfig.app.json"
+    },
     {
       "path": "../editor-common/tsconfig.app.json"
     },
@@ -72,9 +75,6 @@
     {
       "path": "../editor-plugin-width/tsconfig.app.json"
     },
-    {
-      "path": "../editor-prosemirror/tsconfig.app.json"
-    },
     {
       "path": "../editor-shared-styles/tsconfig.app.json"
     },
@@ -99,6 +99,9 @@
     {
       "path": "../../design-system/theme/tsconfig.app.json"
     },
+    {
+      "path": "../../design-system/tokens/tsconfig.app.json"
+    },
     {
       "path": "../../../build/test-tooling/visual-regression/tsconfig.app.json"
     },