@atlaskit/editor-plugin-table 9.4.0 → 9.5.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 9.5.0
+
+### Minor Changes
+
+- [#112673](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112673)
+  [`df389f09ee177`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/df389f09ee177) -
+  ED-25870 disable table sticky header inside layout for Safari
+
+## 9.4.1
+
+### Patch Changes
+
+- [#112186](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112186)
+  [`9462d8ca2405a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9462d8ca2405a) -
+  Bump adf-schema to 47.2.1
+- Updated dependencies
+
 ## 9.4.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/TableRow.js

@@ -14,6 +14,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _ui = require("@atlaskit/editor-common/ui");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _commands = require("../pm-plugins/sticky-headers/commands");
@@ -343,7 +345,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
         return;
       }
       var table = tree.table;
-      var shouldStick = this.isHeaderSticky();
+      var shouldStick = this.shouldSticky();
       if (this.isSticky !== shouldStick) {
         if (shouldStick) {
           var _this$sentinelData$to;
@@ -355,6 +357,30 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
         }
       }
     }
+  }, {
+    key: "shouldSticky",
+    value: function shouldSticky() {
+      if (
+      // is Safari
+      navigator.userAgent.includes('AppleWebKit') && !navigator.userAgent.includes('Chrome') && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_4')) {
+        var pos = this.getPos();
+        if (typeof pos === 'number') {
+          var $tableRowPos = this.view.state.doc.resolve(pos);
+
+          // layout -> layout column -> table -> table row
+          if ($tableRowPos.depth >= 3) {
+            var _findParentNodeCloses;
+            var isInsideLayout = (_findParentNodeCloses = (0, _utils.findParentNodeClosestToPos)($tableRowPos, function (node) {
+              return node.type.name === 'layoutColumn';
+            })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
+            if (isInsideLayout) {
+              return false;
+            }
+          }
+        }
+      }
+      return this.isHeaderSticky();
+    }
   }, {
     key: "isHeaderSticky",
     value: function isHeaderSticky() {

package/dist/cjs/pm-plugins/utils/decoration.js

@@ -7,14 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.updateDecorations = exports.findControlsHoverDecoration = exports.findColumnControlSelectedDecoration = exports.createRowInsertLine = exports.createResizeHandleDecoration = exports.createControlsHoverDecoration = exports.createColumnSelectedDecoration = exports.createColumnLineResize = exports.createColumnInsertLine = exports.createColumnControlsDecoration = exports.createCellHoverDecoration = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _v = _interopRequireDefault(require("uuid/v4"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../../types");
 var _ColumnResizeWidget = require("../../ui/ColumnResizeWidget");
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
@@ -274,34 +272,20 @@ var createResizeHandleDecoration = exports.createResizeHandleDecoration = functi
     var position = cellPos + cellNode.nodeSize - 1;
     return _view.Decoration.widget(position, function () {
       var element = document.createElement('div');
-      if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
-        nodeViewPortalProviderAPI.render(function () {
-          return /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
-            value: getIntl()
-          }, /*#__PURE__*/(0, _react.createElement)(_ColumnResizeWidget.ColumnResizeWidget, {
-            startIndex: cellColumnPositioning.left,
-            endIndex: cellColumnPositioning.right,
-            includeTooltip: includeTooltip
-          }));
-        }, element, decorationRenderKey);
-      } else {
-        _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
+      nodeViewPortalProviderAPI.render(function () {
+        return /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
           value: getIntl()
         }, /*#__PURE__*/(0, _react.createElement)(_ColumnResizeWidget.ColumnResizeWidget, {
           startIndex: cellColumnPositioning.left,
           endIndex: cellColumnPositioning.right,
           includeTooltip: includeTooltip
-        })), element);
-      }
+        }));
+      }, element, decorationRenderKey);
       return element;
     }, {
       key: "".concat(_types.TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET, "_").concat(rowIndex, "_").concat(columnIndex, "_").concat(includeTooltip ? 'with' : 'no', "-tooltip"),
       destroy: function destroy(node) {
-        if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
-          nodeViewPortalProviderAPI.remove(decorationRenderKey);
-        } else {
-          _reactDom.default.unmountComponentAtNode(node);
-        }
+        nodeViewPortalProviderAPI.remove(decorationRenderKey);
       }
     });
   };

package/dist/cjs/pm-plugins/view-mode-sort/index.js

@@ -9,14 +9,12 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _v = _interopRequireDefault(require("uuid/v4"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _types = require("@atlaskit/editor-common/types");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _SortingIconWrapper = require("../../ui/icons/SortingIconWrapper");
 var _pluginFactory = require("../plugin-factory");
 var _consts = require("./consts");
@@ -122,20 +120,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, nodeViewPor
                 }
                 var _getPluginState = (0, _pluginFactory.getPluginState)(oldState),
                   getIntl = _getPluginState.getIntl;
-                if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
-                  nodeViewPortalProviderAPI.render(function () {
-                    return /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
-                      value: getIntl()
-                    }, /*#__PURE__*/(0, _react.createElement)(_SortingIconWrapper.SortingIconWrapper, {
-                      isSortingAllowed: !hasMergedCells,
-                      sortOrdered: sortOrdered,
-                      onClick: function onClick() {},
-                      onKeyDown: function onKeyDown() {},
-                      api: api
-                    }));
-                  }, element, decorationRenderKey);
-                } else {
-                  _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
+                nodeViewPortalProviderAPI.render(function () {
+                  return /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
                     value: getIntl()
                   }, /*#__PURE__*/(0, _react.createElement)(_SortingIconWrapper.SortingIconWrapper, {
                     isSortingAllowed: !hasMergedCells,
@@ -143,16 +129,12 @@ var createPlugin = exports.createPlugin = function createPlugin(api, nodeViewPor
                     onClick: function onClick() {},
                     onKeyDown: function onKeyDown() {},
                     api: api
-                  })), element);
-                }
+                  }));
+                }, element, decorationRenderKey);
                 return element;
               }, {
                 destroy: function destroy(node) {
-                  if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
-                    nodeViewPortalProviderAPI.remove(decorationRenderKey);
-                  } else {
-                    _reactDom.default.unmountComponentAtNode(node);
-                  }
+                  nodeViewPortalProviderAPI.remove(decorationRenderKey);
                 }
               }));
             });

package/dist/es2019/nodeviews/TableRow.js

@@ -2,6 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -311,7 +313,7 @@ export default class TableRow extends TableNodeView {
     const {
       table
     } = tree;
-    const shouldStick = this.isHeaderSticky();
+    const shouldStick = this.shouldSticky();
     if (this.isSticky !== shouldStick) {
       if (shouldStick) {
         var _this$sentinelData$to;
@@ -323,6 +325,28 @@ export default class TableRow extends TableNodeView {
       }
     }
   }
+  shouldSticky() {
+    if (
+    // is Safari
+    navigator.userAgent.includes('AppleWebKit') && !navigator.userAgent.includes('Chrome') && fg('platform_editor_advanced_layouts_post_fix_patch_4')) {
+      const pos = this.getPos();
+      if (typeof pos === 'number') {
+        const $tableRowPos = this.view.state.doc.resolve(pos);
+
+        // layout -> layout column -> table -> table row
+        if ($tableRowPos.depth >= 3) {
+          var _findParentNodeCloses;
+          const isInsideLayout = (_findParentNodeCloses = findParentNodeClosestToPos($tableRowPos, node => {
+            return node.type.name === 'layoutColumn';
+          })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
+          if (isInsideLayout) {
+            return false;
+          }
+        }
+      }
+    }
+    return this.isHeaderSticky();
+  }
   isHeaderSticky() {
     var _sentinelTop$rootBoun;
     /*

package/dist/es2019/pm-plugins/utils/decoration.js

@@ -1,5 +1,4 @@
 import { createElement } from 'react';
-import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import uuid from 'uuid/v4';
 import { nonNullable } from '@atlaskit/editor-common/utils';
@@ -9,7 +8,6 @@ import { nonNullable } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, TableDecorations } from '../../types';
 import { ColumnResizeWidget } from '../../ui/ColumnResizeWidget';
 const filterDecorationByKey = (key, decorationSet) => decorationSet.find(undefined, undefined, spec => spec.key.indexOf(key) > -1);
@@ -244,32 +242,18 @@ export const createResizeHandleDecoration = (tr, rowIndexTarget, columnEndIndexT
     const position = cellPos + cellNode.nodeSize - 1;
     return Decoration.widget(position, () => {
       const element = document.createElement('div');
-      if (fg('platform_editor_react18_plugin_portalprovider')) {
-        nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(RawIntlProvider, {
-          value: getIntl()
-        }, /*#__PURE__*/createElement(ColumnResizeWidget, {
-          startIndex: cellColumnPositioning.left,
-          endIndex: cellColumnPositioning.right,
-          includeTooltip
-        })), element, decorationRenderKey);
-      } else {
-        ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
-          value: getIntl()
-        }, /*#__PURE__*/createElement(ColumnResizeWidget, {
-          startIndex: cellColumnPositioning.left,
-          endIndex: cellColumnPositioning.right,
-          includeTooltip
-        })), element);
-      }
+      nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(RawIntlProvider, {
+        value: getIntl()
+      }, /*#__PURE__*/createElement(ColumnResizeWidget, {
+        startIndex: cellColumnPositioning.left,
+        endIndex: cellColumnPositioning.right,
+        includeTooltip
+      })), element, decorationRenderKey);
       return element;
     }, {
       key: `${TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET}_${rowIndex}_${columnIndex}_${includeTooltip ? 'with' : 'no'}-tooltip`,
       destroy: node => {
-        if (fg('platform_editor_react18_plugin_portalprovider')) {
-          nodeViewPortalProviderAPI.remove(decorationRenderKey);
-        } else {
-          ReactDOM.unmountComponentAtNode(node);
-        }
+        nodeViewPortalProviderAPI.remove(decorationRenderKey);
       }
     });
   };

package/dist/es2019/pm-plugins/view-mode-sort/index.js

@@ -5,14 +5,12 @@
  */
 
 import { createElement } from 'react';
-import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import uuid from 'uuid/v4';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
 import { getPluginState } from '../plugin-factory';
 import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
@@ -99,35 +97,19 @@ export const createPlugin = (api, nodeViewPortalProviderAPI) => {
                 const {
                   getIntl
                 } = getPluginState(oldState);
-                if (fg('platform_editor_react18_plugin_portalprovider')) {
-                  nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(RawIntlProvider, {
-                    value: getIntl()
-                  }, /*#__PURE__*/createElement(SortingIconWrapper, {
-                    isSortingAllowed: !hasMergedCells,
-                    sortOrdered,
-                    onClick: () => {},
-                    onKeyDown: () => {},
-                    api
-                  })), element, decorationRenderKey);
-                } else {
-                  ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
-                    value: getIntl()
-                  }, /*#__PURE__*/createElement(SortingIconWrapper, {
-                    isSortingAllowed: !hasMergedCells,
-                    sortOrdered,
-                    onClick: () => {},
-                    onKeyDown: () => {},
-                    api
-                  })), element);
-                }
+                nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(RawIntlProvider, {
+                  value: getIntl()
+                }, /*#__PURE__*/createElement(SortingIconWrapper, {
+                  isSortingAllowed: !hasMergedCells,
+                  sortOrdered,
+                  onClick: () => {},
+                  onKeyDown: () => {},
+                  api
+                })), element, decorationRenderKey);
                 return element;
               }, {
                 destroy: node => {
-                  if (fg('platform_editor_react18_plugin_portalprovider')) {
-                    nodeViewPortalProviderAPI.remove(decorationRenderKey);
-                  } else {
-                    ReactDOM.unmountComponentAtNode(node);
-                  }
+                  nodeViewPortalProviderAPI.remove(decorationRenderKey);
                 }
               }));
             });

package/dist/esm/nodeviews/TableRow.js

@@ -9,6 +9,8 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -336,7 +338,7 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
         return;
       }
       var table = tree.table;
-      var shouldStick = this.isHeaderSticky();
+      var shouldStick = this.shouldSticky();
       if (this.isSticky !== shouldStick) {
         if (shouldStick) {
           var _this$sentinelData$to;
@@ -348,6 +350,30 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
         }
       }
     }
+  }, {
+    key: "shouldSticky",
+    value: function shouldSticky() {
+      if (
+      // is Safari
+      navigator.userAgent.includes('AppleWebKit') && !navigator.userAgent.includes('Chrome') && fg('platform_editor_advanced_layouts_post_fix_patch_4')) {
+        var pos = this.getPos();
+        if (typeof pos === 'number') {
+          var $tableRowPos = this.view.state.doc.resolve(pos);
+
+          // layout -> layout column -> table -> table row
+          if ($tableRowPos.depth >= 3) {
+            var _findParentNodeCloses;
+            var isInsideLayout = (_findParentNodeCloses = findParentNodeClosestToPos($tableRowPos, function (node) {
+              return node.type.name === 'layoutColumn';
+            })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
+            if (isInsideLayout) {
+              return false;
+            }
+          }
+        }
+      }
+      return this.isHeaderSticky();
+    }
   }, {
     key: "isHeaderSticky",
     value: function isHeaderSticky() {

package/dist/esm/pm-plugins/utils/decoration.js

@@ -1,6 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { createElement } from 'react';
-import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import uuid from 'uuid/v4';
 import { nonNullable } from '@atlaskit/editor-common/utils';
@@ -10,7 +9,6 @@ import { nonNullable } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, TableDecorations } from '../../types';
 import { ColumnResizeWidget } from '../../ui/ColumnResizeWidget';
 var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
@@ -268,34 +266,20 @@ export var createResizeHandleDecoration = function createResizeHandleDecoration(
     var position = cellPos + cellNode.nodeSize - 1;
     return Decoration.widget(position, function () {
       var element = document.createElement('div');
-      if (fg('platform_editor_react18_plugin_portalprovider')) {
-        nodeViewPortalProviderAPI.render(function () {
-          return /*#__PURE__*/createElement(RawIntlProvider, {
-            value: getIntl()
-          }, /*#__PURE__*/createElement(ColumnResizeWidget, {
-            startIndex: cellColumnPositioning.left,
-            endIndex: cellColumnPositioning.right,
-            includeTooltip: includeTooltip
-          }));
-        }, element, decorationRenderKey);
-      } else {
-        ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
+      nodeViewPortalProviderAPI.render(function () {
+        return /*#__PURE__*/createElement(RawIntlProvider, {
           value: getIntl()
         }, /*#__PURE__*/createElement(ColumnResizeWidget, {
           startIndex: cellColumnPositioning.left,
           endIndex: cellColumnPositioning.right,
           includeTooltip: includeTooltip
-        })), element);
-      }
+        }));
+      }, element, decorationRenderKey);
       return element;
     }, {
       key: "".concat(TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET, "_").concat(rowIndex, "_").concat(columnIndex, "_").concat(includeTooltip ? 'with' : 'no', "-tooltip"),
       destroy: function destroy(node) {
-        if (fg('platform_editor_react18_plugin_portalprovider')) {
-          nodeViewPortalProviderAPI.remove(decorationRenderKey);
-        } else {
-          ReactDOM.unmountComponentAtNode(node);
-        }
+        nodeViewPortalProviderAPI.remove(decorationRenderKey);
       }
     });
   };

package/dist/esm/pm-plugins/view-mode-sort/index.js

@@ -13,14 +13,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 
 import { createElement } from 'react';
-import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import uuid from 'uuid/v4';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
 import { getPluginState } from '../plugin-factory';
 import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
@@ -117,20 +115,8 @@ export var createPlugin = function createPlugin(api, nodeViewPortalProviderAPI)
                 }
                 var _getPluginState = getPluginState(oldState),
                   getIntl = _getPluginState.getIntl;
-                if (fg('platform_editor_react18_plugin_portalprovider')) {
-                  nodeViewPortalProviderAPI.render(function () {
-                    return /*#__PURE__*/createElement(RawIntlProvider, {
-                      value: getIntl()
-                    }, /*#__PURE__*/createElement(SortingIconWrapper, {
-                      isSortingAllowed: !hasMergedCells,
-                      sortOrdered: sortOrdered,
-                      onClick: function onClick() {},
-                      onKeyDown: function onKeyDown() {},
-                      api: api
-                    }));
-                  }, element, decorationRenderKey);
-                } else {
-                  ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
+                nodeViewPortalProviderAPI.render(function () {
+                  return /*#__PURE__*/createElement(RawIntlProvider, {
                     value: getIntl()
                   }, /*#__PURE__*/createElement(SortingIconWrapper, {
                     isSortingAllowed: !hasMergedCells,
@@ -138,16 +124,12 @@ export var createPlugin = function createPlugin(api, nodeViewPortalProviderAPI)
                     onClick: function onClick() {},
                     onKeyDown: function onKeyDown() {},
                     api: api
-                  })), element);
-                }
+                  }));
+                }, element, decorationRenderKey);
                 return element;
               }, {
                 destroy: function destroy(node) {
-                  if (fg('platform_editor_react18_plugin_portalprovider')) {
-                    nodeViewPortalProviderAPI.remove(decorationRenderKey);
-                  } else {
-                    ReactDOM.unmountComponentAtNode(node);
-                  }
+                  nodeViewPortalProviderAPI.remove(decorationRenderKey);
                 }
               }));
             });

package/dist/types/nodeviews/TableRow.d.ts

@@ -42,6 +42,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     private createResizeObserver;
     private createIntersectionObserver;
     private refreshStickyState;
+    private shouldSticky;
     private isHeaderSticky;
     private onTablePluginState;
     private updateStickyHeaderWidth;

package/dist/types/types/index.d.ts

@@ -401,28 +401,25 @@ export declare const TableCssClassName: {
     WITH_ROW_INSERT_LINE_INACTIVE: string;
     WITH_LAST_ROW_INSERT_LINE: string;
     WITH_LAST_ROW_INSERT_LINE_INACTIVE: string;
-    TABLE_CONTAINER: string;
-    TABLE_NODE_WRAPPER: string;
-    TABLE_LEFT_SHADOW: string;
-    TABLE_RIGHT_SHADOW: string;
-    TABLE_STICKY_SHADOW: string;
-    TABLE_STICKY_WRAPPER: string;
-    TABLE_STICKY_SCROLLBAR_CONTAINER: string;
-    TABLE_STICKY_SENTINEL_TOP: string;
-    TABLE_STICKY_SENTINEL_BOTTOM: string;
-    TABLE_STICKY_SCROLLBAR_SENTINEL_TOP: string;
-    TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM: string;
-    TABLE_SHADOW_SENTINEL_LEFT: string;
-    TABLE_SHADOW_SENTINEL_RIGHT: string;
-    TABLE_CELL_NODEVIEW_CONTENT_DOM: string;
-    TABLE_CELL_WRAPPER: string;
-    /**
-     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-6877 Internal documentation for deprecation (no external access)}
-     **/
-    TABLE_HEADER_CELL_WRAPPER: string;
-    TABLE_ROW_CONTROLS_WRAPPER: string;
-    TABLE_COLUMN_CONTROLS_DECORATIONS: string;
-    TABLE_RESIZER_CONTAINER: string;
+    TABLE_CONTAINER: "pm-table-container";
+    TABLE_NODE_WRAPPER: "pm-table-wrapper";
+    TABLE_LEFT_SHADOW: "pm-table-with-left-shadow";
+    TABLE_RIGHT_SHADOW: "pm-table-with-right-shadow";
+    TABLE_STICKY_SHADOW: "pm-table-sticky-shadow";
+    TABLE_STICKY_WRAPPER: "pm-table-sticky-wrapper";
+    TABLE_STICKY_SCROLLBAR_CONTAINER: "pm-table-sticky-scrollbar-container";
+    TABLE_STICKY_SENTINEL_TOP: "pm-table-sticky-sentinel-top";
+    TABLE_STICKY_SENTINEL_BOTTOM: "pm-table-sticky-sentinel-bottom";
+    TABLE_STICKY_SCROLLBAR_SENTINEL_TOP: "pm-table-sticky-scrollbar-sentinel-top";
+    TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM: "pm-table-sticky-scrollbar-sentinel-bottom";
+    TABLE_SHADOW_SENTINEL_LEFT: "pm-table-shadow-sentinel-left";
+    TABLE_SHADOW_SENTINEL_RIGHT: "pm-table-shadow-sentinel-right";
+    TABLE_CELL_NODEVIEW_CONTENT_DOM: "pm-table-cell-nodeview-content-dom";
+    TABLE_CELL_WRAPPER: "pm-table-cell-content-wrap";
+    TABLE_HEADER_CELL_WRAPPER: "pm-table-header-content-wrap";
+    TABLE_ROW_CONTROLS_WRAPPER: "pm-table-row-controls-wrapper";
+    TABLE_COLUMN_CONTROLS_DECORATIONS: "pm-table-column-controls-decoration";
+    TABLE_RESIZER_CONTAINER: "pm-table-resizer-container";
 };
 export interface ToolbarMenuConfig {
     allowHeaderRow?: boolean;

package/dist/types-ts4.5/nodeviews/TableRow.d.ts

@@ -42,6 +42,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     private createResizeObserver;
     private createIntersectionObserver;
     private refreshStickyState;
+    private shouldSticky;
     private isHeaderSticky;
     private onTablePluginState;
     private updateStickyHeaderWidth;

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

@@ -401,28 +401,25 @@ export declare const TableCssClassName: {
     WITH_ROW_INSERT_LINE_INACTIVE: string;
     WITH_LAST_ROW_INSERT_LINE: string;
     WITH_LAST_ROW_INSERT_LINE_INACTIVE: string;
-    TABLE_CONTAINER: string;
-    TABLE_NODE_WRAPPER: string;
-    TABLE_LEFT_SHADOW: string;
-    TABLE_RIGHT_SHADOW: string;
-    TABLE_STICKY_SHADOW: string;
-    TABLE_STICKY_WRAPPER: string;
-    TABLE_STICKY_SCROLLBAR_CONTAINER: string;
-    TABLE_STICKY_SENTINEL_TOP: string;
-    TABLE_STICKY_SENTINEL_BOTTOM: string;
-    TABLE_STICKY_SCROLLBAR_SENTINEL_TOP: string;
-    TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM: string;
-    TABLE_SHADOW_SENTINEL_LEFT: string;
-    TABLE_SHADOW_SENTINEL_RIGHT: string;
-    TABLE_CELL_NODEVIEW_CONTENT_DOM: string;
-    TABLE_CELL_WRAPPER: string;
-    /**
-     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-6877 Internal documentation for deprecation (no external access)}
-     **/
-    TABLE_HEADER_CELL_WRAPPER: string;
-    TABLE_ROW_CONTROLS_WRAPPER: string;
-    TABLE_COLUMN_CONTROLS_DECORATIONS: string;
-    TABLE_RESIZER_CONTAINER: string;
+    TABLE_CONTAINER: "pm-table-container";
+    TABLE_NODE_WRAPPER: "pm-table-wrapper";
+    TABLE_LEFT_SHADOW: "pm-table-with-left-shadow";
+    TABLE_RIGHT_SHADOW: "pm-table-with-right-shadow";
+    TABLE_STICKY_SHADOW: "pm-table-sticky-shadow";
+    TABLE_STICKY_WRAPPER: "pm-table-sticky-wrapper";
+    TABLE_STICKY_SCROLLBAR_CONTAINER: "pm-table-sticky-scrollbar-container";
+    TABLE_STICKY_SENTINEL_TOP: "pm-table-sticky-sentinel-top";
+    TABLE_STICKY_SENTINEL_BOTTOM: "pm-table-sticky-sentinel-bottom";
+    TABLE_STICKY_SCROLLBAR_SENTINEL_TOP: "pm-table-sticky-scrollbar-sentinel-top";
+    TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM: "pm-table-sticky-scrollbar-sentinel-bottom";
+    TABLE_SHADOW_SENTINEL_LEFT: "pm-table-shadow-sentinel-left";
+    TABLE_SHADOW_SENTINEL_RIGHT: "pm-table-shadow-sentinel-right";
+    TABLE_CELL_NODEVIEW_CONTENT_DOM: "pm-table-cell-nodeview-content-dom";
+    TABLE_CELL_WRAPPER: "pm-table-cell-content-wrap";
+    TABLE_HEADER_CELL_WRAPPER: "pm-table-header-content-wrap";
+    TABLE_ROW_CONTROLS_WRAPPER: "pm-table-row-controls-wrapper";
+    TABLE_COLUMN_CONTROLS_DECORATIONS: "pm-table-column-controls-decoration";
+    TABLE_RESIZER_CONTAINER: "pm-table-resizer-container";
 };
 export interface ToolbarMenuConfig {
     allowHeaderRow?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "9.4.0",
+	"version": "9.5.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -27,23 +27,23 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^46.1.0",
+		"@atlaskit/adf-schema": "^47.2.1",
 		"@atlaskit/button": "^20.5.0",
 		"@atlaskit/custom-steps": "^0.10.0",
-		"@atlaskit/editor-common": "^99.10.0",
+		"@atlaskit/editor-common": "^99.14.0",
 		"@atlaskit/editor-palette": "1.7.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.12.0",
-		"@atlaskit/editor-plugin-batch-attribute-updates": "1.3.0",
+		"@atlaskit/editor-plugin-batch-attribute-updates": "1.3.1",
 		"@atlaskit/editor-plugin-content-insertion": "^1.13.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.2.0",
 		"@atlaskit/editor-plugin-guideline": "^1.4.0",
-		"@atlaskit/editor-plugin-selection": "^1.7.0",
+		"@atlaskit/editor-plugin-selection": "^1.8.0",
 		"@atlaskit/editor-plugin-width": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^23.7.0",
+		"@atlaskit/icon": "^23.9.0",
 		"@atlaskit/menu": "^2.14.0",
 		"@atlaskit/platform-feature-flags": "^1.0.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^13.5.0",
 		"@atlaskit/theme": "^15.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.43.0",
+		"@atlaskit/tmp-editor-statsig": "^2.46.0",
 		"@atlaskit/toggle": "^14.1.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@atlaskit/tooltip": "^19.1.0",
@@ -116,9 +116,6 @@
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
 		},
-		"platform_editor_react18_plugin_portalprovider": {
-			"type": "boolean"
-		},
 		"platform_editor_use_nested_table_pm_nodes": {
 			"type": "boolean",
 			"referenceOnly": true
@@ -149,6 +146,9 @@
 		},
 		"platform_editor_table_layout_shift_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_advanced_layouts_post_fix_patch_4": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableRow.ts

@@ -4,7 +4,9 @@ import throttle from 'lodash/throttle';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
@@ -384,7 +386,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 			return;
 		}
 		const { table } = tree;
-		const shouldStick = this.isHeaderSticky();
+		const shouldStick = this.shouldSticky();
 		if (this.isSticky !== shouldStick) {
 			if (shouldStick) {
 				// The rootRect is kept in sync across sentinels so it doesn't matter which one we use.
@@ -396,6 +398,33 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 		}
 	}
 
+	private shouldSticky() {
+		if (
+			// is Safari
+			navigator.userAgent.includes('AppleWebKit') &&
+			!navigator.userAgent.includes('Chrome') &&
+			fg('platform_editor_advanced_layouts_post_fix_patch_4')
+		) {
+			const pos = this.getPos();
+			if (typeof pos === 'number') {
+				const $tableRowPos = this.view.state.doc.resolve(pos);
+
+				// layout -> layout column -> table -> table row
+				if ($tableRowPos.depth >= 3) {
+					const isInsideLayout = findParentNodeClosestToPos($tableRowPos, (node) => {
+						return node.type.name === 'layoutColumn';
+					})?.node;
+
+					if (isInsideLayout) {
+						return false;
+					}
+				}
+			}
+		}
+
+		return this.isHeaderSticky();
+	}
+
 	private isHeaderSticky() {
 		/*
     # Overview

package/src/pm-plugins/utils/decoration.ts

@@ -1,6 +1,5 @@
 import { createElement } from 'react';
 
-import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import type { IntlShape } from 'react-intl-next';
 import uuid from 'uuid/v4';
@@ -20,7 +19,6 @@ import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
 
 import type { Cell, CellColumnPositioning } from '../../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../../types';
@@ -341,23 +339,8 @@ export const createResizeHandleDecoration = (
 			position,
 			() => {
 				const element = document.createElement('div');
-				if (fg('platform_editor_react18_plugin_portalprovider')) {
-					nodeViewPortalProviderAPI.render(
-						() =>
-							createElement(
-								RawIntlProvider,
-								{ value: getIntl() },
-								createElement(ColumnResizeWidget, {
-									startIndex: cellColumnPositioning.left,
-									endIndex: cellColumnPositioning.right,
-									includeTooltip,
-								}),
-							),
-						element,
-						decorationRenderKey,
-					);
-				} else {
-					ReactDOM.render(
+				nodeViewPortalProviderAPI.render(
+					() =>
 						createElement(
 							RawIntlProvider,
 							{ value: getIntl() },
@@ -367,9 +350,9 @@ export const createResizeHandleDecoration = (
 								includeTooltip,
 							}),
 						),
-						element,
-					);
-				}
+					element,
+					decorationRenderKey,
+				);
 				return element;
 			},
 			{
@@ -377,11 +360,7 @@ export const createResizeHandleDecoration = (
 					TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET
 				}_${rowIndex}_${columnIndex}_${includeTooltip ? 'with' : 'no'}-tooltip`,
 				destroy: (node) => {
-					if (fg('platform_editor_react18_plugin_portalprovider')) {
-						nodeViewPortalProviderAPI.remove(decorationRenderKey);
-					} else {
-						ReactDOM.unmountComponentAtNode(node as HTMLDivElement);
-					}
+					nodeViewPortalProviderAPI.remove(decorationRenderKey);
 				},
 			},
 		);

package/src/pm-plugins/view-mode-sort/index.ts

@@ -6,7 +6,6 @@
 
 import { createElement } from 'react';
 
-import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import uuid from 'uuid/v4';
 
@@ -16,7 +15,6 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { fg } from '@atlaskit/platform-feature-flags';
 
 import type tablePlugin from '../../tablePlugin';
 import { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
@@ -111,25 +109,8 @@ export const createPlugin = (
 
 										const { getIntl } = getPluginState(oldState);
 
-										if (fg('platform_editor_react18_plugin_portalprovider')) {
-											nodeViewPortalProviderAPI.render(
-												() =>
-													createElement(
-														RawIntlProvider,
-														{ value: getIntl() },
-														createElement(SortingIconWrapper, {
-															isSortingAllowed: !hasMergedCells,
-															sortOrdered,
-															onClick: () => {},
-															onKeyDown: () => {},
-															api,
-														}),
-													),
-												element,
-												decorationRenderKey,
-											);
-										} else {
-											ReactDOM.render(
+										nodeViewPortalProviderAPI.render(
+											() =>
 												createElement(
 													RawIntlProvider,
 													{ value: getIntl() },
@@ -141,19 +122,15 @@ export const createPlugin = (
 														api,
 													}),
 												),
-												element,
-											);
-										}
+											element,
+											decorationRenderKey,
+										);
 
 										return element;
 									},
 									{
 										destroy: (node) => {
-											if (fg('platform_editor_react18_plugin_portalprovider')) {
-												nodeViewPortalProviderAPI.remove(decorationRenderKey);
-											} else {
-												ReactDOM.unmountComponentAtNode(node as HTMLDivElement);
-											}
+											nodeViewPortalProviderAPI.remove(decorationRenderKey);
 										},
 									},
 								),