@atlaskit/editor-plugin-table 7.24.4 → 7.24.6

package/dist/es2019/plugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import { tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { IconTable } from '@atlaskit/editor-common/icons';
@@ -26,10 +26,10 @@ import { createPlugin as createStickyHeadersPlugin, findStickyHeaderForTable, pl
 import { createPlugin as createTableOverflowAnalyticsPlugin } from './pm-plugins/table-analytics';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import { createPlugin as createFlexiResizingPlugin, getPluginState as getFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
-import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
+import { tableNodeSpecWithFixedToDOM } from './toDOM';
 import { getToolbarConfig } from './toolbar';
 import FloatingContextualButton from './ui/FloatingContextualButton';
 import FloatingContextualMenu from './ui/FloatingContextualMenu';
@@ -43,41 +43,6 @@ const defaultGetEditorFeatureFlags = () => ({});
 
 // TODO: duplicating type instead of importing media plugin causing a circular dependency
 
-// TODO: ED-23944 Move this override to `toDOM` function on table adf-schema nodespec
-const tableNodeSpecWithFixedToDOM = tableOptions => {
-  if (!fg('platform_editor_lazy-node-views')) {
-    return table;
-  }
-  return {
-    ...table,
-    toDOM: node => {
-      const attrs = {
-        'data-number-column': node.attrs.isNumberColumnEnabled,
-        'data-layout': node.attrs.layout,
-        'data-autosize': node.attrs.__autoSize,
-        'data-table-local-id': node.attrs.localId,
-        'data-table-width': node.attrs.width
-      };
-      let colgroup = '';
-      const {
-        allowColumnResizing
-      } = pluginConfig(tableOptions);
-      if (allowColumnResizing) {
-        colgroup = ['colgroup', {}, ...generateColgroup(node)];
-      }
-      return ['div', {
-        class: 'tableView-content-wrap'
-      }, ['div', {
-        class: 'pm-table-container'
-      }, ['div', {
-        class: 'pm-table-wrapper',
-        'data-number-column': node.attrs.isNumberColumnEnabled,
-        'data-layout': node.attrs.layout
-      }, ['table', attrs, colgroup, ['tbody', 0]]]]];
-    }
-  };
-};
-
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
  * from `@atlaskit/editor-core`.
@@ -162,9 +127,15 @@ const tablesPlugin = ({
       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)
     },
     nodes() {
+      const {
+        allowColumnResizing
+      } = pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions);
       return [{
         name: 'table',
-        node: tableNodeSpecWithFixedToDOM(options === null || options === void 0 ? void 0 : options.tableOptions)
+        node: tableNodeSpecWithFixedToDOM({
+          allowColumnResizing: Boolean(allowColumnResizing),
+          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled)
+        })
       }, {
         name: 'tableHeader',
         node: tableHeader

package/dist/es2019/toDOM.js

@@ -0,0 +1,65 @@
+import { table } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
+export const tableNodeSpecWithFixedToDOM = config => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return table;
+  }
+  return {
+    ...table,
+    toDOM: node => {
+      const attrs = {
+        'data-number-column': node.attrs.isNumberColumnEnabled,
+        'data-layout': node.attrs.layout,
+        'data-autosize': node.attrs.__autoSize,
+        'data-table-local-id': node.attrs.localId,
+        'data-table-width': node.attrs.width
+      };
+      let colgroup = '';
+      if (config.allowColumnResizing) {
+        colgroup = ['colgroup', {}, ...generateColgroup(node)];
+      }
+      const tableContainerDiv = ['div', {
+        class: 'pm-table-container',
+        'data-number-column': node.attrs.isNumberColumnEnabled,
+        'data-layout': node.attrs.layout,
+        'data-testid': 'table-container'
+      }, ['div', {
+        class: 'pm-table-sticky-sentinel-top',
+        'data-testid': 'sticky-sentinel-top'
+      }], ['div', {
+        class: 'pm-table-row-controls-wrapper'
+      }, ['div']], ['div', {
+        class: 'pm-table-with-left-shadow'
+      }], ['div', {
+        class: 'pm-table-wrapper'
+      }, ['table', attrs, ['span', {
+        class: 'pm-table-shadow-sentinel-right'
+      }], ['span', {
+        class: 'pm-table-shadow-sentinel-left'
+      }], colgroup, ['tbody', 0]]], ['div', {
+        class: 'pm-table-with-right-shadow'
+      }], ['div', {
+        class: 'pm-table-sticky-sentinel-bottom',
+        'data-testid': 'sticky-sentinel-bottom'
+      }]];
+      if (!config.tableResizingEnabled) {
+        return ['div', {
+          class: 'tableView-content-wrap'
+        }, tableContainerDiv];
+      }
+      const tableResizingDiv = ['div', {
+        'data-testid': 'table-alignment-container'
+      }, ['div', {
+        class: 'pm-table-resizer-container'
+      }, ['div', {
+        class: 'resizer-item display-handle'
+      }, ['span', {
+        class: 'resizer-hover-zone'
+      }, tableContainerDiv]]]];
+      return ['div', {
+        class: 'tableView-content-wrap'
+      }, tableResizingDiv];
+    }
+  };
+};

package/dist/es2019/toolbar.js

@@ -357,7 +357,7 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
       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) : [];
+    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 isCellBackgroundDuplicated = getEditorFeatureFlags().tableDuplicateCellColouring || false;
     const cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent);
     const columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled) : [];
