@atlaskit/editor-plugin-expand 2.10.1 → 2.10.2

package/dist/es2019/singlePlayerExpand/ui/NodeView.js

@@ -1,9 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { expandedState } from '@atlaskit/editor-common/expand';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
-import { ExpandButton } from '../ui/ExpandButton';
 export const buildExpandClassName = (type, expanded) => {
   return `${expandClassNames.prefix} ${expandClassNames.type(type)} ${expanded ? expandClassNames.expanded : ''}`;
 };
@@ -42,14 +39,4 @@ export const toDOM = (node, __livePage, intl, titleReadOnly, contentEditable) =>
     class: expandClassNames.content,
     contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
   }, 0]];
-};
-export const renderIcon = (icon, allowInteractiveExpand, expanded, intl) => {
-  if (!icon) {
-    return;
-  }
-  ReactDOM.render( /*#__PURE__*/React.createElement(ExpandButton, {
-    intl: intl,
-    allowInteractiveExpand: allowInteractiveExpand,
-    expanded: expanded
-  }), icon);
 };

package/dist/esm/legacyExpand/nodeviews/index.js

@@ -3,6 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import ReactDOM from 'react-dom';
+import uuid from 'uuid/v4';
 import { keyName } from 'w3c-keyname';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
@@ -53,12 +54,12 @@ var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditabl
   }, 0]];
 };
 export var ExpandNodeView = /*#__PURE__*/function () {
-  function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api) {
+  function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI) {
     var _this = this,
       _api$editorDisabled;
-    var allowInteractiveExpand = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
-    var __livePage = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
-    var cleanUpEditorDisabledOnChange = arguments.length > 9 ? arguments[9] : undefined;
+    var allowInteractiveExpand = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
+    var __livePage = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
+    var cleanUpEditorDisabledOnChange = arguments.length > 10 ? arguments[10] : undefined;
     _classCallCheck(this, ExpandNodeView);
     _defineProperty(this, "allowInteractiveExpand", true);
     _defineProperty(this, "isMobile", false);
@@ -404,6 +405,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(_node, this.__livePage, this.intl, api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
+    this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
     this.allowInteractiveExpand = allowInteractiveExpand;
     this.getPos = getPos;
     this.view = view;
@@ -416,6 +418,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     this.input = this.dom.querySelector(".".concat(expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(expandClassNames.titleContainer));
     this.content = this.dom.querySelector(".".concat(expandClassNames.content));
+    this.renderKey = uuid();
     this.renderIcon(this.intl);
     this.initHandlers();
   }
@@ -467,16 +470,27 @@ export var ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "renderIcon",
     value: function renderIcon(intl, node) {
+      var _this3 = this;
       if (!this.icon) {
         return;
       }
       var _ref = node && node.attrs || this.node.attrs,
         __expanded = _ref.__expanded;
-      ReactDOM.render( /*#__PURE__*/React.createElement(ExpandIconButton, {
-        intl: intl,
-        allowInteractiveExpand: this.allowInteractiveExpand,
-        expanded: this.__livePage && fg('platform.editor.live-pages-expand-divergence') ? !__expanded : __expanded
-      }), this.icon);
+      if (fg('platform_editor_react18_plugin_portalprovider')) {
+        this.nodeViewPortalProviderAPI.render(function () {
+          return /*#__PURE__*/React.createElement(ExpandIconButton, {
+            intl: intl,
+            allowInteractiveExpand: _this3.allowInteractiveExpand,
+            expanded: _this3.__livePage && fg('platform.editor.live-pages-expand-divergence') ? !__expanded : __expanded
+          });
+        }, this.icon, this.renderKey);
+      } else {
+        ReactDOM.render( /*#__PURE__*/React.createElement(ExpandIconButton, {
+          intl: intl,
+          allowInteractiveExpand: this.allowInteractiveExpand,
+          expanded: this.__livePage && fg('platform.editor.live-pages-expand-divergence') ? !__expanded : __expanded
+        }), this.icon);
+      }
     }
   }, {
     key: "stopEvent",
@@ -500,7 +514,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "update",
     value: function update(node, _decorations) {
-      var _this3 = this;
+      var _this4 = this;
       if (this.node.type === node.type) {
         if (this.node.attrs.__expanded !== node.attrs.__expanded) {
           // Instead of re-rendering the view on an expand toggle
@@ -519,8 +533,8 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         // since we're intentionally being less aggressive about re-rendering.
         // We also apply a rAF to avoid abrupt continuous replacement of the title.
         window.requestAnimationFrame(function () {
-          if (_this3.input && _this3.node.attrs.title !== _this3.input.value) {
-            _this3.input.value = _this3.node.attrs.title;
+          if (_this4.input && _this4.node.attrs.title !== _this4.input.value) {
+            _this4.input.value = _this4.node.attrs.title;
           }
         });
         this.node = node;
@@ -553,7 +567,11 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       if (this.icon) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.icon.removeEventListener('keydown', this.handleIconKeyDown);
-        ReactDOM.unmountComponentAtNode(this.icon);
+        if (fg('platform_editor_react18_plugin_portalprovider')) {
+          this.nodeViewPortalProviderAPI.remove(this.renderKey);
+        } else {
+          ReactDOM.unmountComponentAtNode(this.icon);
+        }
       }
       (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
       if (this.cleanUpEditorDisabledOnChange) {
@@ -576,11 +594,12 @@ export default function (_ref2) {
   var getIntl = _ref2.getIntl,
     isMobile = _ref2.isMobile,
     api = _ref2.api,
+    nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI,
     _ref2$allowInteractiv = _ref2.allowInteractiveExpand,
     allowInteractiveExpand = _ref2$allowInteractiv === void 0 ? true : _ref2$allowInteractiv,
     __livePage = _ref2.__livePage;
   return function (node, view, getPos) {
     var _api$selection;
-    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.actions) === null || _api$selection === void 0 ? void 0 : _api$selection.selectNearNode, api, allowInteractiveExpand, __livePage);
+    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.actions) === null || _api$selection === void 0 ? void 0 : _api$selection.selectNearNode, api, nodeViewPortalProviderAPI, allowInteractiveExpand, __livePage);
   };
 }

package/dist/esm/legacyExpand/plugin.js

@@ -40,8 +40,9 @@ export var expandPlugin = function expandPlugin(_ref) {
         plugin: function plugin(_ref2) {
           var _options$allowInterac;
           var dispatch = _ref2.dispatch,
-            getIntl = _ref2.getIntl;
-          return createPlugin(dispatch, getIntl, options.appearance, options.useLongPressSelection, api, (_options$allowInterac = options.allowInteractiveExpand) !== null && _options$allowInterac !== void 0 ? _options$allowInterac : true, options.__livePage);
+            getIntl = _ref2.getIntl,
+            nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
+          return createPlugin(dispatch, getIntl, options.appearance, options.useLongPressSelection, api, nodeViewPortalProviderAPI, (_options$allowInterac = options.allowInteractiveExpand) !== null && _options$allowInterac !== void 0 ? _options$allowInterac : true, options.__livePage);
         }
       }, {
         name: 'expandKeymap',

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

@@ -16,8 +16,9 @@ export var createPlugin = function createPlugin(dispatch, getIntl) {
   var appearance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'full-page';
   var useLongPressSelection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var api = arguments.length > 4 ? arguments[4] : undefined;
-  var allowInteractiveExpand = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
-  var __livePage = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var nodeViewPortalProviderAPI = arguments.length > 5 ? arguments[5] : undefined;
+  var allowInteractiveExpand = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
+  var __livePage = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
   var state = createPluginState(dispatch, {});
   var isMobile = false;
   return new SafePlugin({
@@ -29,6 +30,7 @@ export var createPlugin = function createPlugin(dispatch, getIntl) {
           getIntl: getIntl,
           isMobile: isMobile,
           api: api,
+          nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
           allowInteractiveExpand: allowInteractiveExpand,
           __livePage: __livePage
         }),
@@ -36,6 +38,7 @@ export var createPlugin = function createPlugin(dispatch, getIntl) {
           getIntl: getIntl,
           isMobile: isMobile,
           api: api,
+          nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
           allowInteractiveExpand: allowInteractiveExpand,
           __livePage: __livePage
         })

package/dist/esm/singlePlayerExpand/node-views/index.js

@@ -1,7 +1,9 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
 import ReactDOM from 'react-dom';
+import uuid from 'uuid/v4';
 import { keyName } from 'w3c-keyname';
 import { expandedState, isExpandCollapsed } from '@atlaskit/editor-common/expand';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
@@ -10,16 +12,18 @@ import { closestElement, isEmptyNode } from '@atlaskit/editor-common/utils';
 import { redo, undo } from '@atlaskit/editor-prosemirror/history';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExpandTitle } from '../commands';
-import { buildExpandClassName, renderIcon, toDOM } from '../ui/NodeView';
+import { ExpandButton } from '../ui/ExpandButton';
+import { buildExpandClassName, toDOM } from '../ui/NodeView';
 export var ExpandNodeView = /*#__PURE__*/function () {
-  function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api) {
+  function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI) {
     var _this = this,
       _api$editorDisabled,
       _this$api6;
-    var allowInteractiveExpand = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
-    var __livePage = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
-    var cleanUpEditorDisabledOnChange = arguments.length > 9 ? arguments[9] : undefined;
+    var allowInteractiveExpand = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
+    var __livePage = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
+    var cleanUpEditorDisabledOnChange = arguments.length > 10 ? arguments[10] : undefined;
     _classCallCheck(this, ExpandNodeView);
     _defineProperty(this, "allowInteractiveExpand", true);
     _defineProperty(this, "isMobile", false);
@@ -351,10 +355,31 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       }
       return contentEditable;
     });
+    _defineProperty(this, "renderIcon", function (icon, expanded) {
+      if (!icon) {
+        return;
+      }
+      if (fg('platform_editor_react18_plugin_portalprovider')) {
+        _this.nodeViewPortalProviderAPI.render(function () {
+          return /*#__PURE__*/React.createElement(ExpandButton, {
+            intl: _this.intl,
+            allowInteractiveExpand: _this.allowInteractiveExpand,
+            expanded: expanded
+          });
+        }, icon, _this.renderKey);
+      } else {
+        ReactDOM.render( /*#__PURE__*/React.createElement(ExpandButton, {
+          intl: _this.intl,
+          allowInteractiveExpand: _this.allowInteractiveExpand,
+          expanded: expanded
+        }), icon);
+      }
+    });
     this.selectNearNode = selectNearNode;
     this.__livePage = __livePage;
     this.cleanUpEditorDisabledOnChange = cleanUpEditorDisabledOnChange;
     this.intl = getIntl();
+    this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
     this.allowInteractiveExpand = allowInteractiveExpand;
     this.getPos = getPos;
     this.view = view;
@@ -369,11 +394,12 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     this.icon = this.dom.querySelector(".".concat(expandClassNames.icon));
     this.input = this.dom.querySelector(".".concat(expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(expandClassNames.titleContainer));
+    this.renderKey = uuid();
     this.content = this.dom.querySelector(".".concat(expandClassNames.content));
     if (!expandedState.has(this.node)) {
       expandedState.set(this.node, false);
     }
-    renderIcon(this.icon, this.allowInteractiveExpand, !isExpandCollapsed(this.node), this.intl);
+    this.renderIcon(this.icon, !isExpandCollapsed(this.node));
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -462,7 +488,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         var _expandedState$get;
         this.dom.className = buildExpandClassName(node.type.name, expanded);
         // Re-render the icon to update the aria-expanded attribute
-        renderIcon(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
+        this.renderIcon(this.icon ? this.icon : null, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false);
       }
       this.updateExpandBodyContentEditable();
     }
@@ -492,7 +518,11 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       if (this.cleanUpEditorDisabledOnChange) {
         this.cleanUpEditorDisabledOnChange();
       }
-      ReactDOM.unmountComponentAtNode(this.icon);
+      if (fg('platform_editor_react18_plugin_portalprovider')) {
+        this.nodeViewPortalProviderAPI.remove(this.renderKey);
+      } else {
+        ReactDOM.unmountComponentAtNode(this.icon);
+      }
     }
   }]);
   return ExpandNodeView;
