@atlaskit/editor-plugin-table 7.30.2 → 7.31.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-table
 
+## 7.31.1
+
+### Patch Changes
+
+- [#165078](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165078)
+  [`770231c1e2f01`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/770231c1e2f01) -
+  ED-25611: migrates table plugin from reactdom to portalprovider
+- Updated dependencies
+
+## 7.31.0
+
+### Minor Changes
+
+- [#161296](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161296)
+  [`9a6292ab637fa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9a6292ab637fa) -
+  [ED-25521] Add experiment based gating to the insertion logic for nested tables, so we only allow
+  nesting tables one level deep when the experiment is active
+
+### Patch Changes
+
+- [#163855](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163855)
+  [`893dd8380fd30`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/893dd8380fd30) -
+  [ux] Cleaned up FF platform.confluence.frontend.narrow-full-page-editor-toolbar
+- Updated dependencies
+
 ## 7.30.2
 
 ### Patch Changes

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

@@ -25,7 +25,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 = (0, _pluginFactory.getPluginState)(state),
@@ -37,7 +37,7 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     if (!allowColumnResizing) {
       return false;
     }
-    var decorationsWithWidget = (0, _utils2.buildColumnResizingDecorations)(rowIndex, columnIndex, true, getIntl)({
+    var decorationsWithWidget = (0, _utils2.buildColumnResizingDecorations)(rowIndex, columnIndex, true, getIntl, nodeViewPortalProviderAPI)({
       tr: customTr,
       decorationSet: (0, _plugin.getDecorations)(state)
     });
@@ -69,7 +69,8 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
 };
 var initiateKeyboardColumnResizing = exports.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 = (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
@@ -80,7 +81,7 @@ var initiateKeyboardColumnResizing = exports.initiateKeyboardColumnResizing = fu
       });
     }
     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;
   };
@@ -88,7 +89,8 @@ var initiateKeyboardColumnResizing = exports.initiateKeyboardColumnResizing = fu
 var activateNextResizeArea = exports.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 = (0, _pluginFactory2.getPluginState)(state) || {},
       resizeHandlePos = _ref3.resizeHandlePos;
@@ -134,17 +136,17 @@ var activateNextResizeArea = exports.activateNextResizeArea = function activateN
       // 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/cjs/commands/misc.js

@@ -469,7 +469,7 @@ var hideInsertColumnOrRowButton = exports.hideInsertColumnOrRowButton = function
     return tr.setMeta('addToHistory', false);
   });
 };
-var addResizeHandleDecorations = exports.addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip, isKeyboardResize) {
+var addResizeHandleDecorations = exports.addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip, nodeViewPortalProviderAPI, isKeyboardResize) {
   return (0, _pluginFactory.createCommand)(function (state) {
     var tableNode = (0, _utils2.findTable)(state.selection);
     var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
@@ -481,7 +481,7 @@ var addResizeHandleDecorations = exports.addResizeHandleDecorations = function a
     return {
       type: 'ADD_RESIZE_HANDLE_DECORATIONS',
       data: {
-        decorationSet: (0, _utils3.buildColumnResizingDecorations)(rowIndex, columnIndex, includeTooltip, getIntl)({
+        decorationSet: (0, _utils3.buildColumnResizingDecorations)(rowIndex, columnIndex, includeTooltip, getIntl, nodeViewPortalProviderAPI)({
           tr: state.tr,
           decorationSet: (0, _plugin.getDecorations)(state)
         }),
@@ -495,7 +495,7 @@ var addResizeHandleDecorations = exports.addResizeHandleDecorations = function a
     return tr.setMeta('addToHistory', false);
   });
 };
-var updateResizeHandleDecorations = exports.updateResizeHandleDecorations = function updateResizeHandleDecorations(rowIndex, columnIndex, includeTooltip) {
+var updateResizeHandleDecorations = exports.updateResizeHandleDecorations = function updateResizeHandleDecorations(nodeViewPortalProviderAPI, rowIndex, columnIndex, includeTooltip) {
   return (0, _pluginFactory.createCommand)(function (state) {
     var tableNode = (0, _utils2.findTable)(state.selection);
     var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
@@ -516,7 +516,7 @@ var updateResizeHandleDecorations = exports.updateResizeHandleDecorations = func
     return {
       type: 'UPDATE_RESIZE_HANDLE_DECORATIONS',
       data: {
-        decorationSet: (0, _utils3.buildColumnResizingDecorations)(resolvedRowIndex, resolvedColumnIndex, resolvedIncludeTooltip, getIntl)({
+        decorationSet: (0, _utils3.buildColumnResizingDecorations)(resolvedRowIndex, resolvedColumnIndex, resolvedIncludeTooltip, getIntl, nodeViewPortalProviderAPI)({
           tr: state.tr,
           decorationSet: (0, _plugin.getDecorations)(state)
         }),

package/dist/cjs/event-handlers.js

@@ -254,78 +254,82 @@ var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view
 
 // 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.
-var handleMouseMoveDebounce = (0, _rafSchd.default)(function (view, event, offsetX) {
-  if (!(event.target instanceof HTMLElement)) {
-    return false;
-  }
-  var element = event.target;
-  if ((0, _utils3.isColumnControlsDecorations)(element) || (0, _utils3.isDragColumnFloatingInsertDot)(element)) {
-    var state = view.state,
-      dispatch = view.dispatch;
-    var _getPluginState6 = (0, _pluginFactory2.getPluginState)(state),
-      insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex;
-    var _getColumnOrRowIndex9 = (0, _utils3.getColumnOrRowIndex)(element),
-      _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
-      startIndex = _getColumnOrRowIndex10[0],
-      endIndex = _getColumnOrRowIndex10[1];
-    var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, offsetX, undefined) === 'right' ? endIndex : startIndex;
-    if (positionColumn !== insertColumnButtonIndex) {
-      return (0, _commands.showInsertColumnButton)(positionColumn)(state, dispatch);
+var handleMouseMoveDebounce = function handleMouseMoveDebounce(nodeViewPortalProviderAPI) {
+  return (0, _rafSchd.default)(function (view, event, offsetX) {
+    if (!(event.target instanceof HTMLElement)) {
+      return false;
     }
-  }
-  if ((0, _utils3.isRowControlsButton)(element) || (0, _utils3.isDragRowFloatingInsertDot)(element)) {
-    var _state3 = view.state,
-      _dispatch4 = view.dispatch;
-    var _getPluginState7 = (0, _pluginFactory2.getPluginState)(_state3),
-      insertRowButtonIndex = _getPluginState7.insertRowButtonIndex;
-    var _getColumnOrRowIndex11 = (0, _utils3.getColumnOrRowIndex)(element),
-      _getColumnOrRowIndex12 = (0, _slicedToArray2.default)(_getColumnOrRowIndex11, 2),
-      _startIndex3 = _getColumnOrRowIndex12[0],
-      _endIndex2 = _getColumnOrRowIndex12[1];
-    var positionRow = (0, _utils3.getMousePositionVerticalRelativeByElement)(event) === 'bottom' ? _endIndex2 : _startIndex3;
-    if (positionRow !== insertRowButtonIndex) {
-      return (0, _commands.showInsertRowButton)(positionRow)(_state3, _dispatch4);
+    var element = event.target;
+    if ((0, _utils3.isColumnControlsDecorations)(element) || (0, _utils3.isDragColumnFloatingInsertDot)(element)) {
+      var state = view.state,
+        dispatch = view.dispatch;
+      var _getPluginState6 = (0, _pluginFactory2.getPluginState)(state),
+        insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex;
+      var _getColumnOrRowIndex9 = (0, _utils3.getColumnOrRowIndex)(element),
+        _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
+        startIndex = _getColumnOrRowIndex10[0],
+        endIndex = _getColumnOrRowIndex10[1];
+      var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, offsetX, undefined) === 'right' ? endIndex : startIndex;
+      if (positionColumn !== insertColumnButtonIndex) {
+        return (0, _commands.showInsertColumnButton)(positionColumn)(state, dispatch);
+      }
     }
-  }
-  if (!(0, _utils3.isResizeHandleDecoration)(element) && (0, _utils3.isCell)(element)) {
-    var _positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, offsetX, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
-    if (_positionColumn !== null) {
-      var _state4 = view.state,
-        _dispatch5 = view.dispatch;
-      var _getPluginState8 = (0, _pluginFactory2.getPluginState)(_state4),
-        resizeHandleColumnIndex = _getPluginState8.resizeHandleColumnIndex,
-        resizeHandleRowIndex = _getPluginState8.resizeHandleRowIndex;
-      var isKeyboardResize = (0, _pluginFactory2.getPluginState)(_state4).isKeyboardResize;
-      var tableCell = (0, _utils.closestElement)(element, 'td, th');
-      var cellStartPosition = view.posAtDOM(tableCell, 0);
-      var rect = (0, _utils2.findCellRectClosestToPos)(_state4.doc.resolve(cellStartPosition));
-      if (rect) {
-        var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
-        var rowIndexTarget = rect.top;
-        if ((columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !(0, _utils3.hasResizeHandler)({
-          target: element,
-          columnEndIndexTarget: columnEndIndexTarget
-        })) && !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
-        ) {
-          return (0, _commands.addResizeHandleDecorations)(rowIndexTarget, columnEndIndexTarget, true)(_state4, _dispatch5);
+    if ((0, _utils3.isRowControlsButton)(element) || (0, _utils3.isDragRowFloatingInsertDot)(element)) {
+      var _state3 = view.state,
+        _dispatch4 = view.dispatch;
+      var _getPluginState7 = (0, _pluginFactory2.getPluginState)(_state3),
+        insertRowButtonIndex = _getPluginState7.insertRowButtonIndex;
+      var _getColumnOrRowIndex11 = (0, _utils3.getColumnOrRowIndex)(element),
+        _getColumnOrRowIndex12 = (0, _slicedToArray2.default)(_getColumnOrRowIndex11, 2),
+        _startIndex3 = _getColumnOrRowIndex12[0],
+        _endIndex2 = _getColumnOrRowIndex12[1];
+      var positionRow = (0, _utils3.getMousePositionVerticalRelativeByElement)(event) === 'bottom' ? _endIndex2 : _startIndex3;
+      if (positionRow !== insertRowButtonIndex) {
+        return (0, _commands.showInsertRowButton)(positionRow)(_state3, _dispatch4);
+      }
+    }
+    if (!(0, _utils3.isResizeHandleDecoration)(element) && (0, _utils3.isCell)(element)) {
+      var _positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, offsetX, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
+      if (_positionColumn !== null) {
+        var _state4 = view.state,
+          _dispatch5 = view.dispatch;
+        var _getPluginState8 = (0, _pluginFactory2.getPluginState)(_state4),
+          resizeHandleColumnIndex = _getPluginState8.resizeHandleColumnIndex,
+          resizeHandleRowIndex = _getPluginState8.resizeHandleRowIndex;
+        var isKeyboardResize = (0, _pluginFactory2.getPluginState)(_state4).isKeyboardResize;
+        var tableCell = (0, _utils.closestElement)(element, 'td, th');
+        var cellStartPosition = view.posAtDOM(tableCell, 0);
+        var rect = (0, _utils2.findCellRectClosestToPos)(_state4.doc.resolve(cellStartPosition));
+        if (rect) {
+          var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
+          var rowIndexTarget = rect.top;
+          if ((columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !(0, _utils3.hasResizeHandler)({
+            target: element,
+            columnEndIndexTarget: columnEndIndexTarget
+          })) && !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
+          ) {
+            return (0, _commands.addResizeHandleDecorations)(rowIndexTarget, columnEndIndexTarget, true, nodeViewPortalProviderAPI)(_state4, _dispatch5);
+          }
         }
       }
     }
-  }
-  return false;
-});
-var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, event) {
-  if (!(event.target instanceof HTMLElement)) {
     return false;
-  }
+  });
+};
+var handleMouseMove = exports.handleMouseMove = function handleMouseMove(nodeViewPortalProviderAPI) {
+  return function (view, event) {
+    if (!(event.target instanceof HTMLElement)) {
+      return false;
+    }
 
-  // NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
-  // within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
-  // 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, _utils.browser.gecko ? event.offsetX : NaN);
-  return false;
+    // NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
+    // within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
+    // 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(nodeViewPortalProviderAPI)(view, event, _utils.browser.gecko ? event.offsetX : NaN);
+    return false;
+  };
 };
 function handleTripleClick(view, pos) {
   var state = view.state,

package/dist/cjs/plugin.js

@@ -14,11 +14,15 @@ var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
 var _icons = require("@atlaskit/editor-common/icons");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _nesting = require("@atlaskit/editor-common/nesting");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _insert = require("./commands/insert");
 var _createPluginConfig = require("./create-plugin-config");
 var _plugin = require("./pm-plugins/analytics/plugin");
@@ -48,7 +52,7 @@ var _FloatingInsertButton = _interopRequireDefault(require("./ui/FloatingInsertB
 var _FloatingToolbarLabel = require("./ui/FloatingToolbarLabel/FloatingToolbarLabel");
 var _globalStyles = require("./ui/global-styles");
 var _TableFullWidthLabel = require("./ui/TableFullWidthLabel");
-var _utils = require("./utils");
+var _utils2 = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
@@ -114,7 +118,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       insertTable: function insertTable(analyticsPayload) {
         return function (state, dispatch) {
           var _api$contentInsertion, _api$contentInsertion2;
-          var node = (0, _utils.createTableWithWidth)({
+          var node = (0, _utils2.createTableWithWidth)({
             isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
             isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
             isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
@@ -122,6 +126,21 @@ var tablesPlugin = function tablesPlugin(_ref) {
             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
+          var insertAt;
+          if ((0, _utils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection) && (0, _platformFeatureFlags.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 ((0, _experiments.editorExperiment)('nested-tables-in-tables', false, {
+              exposure: true
+            }) || (0, _nesting.getParentOfTypeCount)(state.schema.nodes.table)(state.selection) > 1) {
+              var positionAfterTopTable = (0, _nesting.getPositionAfterTopParentNodeOfType)(state.schema.nodes.table)(state.selection);
+              if (!positionAfterTopTable) {
+                return false;
+              }
+              insertAt = _state.TextSelection.create(state.doc, positionAfterTopTable);
+            }
+          }
           return (_api$contentInsertion = api === null || api === void 0 || (_api$contentInsertion2 = api.contentInsertion) === null || _api$contentInsertion2 === void 0 || (_api$contentInsertion2 = _api$contentInsertion2.actions) === null || _api$contentInsertion2 === void 0 ? void 0 : _api$contentInsertion2.insert({
             state: state,
             dispatch: dispatch,
@@ -132,7 +151,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
                 attributes: _objectSpread(_objectSpread({}, analyticsPayload.attributes), {}, {
                   localId: node.attrs.localId
                 })
-              })
+              }),
+              insertAt: insertAt
             }
           })) !== null && _api$contentInsertion !== void 0 ? _api$contentInsertion : false;
         };
@@ -188,6 +208,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
             dispatch = _ref2.dispatch,
             portalProviderAPI = _ref2.portalProviderAPI,
+            nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI,
             eventDispatcher = _ref2.eventDispatcher,
             getIntl = _ref2.getIntl;
           var _ref3 = options || {},
@@ -201,12 +222,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
             isCommentEditor = _ref3.isCommentEditor,
             isChromelessEditor = _ref3.isChromelessEditor;
-          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
+          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
         }
       }, {
         name: 'tablePMColResizing',
         plugin: function plugin(_ref4) {
-          var dispatch = _ref4.dispatch;
+          var dispatch = _ref4.dispatch,
+            nodeViewPortalProviderAPI = _ref4.nodeViewPortalProviderAPI;
           var _ref5 = options || {},
             fullWidthEnabled = _ref5.fullWidthEnabled,
             tableOptions = _ref5.tableOptions,
@@ -218,7 +240,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             allowColumnResizing = _pluginConfig2.allowColumnResizing;
           return allowColumnResizing ? (0, _tableResizing.createPlugin)(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',
@@ -231,7 +253,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       {
         name: 'tableKeymap',
         plugin: function plugin(_ref6) {
-          var getIntl = _ref6.getIntl;
+          var getIntl = _ref6.getIntl,
+            nodeViewPortalProviderAPI = _ref6.nodeViewPortalProviderAPI;
           var _ref7 = options || {},
             dragAndDropEnabled = _ref7.dragAndDropEnabled,
             _ref7$isTableScalingE = _ref7.isTableScalingEnabled,
@@ -246,7 +269,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isChromelessEditor = _ref7$isChromelessEdi === void 0 ? false : _ref7$isChromelessEdi,
             _ref7$tableResizingEn = _ref7.tableResizingEnabled,
             tableResizingEnabled = _ref7$tableResizingEn === void 0 ? false : _ref7$tableResizingEn;
-          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableResizingEnabled);
+          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableResizingEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -293,45 +316,46 @@ var tablesPlugin = function tablesPlugin(_ref) {
         }
       }, {
         name: 'tableViewModeSort',
-        plugin: function plugin() {
-          return api !== null && api !== void 0 && api.editorViewMode ? (0, _viewModeSort.createPlugin)(api) : undefined;
+        plugin: function plugin(_ref13) {
+          var nodeViewPortalProviderAPI = _ref13.nodeViewPortalProviderAPI;
+          return api !== null && api !== void 0 && api.editorViewMode ? (0, _viewModeSort.createPlugin)(api, nodeViewPortalProviderAPI) : undefined;
         }
       }, {
         name: 'tableLocalId',
-        plugin: function plugin(_ref13) {
-          var dispatch = _ref13.dispatch;
+        plugin: function plugin(_ref14) {
+          var dispatch = _ref14.dispatch;
           return (0, _tableLocalId.createPlugin)(dispatch);
         }
       }, {
         name: 'tableWidth',
-        plugin: function plugin(_ref14) {
+        plugin: function plugin(_ref15) {
           var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign, _options$isCommentEdi;
-          var dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent,
-            dispatch = _ref14.dispatch;
+          var dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent,
+            dispatch = _ref15.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$isTableAlign = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign !== void 0 ? _options$isTableAlign : false, (_options$isCommentEdi = options === null || options === void 0 ? void 0 : options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
         }
       }, {
         name: 'tableWidthInCommentFix',
-        plugin: function plugin(_ref15) {
+        plugin: function plugin(_ref16) {
           var _options$isTableAlign2;
-          var dispatch = _ref15.dispatch;
+          var dispatch = _ref16.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled && options !== null && options !== void 0 && options.isCommentEditor ? (0, _tableWidthInCommentFix.createPlugin)(dispatch, (_options$isTableAlign2 = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign2 !== void 0 ? _options$isTableAlign2 : false) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {
         name: 'tableOverflowAnalyticsPlugin',
-        plugin: function plugin(_ref16) {
+        plugin: function plugin(_ref17) {
           var _options$tableResizin;
-          var dispatch = _ref16.dispatch,
-            dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
+          var dispatch = _ref17.dispatch,
+            dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
           return (0, _tableAnalytics.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false);
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref17) {
-          var dispatch = _ref17.dispatch,
-            dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref18) {
+          var dispatch = _ref18.dispatch,
+            dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
           return (0, _plugin.createPlugin)(dispatch, dispatchAnalyticsEvent);
         }
       }, {
@@ -362,13 +386,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref18) {
+    contentComponent: function contentComponent(_ref19) {
       var _api$featureFlags;
-      var editorView = _ref18.editorView,
-        popupsMountPoint = _ref18.popupsMountPoint,
-        popupsBoundariesElement = _ref18.popupsBoundariesElement,
-        popupsScrollableElement = _ref18.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
+      var editorView = _ref19.editorView,
+        popupsMountPoint = _ref19.popupsMountPoint,
+        popupsBoundariesElement = _ref19.popupsBoundariesElement,
+        popupsScrollableElement = _ref19.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref19.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -384,32 +408,32 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: _stickyHeaders.pluginKey,
           dragAndDropState: _dragAndDrop.pluginKey
         },
-        render: function render(_ref19) {
-          var resizingPluginState = _ref19.tableResizingPluginState,
-            stickyHeadersState = _ref19.stickyHeadersState,
-            tablePluginState = _ref19.tablePluginState,
-            tableWidthPluginState = _ref19.tableWidthPluginState,
-            dragAndDropState = _ref19.dragAndDropState;
+        render: function render(_ref20) {
+          var resizingPluginState = _ref20.tableResizingPluginState,
+            stickyHeadersState = _ref20.stickyHeadersState,
+            tablePluginState = _ref20.tablePluginState,
+            tableWidthPluginState = _ref20.tableWidthPluginState,
+            dragAndDropState = _ref20.dragAndDropState;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
           var resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
           var isResizing = isColumnResizing || isTableResizing;
           var widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
-          var _ref20 = tablePluginState,
-            tableNode = _ref20.tableNode,
-            tablePos = _ref20.tablePos,
-            targetCellPosition = _ref20.targetCellPosition,
-            isContextualMenuOpen = _ref20.isContextualMenuOpen,
-            tableRef = _ref20.tableRef,
-            pluginConfig = _ref20.pluginConfig,
-            insertColumnButtonIndex = _ref20.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref20.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref20.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref20.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref20.isDragAndDropEnabled,
-            tableWrapperTarget = _ref20.tableWrapperTarget,
-            isCellMenuOpenByKeyboard = _ref20.isCellMenuOpenByKeyboard;
+          var _ref21 = tablePluginState,
+            tableNode = _ref21.tableNode,
+            tablePos = _ref21.tablePos,
+            targetCellPosition = _ref21.targetCellPosition,
+            isContextualMenuOpen = _ref21.isContextualMenuOpen,
+            tableRef = _ref21.tableRef,
+            pluginConfig = _ref21.pluginConfig,
+            insertColumnButtonIndex = _ref21.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref21.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref21.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref21.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref21.isDragAndDropEnabled,
+            tableWrapperTarget = _ref21.tableWrapperTarget,
+            isCellMenuOpenByKeyboard = _ref21.isCellMenuOpenByKeyboard;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
@@ -502,8 +526,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref21) {
-        var formatMessage = _ref21.formatMessage;
+      quickInsert: function quickInsert(_ref22) {
+        var formatMessage = _ref22.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),
@@ -518,7 +542,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             var _api$table;
             // see comment on tablesPlugin.getSharedState on usage
             var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
-            var tableNode = (0, _utils.createTableWithWidth)({
+            var tableNode = (0, _utils2.createTableWithWidth)({
               isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
               isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
               isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
@@ -526,7 +550,24 @@ var tablesPlugin = function tablesPlugin(_ref) {
               isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
               isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableResizingEnabled
             })(state.schema);
-            var tr = insert(tableNode);
+            var tr = state.tr;
+            // If the cursor is inside a table
+            if ((0, _utils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection) && (0, _platformFeatureFlags.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 ((0, _experiments.editorExperiment)('nested-tables-in-tables', false, {
+                exposure: true
+              }) || (0, _nesting.getParentOfTypeCount)(state.schema.nodes.table)(state.selection) > 1) {
+                // Nesting is too deep insert table after the top parent table
+                var positionAfterTopTable = (0, _nesting.getPositionAfterTopParentNodeOfType)(state.schema.nodes.table)(state.selection);
+                tr = (0, _utils.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 || editorAnalyticsAPI.attachAnalyticsEvent({
               action: _analytics.ACTION.INSERTED,
               actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,

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

@@ -24,13 +24,13 @@ var updateLastCellElement = function updateLastCellElement(lastCellElementsDecor
     return (0, _decoration.updateDecorations)(tr.doc, decorationSet, lastCellElementsDecorations, _types.TableDecorations.LAST_CELL_ELEMENT);
   };
 };
-var buildColumnResizingDecorations = exports.buildColumnResizingDecorations = function buildColumnResizingDecorations(rowEndIndex, columnEndIndex, includeTooltip, getIntl) {
+var buildColumnResizingDecorations = exports.buildColumnResizingDecorations = function buildColumnResizingDecorations(rowEndIndex, columnEndIndex, includeTooltip, getIntl, nodeViewPortalProviderAPI) {
   return function (_ref3) {
     var tr = _ref3.tr,
       decorationSet = _ref3.decorationSet;
     var _ref4 = columnEndIndex < 0 ? emptyDecorations : (0, _decoration.createResizeHandleDecoration)(tr, rowEndIndex, {
         right: columnEndIndex
-      }, includeTooltip, getIntl),
+      }, includeTooltip, getIntl, nodeViewPortalProviderAPI),
       _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
       columnResizesDecorations = _ref5[0],
       lastCellElementsDecorations = _ref5[1];