@@ -553,7 +553,7 @@ const highlightColumnsHandler = (state, dispatch) => {
 };
 export const getAlignmentOptionsConfig = (editorState, {
   formatMessage
-}, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) => {
+}, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor, isCommentEditor) => {
   const tableObject = findTable(editorState.selection);
   if (!tableObject) {
     return [];
@@ -586,7 +586,7 @@ export const getAlignmentOptionsConfig = (editorState, {
       icon: icon,
       title: formatMessage(layoutToMessages[value]),
       selected: normaliseAlignment(currentLayout) === value,
-      onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(value, currentLayout, INPUT_METHOD.FLOATING_TB, CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED),
+      onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI, isCommentEditor || false)(value, currentLayout, INPUT_METHOD.FLOATING_TB, CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED),
       ...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, getDomRef, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) && {
         disabled: value !== 'center'
       })

package/dist/es2019/types.js

@@ -89,7 +89,6 @@ export const TableCssClassName = {
   /** drag and drop controls */
   DRAG_ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-drag-row-controls-wrapper`,
   DRAG_ROW_CONTROLS: `${tablePrefixSelector}-drag-row-controls`,
-  DRAG_CONTROLS_CHROMELESS: `drag-controls-chromeless`,
   DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-row-floating-insert-dot-wrapper`,
   DRAG_ROW_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-row-floating-insert-dot`,
   DRAG_COLUMN_CONTROLS: `${tablePrefixSelector}-drag-column-controls`,
@@ -140,6 +139,7 @@ export const TableCssClassName = {
   TABLE_CELL: tableCellSelector,
   TABLE_HEADER_CELL: tableHeaderSelector,
   TABLE_STICKY: `${tablePrefixSelector}-sticky`,
+  TABLE_CHROMELESS: `${tablePrefixSelector}-chromeless`,
   TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
   LAST_ITEM_IN_CELL: `${tablePrefixSelector}-last-item-in-cell`,
   WITH_COLUMN_INSERT_LINE: `${tablePrefixSelector}-column-insert-line`,

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

@@ -74,7 +74,7 @@ export const TableFloatingColumnControls = ({
     ref: containerRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER + (isChromelessEditor ? ' ' + ClassName.DRAG_CONTROLS_CHROMELESS : ''),
+    className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER + (isChromelessEditor ? ' ' + ClassName.TABLE_CHROMELESS : ''),
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/React.createElement(ColumnControls, {
     editorView: editorView,

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

@@ -82,10 +82,10 @@ export const TableFloatingControls = ({
     return null;
   }
   const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  const wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? ClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + ClassName.DRAG_CONTROLS_CHROMELESS : ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
+  const wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? ClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + ClassName.TABLE_CHROMELESS : ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
   const tablePos = (_findTable = findTable(editorView.state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos;
   const isNested = tablePos !== undefined && isTableNested(editorView.state, tablePos);
-  const shouldShowCornerControls = fg('platform_editor_element_drag_and_drop_ed_24041') ? !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop) || isNested : !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop);
+  const shouldShowCornerControls = !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop) || isNested;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -439,7 +439,7 @@ export const baseTableStyles = props => {
 			}
 		}
 
-		.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.DRAG_CONTROLS_CHROMELESS} {
+		.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_CHROMELESS} {
 			left: -4px;
 		}
 
@@ -447,7 +447,7 @@ export const baseTableStyles = props => {
 			padding: 0 ${tablePadding}px;
 		}
 
-		.${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}.${ClassName.DRAG_CONTROLS_CHROMELESS} {
+		.${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}.${ClassName.TABLE_CHROMELESS} {
 			left: -8px;
 		}
 
@@ -461,10 +461,16 @@ export const baseTableStyles = props => {
 		.${ClassName.TABLE_LEFT_SHADOW} {
 			left: 6px;
 		}
+		.${ClassName.TABLE_LEFT_SHADOW}.${ClassName.TABLE_CHROMELESS} {
+			left: 8px;
+		}
 
 		.${ClassName.TABLE_RIGHT_SHADOW} {
 			left: calc(100% - 6px);
 		}
+		.${ClassName.TABLE_RIGHT_SHADOW}.${ClassName.TABLE_CHROMELESS} {
+			left: calc(100% - 16px);
+		}
 	}
 
 	> .${ClassName.NODEVIEW_WRAPPER} {

package/dist/esm/commands/misc.js

@@ -583,7 +583,7 @@ export var updateWidthToWidest = function updateWidthToWidest(widthToWidest) {
     };
   });
 };
-export var setTableAlignment = function setTableAlignment(newAlignment) {
+export var setTableAlignment = function setTableAlignment(newAlignment, isCommentEditor) {
   return function (_ref2) {
     var tr = _ref2.tr;
     var tableObject = findTable(tr.selection);
@@ -596,7 +596,9 @@ export var setTableAlignment = function setTableAlignment(newAlignment) {
 
     // table uses old breakout values in layout attribute to determine width
     // but that information is lost when alignment changes, so we need to ensure we retain that info
-    if (!tableObject.node.attrs.width) {
+    // If table width is not set in the Comment editor, it means that the table width is inherited from the editor and is "full width".
+    // In that case when switching between alignment options in the Comment editor we should keep the table width unset.
+    if (!tableObject.node.attrs.width && !isCommentEditor) {
       var tableWidth = getTableContainerWidth(tableObject.node);
       nextTableAttrs.width = tableWidth;
     }

package/dist/esm/commands-with-analytics.js

@@ -534,7 +534,7 @@ export var toggleFixedColumnWidthsOptionAnalytics = function toggleFixedColumnWi
     };
   })(editorAnalyticsAPI)(editorCommandToPMCommand(setTableDisplayMode));
 };
-export var setTableAlignmentWithAnalytics = function setTableAlignmentWithAnalytics(editorAnalyticsAPI) {
+export var setTableAlignmentWithAnalytics = function setTableAlignmentWithAnalytics(editorAnalyticsAPI, isCommentEditor) {
   return function (newAlignment, previousAlignment, inputMethod, reason) {
     return withEditorAnalyticsAPI(function (state) {
       var _getSelectedTableInfo14 = getSelectedTableInfo(state.selection),
@@ -556,7 +556,7 @@ export var setTableAlignmentWithAnalytics = function setTableAlignmentWithAnalyt
           reason: reason
         }
       };
-    })(editorAnalyticsAPI)(editorCommandToPMCommand(setTableAlignment(newAlignment)));
+    })(editorAnalyticsAPI)(editorCommandToPMCommand(setTableAlignment(newAlignment, isCommentEditor)));
   };
 };
 export var setTableAlignmentWithTableContentWithPosWithAnalytics = function setTableAlignmentWithTableContentWithPosWithAnalytics(editorAnalyticsAPI) {

package/dist/esm/nodeviews/TableComponent.js

@@ -862,7 +862,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         style: shadowStyle(showBeforeShadow)
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
-        className: ClassName.TABLE_LEFT_SHADOW
+        className: options !== null && options !== void 0 && options.isChromelessEditor && !isDragAndDropEnabled ? ClassName.TABLE_LEFT_SHADOW + ' ' + ClassName.TABLE_CHROMELESS : ClassName.TABLE_LEFT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(ClassName.TABLE_LEFT_SHADOW, " ").concat(ClassName.TABLE_STICKY_SHADOW),
@@ -911,7 +911,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         style: shadowStyle(showAfterShadow)
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
-        className: ClassName.TABLE_RIGHT_SHADOW
+        className: options !== null && options !== void 0 && options.isChromelessEditor && !isDragAndDropEnabled ? ClassName.TABLE_RIGHT_SHADOW + ' ' + ClassName.TABLE_CHROMELESS : ClassName.TABLE_RIGHT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
         style: {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

package/dist/esm/nodeviews/TableContainer.js

@@ -6,6 +6,7 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
+import { getPluginState } from '../pm-plugins/plugin-factory';
 import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { ALIGN_CENTER, ALIGN_START } from '../utils/alignment';
@@ -311,12 +312,14 @@ export var TableContainer = function TableContainer(_ref6) {
       isCommentEditor: isCommentEditor
     }, children);
   }
+  var _getPluginState = getPluginState(editorView.state),
+    isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
   return /*#__PURE__*/React.createElement(InnerContainer, {
     node: node
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: classNames(className, {
-      'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested
+      'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested && !(isChromelessEditor && isDragAndDropEnabled)
     }),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

package/dist/esm/plugin.js

@@ -1,9 +1,8 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
-import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import { tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { IconTable } from '@atlaskit/editor-common/icons';
@@ -30,10 +29,10 @@ import { createPlugin as createStickyHeadersPlugin, findStickyHeaderForTable, pl
 import { createPlugin as createTableOverflowAnalyticsPlugin } from './pm-plugins/table-analytics';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import { createPlugin as createFlexiResizingPlugin, getPluginState as getFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
-import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
+import { tableNodeSpecWithFixedToDOM } from './toDOM';
 import { getToolbarConfig } from './toolbar';
 import FloatingContextualButton from './ui/FloatingContextualButton';
 import FloatingContextualMenu from './ui/FloatingContextualMenu';
@@ -49,39 +48,6 @@ var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
 
 // TODO: duplicating type instead of importing media plugin causing a circular dependency
 
-// TODO: ED-23944 Move this override to `toDOM` function on table adf-schema nodespec
-var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(tableOptions) {
-  if (!fg('platform_editor_lazy-node-views')) {
-    return table;
-  }
-  return _objectSpread(_objectSpread({}, table), {}, {
-    toDOM: function toDOM(node) {
-      var attrs = {
-        'data-number-column': node.attrs.isNumberColumnEnabled,
-        'data-layout': node.attrs.layout,
-        'data-autosize': node.attrs.__autoSize,
-        'data-table-local-id': node.attrs.localId,
-        'data-table-width': node.attrs.width
-      };
-      var colgroup = '';
-      var _pluginConfig = pluginConfig(tableOptions),
-        allowColumnResizing = _pluginConfig.allowColumnResizing;
-      if (allowColumnResizing) {
-        colgroup = ['colgroup', {}].concat(_toConsumableArray(generateColgroup(node)));
-      }
-      return ['div', {
-        class: 'tableView-content-wrap'
-      }, ['div', {
-        class: 'pm-table-container'
-      }, ['div', {
-        class: 'pm-table-wrapper',
-        'data-number-column': node.attrs.isNumberColumnEnabled,
-        'data-layout': node.attrs.layout
-      }, ['table', attrs, colgroup, ['tbody', 0]]]]];
-    }
-  });
-};
-
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
  * from `@atlaskit/editor-core`.
@@ -165,9 +131,14 @@ var tablesPlugin = function tablesPlugin(_ref) {
       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 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, options === null || options === void 0 ? void 0 : options.isCommentEditor)
     },
     nodes: function nodes() {
+      var _pluginConfig = pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions),
+        allowColumnResizing = _pluginConfig.allowColumnResizing;
       return [{
         name: 'table',
-        node: tableNodeSpecWithFixedToDOM(options === null || options === void 0 ? void 0 : options.tableOptions)
+        node: tableNodeSpecWithFixedToDOM({
+          allowColumnResizing: Boolean(allowColumnResizing),
+          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled)
+        })
       }, {
         name: 'tableHeader',
         node: tableHeader

package/dist/esm/toDOM.js

@@ -0,0 +1,68 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { table } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
+export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return table;
+  }
+  return _objectSpread(_objectSpread({}, table), {}, {
+    toDOM: function toDOM(node) {
+      var attrs = {
+        'data-number-column': node.attrs.isNumberColumnEnabled,
+        'data-layout': node.attrs.layout,
+        'data-autosize': node.attrs.__autoSize,
+        'data-table-local-id': node.attrs.localId,
+        'data-table-width': node.attrs.width
+      };
+      var colgroup = '';
+      if (config.allowColumnResizing) {
+        colgroup = ['colgroup', {}].concat(_toConsumableArray(generateColgroup(node)));
+      }
+      var tableContainerDiv = ['div', {
+        class: 'pm-table-container',
+        'data-number-column': node.attrs.isNumberColumnEnabled,
+        'data-layout': node.attrs.layout,
+        'data-testid': 'table-container'
+      }, ['div', {
+        class: 'pm-table-sticky-sentinel-top',
+        'data-testid': 'sticky-sentinel-top'
+      }], ['div', {
+        class: 'pm-table-row-controls-wrapper'
+      }, ['div']], ['div', {
+        class: 'pm-table-with-left-shadow'
+      }], ['div', {
+        class: 'pm-table-wrapper'
+      }, ['table', attrs, ['span', {
+        class: 'pm-table-shadow-sentinel-right'
+      }], ['span', {
+        class: 'pm-table-shadow-sentinel-left'
+      }], colgroup, ['tbody', 0]]], ['div', {
+        class: 'pm-table-with-right-shadow'
+      }], ['div', {
+        class: 'pm-table-sticky-sentinel-bottom',
+        'data-testid': 'sticky-sentinel-bottom'
+      }]];
+      if (!config.tableResizingEnabled) {
+        return ['div', {
+          class: 'tableView-content-wrap'
+        }, tableContainerDiv];
+      }
+      var tableResizingDiv = ['div', {
+        'data-testid': 'table-alignment-container'
+      }, ['div', {
+        class: 'pm-table-resizer-container'
+      }, ['div', {
+        class: 'resizer-item display-handle'
+      }, ['span', {
+        class: 'resizer-hover-zone'
+      }, tableContainerDiv]]]];
+      return ['div', {
+        class: 'tableView-content-wrap'
+      }, tableResizingDiv];
+    }
+  });
+};

package/dist/esm/toolbar.js

@@ -370,7 +370,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           return element;
         };
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
-        var 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) : [];
+        var 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) : [];
         var isCellBackgroundDuplicated = getEditorFeatureFlags().tableDuplicateCellColouring || false;
         var cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent);
         var columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled) : [];
@@ -586,7 +586,7 @@ var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch)
   }
   return false;
 };
-export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) {
+export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor, isCommentEditor) {
   var formatMessage = _ref6.formatMessage;
   var tableObject = findTable(editorState.selection);
   if (!tableObject) {
@@ -618,7 +618,7 @@ export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editor
       icon: icon,
       title: formatMessage(layoutToMessages[value]),
       selected: normaliseAlignment(currentLayout) === value,
-      onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(value, currentLayout, INPUT_METHOD.FLOATING_TB, CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED)
+      onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI, isCommentEditor || false)(value, currentLayout, INPUT_METHOD.FLOATING_TB, CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED)
     }, isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, getDomRef, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) && {
       disabled: value !== 'center'
     });

package/dist/esm/types.js

@@ -91,7 +91,6 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   /** drag and drop controls */
   DRAG_ROW_CONTROLS_WRAPPER: "".concat(tablePrefixSelector, "-drag-row-controls-wrapper"),
   DRAG_ROW_CONTROLS: "".concat(tablePrefixSelector, "-drag-row-controls"),
-  DRAG_CONTROLS_CHROMELESS: "drag-controls-chromeless",
   DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: "".concat(tablePrefixSelector, "-drag-row-floating-insert-dot-wrapper"),
   DRAG_ROW_FLOATING_INSERT_DOT: "".concat(tablePrefixSelector, "-drag-row-floating-insert-dot"),
   DRAG_COLUMN_CONTROLS: "".concat(tablePrefixSelector, "-drag-column-controls"),
@@ -142,6 +141,7 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   TABLE_CELL: tableCellSelector,
   TABLE_HEADER_CELL: tableHeaderSelector,
   TABLE_STICKY: "".concat(tablePrefixSelector, "-sticky"),
+  TABLE_CHROMELESS: "".concat(tablePrefixSelector, "-chromeless"),
   TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
   LAST_ITEM_IN_CELL: "".concat(tablePrefixSelector, "-last-item-in-cell"),
   WITH_COLUMN_INSERT_LINE: "".concat(tablePrefixSelector, "-column-insert-line"),

package/dist/esm/ui/TableFloatingColumnControls/index.js

@@ -75,7 +75,7 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     ref: containerRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER + (isChromelessEditor ? ' ' + ClassName.DRAG_CONTROLS_CHROMELESS : ''),
+    className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER + (isChromelessEditor ? ' ' + ClassName.TABLE_CHROMELESS : ''),
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/React.createElement(ColumnControls, {
     editorView: editorView,

package/dist/esm/ui/TableFloatingControls/index.js

@@ -72,10 +72,10 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
     return null;
   }
   var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  var wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? ClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + ClassName.DRAG_CONTROLS_CHROMELESS : ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
+  var wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? ClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + ClassName.TABLE_CHROMELESS : ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
   var tablePos = (_findTable = findTable(editorView.state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos;
   var isNested = tablePos !== undefined && isTableNested(editorView.state, tablePos);
-  var shouldShowCornerControls = fg('platform_editor_element_drag_and_drop_ed_24041') ? !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop) || isNested : !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop);
+  var shouldShowCornerControls = !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop) || isNested;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766