@atlaskit/editor-plugin-table 7.4.7 → 7.4.9

package/dist/types-ts4.5/utils/create.d.ts

@@ -0,0 +1,6 @@
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
+export declare const createTableWithWidth: (isFullWidthModeEnabled?: boolean, getEditorFeatureFlags?: GetEditorFeatureFlags, createTableProps?: {
+    rowsCount?: number;
+    colsCount?: number;
+}) => (schema: Schema) => import("prosemirror-model").Node;

package/dist/types-ts4.5/utils/index.d.ts

@@ -10,3 +10,4 @@ export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
 export { getMergedCellsPositions } from './table';
 export { updatePluginStateDecorations } from './update-plugin-state-decorations';
 export { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsInBetween, hasMergedCellsInSelection, findDuplicatePosition, checkEdgeHasMergedCells, } from './merged-cells';
+export { createTableWithWidth } from './create';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.4.7",
+  "version": "7.4.9",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.5.2",
     "@atlaskit/custom-steps": "^0.0.14",
-    "@atlaskit/editor-common": "^78.10.0",
+    "@atlaskit/editor-common": "^78.11.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-content-insertion": "^1.0.0",

package/src/commands/insert.ts

@@ -15,6 +15,7 @@ import type {
   Command,
   EditorCommand,
   GetEditorContainerWidth,
+  GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
@@ -24,7 +25,6 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
   addColumnAt as addColumnAtPMUtils,
   addRowAt,
-  createTable as createTableNode,
   findTable,
   selectedRect,
 } from '@atlaskit/editor-tables/utils';
@@ -33,7 +33,11 @@ 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 {
+  checkIfHeaderRowEnabled,
+  copyPreviousRow,
+  createTableWithWidth,
+} from '../utils';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 
 function addColumnAtCustomStep(column: number) {
@@ -128,7 +132,6 @@ export const addColumnAfter =
     return true;
   };
 
-// #region Commands
 export const insertColumn =
   (getEditorContainerWidth: GetEditorContainerWidth) =>
   (column: number): Command =>
@@ -199,31 +202,44 @@ export const insertRow =
     return true;
   };
 
-export const createTable = (): Command => (state, dispatch) => {
-  const table = createTableNode({
-    schema: state.schema,
-  });
+export const createTable =
+  (
+    isFullWidthModeEnabled?: boolean,
+    getEditorFeatureFlags?: GetEditorFeatureFlags,
+  ): Command =>
+  (state, dispatch) => {
+    const table = createTableWithWidth(
+      isFullWidthModeEnabled,
+      getEditorFeatureFlags,
+    )(state.schema);
 
-  if (dispatch) {
-    dispatch(safeInsert(table)(state.tr).scrollIntoView());
-  }
-  return true;
-};
-// #endregion
+    if (dispatch) {
+      dispatch(safeInsert(table)(state.tr).scrollIntoView());
+    }
+    return true;
+  };
 
 export const insertTableWithSize =