@@ -501,11 +531,12 @@ export default function (_ref) {
   var getIntl = _ref.getIntl,
     isMobile = _ref.isMobile,
     api = _ref.api,
+    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
     _ref$allowInteractive = _ref.allowInteractiveExpand,
     allowInteractiveExpand = _ref$allowInteractive === void 0 ? true : _ref$allowInteractive,
     __livePage = _ref.__livePage;
   return function (node, view, getPos) {
     var _api$selection;
-    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.actions) === null || _api$selection === void 0 ? void 0 : _api$selection.selectNearNode, api, allowInteractiveExpand, __livePage);
+    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.actions) === null || _api$selection === void 0 ? void 0 : _api$selection.selectNearNode, api, nodeViewPortalProviderAPI, allowInteractiveExpand, __livePage);
   };
 }

package/dist/esm/singlePlayerExpand/plugin.js

@@ -39,8 +39,9 @@ export var expandPlugin = function expandPlugin(_ref) {
         plugin: function plugin(_ref2) {
           var _options$allowInterac;
           var dispatch = _ref2.dispatch,
-            getIntl = _ref2.getIntl;
-          return createPlugin(dispatch, getIntl, options.appearance, options.useLongPressSelection, api, (_options$allowInterac = options.allowInteractiveExpand) !== null && _options$allowInterac !== void 0 ? _options$allowInterac : true, options.__livePage);
+            getIntl = _ref2.getIntl,
+            nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
+          return createPlugin(dispatch, getIntl, options.appearance, options.useLongPressSelection, api, nodeViewPortalProviderAPI, (_options$allowInterac = options.allowInteractiveExpand) !== null && _options$allowInterac !== void 0 ? _options$allowInterac : true, options.__livePage);
         }
       }, {
         name: 'expandKeymap',

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

@@ -15,8 +15,9 @@ export var createPlugin = function createPlugin(dispatch, getIntl) {
   var appearance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'full-page';
   var useLongPressSelection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var api = arguments.length > 4 ? arguments[4] : undefined;
-  var allowInteractiveExpand = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
-  var __livePage = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var nodeViewPortalProviderAPI = arguments.length > 5 ? arguments[5] : undefined;
+  var allowInteractiveExpand = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
+  var __livePage = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
   var isMobile = false;
   return new SafePlugin({
     key: pluginKey,
@@ -26,6 +27,7 @@ export var createPlugin = function createPlugin(dispatch, getIntl) {
           getIntl: getIntl,
           isMobile: isMobile,
           api: api,
+          nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
           allowInteractiveExpand: allowInteractiveExpand,
           __livePage: __livePage
         }),
@@ -33,6 +35,7 @@ export var createPlugin = function createPlugin(dispatch, getIntl) {
           getIntl: getIntl,
           isMobile: isMobile,
           api: api,
+          nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
           allowInteractiveExpand: allowInteractiveExpand,
           __livePage: __livePage
         })

package/dist/esm/singlePlayerExpand/ui/NodeView.js

@@ -1,9 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { expandedState } from '@atlaskit/editor-common/expand';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
-import { ExpandButton } from '../ui/ExpandButton';
 export var buildExpandClassName = function buildExpandClassName(type, expanded) {
   return "".concat(expandClassNames.prefix, " ").concat(expandClassNames.type(type), " ").concat(expanded ? expandClassNames.expanded : '');
 };
@@ -42,14 +39,4 @@ export var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, content
     class: expandClassNames.content,
     contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
   }, 0]];
