@atlaskit/editor-plugin-table 21.0.0 → 22.1.0

package/dist/cjs/ui/toolbar.js

@@ -419,17 +419,11 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
       var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
         var _api$editorViewMode;
-        var isDragHandleMenuOpened = false;
-        var isTableRowOrColumnDragged = false;
-        if (options !== null && options !== void 0 && options.dragAndDropEnabled) {
-          var _getDragDropPluginSta = (0, _pluginFactory.getPluginState)(state),
-            _getDragDropPluginSta2 = _getDragDropPluginSta.isDragMenuOpen,
-            isDragMenuOpen = _getDragDropPluginSta2 === void 0 ? false : _getDragDropPluginSta2,
-            _getDragDropPluginSta3 = _getDragDropPluginSta.isDragging,
-            isDragging = _getDragDropPluginSta3 === void 0 ? false : _getDragDropPluginSta3;
-          isDragHandleMenuOpened = isDragMenuOpen;
-          isTableRowOrColumnDragged = isDragging;
-        }
+        var _getDragDropPluginSta = (0, _pluginFactory.getPluginState)(state),
+          _getDragDropPluginSta2 = _getDragDropPluginSta.isDragMenuOpen,
+          isDragHandleMenuOpened = _getDragDropPluginSta2 === void 0 ? false : _getDragDropPluginSta2,
+          _getDragDropPluginSta3 = _getDragDropPluginSta.isDragging,
+          isTableRowOrColumnDragged = _getDragDropPluginSta3 === void 0 ? false : _getDragDropPluginSta3;
         var isTableOrColumnResizing = !!(resizeState !== null && resizeState !== void 0 && resizeState.dragging || tableWidthState !== null && tableWidthState !== void 0 && tableWidthState.resizing);
         var isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
         var isTableState = isTableRowOrColumnDragged || isTableOrColumnResizing || isTableMenuOpened;

package/dist/es2019/nodeviews/TableComponent.js

@@ -8,6 +8,7 @@ import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
 import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