-  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) =>
+  (
+    isFullWidthModeEnabled?: boolean,
+    getEditorFeatureFlags?: GetEditorFeatureFlags,
+    editorAnalyticsAPI?: EditorAnalyticsAPI,
+  ) =>
   (
     rowsCount: number,
     colsCount: number,
     inputMethod?: INPUT_METHOD.PICKER,
   ): EditorCommand => {
     return ({ tr }) => {
-      const tableNode = createTableNode({
-        schema: tr.doc.type.schema,
-        rowsCount: rowsCount,
-        colsCount: colsCount,
-      });
+      const tableNode = createTableWithWidth(
+        isFullWidthModeEnabled,
+        getEditorFeatureFlags,
+        {
+          rowsCount: rowsCount,
+          colsCount: colsCount,
+        },
+      )(tr.doc.type.schema);
+
       const newTr = safeInsert(tableNode)(tr).scrollIntoView();
       if (inputMethod) {
         editorAnalyticsAPI?.attachAnalyticsEvent({

package/src/plugin.tsx

@@ -39,7 +39,6 @@ import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
-import { createTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { insertTableWithSize } from './commands/insert';
@@ -79,7 +78,7 @@ import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
-import { isLayoutSupported } from './utils';
+import { createTableWithWidth, isLayoutSupported } from './utils';
 
 export interface TablePluginOptions {
   tableOptions: PluginConfig;
@@ -106,6 +105,10 @@ export type TablePlugin = NextEditorPlugin<
     actions: {
       insertTable: InsertTableAction;
     };
+    sharedState: {
+      isFullWidthModeEnabled: boolean;
+      wasFullWidthModeEnabled: boolean;
+    };
     commands: {
       insertTableWithSize: (
         rowsCount: number,
@@ -140,13 +143,23 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
   return {
     name: 'table',
 
+    // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
+    // to most up to date values - passing to createPluginState will not re-initialise the state
+    getSharedState: () => {
+      return {
+        isFullWidthModeEnabled: !!options?.fullWidthEnabled,
+        wasFullWidthModeEnabled: !!options?.wasFullWidthEnabled,
+      };
+    },
+
     actions: {
       insertTable:
         (analyticsPayload): Command =>
         (state, dispatch) => {
-          const node = createTable({
-            schema: state.schema,
-          });
+          const node = createTableWithWidth(
+            options?.fullWidthEnabled,
+            options?.getEditorFeatureFlags,
+          )(state.schema);
 
           return (
             api?.contentInsertion?.actions?.insert({
@@ -162,8 +175,13 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
           );
         },
     },
+
     commands: {
-      insertTableWithSize: insertTableWithSize(api?.analytics?.actions),
+      insertTableWithSize: insertTableWithSize(
+        options?.fullWidthEnabled,
+        options?.getEditorFeatureFlags,
+        api?.analytics?.actions,
+      ),
     },
 
     nodes() {
@@ -321,6 +339,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                   dispatch,
                   dispatchAnalyticsEvent,
                   options?.fullWidthEnabled ?? false,
+                  options?.getEditorFeatureFlags,
                 )
               : undefined,
         },
@@ -558,10 +577,14 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
           keyshortcut: tooltip(toggleTable),
           icon: () => <IconTable />,
           action(insert, state) {
+            // see comment on tablesPlugin.getSharedState on usage
+            const tableState = api?.table?.sharedState.currentState();
+
             const tr = insert(
-              createTable({
-                schema: state.schema,
-              }),
+              createTableWithWidth(
+                tableState?.isFullWidthModeEnabled,
+                options?.getEditorFeatureFlags,
+              )(state.schema),
             );
             editorAnalyticsAPI?.attachAnalyticsEvent({
               action: ACTION.INSERTED,

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

@@ -14,6 +14,7 @@ import {
 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';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import {
@@ -23,6 +24,8 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
+import { TABLE_MAX_WIDTH } from './table-resizing/utils';
+
 type __ReplaceStep = ReplaceStep & {
   // Properties `to` and `from` are private attributes of ReplaceStep.
   to: number;
@@ -41,8 +44,9 @@ const createPlugin = (
   dispatch: Dispatch,
   dispatchAnalyticsEvent: DispatchAnalyticsEvent,
   fullWidthEnabled: boolean,
-) =>
-  new SafePlugin({
+  getEditorFeatureFlags?: GetEditorFeatureFlags,
+) => {
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init() {
@@ -83,6 +87,7 @@ const createPlugin = (
           },
         });
       }
+
       // 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.
       // what we need to do is to add width attr to all tables in the real document
@@ -114,12 +119,24 @@ const createPlugin = (
         return hasStepReplacingEntireDocument;
       });
 
-      if (!isReplaceDocumentOperation) {
+      const referentialityTr = transactions.find((tr) =>
+        tr.getMeta('referentialityTableInserted'),
+      );
+
+      const shouldPatchTable =
+        fullWidthEnabled &&
+        getEditorFeatureFlags &&
+        getEditorFeatureFlags()['tablePreserveWidth'];
+
+      if (
+        !isReplaceDocumentOperation &&
+        (!shouldPatchTable || !referentialityTr)
+      ) {
         return null;
       }
 
-      const tr = newState.tr;
       const { table } = newState.schema.nodes;
+      const tr = newState.tr;
 
       /**
        * Select table event
@@ -138,47 +155,63 @@ const createPlugin = (
         });
       }
 
-      newState.doc.forEach((node, offset) => {
-        if (node.type === table) {
-          const width = node.attrs.width;
-          const layout = node.attrs.layout;
-
-          if (!width && layout) {
-            let tableWidthCal;
-
-            if (fullWidthEnabled) {
-              tableWidthCal = akEditorFullWidthLayoutWidth;
-            } else {
-              switch (layout) {
-                case 'wide':
-                  tableWidthCal = akEditorWideLayoutWidth;
-                  break;
-                case 'full-width':
-                  tableWidthCal = akEditorFullWidthLayoutWidth;
-                  break;
-                // when in fix-width appearance, no need to assign value to table width attr
-                // as when table is created, width attr is null by default, table rendered using layout attr
-                default:
-                  tableWidthCal = akEditorDefaultLayoutWidth;
-                  break;
+      if (isReplaceDocumentOperation) {
+        newState.doc.forEach((node, offset) => {
+          if (node.type === table) {
+            const width = node.attrs.width;
+            const layout = node.attrs.layout;
+
+            if (!width && layout) {
+              let tableWidthCal;
+
+              if (fullWidthEnabled) {
+                tableWidthCal = akEditorFullWidthLayoutWidth;
+              } else {
+                switch (layout) {
+                  case 'wide':
+                    tableWidthCal = akEditorWideLayoutWidth;
+                    break;
+                  case 'full-width':
+                    tableWidthCal = akEditorFullWidthLayoutWidth;
+                    break;
+                  // when in fix-width appearance, no need to assign value to table width attr
+                  // as when table is created, width attr is null by default, table rendered using layout attr
+                  default:
+                    tableWidthCal = akEditorDefaultLayoutWidth;
+                    break;
+                }
               }
-            }
 
-            const { width, ...rest } = node.attrs;
+              const { width, ...rest } = node.attrs;
 
-            if (tableWidthCal) {
-              tr.step(
-                new SetAttrsStep(offset, {
-                  width: tableWidthCal,
-                  ...rest,
-                }),
-              );
+              if (tableWidthCal) {
+                tr.step(
+                  new SetAttrsStep(offset, {
+                    width: tableWidthCal,
+                    ...rest,
+                  }),
+                );
+              }
             }
           }
-        }
-      });
+        });
+      }
+
+      if (referentialityTr) {
+        referentialityTr.steps.forEach((step) => {
+          step.getMap().forEach((oldStart, oldEnd, newStart, newEnd) => {
+            newState.doc.nodesBetween(newStart, newEnd, (node, pos) => {
+              if (node.type === table && node.attrs.width !== TABLE_MAX_WIDTH) {
+                tr.setNodeAttribute(pos, 'width', TABLE_MAX_WIDTH);
+              }
+            });
+          });
+        });
+      }
+
       return tr;
     },
   });
+};
 
 export { createPlugin };

package/src/ui/FloatingContextualMenu/index.tsx

@@ -25,6 +25,7 @@ import {
   contextualMenuDropdownWidth,
   contextualMenuDropdownWidthDnD,
   contextualMenuTriggerSize,
+  tablePopupMenuFitHeight,
 } from '../consts';
 
 import ContextualMenu from './ContextualMenu';
@@ -91,7 +92,7 @@ const FloatingContextualMenu = ({
       mountTo={mountPoint}
       boundariesElement={boundariesElement}
       scrollableElement={scrollableElement}
-      fitHeight={188}
+      fitHeight={tablePopupMenuFitHeight}
       fitWidth={
         isDragAndDropEnabled
           ? contextualMenuDropdownWidthDnD

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -96,6 +96,11 @@ type DragMenuProps = {
   pluginConfig?: PluginConfig;
   getEditorContainerWidth: GetEditorContainerWidth;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
+  fitWidth?: number;
+  fitHeight?: number;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
 };
 
 type PluralOptionType = 'noOfCols' | 'noOfRows' | 'noOfCells' | null;
@@ -269,6 +274,11 @@ export const DragMenu = React.memo(
     editorAnalyticsAPI,
     pluginConfig,
     intl: { formatMessage },
+    fitHeight,
+    fitWidth,
+    mountPoint,
+    scrollableElement,
+    boundariesElement,
   }: DragMenuProps & WrappedComponentProps) => {
     const { state, dispatch } = editorView;
     const { selection } = state;
@@ -627,12 +637,17 @@ export const DragMenu = React.memo(
       <DropdownMenu
         disableKeyboardHandling={isSubmenuOpen}
         section={{ hasSeparator: true }}
-        target={target as HTMLElement | undefined}
         items={menuItems}
         onItemActivated={handleMenuItemActivated}
         onMouseEnter={handleItemMouseEnter}
         onMouseLeave={handleItemMouseLeave}
         handleClose={closeMenu}
+        fitHeight={fitHeight}
+        fitWidth={fitWidth}
+        direction={direction}
+        mountPoint={mountPoint}
+        boundariesElement={boundariesElement}
+        scrollableElement={scrollableElement}
       />
     );
   },

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+import React, { useState } from 'react';
 
-import { DropList } from '@atlaskit/editor-common/ui';
+import { DropList, Popup } from '@atlaskit/editor-common/ui';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import {
   ArrowKeyNavigationProvider,
@@ -8,6 +9,7 @@ import {
   DropdownMenuItem,
 } from '@atlaskit/editor-common/ui-menu';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
@@ -17,7 +19,6 @@ const DropListWithOutsideListeners =
   withReactEditorViewOuterListeners(DropList);
 
 type DropdownMenuProps = {
-  target?: HTMLElement;
   items: Array<{
     items: MenuItem[];
   }>;
@@ -34,10 +35,16 @@ type DropdownMenuProps = {
   handleClose: (focusTarget: 'editor' | 'handle') => void;
   onMouseEnter: (attrs: { item: MenuItem }) => void;
   onMouseLeave: (attrs: { item: MenuItem }) => void;
+  fitWidth?: number;
+  fitHeight?: number;
+  direction?: string;
+  offset?: Array<number>;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
 };
 
 export const DropdownMenu = ({
-  target,
   items,
   section,
   disableKeyboardHandling,
@@ -45,13 +52,24 @@ export const DropdownMenu = ({
   handleClose,
   onMouseEnter,
   onMouseLeave,
+  fitWidth,
+  fitHeight,
+  direction,
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
 }: DropdownMenuProps) => {
+  const [popupPlacement, setPopupPlacement] = useState(['bottom', 'left']);
+  const [targetRefDiv, setTargetRefDiv] = useState<HTMLDivElement | null>(null);
+  const handleRef = (ref: HTMLDivElement | null) => {
+    setTargetRefDiv(ref);
+  };
   const innerMenu = () => {
     return (
       <DropListWithOutsideListeners
         isOpen
         shouldFitContainer
-        position={['bottom', 'left'].join(' ')}
+        position={popupPlacement.join(' ')}
         handleClickOutside={() => handleClose('editor')}
         handleEscapeKeydown={() => {
           if (!disableKeyboardHandling) {
@@ -64,7 +82,7 @@ export const DropdownMenu = ({
             e.stopPropagation();
           }
         }}
-        targetRef={target}
+        targetRef={targetRefDiv}
       >
         <div style={{ height: 0, minWidth: dragMenuDropdownWidth }} />
         <MenuGroup role="menu">
@@ -95,56 +113,82 @@ export const DropdownMenu = ({
     return innerMenu();
   }
 
+  // more offsets calculation as offsets depend on the direction and updated placement here
+  let offsetY =
+    direction === 'row' ? (popupPlacement[0] === 'bottom' ? -8 : -34) : 0;
+  let offsetX =
+    direction === 'column' ? (popupPlacement[1] === 'left' ? 0 : -7) : 0;
+
   return (
-    <ArrowKeyNavigationProvider
-      closeOnTab
-      type={ArrowKeyNavigationType.MENU}
-      onSelection={(index) => {
-        const results = items.flatMap((item) =>
-          'items' in item ? item.items : item,
-        );
+    <div className="drag-dropdown-menu-wrapper">
+      <div className="drag-dropdown-menu-popup-ref" ref={handleRef}></div>
+      <Popup
+        target={targetRefDiv as HTMLElement}
+        mountTo={mountPoint}
+        boundariesElement={boundariesElement}
+        scrollableElement={scrollableElement}
+        onPlacementChanged={(placement: [string, string]) => {
+          setPopupPlacement(placement);
+        }}
+        fitHeight={fitHeight}
+        fitWidth={fitWidth}
+        zIndex={akEditorFloatingPanelZIndex}
+        offset={[offsetX, offsetY]}
+        allowOutOfBounds // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
+      >
+        <ArrowKeyNavigationProvider
+          closeOnTab
+          type={ArrowKeyNavigationType.MENU}
+          onSelection={(index) => {
+            const results = items.flatMap((item) =>
+              'items' in item ? item.items : item,
+            );
 
-        // onSelection is called when any focusable element is 'activated'
-        // this is an issue as some menu items have toggles, which cause the index value
-        // in the callback to be outside of array length.
-        // The logic below normalises the index value based on the number
-        // of menu items with 2 focusable elements, and adjusts the index to ensure
-        // the correct menu item is sent in onItemActivated callback
-        if (
-          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-        ) {
-          const keys = ['row_numbers', 'header_row', 'header_column'];
-          let doubleItemCount = 0;
+            // onSelection is called when any focusable element is 'activated'
+            // this is an issue as some menu items have toggles, which cause the index value
+            // in the callback to be outside of array length.
+            // The logic below normalises the index value based on the number
+            // of menu items with 2 focusable elements, and adjusts the index to ensure
+            // the correct menu item is sent in onItemActivated callback
+            if (
+              getBooleanFF(
+                'platform.editor.table.new-cell-context-menu-styling',
+              )
+            ) {
+              const keys = ['row_numbers', 'header_row', 'header_column'];
+              let doubleItemCount = 0;
 
-          const firstIndex = results.findIndex((value) =>
-            keys.includes(value.key!),
-          );
+              const firstIndex = results.findIndex((value) =>
+                keys.includes(value.key!),
+              );
 
-          if (firstIndex === -1 || index <= firstIndex) {
-            onItemActivated && onItemActivated({ item: results[index] });
-            return;
-          }
+              if (firstIndex === -1 || index <= firstIndex) {
+                onItemActivated && onItemActivated({ item: results[index] });
+                return;
+              }
 
-          for (let i = firstIndex; i < results.length; i += 1) {
-            if (keys.includes(results[i].key!)) {
-              doubleItemCount += 1;
-            }
-            if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
-              onItemActivated && onItemActivated({ item: results[i] });
-              return;
-            }
+              for (let i = firstIndex; i < results.length; i += 1) {
+                if (keys.includes(results[i].key!)) {
+                  doubleItemCount += 1;
+                }
+                if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
+                  onItemActivated && onItemActivated({ item: results[i] });
+                  return;
+                }
 
-            if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
-              onItemActivated && onItemActivated({ item: results[i] });
-              return;
+                if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+                  onItemActivated && onItemActivated({ item: results[i] });
+                  return;
+                }
+              }
+            } else {
+              onItemActivated && onItemActivated({ item: results[index] });
             }
-          }
-        } else {
-          onItemActivated && onItemActivated({ item: results[index] });
-        }
-      }}
-    >
-      {innerMenu()}
-    </ArrowKeyNavigationProvider>
+          }}
+        >
+          {innerMenu()}
+        </ArrowKeyNavigationProvider>
+      </Popup>
+    </div>
   );
 };