-};
-export var renderIcon = function renderIcon(icon, allowInteractiveExpand, expanded, intl) {
-  if (!icon) {
-    return;
-  }
-  ReactDOM.render( /*#__PURE__*/React.createElement(ExpandButton, {
-    intl: intl,
-    allowInteractiveExpand: allowInteractiveExpand,
-    expanded: expanded
-  }), icon);
 };

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

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { SetSelectionRelativeToNode } from '@atlaskit/editor-common/selection';
 import type { ExtractInjectionAPI, getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -21,8 +22,10 @@ export declare class ExpandNodeView implements NodeView {
     allowInteractiveExpand: boolean;
     isMobile: boolean;
     api: ExtractInjectionAPI<ExpandPlugin> | undefined;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
     decorationCleanup?: () => boolean | undefined;
-    constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean, cleanUpEditorDisabledOnChange?: (() => void) | undefined);
+    renderKey: string;
+    constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, nodeViewPortalProviderAPI: PortalProviderAPI, allowInteractiveExpand?: boolean, __livePage?: boolean, cleanUpEditorDisabledOnChange?: (() => void) | undefined);
     private initHandlers;
     private focusTitle;
     private handleIconKeyDown;
@@ -52,10 +55,11 @@ export declare class ExpandNodeView implements NodeView {
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
     destroy(): void;
 }
