@atlaskit/editor-plugin-table 7.31.3 → 8.1.0

package/dist/es2019/nodeviews/table.js

@@ -27,15 +27,15 @@ const tableAttributes = node => {
     'data-table-display-mode': node.attrs.displayMode
   };
 };
-const getInlineWidth = (node, options, state, pos) => {
-  if (!node.attrs.width && options !== null && options !== void 0 && options.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+const getInlineWidth = (node, options, state, pos, allowTableResizing) => {
+  if (!node.attrs.width && options !== null && options !== void 0 && options.isCommentEditor && allowTableResizing) {
     return;
   }
 
   // provide a width for tables when custom table width is supported
   // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
   // support screen size adjustments
-  const shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !isTableNested(state, pos);
+  const shouldHaveInlineWidth = allowTableResizing && !isTableNested(state, pos);
   let widthValue = getTableContainerWidth(node);
   if (node.attrs.isNumberColumnEnabled) {
     widthValue -= akEditorTableNumberColumnWidth;
@@ -73,7 +73,7 @@ export default class TableView extends ReactNodeView {
       var _this$options, _this$options2, _this$getEditorFeatur;
       this.table = rendered.dom;
       if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled) || (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled && (_this$getEditorFeatur = this.getEditorFeatureFlags) !== null && _this$getEditorFeatur !== void 0 && _this$getEditorFeatur.call(this).tableWithFixedColumnWidthsOption && this.node.attrs.displayMode === 'fixed') {
-        const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
+        const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos(), this.reactComponentProps.allowTableResizing);
         if (tableInlineWidth) {
           handleInlineTableWidth(this.table, tableInlineWidth);
         }
@@ -95,7 +95,7 @@ export default class TableView extends ReactNodeView {
     if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.isTableScalingEnabled) || (_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.isTableScalingEnabled && (_this$getEditorFeatur2 = this.getEditorFeatureFlags) !== null && _this$getEditorFeatur2 !== void 0 && _this$getEditorFeatur2.call(this).tableWithFixedColumnWidthsOption && node.attrs.displayMode === 'fixed') {
       var _tableWidthPluginKey$;
       // handle inline style when table been resized
-      const tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
+      const tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos(), this.reactComponentProps.allowTableResizing);
       const isTableResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(this.view.state)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
       if (!isTableResizing && tableInlineWidth) {
         handleInlineTableWidth(this.table, tableInlineWidth);
@@ -112,6 +112,8 @@ export default class TableView extends ReactNodeView {
         eventDispatcher: props.eventDispatcher,
         api: props.pluginInjectionApi,
         allowColumnResizing: props.allowColumnResizing,
+        allowTableAlignment: props.allowTableAlignment,
+        allowTableResizing: props.allowTableResizing,
         allowControls: props.allowControls,
         getPos: props.getPos,
         getEditorFeatureFlags: props.getEditorFeatureFlags,
@@ -149,7 +151,7 @@ export default class TableView extends ReactNodeView {
       },
       editorView: props.view,
       render: pluginStates => {
-        var _props$options, _props$options2;
+        var _props$options;
         const {
           tableResizingPluginState,
           tableWidthPluginState,
@@ -185,7 +187,8 @@ export default class TableView extends ReactNodeView {
           isDragAndDropEnabled: pluginState.isDragAndDropEnabled,
           isTableScalingEnabled: (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.isTableScalingEnabled // this.options?.isTableScalingEnabled same as TableOptions.isTableScalingEnabled same as pluginState.isTableScalingEnabled
           ,
-          isTableAlignmentEnabled: (_props$options2 = props.options) === null || _props$options2 === void 0 ? void 0 : _props$options2.isTableAlignmentEnabled,
+          allowTableAlignment: props.allowTableAlignment,
+          allowTableResizing: props.allowTableResizing,
           tableActive: tableActive,
           ordering: pluginState.ordering,
           isResizing: isResizing,
@@ -258,23 +261,26 @@ export default class TableView extends ReactNodeView {
     super.destroy();
   }
 }
-export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor, isChromelessEditor) => {
+export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isCommentEditor, isChromelessEditor) => {
   const {
     pluginConfig,
     isFullWidthModeEnabled,
     wasFullWidthModeEnabled,
-    isTableResizingEnabled,
     isDragAndDropEnabled,
     isTableScalingEnabled // same as options.isTableScalingEnabled
   } = getPluginState(view.state);
   const {
     allowColumnResizing,
-    allowControls
+    allowControls,
+    allowTableResizing,
+    allowTableAlignment
   } = getPluginConfig(pluginConfig);
   return new TableView({
     node,
     view,
     allowColumnResizing,
+    allowTableResizing,
+    allowTableAlignment,
     allowControls,
     portalProviderAPI,
     eventDispatcher,
@@ -282,11 +288,9 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     options: {
       isFullWidthModeEnabled,
       wasFullWidthModeEnabled,
-      isTableResizingEnabled,
       isDragAndDropEnabled,
       isTableScalingEnabled,
       // same as options.isTableScalingEnabled
-      isTableAlignmentEnabled,
       isCommentEditor,
       isChromelessEditor
     },

package/dist/es2019/plugin.js

@@ -107,11 +107,11 @@ const tablesPlugin = ({
         var _api$contentInsertion, _api$contentInsertion2, _api$contentInsertion3;
         const node = createTableWithWidth({
           isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
-          isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
+          isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
           isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
           isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
           isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
-          isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableResizingEnabled
+          isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing
         })(state.schema);
 
         // If the cursor is inside a table
@@ -147,7 +147,7 @@ const tablesPlugin = ({
       }
     },
     commands: {
-      insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, options === null || options === void 0 ? void 0 : options.isCommentEditor)
+      insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, options === null || options === void 0 ? void 0 : options.isCommentEditor)
     },
     nodes() {
       const {
@@ -158,7 +158,7 @@ const tablesPlugin = ({
         name: 'table',
         node: tableNodeSpecWithFixedToDOM({
           allowColumnResizing: Boolean(allowColumnResizing),
-          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled),
+          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing),
           getEditorContainerWidth: defaultGetEditorContainerWidth,
           isNestingSupported
         })
@@ -175,7 +175,7 @@ const tablesPlugin = ({
         name: 'table',
         node: tableNodeSpecWithFixedToDOM({
           allowColumnResizing: Boolean(allowColumnResizing),
-          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled),
+          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing),
           getEditorContainerWidth: defaultGetEditorContainerWidth,
           isNestingSupported
         })
@@ -204,16 +204,14 @@ const tablesPlugin = ({
           const {
             fullWidthEnabled,
             wasFullWidthEnabled,
-            tableResizingEnabled,
             tableOptions,
             getEditorFeatureFlags,
             dragAndDropEnabled,
             isTableScalingEnabled,
-            isTableAlignmentEnabled,
             isCommentEditor,
             isChromelessEditor
           } = options || {};
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
         }
       }, {
         name: 'tablePMColResizing',
@@ -226,15 +224,15 @@ const tablesPlugin = ({
             tableOptions,
             getEditorFeatureFlags,
             isTableScalingEnabled,
-            isNewColumnResizingEnabled,
-            isTableAlignmentEnabled
+            isNewColumnResizingEnabled
           } = options || {};
           const {
-            allowColumnResizing
+            allowColumnResizing,
+            allowTableAlignment
           } = pluginConfig(tableOptions);
           return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, allowTableAlignment, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
         }
       }, {
         name: 'tableEditing',
@@ -251,13 +249,12 @@ const tablesPlugin = ({
           const {
             dragAndDropEnabled,
             isTableScalingEnabled = false,
-            isTableAlignmentEnabled = false,
             fullWidthEnabled = false,
             isCommentEditor = false,
             isChromelessEditor = false,
-            tableResizingEnabled = false
+            tableOptions
           } = options || {};
-          return keymapPlugin(defaultGetEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableResizingEnabled);
+          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);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -319,16 +316,16 @@ const tablesPlugin = ({
           dispatchAnalyticsEvent,
           dispatch
         }) => {
-          var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign, _options$isCommentEdi;
-          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$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$isTableAlign = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign !== void 0 ? _options$isTableAlign : false, (_options$isCommentEdi = options === null || options === void 0 ? void 0 : options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
+          var _options$fullWidthEna, _options$isTableScali, _options$tableOptions, _options$isCommentEdi;
+          return options !== null && options !== void 0 && options.tableOptions.allowTableResizing ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$tableOptions = options.tableOptions.allowTableResizing) !== null && _options$tableOptions !== void 0 ? _options$tableOptions : false, (_options$isCommentEdi = options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
         }
       }, {
         name: 'tableWidthInCommentFix',
         plugin: ({
           dispatch
         }) => {
-          var _options$isTableAlign2;
-          return options !== null && options !== void 0 && options.tableResizingEnabled && options !== null && options !== void 0 && options.isCommentEditor ? createTableWidthInCommentFixPlugin(dispatch, (_options$isTableAlign2 = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign2 !== void 0 ? _options$isTableAlign2 : false) : undefined;
+          var _options$tableOptions2;
+          return options !== null && options !== void 0 && options.tableOptions.allowTableResizing && options !== null && options !== void 0 && options.isCommentEditor ? createTableWidthInCommentFixPlugin(dispatch, (_options$tableOptions2 = options.tableOptions.allowTableAlignment) !== null && _options$tableOptions2 !== void 0 ? _options$tableOptions2 : false) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -338,8 +335,8 @@ const tablesPlugin = ({
           dispatch,
           dispatchAnalyticsEvent
         }) => {
-          var _options$tableResizin;
-          return createTableOverflowAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false);
+          var _options$tableOptions3;
+          return createTableOverflowAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableOptions3 = options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) !== null && _options$tableOptions3 !== void 0 ? _options$tableOptions3 : false);
         }
       }, {
         name: 'tableAnalyticsPlugin',
@@ -506,7 +503,7 @@ const tablesPlugin = ({
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorAnalyticsAPI: editorAnalyticsAPI,
             api: api
-          }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableResizingEnabled) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
+          }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
             target: resizingTableRef,
             content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
             alignX: 'center',
@@ -536,11 +533,11 @@ const tablesPlugin = ({
           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 tableNode = createTableWithWidth({
             isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
-            isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
+            isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
             isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
             isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
             isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
-            isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableResizingEnabled
+            isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing
           })(state.schema);
           let {
             tr

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

@@ -19,7 +19,7 @@ import { isHeaderRowRequired, transformSliceTableLayoutDefaultToCenter } from '.
 import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) => {
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) => {
   var _accessibilityUtils;
   const state = createPluginState(dispatch, {
     pluginConfig,
@@ -28,7 +28,6 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     insertRowButtonIndex: undefined,
     isFullWidthModeEnabled: fullWidthModeEnabled,
     wasFullWidthModeEnabled: previousFullWidthModeEnabled,
-    isTableResizingEnabled: tableResizingEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
     isDragAndDropEnabled: dragAndDropEnabled,
@@ -168,7 +167,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
 
         // fix for when pasting a table with default layout into comment editor
         // table lose width and expand to full width
-        if (!insideTable(editorState) && isCommentEditor && isTableAlignmentEnabled && isTableScalingEnabled) {
+        if (!insideTable(editorState) && isCommentEditor && pluginConfig.allowTableAlignment && isTableScalingEnabled) {
           slice = transformSliceTableLayoutDefaultToCenter(slice, schema);
         }
         slice = transformSliceToFixHardBreakProblemOnCopyFromCell(slice, schema);
@@ -262,7 +261,6 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
           getEditorFeatureFlags,
           dispatchAnalyticsEvent,
           pluginInjectionApi,
-          isTableAlignmentEnabled,
           isCommentEditor,
           isChromelessEditor
         }),
@@ -283,7 +281,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         blur: handleBlur,
         mousedown: withCellTracking(handleMouseDown),
         mouseleave: handleMouseLeave,
-        mousemove: whenTableInFocus(handleMouseMove(nodeViewPortalProviderAPI)),
+        mousemove: whenTableInFocus(handleMouseMove(nodeViewPortalProviderAPI), pluginInjectionApi),
         mouseenter: handleMouseEnter,
         mouseup: whenTableInFocus(handleMouseUp),
         click: withCellTracking(whenTableInFocus(handleClick))

package/dist/es2019/toolbar.js

@@ -366,7 +366,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
       return element;
     };
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
-    const alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
+    const alignmentMenu = config.allowTableAlignment && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
     const cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
     const columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
     const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);

package/dist/es2019/types.js

@@ -150,6 +150,8 @@ export const TableCssClassName = {
   WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-last-column-insert-line__inactive`,
   WITH_RESIZE_LINE: `${tablePrefixSelector}-column-resize-line`,
   WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`,
+  WITH_DRAG_RESIZE_LINE: `${tablePrefixSelector}-drag-column--resize-line`,
+  WITH_DRAG_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-drag-column-resize-line-last-column`,
   WITH_ROW_INSERT_LINE: `${tablePrefixSelector}-row-insert-line`,
   WITH_ROW_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-row-insert-line__inactive`,
   WITH_LAST_ROW_INSERT_LINE: `${tablePrefixSelector}-last-row-insert-line`,

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

@@ -193,7 +193,7 @@ const tableStickyHeaderFirefoxFixStyle = () => {
 
 // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
 export const baseTableStyles = props => {
-  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3;
+  var _props$featureFlags, _props$featureFlags2;
   return css`
 	${tableSharedStyle()};
 	${columnControlsLineMarker()};
@@ -201,7 +201,7 @@ export const baseTableStyles = props => {
 	${hoveredCell()};
 	${hoveredWarningCell};
 	${insertLine()};
-	${resizeHandle((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop)};
+	${resizeHandle()};
 	${rangeSelectionStyles};
 	${viewModeSortStyles()};
 
@@ -400,7 +400,7 @@ export const baseTableStyles = props => {
 	}
 
 	${sentinelStyles}
-	${OverflowShadow((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop)}
+	${OverflowShadow((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop)}
     ${stickyScrollbarStyles}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
@@ -755,7 +755,7 @@ export const baseTableStyles = props => {
 		position: relative;
 		float: right;
 		margin-left: ${akEditorTableToolbarSize}px;
-		top: ${(_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.tableDragAndDrop || editorExperiment('support_table_in_comment_jira', true) ? 0 : akEditorTableToolbarSize}px;
+		top: ${(_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.tableDragAndDrop || editorExperiment('support_table_in_comment_jira', true) ? 0 : akEditorTableToolbarSize}px;
 		width: ${akEditorTableNumberColumnWidth + 1}px;
 		box-sizing: border-box;
 	}

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

@@ -582,34 +582,32 @@ export const hoveredWarningCell = css`
 
 // Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-const resizeHandleOverrides = isDragAndDropEnabled => {
-  if (isDragAndDropEnabled) {
-    return css`
-			th.${ClassName.WITH_RESIZE_LINE}::before, td.${ClassName.WITH_RESIZE_LINE}::before {
-				content: ' ';
-				position: absolute;
-				left: ${"var(--ds-space-negative-025, -2px)"};
-				top: -1px;
-				width: ${resizeLineWidth}px;
-				height: calc(100% + 2px);
-				background-color: ${tableBorderSelectedColor};
-				z-index: ${columnControlsZIndex * 2};
-			}
-
-			th.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before,
-				td.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before {
-				content: ' ';
-				position: absolute;
-				right: -1px;
-				top: -1px;
-				width: ${resizeLineWidth}px;
-				height: calc(100% + 2px);
-				background-color: ${tableBorderSelectedColor};
-				z-index: ${columnControlsZIndex * 2};
-			}
-		`;
-  }
+const resizeLineStyles = () => {
   return css`
+		th.${ClassName.WITH_DRAG_RESIZE_LINE}::before, td.${ClassName.WITH_DRAG_RESIZE_LINE}::before {
+			content: ' ';
+			position: absolute;
+			left: ${"var(--ds-space-negative-025, -2px)"};
+			top: -1px;
+			width: ${resizeLineWidth}px;
+			height: calc(100% + 2px);
+			background-color: ${tableBorderSelectedColor};
+			z-index: ${columnControlsZIndex * 2};
+		}
+
+		th.${ClassName.WITH_DRAG_RESIZE_LINE_LAST_COLUMN}::before,
+			td.${ClassName.WITH_DRAG_RESIZE_LINE_LAST_COLUMN}::before {
+			content: ' ';
+			position: absolute;
+			right: -1px;
+			top: -1px;
+			width: ${resizeLineWidth}px;
+			height: calc(100% + 2px);
+			background-color: ${tableBorderSelectedColor};
+			z-index: ${columnControlsZIndex * 2};
+		}
+
+		// Styles when drag and drop is disabled - will be removed
 		td.${ClassName.WITH_RESIZE_LINE}::before {
 			content: ' ';
 			position: absolute;
@@ -655,7 +653,7 @@ const resizeHandleOverrides = isDragAndDropEnabled => {
 		}
 	`;
 };
-export const resizeHandle = isDragAndDropEnabled => css`
+export const resizeHandle = () => css`
 	.${ClassName.TABLE_CONTAINER} {
 		.${ClassName.RESIZE_HANDLE_DECORATION} {
 			background-color: transparent;
@@ -684,10 +682,19 @@ export const resizeHandle = isDragAndDropEnabled => css`
 			z-index: ${resizeHandlerZIndex};
 		}
 
-		${resizeHandleOverrides(isDragAndDropEnabled)}
+		${resizeLineStyles()}
 
 		table
       tr:first-of-type
+      th.${ClassName.WITH_DRAG_RESIZE_LINE}
+      .${ClassName.RESIZE_HANDLE_DECORATION}::after,
+      table
+      tr:first-of-type
+      td.${ClassName.WITH_DRAG_RESIZE_LINE}
+      .${ClassName.RESIZE_HANDLE_DECORATION}::after,
+	  // Styles when drag and drop is disabled - will be removed
+		table
+      tr:first-of-type
       th.${ClassName.WITH_RESIZE_LINE}
       .${ClassName.RESIZE_HANDLE_DECORATION}::after,
       table

package/dist/es2019/utils/decoration.js

@@ -368,7 +368,7 @@ export const createResizeHandleDecoration = (tr, rowIndexTarget, columnEndIndexT
  * this function will return two decorations applying a new class `ClassName.WITH_RESIZE_LINE`
  * only on the cells: `C1` and `D1`.
  */
-export const createColumnLineResize = (selection, cellColumnPositioning) => {
+export const createColumnLineResize = (selection, cellColumnPositioning, isDragAndDropEnabled) => {
   const table = findTable(selection);
   if (!table || cellColumnPositioning.right === null) {
     return [];
@@ -379,7 +379,7 @@ export const createColumnLineResize = (selection, cellColumnPositioning) => {
   if (isLastColumn) {
     columnIndex -= 1;
   }
-  const decorationClassName = isLastColumn ? ClassName.WITH_RESIZE_LINE_LAST_COLUMN : ClassName.WITH_RESIZE_LINE;
+  const decorationClassName = isDragAndDropEnabled ? isLastColumn ? ClassName.WITH_DRAG_RESIZE_LINE_LAST_COLUMN : ClassName.WITH_DRAG_RESIZE_LINE : isLastColumn ? ClassName.WITH_RESIZE_LINE_LAST_COLUMN : ClassName.WITH_RESIZE_LINE;
   const cellPositions = makeArray(map.height).map(rowIndex => map.map[map.width * rowIndex + columnIndex]).filter((cellPosition, rowIndex) => {
     if (isLastColumn) {
       return true; // If is the last column no filter applied

package/dist/esm/commands/column-resize.js

@@ -24,7 +24,8 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     var customTr = state.tr;
     var _getPluginState = getPluginState(state),
       allowColumnResizing = _getPluginState.pluginConfig.allowColumnResizing,
-      getIntl = _getPluginState.getIntl;
+      getIntl = _getPluginState.getIntl,
+      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
     var fakeDispatch = function fakeDispatch(tr) {
       customTr = tr;
     };
@@ -37,7 +38,7 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     });
     var decorationsWithWidgetAndHandle = updateDecorations(customTr.doc, decorationsWithWidget, createColumnLineResize(state.selection, {
       right: columnIndex
-    }), TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
+    }, isDragAndDropEnabled), TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
     getTablePluginCommand({
       type: 'START_KEYBOARD_COLUMN_RESIZE',
       data: {

package/dist/esm/commands/hover.js

@@ -121,10 +121,12 @@ export var clearHoverSelection = function clearHoverSelection() {
 };
 export var showResizeHandleLine = function showResizeHandleLine(cellColumnPositioning) {
   return createCommand(function (state) {
+    var _getPluginState4 = getPluginState(state),
+      isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
     return {
       type: 'SHOW_RESIZE_HANDLE_LINE',
       data: {
-        decorationSet: updatePluginStateDecorations(state, createColumnLineResize(state.selection, cellColumnPositioning), TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
+        decorationSet: updatePluginStateDecorations(state, createColumnLineResize(state.selection, cellColumnPositioning, isDragAndDropEnabled), TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
       }
     };
   });
@@ -153,8 +155,8 @@ export var setTableHovered = function setTableHovered(hovered) {
 };
 export var hoverCell = function hoverCell(rowIndex, colIndex) {
   return createCommand(function (state) {
-    var _getPluginState4 = getPluginState(state),
-      prevHoveredCell = _getPluginState4.hoveredCell;
+    var _getPluginState5 = getPluginState(state),
+      prevHoveredCell = _getPluginState5.hoveredCell;
 
     // If no arguments have been passed then the intention it to reset the hover cell data
     var clear = rowIndex === undefined && colIndex === undefined;

package/dist/esm/event-handlers.js

@@ -398,11 +398,22 @@ export var isTableInFocus = function isTableInFocus(view) {
   var _getPluginState10, _getResizePluginState;
   return !!((_getPluginState10 = getPluginState(view.state)) !== null && _getPluginState10 !== void 0 && _getPluginState10.tableNode) && !((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
 };
-export var whenTableInFocus = function whenTableInFocus(eventHandler) {
+export var whenTableInFocus = function whenTableInFocus(eventHandler, pluginInjectionApi) {
   return function (view, mouseEvent) {
+    var _pluginInjectionApi$e;
     if (!isTableInFocus(view)) {
       return false;
     }
+    var isViewMode = (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 || (_pluginInjectionApi$e = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.mode) === 'view';
+    /**
+     * Table cannot be in focus if we are in view mode.
+     * This will prevent an infinite flow of adding and removing
+     * resize handle decorations in view mode that causes unpredictable
+     * selections.
+     */
+    if (isViewMode) {
+      return false;
+    }
     return eventHandler(view, mouseEvent);
   };
 };