@atlaskit/editor-plugin-table 7.4.7 → 7.4.9

package/dist/es2019/plugin.js

@@ -9,7 +9,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { browser } from '@atlaskit/editor-common/utils';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 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';
 import { pluginConfig } from './create-plugin-config';
@@ -34,7 +33,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';
 const defaultGetEditorFeatureFlags = () => ({});
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
@@ -58,12 +57,18 @@ const tablesPlugin = ({
   const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   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 !== null && options !== void 0 && options.fullWidthEnabled),
+        wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled)
+      };
+    },
     actions: {
       insertTable: analyticsPayload => (state, dispatch) => {
         var _api$contentInsertion, _api$contentInsertion2, _api$contentInsertion3;
-        const node = createTable({
-          schema: state.schema
-        });
+        const node = createTableWithWidth(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags)(state.schema);
         return (_api$contentInsertion = api === null || api === void 0 ? void 0 : (_api$contentInsertion2 = api.contentInsertion) === null || _api$contentInsertion2 === void 0 ? void 0 : (_api$contentInsertion3 = _api$contentInsertion2.actions) === null || _api$contentInsertion3 === void 0 ? void 0 : _api$contentInsertion3.insert({
           state,
           dispatch,
@@ -76,7 +81,7 @@ const tablesPlugin = ({
       }
     },
     commands: {
-      insertTableWithSize: insertTableWithSize(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
+      insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     nodes() {
       const tableNode = options !== null && options !== void 0 && options.tableResizingEnabled ? tableWithCustomWidth : table;
@@ -198,7 +203,7 @@ const tablesPlugin = ({
           dispatch
         }) => {
           var _options$fullWidthEna;
-          return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
+          return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -386,9 +391,10 @@ const tablesPlugin = ({
         keyshortcut: tooltip(toggleTable),
         icon: () => /*#__PURE__*/React.createElement(IconTable, null),
         action(insert, state) {
-          const tr = insert(createTable({
-            schema: state.schema
-          }));
+          var _api$table;
+          // see comment on tablesPlugin.getSharedState on usage
+          const tableState = api === null || api === void 0 ? void 0 : (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
+          const tr = insert(createTableWithWidth(tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled, options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags)(state.schema));
           editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
             action: ACTION.INSERTED,
             actionSubject: ACTION_SUBJECT.DOCUMENT,

package/dist/es2019/pm-plugins/table-width.js

@@ -11,130 +11,149 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { TABLE_MAX_WIDTH } from './table-resizing/utils';
 export const pluginKey = new PluginKey('tableWidthPlugin');
-const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled) => 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
+const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, getEditorFeatureFlags) => {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init() {
+        return {
+          resizing: false
         };
-        dispatch(pluginKey, newState);
-        return newState;
+      },
+      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;
       }
-      return pluginState;
-    }
-  },
-  appendTransaction: (transactions, oldState, newState) => {
-    // do not fire select table analytics events when a table is being created or deleted
-    const selectedTableOldState = findTable(oldState.selection);
-    const selectedTableNewState = findTable(newState.selection);
+    },
+    appendTransaction: (transactions, oldState, newState) => {
+      // do not fire select table analytics events when a table is being created or deleted
+      const selectedTableOldState = findTable(oldState.selection);
+      const selectedTableNewState = findTable(newState.selection);
 
-    /**
-     * Select table event
-     *   condition: 1
-     * When users selection changes to table
-     */
-    if (!selectedTableOldState && selectedTableNewState) {
-      dispatchAnalyticsEvent({
-        action: ACTION.SELECTED,
-        actionSubject: ACTION_SUBJECT.DOCUMENT,
-        actionSubjectId: ACTION_SUBJECT_ID.TABLE,
-        eventType: EVENT_TYPE.TRACK,
-        attributes: {
-          localId: selectedTableNewState.node.attrs.localId || ''
-        }
-      });
-    }
-    // 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
-    // isReplaceDocumentOperation is checking if the transaction is the one that replace the empty document with the real document
-    const isReplaceDocumentOperation = transactions.some(tr => {
-      if (tr.getMeta('replaceDocument')) {
-        return true;
+      /**
+       * Select table event
+       *   condition: 1
+       * When users selection changes to table
+       */
+      if (!selectedTableOldState && selectedTableNewState) {
+        dispatchAnalyticsEvent({
+          action: ACTION.SELECTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            localId: selectedTableNewState.node.attrs.localId || ''
+          }
+        });
       }
-      const hasStepReplacingEntireDocument = tr.steps.some(step => {
-        if (!(step instanceof ReplaceStep)) {
-          return false;
-        }
-        const isStepReplacingFromDocStart = step.from === 0;
-        const isStepReplacingUntilTheEndOfDocument = step.to === oldState.doc.content.size;
-        if (!isStepReplacingFromDocStart || !isStepReplacingUntilTheEndOfDocument) {
-          return false;
-        }
-        return true;
-      });
-      return hasStepReplacingEntireDocument;
-    });
-    if (!isReplaceDocumentOperation) {
-      return null;
-    }
-    const tr = newState.tr;
-    const {
-      table
-    } = newState.schema.nodes;
 
-    /**
-     * Select table event
-     *   condition: 2
-     * Users selection defaults to table, if first node
-     */
-    if (selectedTableOldState) {
-      dispatchAnalyticsEvent({
-        action: ACTION.SELECTED,
-        actionSubject: ACTION_SUBJECT.DOCUMENT,
-        actionSubjectId: ACTION_SUBJECT_ID.TABLE,
-        eventType: EVENT_TYPE.TRACK,
-        attributes: {
-          localId: selectedTableOldState.node.attrs.localId || ''
+      // 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
+      // isReplaceDocumentOperation is checking if the transaction is the one that replace the empty document with the real document
+      const isReplaceDocumentOperation = transactions.some(tr => {
+        if (tr.getMeta('replaceDocument')) {
+          return true;
         }
+        const hasStepReplacingEntireDocument = tr.steps.some(step => {
+          if (!(step instanceof ReplaceStep)) {
+            return false;
+          }
+          const isStepReplacingFromDocStart = step.from === 0;
+          const isStepReplacingUntilTheEndOfDocument = step.to === oldState.doc.content.size;
+          if (!isStepReplacingFromDocStart || !isStepReplacingUntilTheEndOfDocument) {
+            return false;
+          }
+          return true;
+        });
+        return hasStepReplacingEntireDocument;
       });
-    }
-    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':
+      const referentialityTr = transactions.find(tr => tr.getMeta('referentialityTableInserted'));
+      const shouldPatchTable = fullWidthEnabled && getEditorFeatureFlags && getEditorFeatureFlags()['tablePreserveWidth'];
+      if (!isReplaceDocumentOperation && (!shouldPatchTable || !referentialityTr)) {
+        return null;
+      }
+      const {
+        table
+      } = newState.schema.nodes;
+      const tr = newState.tr;
+
+      /**
+       * Select table event
+       *   condition: 2
+       * Users selection defaults to table, if first node
+       */
+      if (selectedTableOldState) {
+        dispatchAnalyticsEvent({
+          action: ACTION.SELECTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            localId: selectedTableOldState.node.attrs.localId || ''
+          }
+        });
+      }
+      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;
-                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;
+              } 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;
+              if (tableWidthCal) {
+                tr.step(new SetAttrsStep(offset, {
+                  width: tableWidthCal,
+                  ...rest
+                }));
+              }
             }
           }
-          const {
-            width,
-            ...rest
-          } = node.attrs;
-          if (tableWidthCal) {
-            tr.step(new SetAttrsStep(offset, {
-              width: tableWidthCal,
-              ...rest
-            }));
-          }
-        }
+        });
       }
-    });
-    return tr;
-  }
-});
+      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/dist/es2019/ui/FloatingContextualMenu/index.js

