@atlaskit/editor-plugin-table 7.30.2 → 7.31.1

package/dist/es2019/event-handlers.js

@@ -257,7 +257,7 @@ export const handleMouseLeave = (view, event) => {
 
 // IMPORTANT: The mouse move handler has been setup with RAF schedule to avoid Reflows which will occur as some methods
 // need to access the mouse event offset position and also the target clientWidth vallue.
-const handleMouseMoveDebounce = rafSchedule((view, event, offsetX) => {
+const handleMouseMoveDebounce = nodeViewPortalProviderAPI => rafSchedule((view, event, offsetX) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
@@ -313,14 +313,14 @@ const handleMouseMoveDebounce = rafSchedule((view, event, offsetX) => {
           columnEndIndexTarget
         })) && !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
         ) {
-          return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget, true)(state, dispatch);
+          return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget, true, nodeViewPortalProviderAPI)(state, dispatch);
         }
       }
     }
   }
   return false;
 });
-export const handleMouseMove = (view, event) => {
+export const handleMouseMove = nodeViewPortalProviderAPI => (view, event) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
@@ -330,7 +330,7 @@ export const handleMouseMove = (view, event) => {
   // a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
   // in the deferred callback handler.
   // Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
-  handleMouseMoveDebounce(view, event, browser.gecko ? event.offsetX : NaN);
+  handleMouseMoveDebounce(nodeViewPortalProviderAPI)(view, event, browser.gecko ? event.offsetX : NaN);
   return false;
 };
 export function handleTripleClick(view, pos) {

package/dist/es2019/plugin.js

@@ -6,11 +6,15 @@ import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { getParentOfTypeCount, getPositionAfterTopParentNodeOfType } from '@atlaskit/editor-common/nesting';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { insertTableWithSize } from './commands/insert';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
@@ -110,6 +114,21 @@ const tablesPlugin = ({
           isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
           isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableResizingEnabled
         })(state.schema);
+
+        // If the cursor is inside a table
+        let insertAt;
+        if (hasParentNodeOfType(state.schema.nodes.table)(state.selection) && fg('platform_editor_use_nested_table_pm_nodes')) {
+          // If the experiment is disabled, or we're trying to nest deeper than one level, we insert the table after the top table
+          if (editorExperiment('nested-tables-in-tables', false, {
+            exposure: true
+          }) || getParentOfTypeCount(state.schema.nodes.table)(state.selection) > 1) {
+            const positionAfterTopTable = getPositionAfterTopParentNodeOfType(state.schema.nodes.table)(state.selection);
+            if (!positionAfterTopTable) {
+              return false;
+            }
+            insertAt = TextSelection.create(state.doc, positionAfterTopTable);
+          }
+        }
         return (_api$contentInsertion = api === null || api === void 0 ? void 0 : (_api$contentInsertion2 = api.contentInsertion) === null || _api$contentInsertion2 === void 0 ? void 0 : (_api$contentInsertion3 = _api$contentInsertion2.actions) === null || _api$contentInsertion3 === void 0 ? void 0 : _api$contentInsertion3.insert({
           state,
           dispatch,
@@ -122,7 +141,8 @@ const tablesPlugin = ({
                 ...analyticsPayload.attributes,
                 localId: node.attrs.localId
               }
-            }
+            },
+            insertAt
           }
         })) !== null && _api$contentInsertion !== void 0 ? _api$contentInsertion : false;
       }
