@atlaskit/editor-plugin-table 7.4.6 → 7.4.8

package/dist/types-ts4.5/commands/insert.d.ts

@@ -1,5 +1,5 @@
 import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import type { Command, EditorCommand, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Command, EditorCommand, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth): (column: number, allowAddColumnCustomStep: boolean | undefined, view: EditorView | undefined) => (tr: Transaction) => Transaction;
@@ -7,5 +7,5 @@ export declare const addColumnBefore: (getEditorContainerWidth: GetEditorContain
 export declare const addColumnAfter: (getEditorContainerWidth: GetEditorContainerWidth) => Command;
 export declare const insertColumn: (getEditorContainerWidth: GetEditorContainerWidth) => (column: number) => Command;
 export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean) => Command;
-export declare const createTable: () => Command;
-export declare const insertTableWithSize: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
+export declare const createTable: (isFullWidthModeEnabled?: boolean, getEditorFeatureFlags?: GetEditorFeatureFlags) => Command;
+export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, getEditorFeatureFlags?: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;

package/dist/types-ts4.5/plugin.d.ts

@@ -23,6 +23,10 @@ export type TablePlugin = NextEditorPlugin<'table', {
     actions: {
         insertTable: InsertTableAction;
     };
+    sharedState: {
+        isFullWidthModeEnabled: boolean;
+        wasFullWidthModeEnabled: boolean;
+    };
     commands: {
         insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
     };

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

@@ -6,12 +6,13 @@
 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';
 type TableWidthPluginState = {
     resizing: boolean;
 };
 export declare const pluginKey: PluginKey<TableWidthPluginState>;
-declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean) => SafePlugin<{
+declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, getEditorFeatureFlags?: GetEditorFeatureFlags) => SafePlugin<{
     resizing: boolean;
 }>;
 export { createPlugin };

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.6",
+  "version": "7.4.8",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,9 +28,9 @@
     "runReact18": false
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^35.5.1",
-    "@atlaskit/custom-steps": "^0.0.13",
-    "@atlaskit/editor-common": "^78.9.0",
+    "@atlaskit/adf-schema": "^35.5.2",
+    "@atlaskit/custom-steps": "^0.0.14",
+    "@atlaskit/editor-common": "^78.10.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/utils/create.ts

@@ -0,0 +1,32 @@
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
+import { createTable } from '@atlaskit/editor-tables/utils';
+
+import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
+
+export const createTableWithWidth =
+  (
+    isFullWidthModeEnabled?: boolean,
+    getEditorFeatureFlags?: GetEditorFeatureFlags,
+    createTableProps?: {
+      rowsCount?: number;
+      colsCount?: number;
+    },
+  ) =>
+  (schema: Schema) => {
+    const { tablePreserveWidth = false } = getEditorFeatureFlags
+      ? getEditorFeatureFlags()
+      : {};
+
+    if (tablePreserveWidth && isFullWidthModeEnabled) {
+      return createTable({
+        schema,
+        tableWidth: TABLE_MAX_WIDTH,
+        ...createTableProps,
+      });
+    }
+    return createTable({
+      schema,
+      ...createTableProps,
+    });
+  };

package/src/utils/index.ts

@@ -86,3 +86,4 @@ export {
   findDuplicatePosition,
   checkEdgeHasMergedCells,
 } from './merged-cells';
+export { createTableWithWidth } from './create';