@atlaskit/editor-plugin-table 10.4.2 → 10.4.4

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @atlaskit/editor-plugin-table
 
+## 10.4.4
+
+### Patch Changes
+
+- [#128159](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128159)
+  [`fa48f40aa6143`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fa48f40aa6143) -
+  ED-26887 Fix flickering in create issue modal when scrolling slowly and there is table inside it
+- Updated dependencies
+
+## 10.4.3
+
+### Patch Changes
+
+- [#126154](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126154)
+  [`be67d47906a7f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/be67d47906a7f) -
+  [ED-27099]
+
+  # Improvements
+
+  Feature Flag: `platform_editor_table_layout_shift_fix`
+
+  - Make all Editor block nodes a proper inline container
+
+  Feature Flag: `platform_editor_render_table_fallback_to_dom_on_ssr`
+
+  - Always render the Table.toDOM when on SSR
+
+  # Clean up
+
+  `platform_editor_exp_lazy_node_views`
+
+  - Make the `tableNodeSpecWithFixedToDOM` the default `Table.toDOM`
+
+  `platform_editor_table_layout_shift_fix`
+
+  - Fix the typo `px` typo
+
 ## 10.4.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableStickyScrollbar.js

@@ -133,16 +133,21 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
   }, {
     key: "sentinelBottomCallback",
     value: function sentinelBottomCallback(entry) {
-      var _entry$rootBounds2;
-      var sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.top) || 0);
+      var _entry$rootBounds2, _entry$rootBounds3;
+      var sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.top) || 0) ||
+      // When editorScrollableElement is the root document or inside modal,
+      // so the boundingClientRect.top will never be less than the rootBounds.top,
+      // so we need to check if the boundingClientRect.top is less than 20% of the rootBounds.height
+      // to determine if the bottom sentinel is above the scroll area
+      entry.boundingClientRect.top < (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.height) || 0) * 0.2 && (0, _platformFeatureFlags.fg)('platform_editor_scroll_table_flickering_fix');
       this.bottomSentinelState = sentinelIsAboveScrollArea ? 'above' : entry.isIntersecting ? 'visible' : 'below';
       this.toggle();
     }
   }, {
     key: "sentinelTopCallback",
     value: function sentinelTopCallback(entry) {
-      var _entry$rootBounds3;
-      var sentinelIsBelowScrollArea = (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.bottom) || 0) < entry.boundingClientRect.top;
+      var _entry$rootBounds4;
+      var sentinelIsBelowScrollArea = (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.bottom) || 0) < entry.boundingClientRect.top;
       this.topSentinelState = sentinelIsBelowScrollArea ? 'below' : entry.isIntersecting ? 'visible' : 'above';
       this.toggle();
     }

package/dist/cjs/nodeviews/toDOM.js

@@ -12,8 +12,6 @@ var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _consts = require("../pm-plugins/table-resizing/utils/consts");
 var _tableContainerStyles = require("./table-container-styles");
@@ -21,9 +19,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) {
   var tableNode = config.isNestingSupported ? _adfSchema.tableWithNestedTable : _adfSchema.table;
-  if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
-    return tableNode;
-  }
   return _objectSpread(_objectSpread({}, tableNode), {}, {
     toDOM: function toDOM(node) {
       var gutterPadding = (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
@@ -76,12 +71,13 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
           class: 'tableView-content-wrap'
         }, tableContainerDiv];
       }
+      var tableWidthAttribute = node.attrs.width ? "".concat(node.attrs.width, "px") : "100%";
       var tableResizingDiv = ['div', {
         'data-testid': 'table-alignment-container',
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: "width: min(calc(100cqw - ".concat(gutterPadding, "px), ").concat(node.attrs.width, "px);")
+        style: "width: min(calc(100cqw - ".concat(gutterPadding, "px), ").concat(tableWidthAttribute, ");")
       }, ['div', {
         class: 'resizer-item display-handle',
         style: (0, _lazyNodeView.convertToInlineCss)({
@@ -93,7 +89,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
           '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))",
-          width: (0, _platformFeatureFlags.fg)('platform_editor_table_layout_shift_fix') ? "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, "px)") : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, ")")
+          width: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(tableWidthAttribute, ")")
         })
       }, ['span', {
         class: 'resizer-hover-zone'

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

@@ -59,6 +59,29 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
     }
     return editorView.state;
   };
+  var nodeViews = (0, _coreUtils.isSSR)() && (0, _platformFeatureFlags.fg)('platform_editor_table_fallback_to_dom_on_ssr') ? undefined : {
+    table: (0, _lazyNodeViews.lazyTableView)({
+      portalProviderAPI: portalProviderAPI,
+      eventDispatcher: eventDispatcher,
+      getEditorContainerWidth: getEditorContainerWidth,
+      getEditorFeatureFlags: getEditorFeatureFlags,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      isCommentEditor: isCommentEditor,
+      isChromelessEditor: isChromelessEditor
+    }),
+    tableRow: (0, _lazyNodeViews.lazyTableRowView)({
+      eventDispatcher: eventDispatcher
+    }),
+    tableCell: (0, _lazyNodeViews.lazyTableCellView)({
+      eventDispatcher: eventDispatcher,
+      pluginInjectionApi: pluginInjectionApi
+    }),
+    tableHeader: (0, _lazyNodeViews.lazyTableHeaderView)({
+      eventDispatcher: eventDispatcher,
+      pluginInjectionApi: pluginInjectionApi
+    })
+  };
   return new _safePlugin.SafePlugin({
     state: state,
     key: _pluginKey.pluginKey,
@@ -275,29 +298,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         }
         return false;
       },
-      nodeViews: {
-        table: (0, _lazyNodeViews.lazyTableView)({
-          portalProviderAPI: portalProviderAPI,
-          eventDispatcher: eventDispatcher,
-          getEditorContainerWidth: getEditorContainerWidth,
-          getEditorFeatureFlags: getEditorFeatureFlags,
-          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-          pluginInjectionApi: pluginInjectionApi,
-          isCommentEditor: isCommentEditor,
-          isChromelessEditor: isChromelessEditor
-        }),
-        tableRow: (0, _lazyNodeViews.lazyTableRowView)({
-          eventDispatcher: eventDispatcher
-        }),
-        tableCell: (0, _lazyNodeViews.lazyTableCellView)({
-          eventDispatcher: eventDispatcher,
-          pluginInjectionApi: pluginInjectionApi
-        }),
-        tableHeader: (0, _lazyNodeViews.lazyTableHeaderView)({
-          eventDispatcher: eventDispatcher,
-          pluginInjectionApi: pluginInjectionApi
-        })
-      },
+      nodeViews: nodeViews,
       handleDOMEvents: {
         focus: _eventHandlers.handleFocus,
         blur: _eventHandlers.handleBlur,

package/dist/es2019/nodeviews/TableStickyScrollbar.js

@@ -107,14 +107,19 @@ export class TableStickyScrollbar {
     }
   }
   sentinelBottomCallback(entry) {
-    var _entry$rootBounds2;
-    const sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.top) || 0);
+    var _entry$rootBounds2, _entry$rootBounds3;
+    const sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.top) || 0) ||
+    // When editorScrollableElement is the root document or inside modal,
+    // so the boundingClientRect.top will never be less than the rootBounds.top,
+    // so we need to check if the boundingClientRect.top is less than 20% of the rootBounds.height
+    // to determine if the bottom sentinel is above the scroll area
+    entry.boundingClientRect.top < (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.height) || 0) * 0.2 && fg('platform_editor_scroll_table_flickering_fix');
     this.bottomSentinelState = sentinelIsAboveScrollArea ? 'above' : entry.isIntersecting ? 'visible' : 'below';
     this.toggle();
   }
   sentinelTopCallback(entry) {
-    var _entry$rootBounds3;
-    const sentinelIsBelowScrollArea = (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.bottom) || 0) < entry.boundingClientRect.top;
+    var _entry$rootBounds4;
+    const sentinelIsBelowScrollArea = (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.bottom) || 0) < entry.boundingClientRect.top;
     this.topSentinelState = sentinelIsBelowScrollArea ? 'below' : entry.isIntersecting ? 'visible' : 'above';
     this.toggle();
   }

package/dist/es2019/nodeviews/toDOM.js

@@ -2,16 +2,11 @@ import kebabCase from 'lodash/kebabCase';
 import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
 import { getAlignmentStyle } from './table-container-styles';
 export const tableNodeSpecWithFixedToDOM = config => {
   const tableNode = config.isNestingSupported ? tableWithNestedTable : table;
-  if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
-    return tableNode;
-  }
   return {
     ...tableNode,
     toDOM: node => {
@@ -60,12 +55,13 @@ export const tableNodeSpecWithFixedToDOM = config => {
           class: 'tableView-content-wrap'
         }, tableContainerDiv];
       }
+      const tableWidthAttribute = node.attrs.width ? `${node.attrs.width}px` : `100%`;
       const tableResizingDiv = ['div', {
         'data-testid': 'table-alignment-container',
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: `width: min(calc(100cqw - ${gutterPadding}px), ${node.attrs.width}px);`
+        style: `width: min(calc(100cqw - ${gutterPadding}px), ${tableWidthAttribute});`
       }, ['div', {
         class: 'resizer-item display-handle',
         style: convertToInlineCss({
@@ -77,7 +73,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
           '--ak-editor-table-min-width': `${tableMinWidth}px`,
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
-          width: fg('platform_editor_table_layout_shift_fix') ? `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${node.attrs.width}px)` : `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${node.attrs.width})`
+          width: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${tableWidthAttribute})`
         })
       }, ['span', {
         class: 'resizer-hover-zone'

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

@@ -1,5 +1,5 @@
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { insideTable } from '@atlaskit/editor-common/core-utils';
+import { insideTable, isSSR } from '@atlaskit/editor-common/core-utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenLayoutNodes, transformSliceToRemoveOpenMultiBodiedExtension, transformSliceToRemoveOpenNestedExpand } from '@atlaskit/editor-common/transforms';
 import { browser, closestElement } from '@atlaskit/editor-common/utils';
@@ -50,6 +50,29 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     }
     return editorView.state;
   };