-export default function ({ getIntl, isMobile, api, allowInteractiveExpand, __livePage, }: {
+export default function ({ getIntl, isMobile, api, nodeViewPortalProviderAPI, allowInteractiveExpand, __livePage, }: {
     getIntl: () => IntlShape;
     isMobile: boolean;
     api: ExtractInjectionAPI<ExpandPlugin> | undefined;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
     allowInteractiveExpand: boolean;
     __livePage: boolean;
 }): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;

package/dist/types/legacyExpand/pm-plugins/main.d.ts

@@ -1,12 +1,13 @@
 import type { IntlShape } from 'react-intl-next';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorAppearance, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ExpandPlugin } from '../../types';
 export declare function containsClass(element: Element | null, className: string): boolean;
-export declare const createPlugin: (dispatch: Dispatch, getIntl: () => IntlShape, appearance: EditorAppearance | undefined, useLongPressSelection: boolean | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean) => SafePlugin<import("../../types").ExpandPluginState>;
+export declare const createPlugin: (dispatch: Dispatch, getIntl: () => IntlShape, appearance: EditorAppearance | undefined, useLongPressSelection: boolean | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, nodeViewPortalProviderAPI: PortalProviderAPI, allowInteractiveExpand?: boolean, __livePage?: boolean) => SafePlugin<import("../../types").ExpandPluginState>;
 /**
  * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
  */

package/dist/types/singlePlayerExpand/node-views/index.d.ts

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { SetSelectionRelativeToNode } from '@atlaskit/editor-common/selection';
 import type { ExtractInjectionAPI, getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -21,8 +22,10 @@ export declare class ExpandNodeView implements NodeView {
     allowInteractiveExpand: boolean;
     isMobile: boolean;
     api: ExtractInjectionAPI<ExpandPlugin> | undefined;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
     decorationCleanup?: () => boolean | undefined;
-    constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean, cleanUpEditorDisabledOnChange?: (() => void) | undefined);
+    renderKey: string;
+    constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, nodeViewPortalProviderAPI: PortalProviderAPI, allowInteractiveExpand?: boolean, __livePage?: boolean, cleanUpEditorDisabledOnChange?: (() => void) | undefined);
     private focusTitle;
     private handleIconKeyDown;
     private handleClick;
@@ -50,12 +53,14 @@ export declare class ExpandNodeView implements NodeView {
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
     updateExpandToggleIcon(node: PmNode): void;
     updateExpandBodyContentEditable(): void;
+    renderIcon: (icon: HTMLElement | null, expanded: boolean) => void;
     destroy(): void;
 }
-export default function ({ getIntl, isMobile, api, allowInteractiveExpand, __livePage, }: {
+export default function ({ getIntl, isMobile, api, nodeViewPortalProviderAPI, allowInteractiveExpand, __livePage, }: {
     getIntl: () => IntlShape;
     isMobile: boolean;
     api: ExtractInjectionAPI<ExpandPlugin> | undefined;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
     allowInteractiveExpand: boolean;
     __livePage: boolean;
 }): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;

package/dist/types/singlePlayerExpand/pm-plugins/main.d.ts

@@ -1,5 +1,6 @@
 import type { IntlShape } from 'react-intl-next';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorAppearance, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type Slice } from '@atlaskit/editor-prosemirror/model';
@@ -8,7 +9,7 @@ import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ExpandPlugin } from '../../types';
 export declare const pluginKey: PluginKey<any>;
 export declare function containsClass(element: Element | null, className: string): boolean;
-export declare const createPlugin: (dispatch: Dispatch, getIntl: () => IntlShape, appearance: EditorAppearance | undefined, useLongPressSelection: boolean | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean) => SafePlugin<any>;
+export declare const createPlugin: (dispatch: Dispatch, getIntl: () => IntlShape, appearance: EditorAppearance | undefined, useLongPressSelection: boolean | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, nodeViewPortalProviderAPI: PortalProviderAPI, allowInteractiveExpand?: boolean, __livePage?: boolean) => SafePlugin<any>;
 /**
  * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
  */

package/dist/types/singlePlayerExpand/ui/NodeView.d.ts

@@ -2,4 +2,3 @@ import type { IntlShape } from 'react-intl-next';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export declare const buildExpandClassName: (type: string, expanded: boolean) => string;
 export declare const toDOM: (node: PmNode, __livePage: boolean, intl?: IntlShape, titleReadOnly?: boolean, contentEditable?: boolean) => DOMOutputSpec;
-export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, expanded: boolean, intl?: IntlShape) => void;

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

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { SetSelectionRelativeToNode } from '@atlaskit/editor-common/selection';
 import type { ExtractInjectionAPI, getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -21,8 +22,10 @@ export declare class ExpandNodeView implements NodeView {
     allowInteractiveExpand: boolean;
     isMobile: boolean;
     api: ExtractInjectionAPI<ExpandPlugin> | undefined;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
     decorationCleanup?: () => boolean | undefined;
-    constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean, cleanUpEditorDisabledOnChange?: (() => void) | undefined);
+    renderKey: string;
+    constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, nodeViewPortalProviderAPI: PortalProviderAPI, allowInteractiveExpand?: boolean, __livePage?: boolean, cleanUpEditorDisabledOnChange?: (() => void) | undefined);
     private initHandlers;
     private focusTitle;
     private handleIconKeyDown;
