@atlaskit/editor-plugin-table 2.12.6 → 2.13.0

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

@@ -331,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"
     },