@atlaskit/editor-plugin-table 2.2.0 → 2.3.0

package/src/__tests__/unit/pm-plugins/decorations/plugin.ts

@@ -22,6 +22,7 @@ import {
   handleDocOrSelectionChanged,
 } from '../../../../plugins/table/pm-plugins/decorations/plugin';
 import { pluginKey } from '../../../../plugins/table/pm-plugins/plugin-key';
+import { pluginKey as tableWidthPluginKey } from '../../../../plugins/table/pm-plugins/table-width';
 import { TableDecorations } from '../../../../plugins/table/types';
 import tablePlugin from '../../../../plugins/table';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
@@ -29,6 +30,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 describe('decorations plugin', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -84,12 +86,14 @@ describe('decorations plugin', () => {
         editorView.state.tr,
         pluginState,
         editorView.state,
+        editorView.state,
       );
 
       const newState = handleDocOrSelectionChanged(
         editorView.state.tr,
         oldState,
         editorView.state,
+        editorView.state,
       );
 
       expect(newState).toEqual(oldState);
@@ -107,6 +111,7 @@ describe('decorations plugin', () => {
         editorView.state.tr,
         DecorationSet.empty,
         editorView.state,
+        state,
       );
 
       const { tr: transaction } = state;
@@ -116,6 +121,7 @@ describe('decorations plugin', () => {
         transaction,
         nextPluginState,
         editorView.state,
+        state,
       );
       const expectedDecorationSet = newState;
       const decorations = expectedDecorationSet.find(
@@ -138,14 +144,74 @@ describe('decorations plugin', () => {
         editorView.state.tr,
         DecorationSet.empty,
         editorView.state,
+        editorView.state,
       );
 
       const newPluginState = handleDocOrSelectionChanged(
         editorView.state.tr,
         oldPluginState,
         editorView.state,
+        editorView.state,
       );
       expect(oldPluginState).toEqual(newPluginState);
     });
   });
+
+  describe('table width resizing', () => {
+    describe('should remove column controls when resizing starts and add back when it ends', () => {
+      ffTest(
+        'platform.editor.custom-table-width',
+        () => {
+          const { editorView } = editor(
+            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+          );
+
+          const startTransaction = editorView.state.tr.setMeta(
+            tableWidthPluginKey,
+            {
+              resizing: true,
+            },
+          );
+          editorView.dispatch(startTransaction);
+          const startDecorationSet = getDecorations(editorView.state);
+          expect(startDecorationSet).toEqual(DecorationSet.empty);
+
+          const endTransaction = editorView.state.tr.setMeta(
+            tableWidthPluginKey,
+            {
+              resizing: false,
+            },
+          );
+          editorView.dispatch(endTransaction);
+          const endDecorationSet = getDecorations(editorView.state);
+          expect(endDecorationSet).not.toEqual(DecorationSet.empty);
+        },
+        () => {
+          const { editorView } = editor(
+            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+          );
+
+          const startTransaction = editorView.state.tr.setMeta(
+            tableWidthPluginKey,
+            {
+              resizing: true,
+            },
+          );
+          editorView.dispatch(startTransaction);
+          const startDecorationSet = getDecorations(editorView.state);
+          expect(startDecorationSet).not.toEqual(DecorationSet.empty);
+
+          const endTransaction = editorView.state.tr.setMeta(
+            tableWidthPluginKey,
+            {
+              resizing: false,
+            },
+          );
+          editorView.dispatch(endTransaction);
+          const endDecorationSet = getDecorations(editorView.state);
+          expect(endDecorationSet).not.toEqual(DecorationSet.empty);
+        },
+      );
+    });
+  });
 });

package/src/plugins/table/index.tsx

@@ -36,7 +36,10 @@ import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
-import { createPlugin as createTableAddWidthPlugin } from './pm-plugins/table-add-width';
+import {
+  pluginKey as tableWidthPluginKey,
+  createPlugin as createTableWidthPlugin,
+} from './pm-plugins/table-width';
 import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { keymapPlugin } from './pm-plugins/keymap';
@@ -257,10 +260,13 @@ const tablesPlugin: NextEditorPlugin<
           plugin: ({ dispatch }) => createTableLocalIdPlugin(dispatch),
         },
         {
-          name: 'tableAddWidth',
-          plugin: () =>
-            getBooleanFF('platform.editor.custom-table-width') && options
-              ? createTableAddWidthPlugin(options.fullWidthEnabled || false)
+          name: 'tableWidth',
+          plugin: ({ dispatch }) =>
+            getBooleanFF('platform.editor.custom-table-width')
+              ? createTableWidthPlugin(
+                  dispatch,
+                  options?.fullWidthEnabled ?? false,
+                )
               : undefined,
         },
 