@@ -26,6 +27,7 @@ import { getResizeState, updateColgroup } from '../pm-plugins/table-resizing/uti
 import { scaleTable } from '../pm-plugins/table-resizing/utils/scale-table';
 import { containsHeaderRow, isTableNested, isTableNestedInMoreThanOneNode, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../pm-plugins/utils/nodes';
 import { getAssistiveMessage } from '../pm-plugins/utils/table';
+import { isContentModeSupported } from '../pm-plugins/utils/tableMode';
 import { TableCssClassName as ClassName } from '../types';
 import { handleMouseOut, handleMouseOver, isTableInFocus, withCellTracking } from '../ui/event-handlers';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
@@ -700,10 +702,24 @@ class TableComponent extends React.Component {
         } = this.props;
         const shouldRecreateResizeCols = !allowTableResizing || !isResizing || isNoOfColumnsChanged && isResizing;
         if (shouldRecreateResizeCols) {
+          var _this$table7, _this$props$options12, _this$props$options13;
           const start = getPos() || 0;
           const depth = view.state.doc.resolve(start).depth;
           shouldScale = depth === 0 && shouldScale;
           insertColgroupFromNode(this.table, currentTable, shouldScale, undefined, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
+
+          // Deferred from setDomAttrs — remove only once colgroup is updated and table has left content mode.
+          if ((_this$table7 = this.table) !== null && _this$table7 !== void 0 && _this$table7.hasAttribute('data-initial-width-mode') && !isTableInContentMode({
+            tableNode: currentTable,
+            isSupported: isContentModeSupported({
+              allowColumnResizing: !!allowColumnResizing,
+              allowTableResizing: !!allowTableResizing,
+              isFullPageEditor: !((_this$props$options12 = this.props.options) !== null && _this$props$options12 !== void 0 && _this$props$options12.isCommentEditor) && !((_this$props$options13 = this.props.options) !== null && _this$props$options13 !== void 0 && _this$props$options13.isChromelessEditor)
+            }),
+            isTableNested: isTableNested(view.state, getPos())
+          })) {
+            this.table.removeAttribute('data-initial-width-mode');
+          }
         }
         updateControls()(view.state);
       }
@@ -724,7 +740,7 @@ class TableComponent extends React.Component {
     }
   }
   render() {
-    var _this$props$options12;
+    var _this$props$options14;
     const {
       view,
       getNode,
@@ -829,7 +845,7 @@ class TableComponent extends React.Component {
     const {
       tableWithFixedColumnWidthsOption = false
     } = getEditorFeatureFlags();
-    const shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options12 = this.props.options) !== null && _this$props$options12 !== void 0 && _this$props$options12.isCommentEditor));
+    const shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options14 = this.props.options) !== null && _this$props$options14 !== void 0 && _this$props$options14.isCommentEditor));
     return /*#__PURE__*/React.createElement(TableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {

package/dist/es2019/nodeviews/table.js

@@ -2,18 +2,18 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-config';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { isTableNested, tablesHaveDifferentColumnWidths } from '../pm-plugins/utils/nodes';
-import { isTableInContentMode } from '../pm-plugins/utils/tableMode';
+import { isContentModeSupported } from '../pm-plugins/utils/tableMode';
 import { TableComponentWithSharedState } from './TableComponentWithSharedState';
 import { tableNodeSpecWithFixedToDOM } from './toDOM';
 const tableAttributes = node => {
@@ -178,24 +178,24 @@ export default class TableView extends ReactNodeView {
     }
   }
   setDomAttrs(node) {
-    var _this$reactComponentP8, _this$getEditorFeatur2, _this$options3, _this$options4;
+    var _this$reactComponentP6, _this$reactComponentP7, _this$reactComponentP8, _this$getEditorFeatur2, _this$options3, _this$options4;
     if (!this.table) {
       return; // width / attribute application to actual table will happen later when table is set
     }
     const attrs = tableAttributes(node);
-    if (expValEqualsNoExposure('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
-      var _this$reactComponentP6, _this$reactComponentP7;
-      if (isTableInContentMode({
-        node,
+
+    // render table with content-mode attribute which removes all width constraints from the table
+    // fire exposure here
+    if (isTableInContentMode({
+      tableNode: node,
+      isSupported: isContentModeSupported({
         allowColumnResizing: !!this.reactComponentProps.allowColumnResizing,
         allowTableResizing: !!this.reactComponentProps.allowTableResizing,
-        isFullPageEditor: !((_this$reactComponentP6 = this.reactComponentProps.options) !== null && _this$reactComponentP6 !== void 0 && _this$reactComponentP6.isCommentEditor) && !((_this$reactComponentP7 = this.reactComponentProps.options) !== null && _this$reactComponentP7 !== void 0 && _this$reactComponentP7.isChromelessEditor),
-        isTableNested: isTableNested(this.view.state, this.getPos())
-      }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
-        attrs['data-initial-width-mode'] = 'content';
-      } else {
-        this.table.removeAttribute('data-initial-width-mode');
-      }
+        isFullPageEditor: !((_this$reactComponentP6 = this.reactComponentProps.options) !== null && _this$reactComponentP6 !== void 0 && _this$reactComponentP6.isCommentEditor) && !((_this$reactComponentP7 = this.reactComponentProps.options) !== null && _this$reactComponentP7 !== void 0 && _this$reactComponentP7.isChromelessEditor)
+      }),
+      isTableNested: isTableNested(this.view.state, this.getPos())
+    }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
+      attrs['data-initial-width-mode'] = 'content';
     }
     Object.keys(attrs).forEach(attr => {
       // Ignored via go/ees005

package/dist/es2019/nodeviews/toDOM.js

@@ -2,11 +2,12 @@ import classNames from 'classnames';
 import kebabCase from 'lodash/kebabCase';
 import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { generateColgroupFromNode, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
 import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS, getTableResizerItemWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
-import { isTableInContentMode } from '../pm-plugins/utils/tableMode';
+import { isContentModeSupported } from '../pm-plugins/utils/tableMode';
 import { getAlignmentStyle } from './table-container-styles';
 export const tableNodeSpecWithFixedToDOM = config => {
   const tableNode = config.isNestingSupported ? tableWithNestedTable : table;
@@ -15,10 +16,12 @@ export const tableNodeSpecWithFixedToDOM = config => {
     toDOM: node => {
       const isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
       const isInContentMode = isTableInContentMode({
-        node,
-        allowColumnResizing: config.allowColumnResizing,
-        allowTableResizing: config.tableResizingEnabled,
-        isFullPageEditor,
+        tableNode: node,
+        isSupported: isContentModeSupported({
+          allowColumnResizing: config.allowColumnResizing,
+          allowTableResizing: config.tableResizingEnabled,
+          isFullPageEditor
+        }),
         isTableNested: config.isNested
       }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
       const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`).join(';');

package/dist/es2019/pm-plugins/keymap.js

@@ -10,7 +10,7 @@ import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardCol
 import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from './commands/commands-with-analytics';
 import { goToNextCellVertical } from './commands/go-to-next-cell';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, insertTableWithNestingSupport } from './commands/insert';
-export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
+export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
   var _pluginInjectionApi$a;
   const list = {};
   const ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
@@ -82,7 +82,7 @@ export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProvide
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   addColumnAfterVO.common, addColumnAfterCommand(api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-  if (dragAndDropEnabled && moveRowDown.common && moveRowUp.common && moveColumnLeft.common && moveColumnRight.common) {
+  if (moveRowDown.common && moveRowUp.common && moveColumnLeft.common && moveColumnRight.common) {
     const isNewKeyMapExperiment = expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true);
     // Move row/column shortcuts
     /**

package/dist/es2019/pm-plugins/main.js

@@ -26,7 +26,7 @@ import { replaceSelectedTable } from './transforms/replace-table';
 import { findControlsHoverDecoration } from './utils/decoration';
 import { transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, transformSliceToRemoveOpenTable, transformSliceToRemoveNestedTables, isHeaderRowRequired, transformSliceTableLayoutDefaultToCenter } from './utils/paste';
 import { applyMeasuredWidthToAllTables, isContentModeSupported } from './utils/tableMode';
-export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) => {
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) => {
   var _accessibilityUtils;
   const state = createPluginState(dispatch, {
     pluginConfig,
@@ -39,7 +39,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     wasFullWidthModeEnabled: previousFullWidthModeEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
-    isDragAndDropEnabled: dragAndDropEnabled,
+    isDragAndDropEnabled: true,
     isTableScalingEnabled: isTableScalingEnabled,
     ...defaultHoveredCell,
     ...defaultTableSelection,
@@ -73,7 +73,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       tableRow: tableRowView({
         eventDispatcher,
         pluginInjectionApi,
-        isDragAndDropEnabled: dragAndDropEnabled
+        isDragAndDropEnabled: true
       }),
       tableCell: tableCellView({
         eventDispatcher,

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

@@ -6,13 +6,14 @@
 
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { isReplaceDocOperation } from '@atlaskit/editor-common/utils/document';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH } from './table-resizing/utils/consts';
 import { ALIGN_START } from './utils/alignment';
-import { isTableInContentMode } from './utils/tableMode';
+import { isContentModeSupported } from './utils/tableMode';
 export const pluginKey = new PluginKey('tableWidthPlugin');
 const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, maxWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
   return new SafePlugin({
@@ -63,10 +64,12 @@ const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, maxWid
       if (isReplaceDocumentOperation && !isCommentEditor) {
         newState.doc.forEach((node, offset) => {
           if (isTableInContentMode({
-            node,
-            allowColumnResizing: true,
-            allowTableResizing: true,
-            isFullPageEditor: true,
+            tableNode: node,
+            isSupported: isContentModeSupported({
+              allowColumnResizing: true,
+              allowTableResizing: true,
+              isFullPageEditor: true
+            }),
             isTableNested: false
           })) {
             return;

package/dist/es2019/pm-plugins/utils/tableMode.js

@@ -1,29 +1,8 @@
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { hasTableBeenResized } from '@atlaskit/editor-common/table';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-import { hasTableColumnBeenResized } from '../table-resizing/utils/colgroup';
 import { applyTableMeasurement, getTableMeasurement } from '../transforms/content-mode';
-import { ALIGN_START } from './alignment';
-export const isTableInContentMode = ({
-  allowColumnResizing,
-  allowTableResizing,
-  isFullPageEditor,
-  isTableNested,
-  node
-}) => {
-  if (!expValEqualsNoExposure('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
-    return false;
-  }
-  if (!node || isTableNested) {
-    return false;
-  }
-  return isContentModeSupported({
-    allowColumnResizing,
-    allowTableResizing,
-    isFullPageEditor
-  }) && !hasTableBeenResized(node) && node.attrs.layout === ALIGN_START;
-};
 export const isContentModeSupported = ({
   allowColumnResizing,
   allowTableResizing,
@@ -31,7 +10,6 @@ export const isContentModeSupported = ({
 }) => {
   return allowColumnResizing && allowTableResizing && isFullPageEditor;
 };
-export const hasTableBeenResized = node => node.attrs.width !== null || hasTableColumnBeenResized(node);
 
 /**
  * Iterates all top-level tables in the document, and for those in content mode,
@@ -54,7 +32,7 @@ export const applyMeasuredWidthToAllTables = (view, pluginInjectionApi) => {
 
   // modify only top-level tables
   doc.forEach((node, offset) => {
-    if (node.type !== table || hasTableBeenResized(node) && node.attrs.layout !== ALIGN_START) {
+    if (node.type !== table || hasTableBeenResized(node) && node.attrs.layout !== 'align-start') {
       return;
     }
     const domNode = view.domAtPos(offset + 1).node;
@@ -98,6 +76,10 @@ export const applyMeasuredWidthToAllTables = (view, pluginInjectionApi) => {
     view.dispatch(tr.setMeta('addToHistory', false));
   }
 };
+
+/**
+ * Used to measure a selected table width with it's content being laid out natively by the browser
+ */
 export const applyMeasuredWidthToSelectedTable = (view, api) => {
   var _api$analytics, _api$analytics$action, _api$width$sharedStat, _api$width, _api$width$sharedStat2;
   const tableObject = findTable(view.state.selection);

package/dist/es2019/tablePlugin.js

@@ -63,7 +63,6 @@ const tablePlugin = ({
   const options = {
     ...config,
     tableOptions: (_config$tableOptions = config === null || config === void 0 ? void 0 : config.tableOptions) !== null && _config$tableOptions !== void 0 ? _config$tableOptions : {},
-    dragAndDropEnabled: (config === null || config === void 0 ? void 0 : config.dragAndDropEnabled) || fg('platform_editor_enable_table_dnd'),
     isTableScalingEnabled: (config === null || config === void 0 ? void 0 : config.isTableScalingEnabled) || fg('platform_editor_enable_table_scaling')
   };
   const defaultGetEditorContainerWidth = () => {
@@ -280,12 +279,11 @@ const tablePlugin = ({
             wasFullWidthEnabled,
             tableOptions,
             getEditorFeatureFlags,
-            dragAndDropEnabled,
             isTableScalingEnabled,
             isCommentEditor,
             isChromelessEditor
           } = options || {};
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, options === null || options === void 0 ? void 0 : options.allowFixedColumnWidthOption);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, options === null || options === void 0 ? void 0 : options.allowFixedColumnWidthOption);
         }
       }, {
         name: 'tablePMColResizing',
@@ -319,14 +317,13 @@ const tablePlugin = ({
           nodeViewPortalProviderAPI
         }) => {
           const {
-            dragAndDropEnabled,
             isTableScalingEnabled = false,
             fullWidthEnabled = false,
             isCommentEditor = false,
             isChromelessEditor = false,
             tableOptions
           } = options || {};
-          return keymapPlugin(defaultGetEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.allowTableAlignment, fullWidthEnabled, api, getIntl, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.allowTableResizing);
+          return keymapPlugin(defaultGetEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled, tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.allowTableAlignment, fullWidthEnabled, api, getIntl, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.allowTableResizing);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -336,9 +333,6 @@ const tablePlugin = ({
       }, {
         name: 'tableEditing',
         plugin: () => {
-          const {
-            dragAndDropEnabled
-          } = options || {};
           return tableEditing({
             reportFixedTable: ({
               tr,
@@ -354,7 +348,7 @@ const tablePlugin = ({
                 eventType: EVENT_TYPE.TRACK
               })(tr);
             },
-            dragAndDropEnabled
+            dragAndDropEnabled: true
           });
         }
       }, {
@@ -367,7 +361,7 @@ const tablePlugin = ({
         plugin: ({
           dispatch
         }) => {
-          return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options.isCommentEditor, api) : undefined;
+          return createDragAndDropPlugin(dispatch, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options.isCommentEditor, api);
         }
       }, {
         name: 'tableViewModeSort',

package/dist/es2019/ui/ContentComponent.js

@@ -215,7 +215,6 @@ export const ContentComponent = ({
     fallbackComponent: null
   }, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
     featureFlags: api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState(),
-    isDragAndDropEnabledOption: options === null || options === void 0 ? void 0 : options.dragAndDropEnabled,
     api: api
   }), /*#__PURE__*/React.createElement(ContentComponentInternal, {
     api: api,

package/dist/es2019/ui/global-styles.js

@@ -8,7 +8,6 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { tableStyles } from './common-styles';
 export const GlobalStylesWrapper = ({
   featureFlags,
-  isDragAndDropEnabledOption,
   api
 }) => {
   const {
@@ -23,7 +22,7 @@ export const GlobalStylesWrapper = ({
   return jsx(Global, {
     styles: tableStyles({
       featureFlags,
-      isDragAndDropEnabled: isDragAndDropEnabledOption && !isLivePageViewMode
+      isDragAndDropEnabled: !isLivePageViewMode
     })
   });
 };

package/dist/es2019/ui/toolbar.js

@@ -397,16 +397,10 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
   const areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   if (editorExperiment('platform_editor_controls', 'variant1')) {
     var _api$editorViewMode, _api$editorViewMode$s;
-    let isDragHandleMenuOpened = false;
-    let isTableRowOrColumnDragged = false;
-    if (options !== null && options !== void 0 && options.dragAndDropEnabled) {
-      const {
-        isDragMenuOpen = false,
-        isDragging = false
-      } = getDragDropPluginState(state);
-      isDragHandleMenuOpened = isDragMenuOpen;
-      isTableRowOrColumnDragged = isDragging;
-    }
+    const {
+      isDragMenuOpen: isDragHandleMenuOpened = false,
+      isDragging: isTableRowOrColumnDragged = false
+    } = getDragDropPluginState(state);
     const isTableOrColumnResizing = !!(resizeState !== null && resizeState !== void 0 && resizeState.dragging || tableWidthState !== null && tableWidthState !== void 0 && tableWidthState.resizing);
     const isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
     const isTableState = isTableRowOrColumnDragged || isTableOrColumnResizing || isTableMenuOpened;

package/dist/esm/nodeviews/TableComponent.js

@@ -21,6 +21,7 @@ import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
 import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
@@ -39,6 +40,7 @@ import { getResizeState, updateColgroup } from '../pm-plugins/table-resizing/uti
 import { scaleTable } from '../pm-plugins/table-resizing/utils/scale-table';
 import { containsHeaderRow, isTableNested, isTableNestedInMoreThanOneNode, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../pm-plugins/utils/nodes';
 import { getAssistiveMessage } from '../pm-plugins/utils/table';
+import { isContentModeSupported } from '../pm-plugins/utils/tableMode';
 import { TableCssClassName as ClassName } from '../types';
 import { handleMouseOut, handleMouseOver, isTableInFocus, withCellTracking } from '../ui/event-handlers';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
@@ -731,10 +733,24 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           var view = this.props.view;
           var shouldRecreateResizeCols = !allowTableResizing || !isResizing || isNoOfColumnsChanged && isResizing;
           if (shouldRecreateResizeCols) {
+            var _this$table7, _this$props$options10, _this$props$options11;
             var start = getPos() || 0;
             var depth = view.state.doc.resolve(start).depth;
             shouldScale = depth === 0 && shouldScale;
             insertColgroupFromNode(this.table, currentTable, shouldScale, undefined, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
+
+            // Deferred from setDomAttrs — remove only once colgroup is updated and table has left content mode.
+            if ((_this$table7 = this.table) !== null && _this$table7 !== void 0 && _this$table7.hasAttribute('data-initial-width-mode') && !isTableInContentMode({
+              tableNode: currentTable,
+              isSupported: isContentModeSupported({
+                allowColumnResizing: !!allowColumnResizing,
+                allowTableResizing: !!allowTableResizing,
+                isFullPageEditor: !((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor) && !((_this$props$options11 = this.props.options) !== null && _this$props$options11 !== void 0 && _this$props$options11.isChromelessEditor)
+              }),
+              isTableNested: isTableNested(view.state, getPos())
+            })) {
+              this.table.removeAttribute('data-initial-width-mode');
+            }
           }
           updateControls()(view.state);
         }
@@ -762,7 +778,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this5 = this,
-        _this$props$options10;
+        _this$props$options12;
       var _this$props10 = this.props,
         view = _this$props10.view,
         getNode = _this$props10.getNode,
@@ -866,7 +882,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
         _getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
-      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
+      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options12 = this.props.options) !== null && _this$props$options12 !== void 0 && _this$props$options12.isCommentEditor));
       return /*#__PURE__*/React.createElement(TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {

package/dist/esm/nodeviews/table.js

@@ -12,18 +12,18 @@ function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prot
 import React from 'react';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-config';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { isTableNested, tablesHaveDifferentColumnWidths } from '../pm-plugins/utils/nodes';
-import { isTableInContentMode } from '../pm-plugins/utils/tableMode';
+import { isContentModeSupported } from '../pm-plugins/utils/tableMode';
 import { TableComponentWithSharedState } from './TableComponentWithSharedState';
 import { tableNodeSpecWithFixedToDOM } from './toDOM';
 var tableAttributes = function tableAttributes(node) {
@@ -199,7 +199,9 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "setDomAttrs",
     value: function setDomAttrs(node) {
-      var _this3 = this,
+      var _this$reactComponentP6,
+        _this$reactComponentP7,
+        _this3 = this,
         _this$reactComponentP8,
         _this$getEditorFeatur2,
         _this$options3,
@@ -208,19 +210,19 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
         return; // width / attribute application to actual table will happen later when table is set
       }
       var attrs = tableAttributes(node);
-      if (expValEqualsNoExposure('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
-        var _this$reactComponentP6, _this$reactComponentP7;
-        if (isTableInContentMode({
-          node: node,
+
+      // render table with content-mode attribute which removes all width constraints from the table
+      // fire exposure here
+      if (isTableInContentMode({
+        tableNode: node,
+        isSupported: isContentModeSupported({
           allowColumnResizing: !!this.reactComponentProps.allowColumnResizing,
           allowTableResizing: !!this.reactComponentProps.allowTableResizing,
-          isFullPageEditor: !((_this$reactComponentP6 = this.reactComponentProps.options) !== null && _this$reactComponentP6 !== void 0 && _this$reactComponentP6.isCommentEditor) && !((_this$reactComponentP7 = this.reactComponentProps.options) !== null && _this$reactComponentP7 !== void 0 && _this$reactComponentP7.isChromelessEditor),
-          isTableNested: isTableNested(this.view.state, this.getPos())
-        }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
-          attrs['data-initial-width-mode'] = 'content';
-        } else {
-          this.table.removeAttribute('data-initial-width-mode');
-        }
+          isFullPageEditor: !((_this$reactComponentP6 = this.reactComponentProps.options) !== null && _this$reactComponentP6 !== void 0 && _this$reactComponentP6.isCommentEditor) && !((_this$reactComponentP7 = this.reactComponentProps.options) !== null && _this$reactComponentP7 !== void 0 && _this$reactComponentP7.isChromelessEditor)
+        }),
+        isTableNested: isTableNested(this.view.state, this.getPos())
+      }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
+        attrs['data-initial-width-mode'] = 'content';
       }
       Object.keys(attrs).forEach(function (attr) {
         // Ignored via go/ees005

package/dist/esm/nodeviews/toDOM.js

@@ -7,11 +7,12 @@ import classNames from 'classnames';
 import kebabCase from 'lodash/kebabCase';
 import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { generateColgroupFromNode, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
 import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS, getTableResizerItemWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
-import { isTableInContentMode } from '../pm-plugins/utils/tableMode';
+import { isContentModeSupported } from '../pm-plugins/utils/tableMode';
 import { getAlignmentStyle } from './table-container-styles';
 export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
   var tableNode = config.isNestingSupported ? tableWithNestedTable : table;
@@ -19,10 +20,12 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
     toDOM: function toDOM(node) {
       var isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
       var isInContentMode = isTableInContentMode({
-        node: node,
-        allowColumnResizing: config.allowColumnResizing,
-        allowTableResizing: config.tableResizingEnabled,
-        isFullPageEditor: isFullPageEditor,
+        tableNode: node,
+        isSupported: isContentModeSupported({
+          allowColumnResizing: config.allowColumnResizing,
+          allowTableResizing: config.tableResizingEnabled,
+          isFullPageEditor: isFullPageEditor
+        }),
         isTableNested: config.isNested
       }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
       var alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(function (_ref) {