@atlaskit/editor-plugin-table 7.24.5 → 7.24.7

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-table
 
+## 7.24.7
+
+### Patch Changes
+
+- [#127699](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127699)
+  [`7fa3a110dc3b6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7fa3a110dc3b6) -
+  Add analytics to track usage of dark mode header cell fix.
+- Updated dependencies
+
+## 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/nodeviews/TableCell.js

@@ -14,6 +14,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _TableNodeViewBase = _interopRequireDefault(require("./TableNodeViewBase"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -45,7 +46,7 @@ var cssVariablePattern = /^VAR\(--.*\)$/;
 var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
   (0, _inherits2.default)(TableCell, _TableNodeView);
   var _super = _createSuper(TableCell);
-  function TableCell(node, view, getPos, eventDispatcher) {
+  function TableCell(node, view, getPos, eventDispatcher, editorAnalyticsAPI) {
     var _this;
     (0, _classCallCheck2.default)(this, TableCell);
     _this = _super.call(this, node, view, getPos, eventDispatcher);
@@ -72,9 +73,17 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
       _this.delayHandle = delayUntilIdle(function () {
         var pos = getPos();
         if (pos) {
-          view.dispatch(view.state.tr.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
+          var tr = view.state.tr;
+          tr.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
           // Ensures dispatch does not contribute to undo history (otherwise user requires multiple undo's to revert table)
-          .setMeta('addToHistory', false));
+          .setMeta('addToHistory', false);
+          editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+            action: _analytics.TABLE_ACTION.TABLE_CELL_BACKGROUND_FIXED,
+            actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+            actionSubjectId: null,
+            eventType: _analytics.EVENT_TYPE.TRACK
+          })(tr);
+          view.dispatch(tr);
         }
       });
     }

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

@@ -52,7 +52,8 @@ var lazyTableView = exports.lazyTableView = function lazyTableView(options) {
 var lazyTableCellView = exports.lazyTableCellView = function lazyTableCellView(options) {
   if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
     return function (node, view, getPos) {
-      return new _TableCell.default(node, view, getPos, options.eventDispatcher);
+      var _options$pluginInject;
+      return new _TableCell.default(node, view, getPos, options.eventDispatcher, (_options$pluginInject = options.pluginInjectionApi) === null || _options$pluginInject === void 0 || (_options$pluginInject = _options$pluginInject.analytics) === null || _options$pluginInject === void 0 ? void 0 : _options$pluginInject.actions);
     };
   }
   var loader = function loader() {
@@ -62,9 +63,11 @@ var lazyTableCellView = exports.lazyTableCellView = function lazyTableCellView(o
     }).then(function (_ref2) {
       var TableCell = _ref2.default;
       return function (node, view, getPos, decorations, getNodeViewOptions) {
+        var _pluginInjectionApi$a;
         var _getNodeViewOptions2 = getNodeViewOptions(),
-          eventDispatcher = _getNodeViewOptions2.eventDispatcher;
-        return new TableCell(node, view, getPos, eventDispatcher);
+          eventDispatcher = _getNodeViewOptions2.eventDispatcher,
+          pluginInjectionApi = _getNodeViewOptions2.pluginInjectionApi;
+        return new TableCell(node, view, getPos, eventDispatcher, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions);
       };
     });
     return result;
@@ -80,7 +83,8 @@ var lazyTableCellView = exports.lazyTableCellView = function lazyTableCellView(o
 var lazyTableHeaderView = exports.lazyTableHeaderView = function lazyTableHeaderView(options) {
   if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
     return function (node, view, getPos) {
-      return new _TableCell.default(node, view, getPos, options.eventDispatcher);
+      var _options$pluginInject2;
+      return new _TableCell.default(node, view, getPos, options.eventDispatcher, (_options$pluginInject2 = options.pluginInjectionApi) === null || _options$pluginInject2 === void 0 || (_options$pluginInject2 = _options$pluginInject2.analytics) === null || _options$pluginInject2 === void 0 ? void 0 : _options$pluginInject2.actions);
     };
   }
   var loader = function loader() {
@@ -90,9 +94,11 @@ var lazyTableHeaderView = exports.lazyTableHeaderView = function lazyTableHeader
     }).then(function (_ref3) {
       var TableCell = _ref3.default;
       return function (node, view, getPos, decorations, getNodeViewOptions) {
+        var _pluginInjectionApi$a2;
         var _getNodeViewOptions3 = getNodeViewOptions(),
-          eventDispatcher = _getNodeViewOptions3.eventDispatcher;
-        return new TableCell(node, view, getPos, eventDispatcher);
+          eventDispatcher = _getNodeViewOptions3.eventDispatcher,
+          pluginInjectionApi = _getNodeViewOptions3.pluginInjectionApi;
+        return new TableCell(node, view, getPos, eventDispatcher, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions);
       };
     });
     return result;

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/pm-plugins/main.js

@@ -267,10 +267,12 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
           eventDispatcher: eventDispatcher
         }),
         tableCell: (0, _lazyNodeViews.lazyTableCellView)({
-          eventDispatcher: eventDispatcher
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi
         }),
         tableHeader: (0, _lazyNodeViews.lazyTableHeaderView)({
-          eventDispatcher: eventDispatcher
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi
         })
       },
       handleDOMEvents: {

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/nodeviews/TableCell.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { fg } from '@atlaskit/platform-feature-flags';
 import TableNodeView from './TableNodeViewBase';
 const DEFAULT_COL_SPAN = 1;
@@ -23,7 +24,7 @@ function delayUntilIdle(cb) {
 }
 const cssVariablePattern = /^VAR\(--.*\)$/;
 export default class TableCell extends TableNodeView {
-  constructor(node, view, getPos, eventDispatcher) {
+  constructor(node, view, getPos, eventDispatcher, editorAnalyticsAPI) {
     super(node, view, getPos, eventDispatcher);
 
     // CONFCLOUD-78239: Previously we had a bug which tried to invert the heading colour of a table
@@ -48,9 +49,17 @@ export default class TableCell extends TableNodeView {
       this.delayHandle = delayUntilIdle(() => {
         const pos = getPos();
         if (pos) {
-          view.dispatch(view.state.tr.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
+          const tr = view.state.tr;
+          tr.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
           // Ensures dispatch does not contribute to undo history (otherwise user requires multiple undo's to revert table)
-          .setMeta('addToHistory', false));
+          .setMeta('addToHistory', false);
+          editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+            action: TABLE_ACTION.TABLE_CELL_BACKGROUND_FIXED,
+            actionSubject: ACTION_SUBJECT.TABLE,
+            actionSubjectId: null,
+            eventType: EVENT_TYPE.TRACK
+          })(tr);
+          view.dispatch(tr);
         }
       });
     }

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

@@ -41,7 +41,8 @@ export const lazyTableView = options => {
 export const lazyTableCellView = options => {
   if (!fg('platform_editor_lazy-node-views')) {
     return (node, view, getPos) => {
-      return new TableCell(node, view, getPos, options.eventDispatcher);
+      var _options$pluginInject, _options$pluginInject2;
+      return new TableCell(node, view, getPos, options.eventDispatcher, (_options$pluginInject = options.pluginInjectionApi) === null || _options$pluginInject === void 0 ? void 0 : (_options$pluginInject2 = _options$pluginInject.analytics) === null || _options$pluginInject2 === void 0 ? void 0 : _options$pluginInject2.actions);
     };
   }
   const loader = () => {
@@ -50,10 +51,12 @@ export const lazyTableCellView = options => {
       default: TableCell
     }) => {
       return (node, view, getPos, decorations, getNodeViewOptions) => {
+        var _pluginInjectionApi$a;
         const {
-          eventDispatcher
+          eventDispatcher,
+          pluginInjectionApi
         } = getNodeViewOptions();
-        return new TableCell(node, view, getPos, eventDispatcher);
+        return new TableCell(node, view, getPos, eventDispatcher, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions);
       };
     });
     return result;
@@ -67,7 +70,8 @@ export const lazyTableCellView = options => {
 export const lazyTableHeaderView = options => {
   if (!fg('platform_editor_lazy-node-views')) {
     return (node, view, getPos) => {
-      return new TableCell(node, view, getPos, options.eventDispatcher);
+      var _options$pluginInject3, _options$pluginInject4;
+      return new TableCell(node, view, getPos, options.eventDispatcher, (_options$pluginInject3 = options.pluginInjectionApi) === null || _options$pluginInject3 === void 0 ? void 0 : (_options$pluginInject4 = _options$pluginInject3.analytics) === null || _options$pluginInject4 === void 0 ? void 0 : _options$pluginInject4.actions);
     };
   }
   const loader = () => {
@@ -76,10 +80,12 @@ export const lazyTableHeaderView = options => {
       default: TableCell
     }) => {
       return (node, view, getPos, decorations, getNodeViewOptions) => {
+        var _pluginInjectionApi$a2;
         const {
-          eventDispatcher
+          eventDispatcher,
+          pluginInjectionApi
         } = getNodeViewOptions();
-        return new TableCell(node, view, getPos, eventDispatcher);
+        return new TableCell(node, view, getPos, eventDispatcher, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions);
       };
     });
     return result;

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/pm-plugins/main.js

@@ -265,10 +265,12 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
           eventDispatcher
         }),
         tableCell: lazyTableCellView({
-          eventDispatcher
+          eventDispatcher,
+          pluginInjectionApi
         }),
         tableHeader: lazyTableHeaderView({
-          eventDispatcher
+          eventDispatcher,
+          pluginInjectionApi
         })
       },
       handleDOMEvents: {

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/nodeviews/TableCell.js

@@ -9,6 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { fg } from '@atlaskit/platform-feature-flags';
 import TableNodeView from './TableNodeViewBase';
 var DEFAULT_COL_SPAN = 1;
@@ -38,7 +39,7 @@ var cssVariablePattern = /^VAR\(--.*\)$/;
 var TableCell = /*#__PURE__*/function (_TableNodeView) {
   _inherits(TableCell, _TableNodeView);
   var _super = _createSuper(TableCell);
-  function TableCell(node, view, getPos, eventDispatcher) {
+  function TableCell(node, view, getPos, eventDispatcher, editorAnalyticsAPI) {
     var _this;
     _classCallCheck(this, TableCell);
     _this = _super.call(this, node, view, getPos, eventDispatcher);
@@ -65,9 +66,17 @@ var TableCell = /*#__PURE__*/function (_TableNodeView) {
       _this.delayHandle = delayUntilIdle(function () {
         var pos = getPos();
         if (pos) {
-          view.dispatch(view.state.tr.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
+          var tr = view.state.tr;
+          tr.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
           // Ensures dispatch does not contribute to undo history (otherwise user requires multiple undo's to revert table)
-          .setMeta('addToHistory', false));
+          .setMeta('addToHistory', false);
+          editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+            action: TABLE_ACTION.TABLE_CELL_BACKGROUND_FIXED,
+            actionSubject: ACTION_SUBJECT.TABLE,
+            actionSubjectId: null,
+            eventType: EVENT_TYPE.TRACK
+          })(tr);
+          view.dispatch(tr);
         }
       });
     }

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

@@ -41,7 +41,8 @@ export var lazyTableView = function lazyTableView(options) {
 export var lazyTableCellView = function lazyTableCellView(options) {
   if (!fg('platform_editor_lazy-node-views')) {
     return function (node, view, getPos) {
-      return new TableCell(node, view, getPos, options.eventDispatcher);
+      var _options$pluginInject;
+      return new TableCell(node, view, getPos, options.eventDispatcher, (_options$pluginInject = options.pluginInjectionApi) === null || _options$pluginInject === void 0 || (_options$pluginInject = _options$pluginInject.analytics) === null || _options$pluginInject === void 0 ? void 0 : _options$pluginInject.actions);
     };
   }
   var loader = function loader() {
@@ -49,9 +50,11 @@ export var lazyTableCellView = function lazyTableCellView(options) {
     './TableCell').then(function (_ref2) {
       var TableCell = _ref2.default;
       return function (node, view, getPos, decorations, getNodeViewOptions) {
+        var _pluginInjectionApi$a;
         var _getNodeViewOptions2 = getNodeViewOptions(),
-          eventDispatcher = _getNodeViewOptions2.eventDispatcher;
-        return new TableCell(node, view, getPos, eventDispatcher);
+          eventDispatcher = _getNodeViewOptions2.eventDispatcher,
+          pluginInjectionApi = _getNodeViewOptions2.pluginInjectionApi;
+        return new TableCell(node, view, getPos, eventDispatcher, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions);
       };
     });
     return result;
@@ -67,7 +70,8 @@ export var lazyTableCellView = function lazyTableCellView(options) {
 export var lazyTableHeaderView = function lazyTableHeaderView(options) {
   if (!fg('platform_editor_lazy-node-views')) {
     return function (node, view, getPos) {
-      return new TableCell(node, view, getPos, options.eventDispatcher);
+      var _options$pluginInject2;
+      return new TableCell(node, view, getPos, options.eventDispatcher, (_options$pluginInject2 = options.pluginInjectionApi) === null || _options$pluginInject2 === void 0 || (_options$pluginInject2 = _options$pluginInject2.analytics) === null || _options$pluginInject2 === void 0 ? void 0 : _options$pluginInject2.actions);
     };
   }
   var loader = function loader() {
@@ -75,9 +79,11 @@ export var lazyTableHeaderView = function lazyTableHeaderView(options) {
     './TableCell').then(function (_ref3) {
       var TableCell = _ref3.default;
       return function (node, view, getPos, decorations, getNodeViewOptions) {
+        var _pluginInjectionApi$a2;
         var _getNodeViewOptions3 = getNodeViewOptions(),
-          eventDispatcher = _getNodeViewOptions3.eventDispatcher;
-        return new TableCell(node, view, getPos, eventDispatcher);
+          eventDispatcher = _getNodeViewOptions3.eventDispatcher,
+          pluginInjectionApi = _getNodeViewOptions3.pluginInjectionApi;
+        return new TableCell(node, view, getPos, eventDispatcher, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions);
       };
     });
     return result;

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/pm-plugins/main.js

@@ -260,10 +260,12 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
           eventDispatcher: eventDispatcher
         }),
         tableCell: lazyTableCellView({
-          eventDispatcher: eventDispatcher
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi
         }),
         tableHeader: lazyTableHeaderView({
-          eventDispatcher: eventDispatcher
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi
         })
       },
       handleDOMEvents: {

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/nodeviews/TableCell.d.ts

@@ -1,10 +1,11 @@
+import { type EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import TableNodeView from './TableNodeViewBase';
 export default class TableCell extends TableNodeView<HTMLElement> implements NodeView {
     private delayHandle;
-    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher);
+    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher, editorAnalyticsAPI: EditorAnalyticsAPI | undefined);
     destroy: () => void;
     update(node: PMNode): boolean;
     private updateNodeView;

package/dist/types/nodeviews/lazy-node-views.d.ts

@@ -21,6 +21,7 @@ type TableViewOptions = {
 export declare const lazyTableView: (options: TableViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
 type TableCellViewOptions = {
     eventDispatcher: EventDispatcher;
+    pluginInjectionApi?: PluginInjectionAPI;
 };
 export declare const lazyTableCellView: (options: TableCellViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor | ((node: PMNode, view: EditorView, getPos: () => number | undefined) => TableCell);
 export declare const lazyTableHeaderView: (options: TableCellViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor | ((node: PMNode, view: EditorView, getPos: () => number | undefined) => TableCell);

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/nodeviews/TableCell.d.ts

@@ -1,10 +1,11 @@
+import { type EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import TableNodeView from './TableNodeViewBase';
 export default class TableCell extends TableNodeView<HTMLElement> implements NodeView {
     private delayHandle;
-    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher);
+    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher, editorAnalyticsAPI: EditorAnalyticsAPI | undefined);
     destroy: () => void;
     update(node: PMNode): boolean;
     private updateNodeView;

package/dist/types-ts4.5/nodeviews/lazy-node-views.d.ts

@@ -21,6 +21,7 @@ type TableViewOptions = {
 export declare const lazyTableView: (options: TableViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
 type TableCellViewOptions = {
     eventDispatcher: EventDispatcher;
+    pluginInjectionApi?: PluginInjectionAPI;
 };
 export declare const lazyTableCellView: (options: TableCellViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor | ((node: PMNode, view: EditorView, getPos: () => number | undefined) => TableCell);
 export declare const lazyTableHeaderView: (options: TableCellViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor | ((node: PMNode, view: EditorView, getPos: () => number | undefined) => TableCell);

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.7",
 	"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.5.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.6.0",

package/src/nodeviews/TableCell.ts

@@ -1,5 +1,11 @@
 import type { CellDomAttrs } from '@atlaskit/adf-schema';
 import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
+import {
+	ACTION_SUBJECT,
+	type EditorAnalyticsAPI,
+	EVENT_TYPE,
+	TABLE_ACTION,
+} from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
@@ -35,6 +41,7 @@ export default class TableCell extends TableNodeView<HTMLElement> implements Nod
 		view: EditorView,
 		getPos: () => number | undefined,
 		eventDispatcher: EventDispatcher,
+		editorAnalyticsAPI: EditorAnalyticsAPI | undefined,
 	) {
 		super(node, view, getPos, eventDispatcher);
 
@@ -55,12 +62,17 @@ export default class TableCell extends TableNodeView<HTMLElement> implements Nod
 			this.delayHandle = delayUntilIdle(() => {
 				const pos = getPos();
 				if (pos) {
-					view.dispatch(
-						view.state.tr
-							.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
-							// Ensures dispatch does not contribute to undo history (otherwise user requires multiple undo's to revert table)
-							.setMeta('addToHistory', false),
-					);
+					const tr = view.state.tr;
+					tr.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
+						// Ensures dispatch does not contribute to undo history (otherwise user requires multiple undo's to revert table)
+						.setMeta('addToHistory', false);
+					editorAnalyticsAPI?.attachAnalyticsEvent({
+						action: TABLE_ACTION.TABLE_CELL_BACKGROUND_FIXED,
+						actionSubject: ACTION_SUBJECT.TABLE,
+						actionSubjectId: null,
+						eventType: EVENT_TYPE.TRACK,
+					})(tr);
+					view.dispatch(tr);
 				}
 			});
 		}

package/src/nodeviews/lazy-node-views.ts

@@ -98,11 +98,18 @@ export const lazyTableView = (options: TableViewOptions) => {
 
 type TableCellViewOptions = {
 	eventDispatcher: EventDispatcher;
+	pluginInjectionApi?: PluginInjectionAPI;
 };
 export const lazyTableCellView = (options: TableCellViewOptions) => {
 	if (!fg('platform_editor_lazy-node-views')) {
 		return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
-			return new TableCell(node, view, getPos, options.eventDispatcher);
+			return new TableCell(
+				node,
+				view,
+				getPos,
+				options.eventDispatcher,
+				options.pluginInjectionApi?.analytics?.actions,
+			);
 		};
 	}
 
@@ -118,9 +125,15 @@ export const lazyTableCellView = (options: TableCellViewOptions) => {
 				decorations: readonly Decoration[],
 				getNodeViewOptions: () => TableCellViewOptions,
 			) => {
-				const { eventDispatcher } = getNodeViewOptions();
+				const { eventDispatcher, pluginInjectionApi } = getNodeViewOptions();
 
-				return new TableCell(node, view, getPos, eventDispatcher);
+				return new TableCell(
+					node,
+					view,
+					getPos,
+					eventDispatcher,
+					pluginInjectionApi?.analytics?.actions,
+				);
 			};
 		});
 
@@ -137,7 +150,13 @@ export const lazyTableCellView = (options: TableCellViewOptions) => {
 export const lazyTableHeaderView = (options: TableCellViewOptions) => {
 	if (!fg('platform_editor_lazy-node-views')) {
 		return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
-			return new TableCell(node, view, getPos, options.eventDispatcher);
+			return new TableCell(
+				node,
+				view,
+				getPos,
+				options.eventDispatcher,
+				options.pluginInjectionApi?.analytics?.actions,
+			);
 		};
 	}
 
@@ -153,9 +172,15 @@ export const lazyTableHeaderView = (options: TableCellViewOptions) => {
 				decorations: readonly Decoration[],
 				getNodeViewOptions: () => TableCellViewOptions,
 			) => {
-				const { eventDispatcher } = getNodeViewOptions();
+				const { eventDispatcher, pluginInjectionApi } = getNodeViewOptions();
 
-				return new TableCell(node, view, getPos, eventDispatcher);
+				return new TableCell(
+					node,
+					view,
+					getPos,
+					eventDispatcher,
+					pluginInjectionApi?.analytics?.actions,
+				);
 			};
 		});
 

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/pm-plugins/main.ts

@@ -364,8 +364,8 @@ export const createPlugin = (
 					isChromelessEditor,
 				}),
 				tableRow: lazyTableRowView({ eventDispatcher }),
-				tableCell: lazyTableCellView({ eventDispatcher }),
-				tableHeader: lazyTableHeaderView({ eventDispatcher }),
+				tableCell: lazyTableCellView({ eventDispatcher, pluginInjectionApi }),
+				tableHeader: lazyTableHeaderView({ eventDispatcher, pluginInjectionApi }),
 			},
 			handleDOMEvents: {
 				focus: handleFocus,

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,
+			];
+		},
+	};
+};