@@ -52,10 +55,11 @@ export declare class ExpandNodeView implements NodeView {
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
     destroy(): void;
 }
-export default function ({ getIntl, isMobile, api, allowInteractiveExpand, __livePage, }: {
+export default function ({ getIntl, isMobile, api, nodeViewPortalProviderAPI, allowInteractiveExpand, __livePage, }: {
     getIntl: () => IntlShape;
     isMobile: boolean;
     api: ExtractInjectionAPI<ExpandPlugin> | undefined;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
     allowInteractiveExpand: boolean;
     __livePage: boolean;
 }): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;

package/dist/types-ts4.5/legacyExpand/pm-plugins/main.d.ts

@@ -1,12 +1,13 @@
 import type { IntlShape } from 'react-intl-next';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorAppearance, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ExpandPlugin } from '../../types';
 export declare function containsClass(element: Element | null, className: string): boolean;
-export declare const createPlugin: (dispatch: Dispatch, getIntl: () => IntlShape, appearance: EditorAppearance | undefined, useLongPressSelection: boolean | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean) => SafePlugin<import("../../types").ExpandPluginState>;
+export declare const createPlugin: (dispatch: Dispatch, getIntl: () => IntlShape, appearance: EditorAppearance | undefined, useLongPressSelection: boolean | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, nodeViewPortalProviderAPI: PortalProviderAPI, allowInteractiveExpand?: boolean, __livePage?: boolean) => SafePlugin<import("../../types").ExpandPluginState>;
 /**
  * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
  */

package/dist/types-ts4.5/singlePlayerExpand/node-views/index.d.ts

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { SetSelectionRelativeToNode } from '@atlaskit/editor-common/selection';
 import type { ExtractInjectionAPI, getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -21,8 +22,10 @@ export declare class ExpandNodeView implements NodeView {
     allowInteractiveExpand: boolean;
     isMobile: boolean;
     api: ExtractInjectionAPI<ExpandPlugin> | undefined;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
     decorationCleanup?: () => boolean | undefined;
-    constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean, cleanUpEditorDisabledOnChange?: (() => void) | undefined);
+    renderKey: string;
+    constructor(node: PmNode, view: EditorView, getPos: getPosHandlerNode, getIntl: () => IntlShape, isMobile: boolean, selectNearNode: SetSelectionRelativeToNode | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, nodeViewPortalProviderAPI: PortalProviderAPI, allowInteractiveExpand?: boolean, __livePage?: boolean, cleanUpEditorDisabledOnChange?: (() => void) | undefined);
     private focusTitle;
     private handleIconKeyDown;
     private handleClick;
@@ -50,12 +53,14 @@ export declare class ExpandNodeView implements NodeView {
     update(node: PmNode, _decorations: readonly Decoration[]): boolean;
     updateExpandToggleIcon(node: PmNode): void;
     updateExpandBodyContentEditable(): void;
+    renderIcon: (icon: HTMLElement | null, expanded: boolean) => void;
     destroy(): void;
 }
-export default function ({ getIntl, isMobile, api, allowInteractiveExpand, __livePage, }: {
+export default function ({ getIntl, isMobile, api, nodeViewPortalProviderAPI, allowInteractiveExpand, __livePage, }: {
     getIntl: () => IntlShape;
     isMobile: boolean;
     api: ExtractInjectionAPI<ExpandPlugin> | undefined;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
     allowInteractiveExpand: boolean;
     __livePage: boolean;
 }): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;

package/dist/types-ts4.5/singlePlayerExpand/pm-plugins/main.d.ts

@@ -1,5 +1,6 @@
 import type { IntlShape } from 'react-intl-next';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorAppearance, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type Slice } from '@atlaskit/editor-prosemirror/model';
@@ -8,7 +9,7 @@ import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ExpandPlugin } from '../../types';
 export declare const pluginKey: PluginKey<any>;
 export declare function containsClass(element: Element | null, className: string): boolean;
-export declare const createPlugin: (dispatch: Dispatch, getIntl: () => IntlShape, appearance: EditorAppearance | undefined, useLongPressSelection: boolean | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean) => SafePlugin<any>;
+export declare const createPlugin: (dispatch: Dispatch, getIntl: () => IntlShape, appearance: EditorAppearance | undefined, useLongPressSelection: boolean | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, nodeViewPortalProviderAPI: PortalProviderAPI, allowInteractiveExpand?: boolean, __livePage?: boolean) => SafePlugin<any>;
 /**
  * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
  */

package/dist/types-ts4.5/singlePlayerExpand/ui/NodeView.d.ts

@@ -2,4 +2,3 @@ import type { IntlShape } from 'react-intl-next';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export declare const buildExpandClassName: (type: string, expanded: boolean) => string;
 export declare const toDOM: (node: PmNode, __livePage: boolean, intl?: IntlShape, titleReadOnly?: boolean, contentEditable?: boolean) => DOMOutputSpec;
-export declare const renderIcon: (icon: HTMLElement | null, allowInteractiveExpand: boolean, expanded: boolean, intl?: IntlShape) => void;