@@ -311,6 +317,7 @@ const tablesPlugin: NextEditorPlugin<
           <WithPluginState
             plugins={{
               tablePluginState: pluginKey,
+              tableWidthPluginState: tableWidthPluginKey,
               tableResizingPluginState: tableResizingPluginKey,
               stickyHeadersState: stickyHeadersPluginKey,
             }}
@@ -318,9 +325,13 @@ const tablesPlugin: NextEditorPlugin<
               tableResizingPluginState: resizingPluginState,
               stickyHeadersState,
               tablePluginState,
+              tableWidthPluginState,
             }) => {
               const { state } = editorView;
-              const isDragging = resizingPluginState?.dragging;
+              const isColumnResizing = resizingPluginState?.dragging;
+              const isTableResizing = tableWidthPluginState?.resizing;
+              const isResizing = isColumnResizing || isTableResizing;
+
               const {
                 tableNode,
                 tablePos,
@@ -366,7 +377,7 @@ const tablesPlugin: NextEditorPlugin<
                 <>
                   {targetCellPosition &&
                     tableRef &&
-                    !isDragging &&
+                    !isResizing &&
                     options &&
                     options.allowContextualMenu && (
                       <FloatingContextualButton
@@ -403,21 +414,23 @@ const tablesPlugin: NextEditorPlugin<
                       getEditorContainerWidth={defaultGetEditorContainerWidth}
                     />
                   )}
-                  <FloatingContextualMenu
-                    editorView={editorView}
-                    mountPoint={popupsMountPoint}
-                    boundariesElement={popupsBoundariesElement}
-                    targetCellPosition={targetCellPosition}
-                    isOpen={Boolean(isContextualMenuOpen)}
-                    pluginConfig={pluginConfig}
-                    editorAnalyticsAPI={editorAnalyticsAPI}
-                    getEditorContainerWidth={defaultGetEditorContainerWidth}
-                    getEditorFeatureFlags={
-                      options?.getEditorFeatureFlags ||
-                      defaultGetEditorFeatureFlags
-                    }
-                  />
-                  {allowControls && (
+                  {options?.allowContextualMenu && (
+                    <FloatingContextualMenu
+                      editorView={editorView}
+                      mountPoint={popupsMountPoint}
+                      boundariesElement={popupsBoundariesElement}
+                      targetCellPosition={targetCellPosition}
+                      isOpen={Boolean(isContextualMenuOpen) && !isResizing}
+                      pluginConfig={pluginConfig}
+                      editorAnalyticsAPI={editorAnalyticsAPI}
+                      getEditorContainerWidth={defaultGetEditorContainerWidth}
+                      getEditorFeatureFlags={
+                        options?.getEditorFeatureFlags ||
+                        defaultGetEditorFeatureFlags
+                      }
+                    />
+                  )}
+                  {allowControls && !isResizing && (
                     <FloatingDeleteButton
                       editorView={editorView}
                       selection={editorView.state.selection}

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

@@ -34,9 +34,8 @@ import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import {
   TableCssClassName as ClassName,
-  ColumnResizingPluginState,
-  ShadowEvent,
   PluginInjectionAPI,
+  ShadowEvent,
 } from '../types';
 import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
 import TableFloatingControls from '../ui/TableFloatingControls';
@@ -73,7 +72,7 @@ export interface ComponentProps {
   isMediaFullscreen?: boolean;
   tableActive: boolean;
   ordering: TableColumnOrdering;
-  tableResizingPluginState?: ColumnResizingPluginState;
+  isResizing?: boolean;
   getEditorFeatureFlags: GetEditorFeatureFlags;
   pluginInjectionApi?: PluginInjectionAPI;
 }
@@ -319,7 +318,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     const {
       view,
       getNode,
-      tableResizingPluginState,
+      isResizing,
       allowControls = true,
       isHeaderRowEnabled,
       ordering,
@@ -343,8 +342,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     } = this.props.getEditorFeatureFlags();
 
     const tableRef = this.table || undefined;
-    const isResizing =
-      !!tableResizingPluginState && !!tableResizingPluginState.dragging;
     const headerRow = tableRef
       ? tableRef.querySelector<HTMLTableRowElement>('tr[data-header-row]')
       : undefined;

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

@@ -23,6 +23,7 @@ import {
   getColgroupChildrenLength,
   COLUMN_MIN_WIDTH,
 } from '../pm-plugins/table-resizing/utils';
+import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
 import { findClosestSnap } from '../utils/snapping';
 import { TABLE_SNAP_GAP, TABLE_HIGHLIGHT_GAP } from '../ui/consts';
@@ -105,9 +106,15 @@ export const TableResizer = ({
   );
 
   const handleResizeStart = useCallback(() => {
+    const {
+      dispatch,
+      state: { tr },
+    } = editorView;
+    dispatch(tr.setMeta(tableWidthPluginKey, { resizing: true }));
+
     setSnappingEnabled(displayGuideline(defaultGuidelines));
     return width;
-  }, [width, displayGuideline]);
+  }, [width, displayGuideline, editorView]);
 
   const handleResizeStop = useCallback<HandleResize>(
     (originalState, delta) => {
@@ -115,26 +122,26 @@ export const TableResizer = ({
       const { state, dispatch } = editorView;
       const pos = getPos();
 
-      if (typeof pos !== 'number') {
-        return;
-      }
+      let tr = state.tr.setMeta(tableWidthPluginKey, { resizing: false });
+
+      if (typeof pos === 'number') {
+        tr = tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          width: newWidth,
+        });
 
-      let tr = state.tr.setNodeMarkup(pos, undefined, {
-        ...node.attrs,
-        width: newWidth,
-      });
-
-      const newNode = tr.doc.nodeAt(pos)!;
-      tr = scaleTable(
-        tableRef,
-        {
-          node: newNode,
-          prevNode: node,
-          start: pos + 1,
-          parentWidth: newWidth,
-        },
-        editorView.domAtPos.bind(editorView),
-      )(tr);
+        const newNode = tr.doc.nodeAt(pos)!;
+        tr = scaleTable(
+          tableRef,
+          {
+            node: newNode,
+            prevNode: node,
+            start: pos + 1,
+            parentWidth: newWidth,
+          },
+          editorView.domAtPos.bind(editorView),
+        )(tr);
+      }
 
       dispatch(tr);
 

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

@@ -24,6 +24,7 @@ import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing';
+import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import TableComponent from './TableComponent';
@@ -157,6 +158,7 @@ export default class TableView extends ReactNodeView<Props> {
         plugins={{
           pluginState: pluginKey,
           tableResizingPluginState: tableResizingPluginKey,
+          tableWidthPluginState: tableWidthPluginKey,
           widthPlugin: fakePluginKey,
           mediaState: fakeMediaPluginKey,
         }}
@@ -164,12 +166,20 @@ export default class TableView extends ReactNodeView<Props> {
         render={(pluginStates) => {
           const {
             tableResizingPluginState,
+            tableWidthPluginState,
             pluginState,
             // containerWidth,
             mediaState,
           } = pluginStates;
-          const tableActive = props.getPos() === pluginState!.tablePos;
           const containerWidth = props.getEditorContainerWidth();
+
+          const isTableResizing = tableWidthPluginState?.resizing;
+          const isResizing = Boolean(
+            tableResizingPluginState?.dragging || isTableResizing,
+          );
+          const tableActive =
+            props.getPos() === pluginState!.tablePos && !isTableResizing;
+
           return (
             <TableComponent
               view={props.view}
@@ -183,7 +193,7 @@ export default class TableView extends ReactNodeView<Props> {
               isHeaderColumnEnabled={pluginState!.isHeaderColumnEnabled}
               tableActive={tableActive}
               ordering={pluginState!.ordering as TableColumnOrdering}
-              tableResizingPluginState={tableResizingPluginState}
+              isResizing={isResizing}
               getNode={this.getNode}
               containerWidth={containerWidth!}
               contentDOM={forwardRef}

package/src/plugins/table/pm-plugins/decorations/plugin.ts

@@ -10,6 +10,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { DecorationSet } from 'prosemirror-view';
 
 import { pluginKey as tablePluginKey } from '../plugin-key';
+import { pluginKey as tableWidthPluginKey } from '../table-width';
 
 import {
   buildColumnControlsDecorations,
@@ -25,8 +26,20 @@ export const handleDocOrSelectionChanged = (
   tr: Transaction | ReadonlyTransaction,
   decorationSet: DecorationSet,
   oldState: EditorState,
+  newState: EditorState,
 ): DecorationSet => {
-  if (tr.docChanged || tr.selection instanceof CellSelection) {
+  const isResizing = tableWidthPluginKey.getState(newState)?.resizing;
+  const wasResizing = tableWidthPluginKey.getState(oldState)?.resizing;
+  const changedResizing = isResizing !== wasResizing;
+
+  // Remove column controls when resizing
+  if (isResizing) {
+    return DecorationSet.empty;
+  } else if (
+    tr.docChanged ||
+    tr.selection instanceof CellSelection ||
+    changedResizing
+  ) {
     return buildColumnControlsDecorations({
       decorationSet,
       tr,
@@ -53,16 +66,25 @@ export const createPlugin = () => {
     state: {
       init: () => DecorationSet.empty,
 
-      apply: (tr, decorationSet, oldState) => {
+      apply: (tr, decorationSet, oldState, newState) => {
         let pluginState = decorationSet;
         const meta = tr.getMeta(tablePluginKey);
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;
         }
 
-        if (tr.docChanged || tr.selectionSet) {
+        if (
+          tr.docChanged ||
+          tr.selectionSet ||
+          tr.getMeta(tableWidthPluginKey)
+        ) {
           pluginState = pluginState.map(tr.mapping, tr.doc);
-          return handleDocOrSelectionChanged(tr, pluginState, oldState);
+          return handleDocOrSelectionChanged(
+            tr,
+            pluginState,
+            oldState,
+            newState,
+          );
         }
 
         return pluginState;

package/src/plugins/table/pm-plugins/{table-add-width.ts → table-width.ts}

@@ -1,6 +1,7 @@
 /**
- * A plugin for scan the document, add width value to table's width attribute when necessary
- *
+ * A plugin for handle table custom widths
+ * Has login to scan the document, add width value to table's width attribute when necessary
+ * Also holds resizing state to hide / show table controls
  */
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import {
@@ -9,6 +10,8 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { ReplaceStep } from 'prosemirror-transform';
+import { PluginKey } from 'prosemirror-state';
+import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 
 type __ReplaceStep = ReplaceStep & {
   // Properties `to` and `from` are private attributes of ReplaceStep.
@@ -16,8 +19,35 @@ type __ReplaceStep = ReplaceStep & {
   from: number;
 };
 
-const createPlugin = (fullWidthEnabled: boolean) =>
+type TableWidthPluginState = {
+  resizing: boolean;
+};
+
+export const pluginKey = new PluginKey<TableWidthPluginState>(
+  'tableWidthPlugin',
+);
+
+const createPlugin = (dispatch: Dispatch, fullWidthEnabled: boolean) =>
   new SafePlugin({
+    key: pluginKey,
+    state: {
+      init() {
+        return {
+          resizing: false,
+        };
+      },
+      apply(tr, pluginState) {
+        const meta = tr.getMeta(pluginKey);
+        if (meta && meta.resizing !== pluginState.resizing) {
+          const newState = { resizing: meta.resizing };
+
+          dispatch(pluginKey, newState);
+          return newState;
+        }
+
+        return pluginState;
+      },
+    },
     appendTransaction: (transactions, _oldState, newState) => {
       // When document first load in Confluence, initially it is an empty document
       // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.

package/src/plugins/table/toolbar.tsx

@@ -44,6 +44,7 @@ import {
 } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
+import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import {
   ToolbarMenuConfig,
   ToolbarMenuState,
@@ -440,7 +441,12 @@ export const getToolbarConfig =
     const tableObject = findTable(state.selection);
     const pluginState = getPluginState(state);
     const resizeState = tableResizingPluginKey.getState(state);
-    if (tableObject && pluginState.editorHasFocus) {
+    const tableWidthState = tableWidthPluginKey.getState(state);
+
+    // We don't want to show floating toolbar while resizing the table
+    const isWidthResizing = tableWidthState?.resizing;
+
+    if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
       const nodeType = state.schema.nodes.table;
       const menu = getToolbarMenuConfig(
         config,

package/dist/types/plugins/table/pm-plugins/table-add-width.d.ts

@@ -1,7 +0,0 @@
-/**
- * A plugin for scan the document, add width value to table's width attribute when necessary
- *
- */
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-declare const createPlugin: (fullWidthEnabled: boolean) => SafePlugin<any>;
-export { createPlugin };

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

@@ -1,7 +0,0 @@
-/**
- * A plugin for scan the document, add width value to table's width attribute when necessary
- *
- */
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-declare const createPlugin: (fullWidthEnabled: boolean) => SafePlugin<any>;
-export { createPlugin };