@atlaskit/editor-plugin-table 7.21.2 → 7.21.4

package/dist/es2019/nodeviews/TableComponent.js

@@ -11,9 +11,10 @@ import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { autoSizeTable, clearHoverSelection } from '../commands';
+import { handleMouseOut, isTableInFocus } from '../event-handlers';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
@@ -52,6 +53,12 @@ class TableComponent extends React.Component {
       tableWrapperWidth: undefined,
       tableWrapperHeight: undefined
     });
+    _defineProperty(this, "handleMouseOut", event => {
+      if (!isTableInFocus(this.props.view)) {
+        return false;
+      }
+      return handleMouseOut(this.props.view, event);
+    });
     _defineProperty(this, "handleMouseEnter", () => {
       const node = this.props.getNode();
       const pos = this.props.getPos();
@@ -338,7 +345,7 @@ class TableComponent extends React.Component {
       getEditorFeatureFlags,
       isTableScalingEnabled
     } = this.props;
-    if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
+    if (fg('platform.editor.table.live-pages-sorting_4malx')) {
       var _this$props$pluginInj, _this$props$pluginInj2;
       const {
         mode
@@ -348,6 +355,10 @@ class TableComponent extends React.Component {
         this === null || this === void 0 ? void 0 : (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.addEventListener('mouseenter', this.handleMouseEnter);
       }
     }
+    if (fg('editor_react_18_fix_table_delete_col_decorations')) {
+      var _this$table2;
+      this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.addEventListener('mouseout', this.handleMouseOut);
+    }
     const {
       tableWithFixedColumnWidthsOption = false,
       stickyScrollbar
@@ -428,9 +439,13 @@ class TableComponent extends React.Component {
     if (!(options !== null && options !== void 0 && options.isTableResizingEnabled) && allowColumnResizing) {
       window.removeEventListener('resize', this.handleWindowResizeDebounced);
     }
-    if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
-      var _this$table2;
-      this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.removeEventListener('mouseenter', this.handleMouseEnter);
+    if (fg('platform.editor.table.live-pages-sorting_4malx')) {
+      var _this$table3;
+      this === null || this === void 0 ? void 0 : (_this$table3 = this.table) === null || _this$table3 === void 0 ? void 0 : _this$table3.removeEventListener('mouseenter', this.handleMouseEnter);
+    }
+    if (fg('editor_react_18_fix_table_delete_col_decorations')) {
+      var _this$table4;
+      this === null || this === void 0 ? void 0 : (_this$table4 = this.table) === null || _this$table4 === void 0 ? void 0 : _this$table4.removeEventListener('mouseout', this.handleMouseOut);
     }
     if (this.overflowShadowsObserver) {
       this.overflowShadowsObserver.dispose();
@@ -485,7 +500,7 @@ class TableComponent extends React.Component {
         tableWithFixedColumnWidthsOption = false
       } = getEditorFeatureFlags();
       const isTableScalingWithFixedColumnWidthsOptionEnabled = ((_this$props$options = this.props.options) === null || _this$props$options === void 0 ? void 0 : _this$props$options.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
-      const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent') || false;
+      const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') || false;
       if (force || !isResizing && shouldUpdateColgroup) {
         var _this$props$options2;
         const resizeState = getResizeState({
@@ -534,7 +549,7 @@ class TableComponent extends React.Component {
       isInDanger
     } = this.props;
     const table = findTable(view.state.selection);
-    if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+    if (!fg('platform.editor.table.use-shared-state-hook')) {
       const pluginState = getPluginState(view.state);
       isInDanger = pluginState.isInDanger;
     }
@@ -548,7 +563,7 @@ class TableComponent extends React.Component {
       shouldHandleColgroupUpdates = true;
     }
     const isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && tableWithFixedColumnWidthsOption;
-    const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+    const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent');
     if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
       shouldScale = true;
       shouldHandleColgroupUpdates = true;
@@ -674,7 +689,7 @@ class TableComponent extends React.Component {
       showAfterShadow
     } = this.state;
     const node = getNode();
-    if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+    if (!fg('platform.editor.table.use-shared-state-hook')) {
       const pluginState = getPluginState(view.state);
       isInDanger = pluginState.isInDanger;
       hoveredRows = pluginState.hoveredRows;
@@ -759,7 +774,7 @@ class TableComponent extends React.Component {
       stickyScrollbar,
       tableWithFixedColumnWidthsOption = false
     } = getEditorFeatureFlags();
-    const shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+    const shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && fg('platform.editor.table.use-increased-scaling-percent');
     return /*#__PURE__*/React.createElement(TableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
@@ -783,7 +798,8 @@ class TableComponent extends React.Component {
       isTableWithFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
       isWholeTableInDanger: isWholeTableInDanger,
       isTableAlignmentEnabled: isTableAlignmentEnabled,
-      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
+      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+      isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
     }, /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,

package/dist/es2019/nodeviews/TableContainer.js

@@ -125,7 +125,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   isTableScalingEnabled,
   isTableWithFixedColumnWidthsOptionEnabled,
   isTableAlignmentEnabled,
-  shouldUseIncreasedScalingPercent
+  shouldUseIncreasedScalingPercent,
+  isCommentEditor
 }) => {
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
@@ -209,13 +210,13 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
     // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
     // padding left = padding right = akEditorGutterPadding = 32
-    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - (isCommentEditor ? 0 : resizeHandleSpacing);
   }
-  let width = Math.min(tableWidth, responsiveContainerWidth);
+  let width = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
   }
-  const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
+  const maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   const tableResizerProps = {
     width,
     maxWidth: maxResizerWidth,
@@ -291,7 +292,8 @@ export const TableContainer = ({
   isTableScalingEnabled,
   isTableWithFixedColumnWidthsOptionEnabled,
   isTableAlignmentEnabled,
-  shouldUseIncreasedScalingPercent
+  shouldUseIncreasedScalingPercent,
+  isCommentEditor
 }) => {
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer
@@ -311,7 +313,8 @@ export const TableContainer = ({
       isTableWithFixedColumnWidthsOptionEnabled: isTableWithFixedColumnWidthsOptionEnabled,
       isWholeTableInDanger: isWholeTableInDanger,
       isTableAlignmentEnabled: isTableAlignmentEnabled,
-      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
+      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+      isCommentEditor: isCommentEditor
     }, children);
   }
   return /*#__PURE__*/React.createElement(InnerContainer, {

package/dist/es2019/nodeviews/lazy-node-views.js

@@ -7,7 +7,7 @@ import TableRow from './TableRow';
 export const lazyTableView = options => {
   if (!fg('platform_editor_lazy-node-views')) {
     return (node, view, getPos) => {
-      return createTableView(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled);
+      return createTableView(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled, options.isCommentEditor);
     };
   }
   const loader = () => {
@@ -23,9 +23,10 @@ export const lazyTableView = options => {
           getEditorFeatureFlags,
           dispatchAnalyticsEvent,
           pluginInjectionApi,
-          isTableAlignmentEnabled
+          isTableAlignmentEnabled,
+          isCommentEditor
         } = getNodeViewOptions();
-        return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled);
+        return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor);
       };
     });
     return result;

package/dist/es2019/nodeviews/table.js

@@ -23,11 +23,15 @@ const tableAttributes = node => {
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
-    'data-table-width': node.attrs.width,
+    'data-table-width': node.attrs.width || 'inherit',
     '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) {
+    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
@@ -251,7 +255,7 @@ export default class TableView extends ReactNodeView {
     super.destroy();
   }
 }
-export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled) => {
+export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor) => {
   const {
     pluginConfig,
     isFullWidthModeEnabled,
@@ -279,7 +283,8 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
       isDragAndDropEnabled,
       isTableScalingEnabled,
       // same as options.isTableScalingEnabled
-      isTableAlignmentEnabled
+      isTableAlignmentEnabled,
+      isCommentEditor
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,

package/dist/es2019/plugin.js

@@ -137,7 +137,9 @@ const tablesPlugin = ({
         const node = createTableWithWidth({
           isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
           isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
-          isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled
+          isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
+          isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+          isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableResizingEnabled
         })(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,
@@ -192,9 +194,10 @@ const tablesPlugin = ({
             getEditorFeatureFlags,
             dragAndDropEnabled,
             isTableScalingEnabled,
-            isTableAlignmentEnabled
+            isTableAlignmentEnabled,
+            isCommentEditor
           } = options || {};
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor);
         }
       }, {
         name: 'tablePMColResizing',
@@ -231,9 +234,11 @@ const tablesPlugin = ({
             dragAndDropEnabled,
             isTableScalingEnabled = false,
             isTableAlignmentEnabled = false,
-            fullWidthEnabled = false
+            fullWidthEnabled = false,
+            isCommentEditor = false,
+            tableResizingEnabled = false
           } = options || {};
-          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent);
+          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, tableResizingEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -294,7 +299,7 @@ const tablesPlugin = ({
           dispatch
         }) => {
           var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign;
-          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) : undefined;
+          return options !== null && options !== void 0 && options.tableResizingEnabled && !(options !== null && options !== void 0 && options.isCommentEditor) ? 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) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -492,7 +497,9 @@ const tablesPlugin = ({
           const tableNode = createTableWithWidth({
             isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
             isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
-            isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled
+            isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
+            isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+            isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableResizingEnabled
           })(state.schema);
           const tr = insert(tableNode);
           editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({

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

@@ -8,13 +8,13 @@ import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSele
 import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, createTable } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
-export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent) {
+export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, 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;
   bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
   bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(-1), list);
-  bindKeymapWithCommand(toggleTable.common, createTable(isTableScalingEnabled, isTableAlignmentEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
+  bindKeymapWithCommand(toggleTable.common, createTable(isTableScalingEnabled, isTableAlignmentEnabled, !!isFullWidthEnabled, editorAnalyticsAPI, isCommentEditor, isTableResizingEnabled), list);
   bindKeymapWithCommand(backspace.common, chainCommands(deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD), emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD)), list);
   bindKeymapWithCommand(backspace.common, moveCursorBackward, list);
 

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

@@ -20,7 +20,7 @@ import { isHeaderRowRequired } from '../utils/paste';
 import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent) => {
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor) => {
   var _accessibilityUtils;
   const state = createPluginState(dispatch, {
     pluginConfig,
@@ -261,7 +261,8 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
           getEditorFeatureFlags,
           dispatchAnalyticsEvent,
           pluginInjectionApi,
-          isTableAlignmentEnabled
+          isTableAlignmentEnabled,
+          isCommentEditor
         }),
         tableRow: lazyTableRowView({
           eventDispatcher
@@ -279,7 +280,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         mousedown: withCellTracking(handleMouseDown),
         mouseover: withCellTracking(whenTableInFocus(handleMouseOver)),
         mouseleave: handleMouseLeave,
-        mouseout: whenTableInFocus(handleMouseOut),
+        mouseout: fg('editor_react_18_fix_table_delete_col_decorations') ? undefined : whenTableInFocus(handleMouseOut),
         mousemove: whenTableInFocus(handleMouseMove),
         mouseenter: handleMouseEnter,
         mouseup: whenTableInFocus(handleMouseUp),

package/dist/es2019/toolbar.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';

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

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';

package/dist/es2019/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { ButtonGroup } from '@atlaskit/button';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -1,6 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { Component } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { Popup } from '@atlaskit/editor-common/ui';

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

@@ -1,5 +1,8 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /** @jsxFrag */
 import React, { useEffect, useState } from 'react';
 

package/dist/es2019/utils/create.js

@@ -4,15 +4,20 @@ export const createTableWithWidth = ({
   isTableScalingEnabled,
   isTableAlignmentEnabled,
   isFullWidthModeEnabled,
+  isCommentEditor,
+  isTableResizingEnabled,
   createTableProps
 }) => schema => {
   const attrsOverrides = {};
-  if (isTableScalingEnabled && isFullWidthModeEnabled) {
+  if (isTableScalingEnabled && isFullWidthModeEnabled && !isCommentEditor) {
     attrsOverrides.tableWidth = TABLE_MAX_WIDTH;
   }
   if (isTableAlignmentEnabled && isFullWidthModeEnabled) {
     attrsOverrides.layout = 'align-start';
   }
+  if (isCommentEditor && isTableResizingEnabled) {
+    attrsOverrides.tableWidth = 'inherit';
+  }
   return createTable({
     schema,
     ...createTableProps,

package/dist/esm/commands/insert.js

@@ -141,12 +141,14 @@ export var insertRow = function insertRow(row, moveCursorToTheNewRow, isCellBack
     return true;
   };
 };
-export var createTable = function createTable(isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) {
+export var createTable = function createTable(isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI, isCommentEditor, isTableResizingEnabled) {
   return function (state, dispatch) {
     var table = createTableWithWidth({
       isTableScalingEnabled: isTableScalingEnabled,
       isTableAlignmentEnabled: isTableAlignmentEnabled,
-      isFullWidthModeEnabled: isFullWidthModeEnabled
+      isFullWidthModeEnabled: isFullWidthModeEnabled,
+      isCommentEditor: isCommentEditor,
+      isTableResizingEnabled: isTableResizingEnabled
     })(state.schema);
     if (dispatch) {
       var tr = safeInsert(table)(state.tr).scrollIntoView();
@@ -166,7 +168,7 @@ export var createTable = function createTable(isTableScalingEnabled, isTableAlig
     return true;
   };
 };
-export var insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI) {
+export var insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI, isCommentEditor) {
   return function (rowsCount, colsCount, inputMethod) {
     return function (_ref) {
       var tr = _ref.tr;
@@ -174,6 +176,7 @@ export var insertTableWithSize = function insertTableWithSize(isFullWidthModeEna
         isTableScalingEnabled: isTableScalingEnabled,
         isFullWidthModeEnabled: isFullWidthModeEnabled,
         isTableAlignmentEnabled: isTableAlignmentEnabled,
+        isCommentEditor: isCommentEditor,
         createTableProps: {
           rowsCount: rowsCount,
           colsCount: colsCount

package/dist/esm/nodeviews/TableComponent.js

@@ -25,9 +25,10 @@ import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { autoSizeTable, clearHoverSelection } from '../commands';
+import { handleMouseOut, isTableInFocus } from '../event-handlers';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
@@ -67,6 +68,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       scroll: 0,
       parentWidth: undefined
     }, _defineProperty(_defineProperty2, ShadowEvent.SHOW_BEFORE_SHADOW, false), _defineProperty(_defineProperty2, ShadowEvent.SHOW_AFTER_SHADOW, false), _defineProperty(_defineProperty2, "tableWrapperWidth", undefined), _defineProperty(_defineProperty2, "tableWrapperHeight", undefined), _defineProperty2));
+    _defineProperty(_assertThisInitialized(_this), "handleMouseOut", function (event) {
+      if (!isTableInFocus(_this.props.view)) {
+        return false;
+      }
+      return handleMouseOut(_this.props.view, event);
+    });
     _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function () {
       var node = _this.props.getNode();
       var pos = _this.props.getPos();
@@ -348,7 +355,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props7.getNode,
         getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props7.isTableScalingEnabled;
-      if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
+      if (fg('platform.editor.table.live-pages-sorting_4malx')) {
         var _this$props$pluginInj;
         var _ref = ((_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.editorViewMode) === null || _this$props$pluginInj === void 0 ? void 0 : _this$props$pluginInj.sharedState.currentState()) || {},
           mode = _ref.mode;
@@ -357,6 +364,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
         }
       }
+      if (fg('editor_react_18_fix_table_delete_col_decorations')) {
+        var _this$table2;
+        this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
+      }
       var _getEditorFeatureFlag = getEditorFeatureFlags(),
         _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2,
@@ -437,9 +448,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (!(options !== null && options !== void 0 && options.isTableResizingEnabled) && allowColumnResizing) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
-      if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
-        var _this$table2;
-        this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.removeEventListener('mouseenter', this.handleMouseEnter);
+      if (fg('platform.editor.table.live-pages-sorting_4malx')) {
+        var _this$table3;
+        this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.removeEventListener('mouseenter', this.handleMouseEnter);
+      }
+      if (fg('editor_react_18_fix_table_delete_col_decorations')) {
+        var _this$table4;
+        this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.removeEventListener('mouseout', this.handleMouseOut);
       }
       if (this.overflowShadowsObserver) {
         this.overflowShadowsObserver.dispose();
@@ -495,7 +510,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           _getEditorFeatureFlag5 = _getEditorFeatureFlag4.tableWithFixedColumnWidthsOption,
           tableWithFixedColumnWidthsOption = _getEditorFeatureFlag5 === void 0 ? false : _getEditorFeatureFlag5;
         var isTableScalingWithFixedColumnWidthsOptionEnabled = ((_this$props$options = this.props.options) === null || _this$props$options === void 0 ? void 0 : _this$props$options.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
-        var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent') || false;
+        var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') || false;
         if (force || !isResizing && shouldUpdateColgroup) {
           var _this$props$options2;
           var resizeState = getResizeState({
@@ -543,7 +558,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
       var isInDanger = this.props.isInDanger;
       var table = findTable(view.state.selection);
-      if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+      if (!fg('platform.editor.table.use-shared-state-hook')) {
         var pluginState = getPluginState(view.state);
         isInDanger = pluginState.isInDanger;
       }
@@ -557,7 +572,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldHandleColgroupUpdates = true;
       }
       var isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && tableWithFixedColumnWidthsOption;
-      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent');
       if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
@@ -681,7 +696,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
       var node = getNode();
-      if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+      if (!fg('platform.editor.table.use-shared-state-hook')) {
         var pluginState = getPluginState(view.state);
         isInDanger = pluginState.isInDanger;
         hoveredRows = pluginState.hoveredRows;
@@ -768,7 +783,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyScrollbar = _getEditorFeatureFlag8.stickyScrollbar,
         _getEditorFeatureFlag9 = _getEditorFeatureFlag8.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag9 === void 0 ? false : _getEditorFeatureFlag9;
-      var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+      var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && fg('platform.editor.table.use-increased-scaling-percent');
       return /*#__PURE__*/React.createElement(TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
@@ -787,7 +802,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isTableWithFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
         isWholeTableInDanger: isWholeTableInDanger,
         isTableAlignmentEnabled: isTableAlignmentEnabled,
-        shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
+        shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+        isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
       }, /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,

package/dist/esm/nodeviews/TableContainer.js

@@ -118,7 +118,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     isTableScalingEnabled = _ref4.isTableScalingEnabled,
     isTableWithFixedColumnWidthsOptionEnabled = _ref4.isTableWithFixedColumnWidthsOptionEnabled,
     isTableAlignmentEnabled = _ref4.isTableAlignmentEnabled,
-    shouldUseIncreasedScalingPercent = _ref4.shouldUseIncreasedScalingPercent;
+    shouldUseIncreasedScalingPercent = _ref4.shouldUseIncreasedScalingPercent,
+    isCommentEditor = _ref4.isCommentEditor;
   var containerRef = useRef(null);
   var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   var _useState = useState(false),
@@ -201,13 +202,13 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
     // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
     // padding left = padding right = akEditorGutterPadding = 32
-    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - (isCommentEditor ? 0 : resizeHandleSpacing);
   }
-  var width = Math.min(tableWidth, responsiveContainerWidth);
+  var width = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
   }
-  var maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
+  var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   var tableResizerProps = {
     width: width,
     maxWidth: maxResizerWidth,
@@ -282,7 +283,8 @@ export var TableContainer = function TableContainer(_ref6) {
     isTableScalingEnabled = _ref6.isTableScalingEnabled,
     isTableWithFixedColumnWidthsOptionEnabled = _ref6.isTableWithFixedColumnWidthsOptionEnabled,
     isTableAlignmentEnabled = _ref6.isTableAlignmentEnabled,
-    shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent;
+    shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent,
+    isCommentEditor = _ref6.isCommentEditor;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -301,7 +303,8 @@ export var TableContainer = function TableContainer(_ref6) {
       isTableWithFixedColumnWidthsOptionEnabled: isTableWithFixedColumnWidthsOptionEnabled,
       isWholeTableInDanger: isWholeTableInDanger,
       isTableAlignmentEnabled: isTableAlignmentEnabled,
-      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
+      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+      isCommentEditor: isCommentEditor
     }, children);
   }
   return /*#__PURE__*/React.createElement(InnerContainer, {