@atlaskit/editor-plugin-table 7.30.2 → 7.31.1

package/dist/esm/event-handlers.js

@@ -245,78 +245,82 @@ export var handleMouseLeave = function 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.
-var handleMouseMoveDebounce = rafSchedule(function (view, event, offsetX) {
-  if (!(event.target instanceof HTMLElement)) {
-    return false;
-  }
-  var element = event.target;
-  if (isColumnControlsDecorations(element) || isDragColumnFloatingInsertDot(element)) {
-    var state = view.state,
-      dispatch = view.dispatch;
-    var _getPluginState6 = getPluginState(state),
-      insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex;
-    var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
-      _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
-      startIndex = _getColumnOrRowIndex10[0],
-      endIndex = _getColumnOrRowIndex10[1];
-    var positionColumn = getMousePositionHorizontalRelativeByElement(event, offsetX, undefined) === 'right' ? endIndex : startIndex;
-    if (positionColumn !== insertColumnButtonIndex) {
-      return showInsertColumnButton(positionColumn)(state, dispatch);
+var handleMouseMoveDebounce = function handleMouseMoveDebounce(nodeViewPortalProviderAPI) {
+  return rafSchedule(function (view, event, offsetX) {
+    if (!(event.target instanceof HTMLElement)) {
+      return false;
     }
-  }
-  if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
-    var _state3 = view.state,
-      _dispatch4 = view.dispatch;
-    var _getPluginState7 = getPluginState(_state3),
-      insertRowButtonIndex = _getPluginState7.insertRowButtonIndex;
-    var _getColumnOrRowIndex11 = getColumnOrRowIndex(element),
-      _getColumnOrRowIndex12 = _slicedToArray(_getColumnOrRowIndex11, 2),
-      _startIndex3 = _getColumnOrRowIndex12[0],
-      _endIndex2 = _getColumnOrRowIndex12[1];
-    var positionRow = getMousePositionVerticalRelativeByElement(event) === 'bottom' ? _endIndex2 : _startIndex3;
-    if (positionRow !== insertRowButtonIndex) {
-      return showInsertRowButton(positionRow)(_state3, _dispatch4);
+    var element = event.target;
+    if (isColumnControlsDecorations(element) || isDragColumnFloatingInsertDot(element)) {
+      var state = view.state,
+        dispatch = view.dispatch;
+      var _getPluginState6 = getPluginState(state),
+        insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex;
+      var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
+        _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
+        startIndex = _getColumnOrRowIndex10[0],
+        endIndex = _getColumnOrRowIndex10[1];
+      var positionColumn = getMousePositionHorizontalRelativeByElement(event, offsetX, undefined) === 'right' ? endIndex : startIndex;
+      if (positionColumn !== insertColumnButtonIndex) {
+        return showInsertColumnButton(positionColumn)(state, dispatch);
+      }
     }
-  }
-  if (!isResizeHandleDecoration(element) && isCell(element)) {
-    var _positionColumn = getMousePositionHorizontalRelativeByElement(event, offsetX, RESIZE_HANDLE_AREA_DECORATION_GAP);
-    if (_positionColumn !== null) {
-      var _state4 = view.state,
-        _dispatch5 = view.dispatch;
-      var _getPluginState8 = getPluginState(_state4),
-        resizeHandleColumnIndex = _getPluginState8.resizeHandleColumnIndex,
-        resizeHandleRowIndex = _getPluginState8.resizeHandleRowIndex;
-      var isKeyboardResize = getPluginState(_state4).isKeyboardResize;
-      var tableCell = closestElement(element, 'td, th');
-      var cellStartPosition = view.posAtDOM(tableCell, 0);
-      var rect = findCellRectClosestToPos(_state4.doc.resolve(cellStartPosition));
-      if (rect) {
-        var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
-        var rowIndexTarget = rect.top;
-        if ((columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
-          target: element,
-          columnEndIndexTarget: columnEndIndexTarget
-        })) && !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
-        ) {
-          return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget, true)(_state4, _dispatch5);
+    if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
+      var _state3 = view.state,
+        _dispatch4 = view.dispatch;
+      var _getPluginState7 = getPluginState(_state3),
+        insertRowButtonIndex = _getPluginState7.insertRowButtonIndex;
+      var _getColumnOrRowIndex11 = getColumnOrRowIndex(element),
+        _getColumnOrRowIndex12 = _slicedToArray(_getColumnOrRowIndex11, 2),
+        _startIndex3 = _getColumnOrRowIndex12[0],
+        _endIndex2 = _getColumnOrRowIndex12[1];
+      var positionRow = getMousePositionVerticalRelativeByElement(event) === 'bottom' ? _endIndex2 : _startIndex3;
+      if (positionRow !== insertRowButtonIndex) {
+        return showInsertRowButton(positionRow)(_state3, _dispatch4);
+      }
+    }
+    if (!isResizeHandleDecoration(element) && isCell(element)) {
+      var _positionColumn = getMousePositionHorizontalRelativeByElement(event, offsetX, RESIZE_HANDLE_AREA_DECORATION_GAP);
+      if (_positionColumn !== null) {
+        var _state4 = view.state,
+          _dispatch5 = view.dispatch;
+        var _getPluginState8 = getPluginState(_state4),
+          resizeHandleColumnIndex = _getPluginState8.resizeHandleColumnIndex,
+          resizeHandleRowIndex = _getPluginState8.resizeHandleRowIndex;
+        var isKeyboardResize = getPluginState(_state4).isKeyboardResize;
+        var tableCell = closestElement(element, 'td, th');
+        var cellStartPosition = view.posAtDOM(tableCell, 0);
+        var rect = findCellRectClosestToPos(_state4.doc.resolve(cellStartPosition));
+        if (rect) {
+          var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
+          var rowIndexTarget = rect.top;
+          if ((columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
+            target: element,
+            columnEndIndexTarget: columnEndIndexTarget
+          })) && !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
+          ) {
+            return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget, true, nodeViewPortalProviderAPI)(_state4, _dispatch5);
+          }
         }
       }
     }
-  }
-  return false;
-});
-export var handleMouseMove = function handleMouseMove(view, event) {
-  if (!(event.target instanceof HTMLElement)) {
     return false;
-  }
+  });
+};
+export var 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, 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, browser.gecko ? event.offsetX : NaN);
+    return false;
+  };
 };
 export function handleTripleClick(view, pos) {
   var state = view.state,

package/dist/esm/plugin.js

@@ -9,11 +9,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';
@@ -115,6 +119,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 (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) {
+              var 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 || (_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,
@@ -125,7 +144,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;
         };
@@ -181,6 +201,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 || {},
@@ -194,12 +215,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
             isCommentEditor = _ref3.isCommentEditor,
             isChromelessEditor = _ref3.isChromelessEditor;
-          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: function plugin(_ref4) {
-          var dispatch = _ref4.dispatch;
+          var dispatch = _ref4.dispatch,
+            nodeViewPortalProviderAPI = _ref4.nodeViewPortalProviderAPI;
           var _ref5 = options || {},
             fullWidthEnabled = _ref5.fullWidthEnabled,
             tableOptions = _ref5.tableOptions,
@@ -211,7 +233,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             allowColumnResizing = _pluginConfig2.allowColumnResizing;
           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 @@ 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,
@@ -239,7 +262,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 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',
@@ -286,45 +309,46 @@ var tablesPlugin = function tablesPlugin(_ref) {
         }
       }, {
         name: 'tableViewModeSort',
-        plugin: function plugin() {
-          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api) : undefined;
+        plugin: function plugin(_ref13) {
+          var nodeViewPortalProviderAPI = _ref13.nodeViewPortalProviderAPI;
+          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api, nodeViewPortalProviderAPI) : undefined;
         }
       }, {
         name: 'tableLocalId',
-        plugin: function plugin(_ref13) {
-          var dispatch = _ref13.dispatch;
+        plugin: function plugin(_ref14) {
+          var dispatch = _ref14.dispatch;
           return createTableLocalIdPlugin(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 ? createTableWidthPlugin(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 ? createTableWidthInCommentFixPlugin(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 createTableOverflowAnalyticsPlugin(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 createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent);
         }
       }, {
@@ -355,13 +379,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.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -377,32 +401,32 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: stickyHeadersPluginKey,
           dragAndDropState: dragAndDropPluginKey
         },
-        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 ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
@@ -495,8 +519,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.table),
@@ -519,7 +543,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 (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
+                var 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 || editorAnalyticsAPI.attachAnalyticsEvent({
               action: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.DOCUMENT,

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

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

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

@@ -7,19 +7,19 @@ 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) {
+export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled) {
   var _pluginInjectionApi$a;
-  var isTableScalingEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  var isTableAlignmentEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var isFullWidthEnabled = arguments.length > 6 ? arguments[6] : undefined;
-  var pluginInjectionApi = arguments.length > 7 ? arguments[7] : undefined;
-  var getIntl = arguments.length > 8 ? arguments[8] : undefined;
-  var isCellBackgroundDuplicated = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
-  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
-  var shouldUseIncreasedScalingPercent = arguments.length > 11 ? arguments[11] : undefined;
-  var isCommentEditor = arguments.length > 12 ? arguments[12] : undefined;
-  var isChromelessEditor = arguments.length > 13 ? arguments[13] : undefined;
-  var isTableResizingEnabled = arguments.length > 14 ? arguments[14] : undefined;
+  var isTableScalingEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var isTableAlignmentEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var isFullWidthEnabled = arguments.length > 7 ? arguments[7] : undefined;
+  var pluginInjectionApi = arguments.length > 8 ? arguments[8] : undefined;
+  var getIntl = arguments.length > 9 ? arguments[9] : undefined;
+  var isCellBackgroundDuplicated = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
+  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 12 ? arguments[12] : undefined;
+  var isCommentEditor = arguments.length > 13 ? arguments[13] : undefined;
+  var isChromelessEditor = arguments.length > 14 ? arguments[14] : undefined;
+  var isTableResizingEnabled = arguments.length > 15 ? arguments[15] : undefined;
   var list = {};
   var ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
   bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
@@ -57,17 +57,20 @@ export function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, d
   }
   bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing({
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    nodeViewPortalProviderAPI: nodeViewPortalProviderAPI
   }), list);
   bindKeymapWithCommand(moveRight.common, activateNextResizeArea({
     direction: 1,
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    nodeViewPortalProviderAPI: nodeViewPortalProviderAPI
   }), list);
   bindKeymapWithCommand(moveLeft.common, activateNextResizeArea({
     direction: -1,
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    nodeViewPortalProviderAPI: 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/esm/pm-plugins/main.js

@@ -22,7 +22,7 @@ import { isHeaderRowRequired, transformSliceTableLayoutDefaultToCenter } from '.
 import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) {
+export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) {
   var _accessibilityUtils;
   var state = createPluginState(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
@@ -278,7 +278,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         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/esm/pm-plugins/table-resizing/event-handlers.js

@@ -18,7 +18,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 var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, api, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
+export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
   var _originalTable$attrs;
   var state = view.state,
     dispatch = view.dispatch;
@@ -103,7 +103,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
 
   // 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/esm/pm-plugins/table-resizing/plugin.js

@@ -8,7 +8,7 @@ import { handleMouseDown } from './event-handlers';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getResizeCellPos } from './utils';
-export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, api, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
+export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
   var _ref$lastColumnResiza = _ref.lastColumnResizable,
     lastColumnResizable = _ref$lastColumnResiza === void 0 ? true : _ref$lastColumnResiza;
   return new SafePlugin({
@@ -46,7 +46,7 @@ export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorF
             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)) {
               var _state = view.state,
                 _dispatch = view.dispatch;
               return setResizeHandlePos(resizeHandlePos)(_state, _dispatch);