+  const nodeViews = isSSR() && fg('platform_editor_table_fallback_to_dom_on_ssr') ? undefined : {
+    table: lazyTableView({
+      portalProviderAPI,
+      eventDispatcher,
+      getEditorContainerWidth,
+      getEditorFeatureFlags,
+      dispatchAnalyticsEvent,
+      pluginInjectionApi,
+      isCommentEditor,
+      isChromelessEditor
+    }),
+    tableRow: lazyTableRowView({
+      eventDispatcher
+    }),
+    tableCell: lazyTableCellView({
+      eventDispatcher,
+      pluginInjectionApi
+    }),
+    tableHeader: lazyTableHeaderView({
+      eventDispatcher,
+      pluginInjectionApi
+    })
+  };
   return new SafePlugin({
     state: state,
     key: pluginKey,
@@ -273,29 +296,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         }
         return false;
       },
-      nodeViews: {
-        table: lazyTableView({
-          portalProviderAPI,
-          eventDispatcher,
-          getEditorContainerWidth,
-          getEditorFeatureFlags,
-          dispatchAnalyticsEvent,
-          pluginInjectionApi,
-          isCommentEditor,
-          isChromelessEditor
-        }),
-        tableRow: lazyTableRowView({
-          eventDispatcher
-        }),
-        tableCell: lazyTableCellView({
-          eventDispatcher,
-          pluginInjectionApi
-        }),
-        tableHeader: lazyTableHeaderView({
-          eventDispatcher,
-          pluginInjectionApi
-        })
-      },
+      nodeViews,
       handleDOMEvents: {
         focus: handleFocus,
         blur: handleBlur,

package/dist/esm/nodeviews/TableStickyScrollbar.js

@@ -126,16 +126,21 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
   }, {
     key: "sentinelBottomCallback",
     value: function sentinelBottomCallback(entry) {
-      var _entry$rootBounds2;
-      var sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.top) || 0);
+      var _entry$rootBounds2, _entry$rootBounds3;
+      var sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.top) || 0) ||
+      // When editorScrollableElement is the root document or inside modal,
+      // so the boundingClientRect.top will never be less than the rootBounds.top,
+      // so we need to check if the boundingClientRect.top is less than 20% of the rootBounds.height
+      // to determine if the bottom sentinel is above the scroll area
+      entry.boundingClientRect.top < (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.height) || 0) * 0.2 && fg('platform_editor_scroll_table_flickering_fix');
       this.bottomSentinelState = sentinelIsAboveScrollArea ? 'above' : entry.isIntersecting ? 'visible' : 'below';
       this.toggle();
     }
   }, {
     key: "sentinelTopCallback",
     value: function sentinelTopCallback(entry) {
-      var _entry$rootBounds3;
-      var sentinelIsBelowScrollArea = (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.bottom) || 0) < entry.boundingClientRect.top;
+      var _entry$rootBounds4;
+      var sentinelIsBelowScrollArea = (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.bottom) || 0) < entry.boundingClientRect.top;
       this.topSentinelState = sentinelIsBelowScrollArea ? 'below' : entry.isIntersecting ? 'visible' : 'above';
       this.toggle();
     }

