@atlaskit/editor-plugin-table 7.24.5 → 7.24.6

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-table
 
+## 7.24.6
+
+### Patch Changes
+
+- [#127242](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127242)
+  [`508ee8b4dcbc8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/508ee8b4dcbc8) -
+  [ED-23944] Improve toDOM helper test
+- Updated dependencies
+
 ## 7.24.5
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -35,10 +34,10 @@ var _stickyHeaders = require("./pm-plugins/sticky-headers");
 var _tableAnalytics = require("./pm-plugins/table-analytics");
 var _tableLocalId = require("./pm-plugins/table-local-id");
 var _tableResizing = require("./pm-plugins/table-resizing");
-var _colgroup = require("./pm-plugins/table-resizing/utils/colgroup");
 var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
 var _tableWidth = require("./pm-plugins/table-width");
 var _viewModeSort = require("./pm-plugins/view-mode-sort");
+var _toDOM = require("./toDOM");
 var _toolbar = require("./toolbar");
 var _FloatingContextualButton = _interopRequireDefault(require("./ui/FloatingContextualButton"));
 var _FloatingContextualMenu = _interopRequireDefault(require("./ui/FloatingContextualMenu"));
@@ -56,39 +55,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 (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
-    return _adfSchema.table;
-  }
-  return _objectSpread(_objectSpread({}, _adfSchema.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 = (0, _createPluginConfig.pluginConfig)(tableOptions),
-        allowColumnResizing = _pluginConfig.allowColumnResizing;
-      if (allowColumnResizing) {
-        colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _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`.
@@ -172,9 +138,14 @@ var tablesPlugin = function tablesPlugin(_ref) {
       insertTableWithSize: (0, _insert.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 = (0, _createPluginConfig.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: (0, _toDOM.tableNodeSpecWithFixedToDOM)({
+          allowColumnResizing: Boolean(allowColumnResizing),
+          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled)
+        })
       }, {
         name: 'tableHeader',
         node: _adfSchema.tableHeader

package/dist/cjs/toDOM.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tableNodeSpecWithFixedToDOM = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colgroup = require("./pm-plugins/table-resizing/utils/colgroup");
+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) { (0, _defineProperty2.default)(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; }
+var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return _adfSchema.table;
+  }
+  return _objectSpread(_objectSpread({}, _adfSchema.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((0, _toConsumableArray2.default)((0, _colgroup.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/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/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/types/toDOM.d.ts

@@ -0,0 +1,7 @@
+import { table } from '@atlaskit/adf-schema';
+type Config = {
+    allowColumnResizing: boolean;
+    tableResizingEnabled: boolean;
+};
+export declare const tableNodeSpecWithFixedToDOM: (config: Config) => typeof table;
+export {};

package/dist/types-ts4.5/toDOM.d.ts

@@ -0,0 +1,7 @@
+import { table } from '@atlaskit/adf-schema';
+type Config = {
+    allowColumnResizing: boolean;
+    tableResizingEnabled: boolean;
+};
+export declare const tableNodeSpecWithFixedToDOM: (config: Config) => typeof table;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.24.5",
+	"version": "7.24.6",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/adf-schema": "^40.3.0",
 		"@atlaskit/button": "^19.1.0",
 		"@atlaskit/custom-steps": "^0.6.0",
-		"@atlaskit/editor-common": "^87.3.0",
+		"@atlaskit/editor-common": "^87.4.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.6.0",

package/src/plugin.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import { tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
 import {
 	ACTION,
@@ -34,7 +34,6 @@ import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
-import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -67,13 +66,13 @@ import {
 	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 type { ColumnResizingPluginState, PluginConfig, TableSharedState } from './types';
 import FloatingContextualButton from './ui/FloatingContextualButton';
@@ -145,55 +144,6 @@ export type TablePlugin = NextEditorPlugin<
 	}
 >;
 
-// TODO: ED-23944 Move this override to `toDOM` function on table adf-schema nodespec
-const tableNodeSpecWithFixedToDOM = (tableOptions?: PluginConfig): typeof table => {
-	if (!fg('platform_editor_lazy-node-views')) {
-		return table;
-	}
-
-	return {
-		...table,
-		toDOM: (node: PMNode): DOMOutputSpec => {
-			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: DOMOutputSpec = '';
-
-			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`.
@@ -300,8 +250,16 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 		},
 
 		nodes() {
+			const { allowColumnResizing } = pluginConfig(options?.tableOptions);
+
 			return [
-				{ name: 'table', node: tableNodeSpecWithFixedToDOM(options?.tableOptions) },
+				{
+					name: 'table',
+					node: tableNodeSpecWithFixedToDOM({
+						allowColumnResizing: Boolean(allowColumnResizing),
+						tableResizingEnabled: Boolean(options?.tableResizingEnabled),
+					}),
+				},
 				{ name: 'tableHeader', node: tableHeader },
 				{ name: 'tableRow', node: tableRow },
 				{ name: 'tableCell', node: tableCell },

package/src/toDOM.ts

@@ -0,0 +1,135 @@
+import { table } from '@atlaskit/adf-schema';
+import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@atlaskit/platform-feature-flags';
+
+import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
+
+type Config = {
+	allowColumnResizing: boolean;
+	tableResizingEnabled: boolean;
+};
+export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
+	if (!fg('platform_editor_lazy-node-views')) {
+		return table;
+	}
+
+	return {
+		...table,
+		toDOM: (node: PMNode): DOMOutputSpec => {
+			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: DOMOutputSpec = '';
+
+			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,
+			];
+		},
+	};
+};