@@ -5,7 +5,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
-import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize } from '../consts';
+import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
 import ContextualMenu from './ContextualMenu';
 import { tablePopupStyles } from './styles';
 const FloatingContextualMenu = ({
@@ -46,7 +46,7 @@ const FloatingContextualMenu = ({
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitHeight: 188,
+    fitHeight: tablePopupMenuFitHeight,
     fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -170,7 +170,12 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   pluginConfig,
   intl: {
     formatMessage
-  }
+  },
+  fitHeight,
+  fitWidth,
+  mountPoint,
+  scrollableElement,
+  boundariesElement
 }) => {
   var _pluginConfig$allowBa;
   const {
@@ -457,12 +462,17 @@ export const DragMenu = /*#__PURE__*/React.memo(({
     section: {
       hasSeparator: true
     },
-    target: target,
     items: menuItems,
     onItemActivated: handleMenuItemActivated,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
-    handleClose: closeMenu
+    handleClose: closeMenu,
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    direction: direction,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
   });
 });
 export default injectIntl(DragMenu);

package/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js

@@ -1,26 +1,38 @@
-import React from 'react';
-import { DropList } from '@atlaskit/editor-common/ui';
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+import React, { useState } from 'react';
+import { DropList, Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, 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';
 import { dragMenuDropdownWidth } from '../consts';
 const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 export const DropdownMenu = ({
-  target,
   items,
   section,
   disableKeyboardHandling,
   onItemActivated,
   handleClose,
   onMouseEnter,
-  onMouseLeave
+  onMouseLeave,
+  fitWidth,
+  fitHeight,
+  direction,
+  mountPoint,
+  boundariesElement,
+  scrollableElement
 }) => {
+  const [popupPlacement, setPopupPlacement] = useState(['bottom', 'left']);
+  const [targetRefDiv, setTargetRefDiv] = useState(null);
+  const handleRef = ref => {
+    setTargetRefDiv(ref);
+  };
   const innerMenu = () => {
     return /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
       isOpen: true,
       shouldFitContainer: true,
-      position: ['bottom', 'left'].join(' '),
+      position: popupPlacement.join(' '),
       handleClickOutside: () => handleClose('editor'),
       handleEscapeKeydown: () => {
         if (!disableKeyboardHandling) {
@@ -33,7 +45,7 @@ export const DropdownMenu = ({
           e.stopPropagation();
         }
       },
-      targetRef: target
+      targetRef: targetRefDiv
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         height: 0,
@@ -60,7 +72,29 @@ export const DropdownMenu = ({
   if (disableKeyboardHandling) {
     return innerMenu();
   }
-  return /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+
+  // 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 /*#__PURE__*/React.createElement("div", {
+    className: "drag-dropdown-menu-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "drag-dropdown-menu-popup-ref",
+    ref: handleRef
+  }), /*#__PURE__*/React.createElement(Popup, {
+    target: targetRefDiv,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    onPlacementChanged: placement => {
+      setPopupPlacement(placement);
+    },
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    zIndex: akEditorFloatingPanelZIndex,
+    offset: [offsetX, offsetY],
+    allowOutOfBounds: true // 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
+  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: ArrowKeyNavigationType.MENU,
     onSelection: index => {
@@ -105,5 +139,5 @@ export const DropdownMenu = ({
         });
       }
     }
-  }, innerMenu());
+  }, innerMenu())));
 };

package/dist/es2019/ui/FloatingDragMenu/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { dragMenuDropdownWidth } from '../consts';
+import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
 import DragMenu from './DragMenu';
 const FloatingDragMenu = ({
   mountPoint,
@@ -24,12 +24,10 @@ const FloatingDragMenu = ({
   }
   const inStickyMode = stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky;
   const targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
-  const offset = direction === 'row' ? [-9, 6] : [0, -7];
+  const offset = direction === 'row' ? [-9, 0] : [0, -7];
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
-
-  // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -37,7 +35,8 @@ const FloatingDragMenu = ({
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: dragMenuDropdownWidth
+    fitWidth: dragMenuDropdownWidth,
+    fitHeight: tablePopupMenuFitHeight
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.
     // In sticky mode, we want to show the menu above the sticky header
@@ -56,7 +55,12 @@ const FloatingDragMenu = ({
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    pluginConfig: pluginConfig
+    pluginConfig: pluginConfig,
+    fitWidth: dragMenuDropdownWidth,
+    fitHeight: tablePopupMenuFitHeight,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/es2019/ui/consts.js

@@ -56,6 +56,7 @@ export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;
 export const tableOverflowShadowWidth = 8;
 export const tableOverflowShadowWidthWide = 32;
+export const tablePopupMenuFitHeight = 188;
 export const dropTargetsZIndex = 14;
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;

package/dist/es2019/utils/create.js

@@ -0,0 +1,18 @@
+import { createTable } from '@atlaskit/editor-tables/utils';
+import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
+export const createTableWithWidth = (isFullWidthModeEnabled, getEditorFeatureFlags, createTableProps) => schema => {
+  const {
+    tablePreserveWidth = false
+  } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
+  if (tablePreserveWidth && isFullWidthModeEnabled) {
+    return createTable({
+      schema,
+      tableWidth: TABLE_MAX_WIDTH,
+      ...createTableProps
+    });
+  }
+  return createTable({
+    schema,
+    ...createTableProps
+  });
+};

package/dist/es2019/utils/index.js

@@ -8,4 +8,5 @@ export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getR
 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 { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsInBetween, hasMergedCellsInSelection, findDuplicatePosition, checkEdgeHasMergedCells } from './merged-cells';
+export { createTableWithWidth } from './create';

package/dist/esm/commands/insert.js

@@ -4,12 +4,12 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, TABLE_OVERFLOW_C
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { addColumnAt as addColumnAtPMUtils, addRowAt, createTable as createTableNode, findTable, selectedRect } from '@atlaskit/editor-tables/utils';
+import { addColumnAt as addColumnAtPMUtils, addRowAt, findTable, selectedRect } from '@atlaskit/editor-tables/utils';
 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) {
   return function (tr) {
@@ -80,8 +80,6 @@ export var addColumnAfter = function addColumnAfter(getEditorContainerWidth) {
     return true;
   };
 };
-
-// #region Commands
 export var insertColumn = function insertColumn(getEditorContainerWidth) {
   return function (column) {
     return function (state, dispatch, view) {
@@ -134,28 +132,23 @@ export var insertRow = function insertRow(row, moveCursorToTheNewRow) {
     return true;
   };
 };
-export var createTable = function createTable() {
+export var createTable = function createTable(isFullWidthModeEnabled, getEditorFeatureFlags) {
   return function (state, dispatch) {
-    var table = createTableNode({
-      schema: state.schema
-    });
+    var table = createTableWithWidth(isFullWidthModeEnabled, getEditorFeatureFlags)(state.schema);
     if (dispatch) {
       dispatch(safeInsert(table)(state.tr).scrollIntoView());
     }
     return true;
   };
 };
-// #endregion
-
-export var insertTableWithSize = function insertTableWithSize(editorAnalyticsAPI) {
+export var insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, getEditorFeatureFlags, editorAnalyticsAPI) {
   return function (rowsCount, colsCount, inputMethod) {
     return function (_ref) {
       var tr = _ref.tr;
-      var tableNode = createTableNode({
-        schema: tr.doc.type.schema,
+      var tableNode = createTableWithWidth(isFullWidthModeEnabled, getEditorFeatureFlags, {
         rowsCount: rowsCount,
         colsCount: colsCount
-      });
+      })(tr.doc.type.schema);
       var newTr = safeInsert(tableNode)(tr).scrollIntoView();
       if (inputMethod) {
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({