package/dist/esm/nodeviews/toDOM.js

@@ -7,16 +7,11 @@ import kebabCase from 'lodash/kebabCase';
 import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
 import { getAlignmentStyle } from './table-container-styles';
 export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
   var tableNode = config.isNestingSupported ? tableWithNestedTable : table;
-  if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
-    return tableNode;
-  }
   return _objectSpread(_objectSpread({}, tableNode), {}, {
     toDOM: function toDOM(node) {
       var gutterPadding = akEditorGutterPaddingDynamic() * 2;
@@ -69,12 +64,13 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
           class: 'tableView-content-wrap'
         }, tableContainerDiv];
       }
+      var tableWidthAttribute = node.attrs.width ? "".concat(node.attrs.width, "px") : "100%";
       var tableResizingDiv = ['div', {
         'data-testid': 'table-alignment-container',
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: "width: min(calc(100cqw - ".concat(gutterPadding, "px), ").concat(node.attrs.width, "px);")
+        style: "width: min(calc(100cqw - ".concat(gutterPadding, "px), ").concat(tableWidthAttribute, ");")
       }, ['div', {
         class: 'resizer-item display-handle',
         style: convertToInlineCss({
@@ -86,7 +82,7 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
           '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))",
-          width: fg('platform_editor_table_layout_shift_fix') ? "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, "px)") : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, ")")
+          width: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(tableWidthAttribute, ")")
         })
       }, ['span', {
         class: 'resizer-hover-zone'

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

@@ -2,7 +2,7 @@ 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 { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { insideTable } from '@atlaskit/editor-common/core-utils';
+import { insideTable, isSSR } from '@atlaskit/editor-common/core-utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenLayoutNodes, transformSliceToRemoveOpenMultiBodiedExtension, transformSliceToRemoveOpenNestedExpand } from '@atlaskit/editor-common/transforms';
 import { browser, closestElement } from '@atlaskit/editor-common/utils';
@@ -52,6 +52,29 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
     }
     return editorView.state;
   };
+  var nodeViews = isSSR() && fg('platform_editor_table_fallback_to_dom_on_ssr') ? undefined : {
+    table: lazyTableView({
+      portalProviderAPI: portalProviderAPI,
+      eventDispatcher: eventDispatcher,
+      getEditorContainerWidth: getEditorContainerWidth,
+      getEditorFeatureFlags: getEditorFeatureFlags,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      isCommentEditor: isCommentEditor,
+      isChromelessEditor: isChromelessEditor
+    }),
+    tableRow: lazyTableRowView({
+      eventDispatcher: eventDispatcher
+    }),
+    tableCell: lazyTableCellView({
+      eventDispatcher: eventDispatcher,
+      pluginInjectionApi: pluginInjectionApi
+    }),
+    tableHeader: lazyTableHeaderView({
+      eventDispatcher: eventDispatcher,
+      pluginInjectionApi: pluginInjectionApi
+    })
+  };
   return new SafePlugin({
     state: state,
     key: pluginKey,
@@ -268,29 +291,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         }
         return false;
       },
-      nodeViews: {
-        table: lazyTableView({
-          portalProviderAPI: portalProviderAPI,
-          eventDispatcher: eventDispatcher,
-          getEditorContainerWidth: getEditorContainerWidth,
-          getEditorFeatureFlags: getEditorFeatureFlags,
-          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-          pluginInjectionApi: pluginInjectionApi,
-          isCommentEditor: isCommentEditor,
-          isChromelessEditor: isChromelessEditor
-        }),
-        tableRow: lazyTableRowView({
-          eventDispatcher: eventDispatcher
-        }),
-        tableCell: lazyTableCellView({
-          eventDispatcher: eventDispatcher,
-          pluginInjectionApi: pluginInjectionApi
-        }),
-        tableHeader: lazyTableHeaderView({
-          eventDispatcher: eventDispatcher,
-          pluginInjectionApi: pluginInjectionApi
-        })
-      },
+      nodeViews: nodeViews,
       handleDOMEvents: {
         focus: handleFocus,
         blur: handleBlur,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.4.2",
+	"version": "10.4.4",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^102.8.0",
+		"@atlaskit/editor-common": "^102.10.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.0.0",
+		"@atlaskit/tmp-editor-statsig": "^4.1.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/tooltip": "^20.0.0",
@@ -109,6 +109,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_editor_table_fallback_to_dom_on_ssr": {
+			"type": "boolean"
+		},
 		"platform_editor_batch_steps_table": {
 			"type": "boolean"
 		},
@@ -149,9 +152,6 @@
 		"platform_editor_nested_tables_paste_wrap_fix": {
 			"type": "boolean"
 		},
-		"platform_editor_table_layout_shift_fix": {
-			"type": "boolean"
-		},
 		"platform_editor_advanced_layouts_post_fix_patch_4": {
 			"type": "boolean"
 		},
@@ -193,6 +193,9 @@
 		},
 		"platform_editor_number_column_sticky_header_bug": {
 			"type": "boolean"
+		},
+		"platform_editor_scroll_table_flickering_fix": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableStickyScrollbar.ts