@@ -178,6 +198,7 @@ const tablesPlugin = ({
           dispatchAnalyticsEvent,
           dispatch,
           portalProviderAPI,
+          nodeViewPortalProviderAPI,
           eventDispatcher,
           getIntl
         }) => {
@@ -193,12 +214,13 @@ const tablesPlugin = ({
             isCommentEditor,
             isChromelessEditor
           } = options || {};
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
         }
       }, {
         name: 'tablePMColResizing',
         plugin: ({
-          dispatch
+          dispatch,
+          nodeViewPortalProviderAPI
         }) => {
           const {
             fullWidthEnabled,
@@ -213,7 +235,7 @@ const tablesPlugin = ({
           } = pluginConfig(tableOptions);
           return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, api, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
         }
       }, {
         name: 'tableEditing',
@@ -224,7 +246,8 @@ const tablesPlugin = ({
       {
         name: 'tableKeymap',
         plugin: ({
-          getIntl
+          getIntl,
+          nodeViewPortalProviderAPI
         }) => {
           const {
             dragAndDropEnabled,
@@ -235,7 +258,7 @@ const tablesPlugin = ({
             isChromelessEditor = false,
             tableResizingEnabled = false
           } = options || {};
-          return keymapPlugin(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableResizingEnabled);
+          return keymapPlugin(defaultGetEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableResizingEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -281,8 +304,10 @@ const tablesPlugin = ({
         }
       }, {
         name: 'tableViewModeSort',
-        plugin: () => {
-          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api) : undefined;
+        plugin: ({
+          nodeViewPortalProviderAPI
+        }) => {
+          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api, nodeViewPortalProviderAPI) : undefined;
         }
       }, {
         name: 'tableLocalId',
@@ -518,7 +543,26 @@ const tablesPlugin = ({
             isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
             isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableResizingEnabled
           })(state.schema);
-          const tr = insert(tableNode);
+          let {
+            tr
+          } = state;
+          // If the cursor is inside a table
+          if (hasParentNodeOfType(state.schema.nodes.table)(state.selection) && fg('platform_editor_use_nested_table_pm_nodes')) {
+            // If the experiment is disabled, or we're trying to nest deeper than one level, we insert the table after the top table
+            if (editorExperiment('nested-tables-in-tables', false, {
+              exposure: true
+            }) || getParentOfTypeCount(state.schema.nodes.table)(state.selection) > 1) {
+              // Nesting is too deep insert table after the top parent table
+              const positionAfterTopTable = getPositionAfterTopParentNodeOfType(state.schema.nodes.table)(state.selection);
+              tr = safeInsert(tableNode, positionAfterTopTable)(tr);
+              tr.scrollIntoView();
+            } else {
+              // Table can be nested in parent table
+              tr = insert(tableNode);
+            }
+          } else {
+            tr = insert(tableNode);
+          }
           editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
             action: ACTION.INSERTED,
             actionSubject: ACTION_SUBJECT.DOCUMENT,

package/dist/es2019/pm-plugins/decorations/utils/column-resizing.js

@@ -10,13 +10,13 @@ const updateLastCellElement = lastCellElementsDecorations => ({
   decorationSet,
   tr
 }) => updateDecorations(tr.doc, decorationSet, lastCellElementsDecorations, TableDecorations.LAST_CELL_ELEMENT);
-export const buildColumnResizingDecorations = (rowEndIndex, columnEndIndex, includeTooltip, getIntl) => ({
+export const buildColumnResizingDecorations = (rowEndIndex, columnEndIndex, includeTooltip, getIntl, nodeViewPortalProviderAPI) => ({
   tr,
   decorationSet
 }) => {
   const [columnResizesDecorations, lastCellElementsDecorations] = columnEndIndex < 0 ? emptyDecorations : createResizeHandleDecoration(tr, rowEndIndex, {
     right: columnEndIndex
-  }, includeTooltip, getIntl);
+  }, includeTooltip, getIntl, nodeViewPortalProviderAPI);
   return composeDecorations([updateColumnResizeHandle(columnResizesDecorations), updateLastCellElement(lastCellElementsDecorations)])({
     decorationSet,
     tr

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

@@ -7,7 +7,7 @@ import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSele
 import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, createTable } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
-export function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
+export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
   var _pluginInjectionApi$a;
   const list = {};
   const ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
@@ -46,17 +46,20 @@ export function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, d
   }
   bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing({
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    nodeViewPortalProviderAPI
   }), list);
   bindKeymapWithCommand(moveRight.common, activateNextResizeArea({
     direction: 1,
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    nodeViewPortalProviderAPI
   }), list);
   bindKeymapWithCommand(moveLeft.common, activateNextResizeArea({
     direction: -1,
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    nodeViewPortalProviderAPI
   }), list);
   bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI, api)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
   bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI, api)(10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);

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

@@ -19,7 +19,7 @@ import { isHeaderRowRequired, transformSliceTableLayoutDefaultToCenter } from '.
 import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) => {
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) => {
   var _accessibilityUtils;
   const state = createPluginState(dispatch, {
     pluginConfig,
@@ -283,7 +283,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         blur: handleBlur,
         mousedown: withCellTracking(handleMouseDown),
         mouseleave: handleMouseLeave,
-        mousemove: whenTableInFocus(handleMouseMove),
+        mousemove: whenTableInFocus(handleMouseMove(nodeViewPortalProviderAPI)),
         mouseenter: handleMouseEnter,
         mouseup: whenTableInFocus(handleMouseUp),
         click: withCellTracking(whenTableInFocus(handleClick))

package/dist/es2019/pm-plugins/table-resizing/event-handlers.js

@@ -15,7 +15,7 @@ import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resize
 import { TABLE_OFFSET_IN_COMMENT_EDITOR } from './utils/consts';
 import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './utils/misc';
 import { scaleResizeState } from './utils/resize-column';
-export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, api, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
+export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
   var _originalTable$attrs;
   const {
     state,
@@ -104,7 +104,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
 
   // When we start resizing a column we need to ensure the underlying tooltip is removed from the decoration to avoid
   // unnecessary tooltips being displayed during drag.
-  updateResizeHandleDecorations(undefined, undefined, false)(state, dispatch);
+  updateResizeHandleDecorations(nodeViewPortalProviderAPI, undefined, undefined, false)(state, dispatch);
 
   // for new column resizing, take the current scaled version of table widths and use those as the basis for resizing
   // implication: the scaled version of the table becomes the source of truth

package/dist/es2019/pm-plugins/table-resizing/plugin.js

@@ -9,7 +9,7 @@ import { pluginKey } from './plugin-key';
 import { getResizeCellPos } from './utils';
 export function createPlugin(dispatch, {
   lastColumnResizable = true
-}, getEditorContainerWidth, getEditorFeatureFlags, api, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
+}, getEditorContainerWidth, getEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
   return new SafePlugin({
     key: pluginKey,
     state: createPluginState(dispatch, {
@@ -51,7 +51,7 @@ export function createPlugin(dispatch, {
             isColumnKeyboardResizeStarted = isKeyboardResize;
           }
           if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
-            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, api, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor)) {
+            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor)) {
               const {
                 state,
                 dispatch

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

@@ -7,16 +7,18 @@
 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';
 import { tableViewModeSortPluginKey as key } from './plugin-key';
 import { getTableElements, toggleSort } from './utils';
-export const createPlugin = api => {
+export const createPlugin = (api, nodeViewPortalProviderAPI) => {
   return new SafePlugin({
     state: {
       init: () => ({
@@ -78,6 +80,7 @@ export const createPlugin = api => {
             const map = TableMap.get(tableNode);
             const hasMergedCells = new Set(map.map).size !== map.map.length;
             map.mapByRow[0].forEach((cell, index) => {
+              const decorationRenderKey = uuid();
               decs.push(Decoration.widget(cell + pos + 2, () => {
                 var _sort$tableId;
                 const element = document.createElement('div');
@@ -96,16 +99,36 @@ export const createPlugin = api => {
                 const {
                   getIntl
                 } = getPluginState(oldState);
-                ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
-                  value: getIntl()
-                }, /*#__PURE__*/createElement(SortingIconWrapper, {
-                  isSortingAllowed: !hasMergedCells,
-                  sortOrdered,
-                  onClick: () => {},
-                  onKeyDown: () => {},
-                  api
-                })), element);
+                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);
+                }
                 return element;
+              }, {
+                destroy: node => {
+                  if (fg('platform_editor_react18_plugin_portalprovider')) {
+                    nodeViewPortalProviderAPI.remove(decorationRenderKey);
+                  } else {
+                    ReactDOM.unmountComponentAtNode(node);
+                  }
+                }
               }));
             });
           });

package/dist/es2019/ui/FloatingContextualButton/FixedButton.js

@@ -86,7 +86,7 @@ export const FixedButton = ({
     if (!fg('platform_editor_breakout_use_css')) {
       return 0;
     }
-    const container = targetCellRef.closest('[data-testid="ak-editor-fp-content-area"]');
+    const container = targetCellRef.closest('[data-editor-container="true"]');
     return (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) || 0;
   }, [targetCellRef]);
   const left = useMemo(() => {

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

@@ -7,7 +7,6 @@ import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles
 import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -122,17 +121,6 @@ const breakoutWidthStyling = () => {
 		}
 	`;
 };
-const stickyHeaderMarginTop = () => {
-  // Exceptional case: can't add this FF to package.json as a new ratcheting rule was added to prevent new LD flags.
-  // This LD flag existed in other packages before the rule was introduced.
-  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
-  if (!fg('platform.confluence.frontend.narrow-full-page-editor-toolbar')) {
-    return css`
-			margin-top: 2px;
-		`;
-  }
-  return css``;
-};
 const viewModeSortStyles = () => {
   return css`
 		th {
@@ -329,9 +317,6 @@ export const baseTableStyles = props => {
 		/* background for where controls apply */
 		background: ${"var(--ds-surface, white)"};
 		box-sizing: content-box;
-
-		${stickyHeaderMarginTop()}
-
 		box-shadow: 0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`};
 		margin-left: -1px;
 

package/dist/es2019/utils/decoration.js

@@ -1,6 +1,7 @@
 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';
 
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
@@ -8,6 +9,7 @@ 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);
@@ -221,7 +223,7 @@ const makeArray = n => Array.from(Array(n).keys());
  *   we will add a new class on the last item for each cell,
  *   hence the second media will receive this class `ClassName.LAST_ITEM_IN_CELL`
  */
-export const createResizeHandleDecoration = (tr, rowIndexTarget, columnEndIndexTarget, includeTooltip = false, getIntl) => {
+export const createResizeHandleDecoration = (tr, rowIndexTarget, columnEndIndexTarget, includeTooltip = false, getIntl, nodeViewPortalProviderAPI) => {
   const emptyResult = [[], []];
   const table = findTable(tr.selection);
   if (!table || !table.node) {
@@ -232,21 +234,36 @@ export const createResizeHandleDecoration = (tr, rowIndexTarget, columnEndIndexT
     return emptyResult;
   }
   const createResizerHandleDecoration = (cellColumnPositioning, columnIndex, rowIndex, cellPos, cellNode) => {
+    const decorationRenderKey = uuid();
     const position = cellPos + cellNode.nodeSize - 1;
     return Decoration.widget(position, () => {
       const element = document.createElement('div');
-      ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
-        value: getIntl()
-      }, /*#__PURE__*/createElement(ColumnResizeWidget, {
-        startIndex: cellColumnPositioning.left,
-        endIndex: cellColumnPositioning.right,
-        includeTooltip
-      })), element);
+      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);
+      }
       return element;
     }, {
       key: `${TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET}_${rowIndex}_${columnIndex}_${includeTooltip ? 'with' : 'no'}-tooltip`,
       destroy: node => {
-        ReactDOM.unmountComponentAtNode(node);
+        if (fg('platform_editor_react18_plugin_portalprovider')) {
+          nodeViewPortalProviderAPI.remove(decorationRenderKey);
+        } else {
+          ReactDOM.unmountComponentAtNode(node);
+        }
       }
     });
   };

package/dist/esm/commands/column-resize.js

@@ -19,7 +19,7 @@ var getTablePluginCommand = function getTablePluginCommand(actionPayload, origin
     return (originalTr || tr).setMeta('addToHistory', false);
   });
 };
-var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosition(rowIndex, columnIndex, nextResizeHandlePos) {
+var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosition(rowIndex, columnIndex, nextResizeHandlePos, nodeViewPortalProviderAPI) {
   return function (state, dispatch) {
     var customTr = state.tr;
     var _getPluginState = getPluginState(state),
@@ -31,7 +31,7 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     if (!allowColumnResizing) {
       return false;
     }
-    var decorationsWithWidget = buildColumnResizingDecorations(rowIndex, columnIndex, true, getIntl)({
+    var decorationsWithWidget = buildColumnResizingDecorations(rowIndex, columnIndex, true, getIntl, nodeViewPortalProviderAPI)({
       tr: customTr,
       decorationSet: getDecorations(state)
     });
@@ -63,7 +63,8 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
 };
 export var initiateKeyboardColumnResizing = function initiateKeyboardColumnResizing(_ref) {
   var ariaNotify = _ref.ariaNotify,
-    getIntl = _ref.getIntl;
+    getIntl = _ref.getIntl,
+    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI;
   return function (state, dispatch, view) {
     var selection = state.selection;
     var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
@@ -74,7 +75,7 @@ export var initiateKeyboardColumnResizing = function initiateKeyboardColumnResiz
       });
     }
     if (selectionRect && cell && view) {
-      return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
+      return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos, nodeViewPortalProviderAPI)(state, dispatch);
     }
     return false;
   };
@@ -82,7 +83,8 @@ export var initiateKeyboardColumnResizing = function initiateKeyboardColumnResiz
 export var activateNextResizeArea = function activateNextResizeArea(_ref2) {
   var direction = _ref2.direction,
     ariaNotify = _ref2.ariaNotify,
-    getIntl = _ref2.getIntl;
+    getIntl = _ref2.getIntl,
+    nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
   return function (state, dispatch, view) {
     var _ref3 = getTableResizingPluginState(state) || {},
       resizeHandlePos = _ref3.resizeHandlePos;
@@ -128,17 +130,17 @@ export var activateNextResizeArea = function activateNextResizeArea(_ref2) {
       // we are somewhere in between the side columns of the table
       var offset = $nextCell.pos - $nextCell.start(-1);
       var rectForNextCell = tableMap.findCell(offset);
-      return updateResizeHandleAndStatePosition(rectForNextCell.top, rectForNextCell.right, $nextCell.pos)(state, dispatch, view);
+      return updateResizeHandleAndStatePosition(rectForNextCell.top, rectForNextCell.right, $nextCell.pos, nodeViewPortalProviderAPI)(state, dispatch, view);
     } else {
       // current position is in the one of the side columns of the table(left or right)
       if (currentCellRect.left === 0) {
         var lastCellInCurrentRow = tableMap.positionAt(currentCellRect.top, tableMap.width - 1, tableNode) + closestTable.start;
         var $lastCell = state.doc.resolve(lastCellInCurrentRow);
-        return updateResizeHandleAndStatePosition(currentCellRect.top, tableMap.width, $lastCell.pos)(state, dispatch, view);
+        return updateResizeHandleAndStatePosition(currentCellRect.top, tableMap.width, $lastCell.pos, nodeViewPortalProviderAPI)(state, dispatch, view);
       } else if (tableMap.width === currentCellRect.right) {
         var firsCellInCurrentRow = tableMap.positionAt(currentCellRect.top, 0, tableNode) + closestTable.start;
         var _$nextCell = state.doc.resolve(firsCellInCurrentRow);
-        return updateResizeHandleAndStatePosition(currentCellRect.top, 1, _$nextCell.pos)(state, dispatch);
+        return updateResizeHandleAndStatePosition(currentCellRect.top, 1, _$nextCell.pos, nodeViewPortalProviderAPI)(state, dispatch);
       }
     }
     return false;

package/dist/esm/commands/misc.js

@@ -462,7 +462,7 @@ export var hideInsertColumnOrRowButton = function hideInsertColumnOrRowButton()
     return tr.setMeta('addToHistory', false);
   });
 };
-export var addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip, isKeyboardResize) {
+export var addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip, nodeViewPortalProviderAPI, isKeyboardResize) {
   return createCommand(function (state) {
     var tableNode = findTable(state.selection);
     var _getPluginState3 = getPluginState(state),
@@ -474,7 +474,7 @@ export var addResizeHandleDecorations = function addResizeHandleDecorations(rowI
     return {
       type: 'ADD_RESIZE_HANDLE_DECORATIONS',
       data: {
-        decorationSet: buildColumnResizingDecorations(rowIndex, columnIndex, includeTooltip, getIntl)({
+        decorationSet: buildColumnResizingDecorations(rowIndex, columnIndex, includeTooltip, getIntl, nodeViewPortalProviderAPI)({
           tr: state.tr,
           decorationSet: getDecorations(state)
         }),
@@ -488,7 +488,7 @@ export var addResizeHandleDecorations = function addResizeHandleDecorations(rowI
     return tr.setMeta('addToHistory', false);
   });
 };
-export var updateResizeHandleDecorations = function updateResizeHandleDecorations(rowIndex, columnIndex, includeTooltip) {
+export var updateResizeHandleDecorations = function updateResizeHandleDecorations(nodeViewPortalProviderAPI, rowIndex, columnIndex, includeTooltip) {
   return createCommand(function (state) {
     var tableNode = findTable(state.selection);
     var _getPluginState4 = getPluginState(state),
@@ -509,7 +509,7 @@ export var updateResizeHandleDecorations = function updateResizeHandleDecoration
     return {
       type: 'UPDATE_RESIZE_HANDLE_DECORATIONS',
       data: {
-        decorationSet: buildColumnResizingDecorations(resolvedRowIndex, resolvedColumnIndex, resolvedIncludeTooltip, getIntl)({
+        decorationSet: buildColumnResizingDecorations(resolvedRowIndex, resolvedColumnIndex, resolvedIncludeTooltip, getIntl, nodeViewPortalProviderAPI)({
           tr: state.tr,
           decorationSet: getDecorations(state)
         }),