@@ -144,7 +144,14 @@ export class TableStickyScrollbar {
 	}
 
 	private sentinelBottomCallback(entry: IntersectionObserverEntry) {
-		const sentinelIsAboveScrollArea = entry.boundingClientRect.top < (entry.rootBounds?.top || 0);
+		const sentinelIsAboveScrollArea =
+			entry.boundingClientRect.top < (entry.rootBounds?.top || 0) ||
+			// When editorScrollableElement is the root document or inside modal,
+			// so the boundingClientRect.top will never be less than the rootBounds.top,
+			// so we need to check if the boundingClientRect.top is less than 20% of the rootBounds.height
+			// to determine if the bottom sentinel is above the scroll area
+			(entry.boundingClientRect.top < ((entry.rootBounds?.height || 0) * 0.2) &&
+			fg('platform_editor_scroll_table_flickering_fix'));
 
 		this.bottomSentinelState = sentinelIsAboveScrollArea
 			? 'above'
@@ -159,6 +166,7 @@ export class TableStickyScrollbar {
 		const sentinelIsBelowScrollArea =
 			(entry.rootBounds?.bottom || 0) < entry.boundingClientRect.top;
 
+
 		this.topSentinelState = sentinelIsBelowScrollArea
 			? 'below'
 			: entry.isIntersecting

package/src/nodeviews/toDOM.ts

@@ -5,8 +5,6 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { DOMOutputSpec, NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
@@ -22,10 +20,6 @@ type Config = {
 export const tableNodeSpecWithFixedToDOM = (config: Config): NodeSpec => {
 	const tableNode = config.isNestingSupported ? tableWithNestedTable : table;
 
-	if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
-		return tableNode;
-	}
-
 	return {
 		...tableNode,
 		toDOM: (node: PMNode): DOMOutputSpec => {
@@ -120,6 +114,8 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): NodeSpec => {
 				];
 			}
 
+			const tableWidthAttribute = node.attrs.width ? `${node.attrs.width}px` : `100%`;
+
 			const tableResizingDiv = [
 				'div',
 				{
@@ -130,7 +126,7 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): NodeSpec => {
 					'div',
 					{
 						class: 'pm-table-resizer-container',
-						style: `width: min(calc(100cqw - ${gutterPadding}px), ${node.attrs.width}px);`,
+						style: `width: min(calc(100cqw - ${gutterPadding}px), ${tableWidthAttribute});`,
 					},
 					[
 						'div',
@@ -145,9 +141,7 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): NodeSpec => {
 								'--ak-editor-table-min-width': `${tableMinWidth}px`,
 								minWidth: 'var(--ak-editor-table-min-width)',
 								maxWidth: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
-								width: fg('platform_editor_table_layout_shift_fix')
-									? `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${node.attrs.width}px)`
-									: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${node.attrs.width})`,
+								width: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${tableWidthAttribute})`,
 							}),
 						},
 						[

package/src/pm-plugins/main.ts

@@ -7,7 +7,7 @@ import {
 	INPUT_METHOD,
 } from '@atlaskit/editor-common/analytics';
 import type { DispatchAnalyticsEvent, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { insideTable } from '@atlaskit/editor-common/core-utils';
+import { insideTable, isSSR } from '@atlaskit/editor-common/core-utils';
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
@@ -130,6 +130,25 @@ export const createPlugin = (
 
 		return editorView.state;
 	};
+
+	const nodeViews =
+		isSSR() && fg('platform_editor_table_fallback_to_dom_on_ssr')
+			? undefined
+			: {
+					table: lazyTableView({
+						portalProviderAPI,
+						eventDispatcher,
+						getEditorContainerWidth,
+						getEditorFeatureFlags,
+						dispatchAnalyticsEvent,
+						pluginInjectionApi,
+						isCommentEditor,
+						isChromelessEditor,
+					}),
+					tableRow: lazyTableRowView({ eventDispatcher }),
+					tableCell: lazyTableCellView({ eventDispatcher, pluginInjectionApi }),
+					tableHeader: lazyTableHeaderView({ eventDispatcher, pluginInjectionApi }),
+				};
 	return new SafePlugin({
 		state: state,
 		key: pluginKey,
@@ -380,21 +399,7 @@ export const createPlugin = (
 				}
 				return false;
 			},
-			nodeViews: {
-				table: lazyTableView({
-					portalProviderAPI,
-					eventDispatcher,
-					getEditorContainerWidth,
-					getEditorFeatureFlags,
-					dispatchAnalyticsEvent,
-					pluginInjectionApi,
-					isCommentEditor,
-					isChromelessEditor,
-				}),
-				tableRow: lazyTableRowView({ eventDispatcher }),
-				tableCell: lazyTableCellView({ eventDispatcher, pluginInjectionApi }),
-				tableHeader: lazyTableHeaderView({ eventDispatcher, pluginInjectionApi }),
-			},
+			nodeViews,
 			handleDOMEvents: {
 				focus: handleFocus,
 				blur: handleBlur,