@atlaskit/editor-plugin-expand 2.10.1 → 2.10.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-expand
 
+## 2.10.2
+
+### Patch Changes
+
+- [#163321](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163321)
+  [`9cbf3468984dc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9cbf3468984dc) -
+  ED-25609: migrates expand plugin ReactDOM references to portalprovider
+- Updated dependencies
+
 ## 2.10.1
 
 ### Patch Changes

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

@@ -11,6 +11,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _v = _interopRequireDefault(require("uuid/v4"));
 var _w3cKeyname = require("w3c-keyname");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -61,12 +62,12 @@ var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditabl
   }, 0]];
 };
 var ExpandNodeView = exports.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;
     (0, _classCallCheck2.default)(this, ExpandNodeView);
     (0, _defineProperty2.default)(this, "allowInteractiveExpand", true);
     (0, _defineProperty2.default)(this, "isMobile", false);
@@ -412,6 +413,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     var _DOMSerializer$render = _model.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;
@@ -424,6 +426,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     this.input = this.dom.querySelector(".".concat(_styles.expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(_styles.expandClassNames.titleContainer));
     this.content = this.dom.querySelector(".".concat(_styles.expandClassNames.content));
+    this.renderKey = (0, _v.default)();
     this.renderIcon(this.intl);
     this.initHandlers();
   }
@@ -475,16 +478,27 @@ var ExpandNodeView = exports.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.default.render( /*#__PURE__*/_react.default.createElement(_ExpandIconButton.ExpandIconButton, {
-        intl: intl,
-        allowInteractiveExpand: this.allowInteractiveExpand,
-        expanded: this.__livePage && (0, _platformFeatureFlags.fg)('platform.editor.live-pages-expand-divergence') ? !__expanded : __expanded
-      }), this.icon);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
+        this.nodeViewPortalProviderAPI.render(function () {
+          return /*#__PURE__*/_react.default.createElement(_ExpandIconButton.ExpandIconButton, {
+            intl: intl,
+            allowInteractiveExpand: _this3.allowInteractiveExpand,
+            expanded: _this3.__livePage && (0, _platformFeatureFlags.fg)('platform.editor.live-pages-expand-divergence') ? !__expanded : __expanded
+          });
+        }, this.icon, this.renderKey);
+      } else {
+        _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_ExpandIconButton.ExpandIconButton, {
+          intl: intl,
+          allowInteractiveExpand: this.allowInteractiveExpand,
+          expanded: this.__livePage && (0, _platformFeatureFlags.fg)('platform.editor.live-pages-expand-divergence') ? !__expanded : __expanded
+        }), this.icon);
+      }
     }
   }, {
     key: "stopEvent",
@@ -508,7 +522,7 @@ var ExpandNodeView = exports.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
@@ -527,8 +541,8 @@ var ExpandNodeView = exports.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;
@@ -561,7 +575,11 @@ var ExpandNodeView = exports.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.default.unmountComponentAtNode(this.icon);
+        if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
+          this.nodeViewPortalProviderAPI.remove(this.renderKey);
+        } else {
+          _reactDom.default.unmountComponentAtNode(this.icon);
+        }
       }
       (_this$decorationClean2 = this.decorationCleanup) === null || _this$decorationClean2 === void 0 || _this$decorationClean2.call(this);
       if (this.cleanUpEditorDisabledOnChange) {
@@ -584,11 +602,12 @@ function _default(_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/cjs/legacyExpand/plugin.js

@@ -53,8 +53,9 @@ var expandPlugin = exports.expandPlugin = function expandPlugin(_ref) {
         plugin: function plugin(_ref2) {
           var _options$allowInterac;
           var dispatch = _ref2.dispatch,
-            getIntl = _ref2.getIntl;
-          return (0, _main.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 (0, _main.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/cjs/legacyExpand/pm-plugins/main.js

@@ -25,8 +25,9 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, getInt
   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 = (0, _pluginFactory.createPluginState)(dispatch, {});
   var isMobile = false;
   return new _safePlugin.SafePlugin({
@@ -38,6 +39,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, getInt
           getIntl: getIntl,
           isMobile: isMobile,
           api: api,
+          nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
           allowInteractiveExpand: allowInteractiveExpand,
           __livePage: __livePage
         }),
@@ -45,6 +47,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, getInt
           getIntl: getIntl,
           isMobile: isMobile,
           api: api,
+          nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
           allowInteractiveExpand: allowInteractiveExpand,
           __livePage: __livePage
         })

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

@@ -9,7 +9,9 @@ exports.default = _default;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _v = _interopRequireDefault(require("uuid/v4"));
 var _w3cKeyname = require("w3c-keyname");
 var _expand = require("@atlaskit/editor-common/expand");
 var _selection = require("@atlaskit/editor-common/selection");
@@ -18,16 +20,18 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _history = require("@atlaskit/editor-prosemirror/history");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../commands");
+var _ExpandButton = require("../ui/ExpandButton");
 var _NodeView = require("../ui/NodeView");
 var ExpandNodeView = exports.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;
     (0, _classCallCheck2.default)(this, ExpandNodeView);
     (0, _defineProperty2.default)(this, "allowInteractiveExpand", true);
     (0, _defineProperty2.default)(this, "isMobile", false);
@@ -359,10 +363,31 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       }
       return contentEditable;
     });
+    (0, _defineProperty2.default)(this, "renderIcon", function (icon, expanded) {
+      if (!icon) {
+        return;
+      }
+      if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
+        _this.nodeViewPortalProviderAPI.render(function () {
+          return /*#__PURE__*/_react.default.createElement(_ExpandButton.ExpandButton, {
+            intl: _this.intl,
+            allowInteractiveExpand: _this.allowInteractiveExpand,
+            expanded: expanded
+          });
+        }, icon, _this.renderKey);
+      } else {
+        _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_ExpandButton.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;
@@ -377,11 +402,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     this.icon = this.dom.querySelector(".".concat(_styles.expandClassNames.icon));
     this.input = this.dom.querySelector(".".concat(_styles.expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(_styles.expandClassNames.titleContainer));
+    this.renderKey = (0, _v.default)();
     this.content = this.dom.querySelector(".".concat(_styles.expandClassNames.content));
     if (!_expand.expandedState.has(this.node)) {
       _expand.expandedState.set(this.node, false);
     }
-    (0, _NodeView.renderIcon)(this.icon, this.allowInteractiveExpand, !(0, _expand.isExpandCollapsed)(this.node), this.intl);
+    this.renderIcon(this.icon, !(0, _expand.isExpandCollapsed)(this.node));
     if (!this.input || !this.titleContainer || !this.icon) {
       return;
     }
@@ -470,7 +496,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         var _expandedState$get;
         this.dom.className = (0, _NodeView.buildExpandClassName)(node.type.name, expanded);
         // Re-render the icon to update the aria-expanded attribute
-        (0, _NodeView.renderIcon)(this.icon ? this.icon : null, this.allowInteractiveExpand, (_expandedState$get = _expand.expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false, this.intl);
+        this.renderIcon(this.icon ? this.icon : null, (_expandedState$get = _expand.expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false);
       }
       this.updateExpandBodyContentEditable();
     }
@@ -500,7 +526,11 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       if (this.cleanUpEditorDisabledOnChange) {
         this.cleanUpEditorDisabledOnChange();
       }
-      _reactDom.default.unmountComponentAtNode(this.icon);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
+        this.nodeViewPortalProviderAPI.remove(this.renderKey);
+      } else {
+        _reactDom.default.unmountComponentAtNode(this.icon);
+      }
     }
   }]);
   return ExpandNodeView;
@@ -509,11 +539,12 @@ function _default(_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/cjs/singlePlayerExpand/plugin.js

@@ -46,8 +46,9 @@ var expandPlugin = exports.expandPlugin = function expandPlugin(_ref) {
         plugin: function plugin(_ref2) {
           var _options$allowInterac;
           var dispatch = _ref2.dispatch,
-            getIntl = _ref2.getIntl;
-          return (0, _main.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 (0, _main.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/cjs/singlePlayerExpand/pm-plugins/main.js

@@ -25,8 +25,9 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, getInt
   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.SafePlugin({
     key: pluginKey,
@@ -36,6 +37,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, getInt
           getIntl: getIntl,
           isMobile: isMobile,
           api: api,
+          nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
           allowInteractiveExpand: allowInteractiveExpand,
           __livePage: __livePage
         }),
@@ -43,6 +45,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, getInt
           getIntl: getIntl,
           isMobile: isMobile,
           api: api,
+          nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
           allowInteractiveExpand: allowInteractiveExpand,
           __livePage: __livePage
         })

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

@@ -1,16 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toDOM = exports.renderIcon = exports.buildExpandClassName = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
+exports.toDOM = exports.buildExpandClassName = void 0;
 var _expand = require("@atlaskit/editor-common/expand");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
-var _ExpandButton = require("../ui/ExpandButton");
 var buildExpandClassName = exports.buildExpandClassName = function buildExpandClassName(type, expanded) {
   return "".concat(_styles.expandClassNames.prefix, " ").concat(_styles.expandClassNames.type(type), " ").concat(expanded ? _styles.expandClassNames.expanded : '');
 };
@@ -49,14 +45,4 @@ var toDOM = exports.toDOM = function toDOM(node, __livePage, intl, titleReadOnly
     class: _styles.expandClassNames.content,
     contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
   }, 0]];
-};
-var renderIcon = exports.renderIcon = function renderIcon(icon, allowInteractiveExpand, expanded, intl) {
-  if (!icon) {
-    return;
-  }
-  _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_ExpandButton.ExpandButton, {
-    intl: intl,
-    allowInteractiveExpand: allowInteractiveExpand,
-    expanded: expanded
-  }), icon);
 };

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

@@ -1,6 +1,7 @@
 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';
@@ -49,7 +50,7 @@ const toDOM = (node, __livePage, intl, titleReadOnly, contentEditable) => ['div'
   contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
 }, 0]];
 export class ExpandNodeView {
-  constructor(_node, view, getPos, getIntl, isMobile, selectNearNode, api, allowInteractiveExpand = true, __livePage = false, cleanUpEditorDisabledOnChange) {
+  constructor(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI, allowInteractiveExpand = true, __livePage = false, cleanUpEditorDisabledOnChange) {
     var _api$editorDisabled, _api$editorDisabled$s;
     _defineProperty(this, "allowInteractiveExpand", true);
     _defineProperty(this, "isMobile", false);
@@ -414,6 +415,7 @@ export class ExpandNodeView {
       dom,
       contentDOM
     } = DOMSerializer.renderSpec(document, toDOM(_node, this.__livePage, this.intl, api === null || api === void 0 ? void 0 : (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled$s === void 0 ? void 0 : _api$editorDisabled$s.editorDisabled));
+    this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
     this.allowInteractiveExpand = allowInteractiveExpand;
     this.getPos = getPos;
     this.view = view;
@@ -426,6 +428,7 @@ export class ExpandNodeView {
     this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
     this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
     this.content = this.dom.querySelector(`.${expandClassNames.content}`);
+    this.renderKey = uuid();
     this.renderIcon(this.intl);
     this.initHandlers();
   }
@@ -478,11 +481,19 @@ export class ExpandNodeView {
     let {
       __expanded
     } = node && node.attrs || this.node.attrs;
-    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(() => /*#__PURE__*/React.createElement(ExpandIconButton, {
+        intl: intl,
+        allowInteractiveExpand: this.allowInteractiveExpand,
+        expanded: this.__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);
+    }
   }
   stopEvent(event) {
     const target = event.target;
@@ -550,7 +561,11 @@ export class ExpandNodeView {
     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 ? void 0 : _this$decorationClean2.call(this);
     if (this.cleanUpEditorDisabledOnChange) {
@@ -571,11 +586,12 @@ export default function ({
   getIntl,
   isMobile,
   api,
+  nodeViewPortalProviderAPI,
   allowInteractiveExpand = true,
   __livePage
 }) {
   return (node, view, getPos) => {
     var _api$selection, _api$selection$action;
-    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$action = _api$selection.actions) === null || _api$selection$action === void 0 ? void 0 : _api$selection$action.selectNearNode, api, allowInteractiveExpand, __livePage);
+    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$action = _api$selection.actions) === null || _api$selection$action === void 0 ? void 0 : _api$selection$action.selectNearNode, api, nodeViewPortalProviderAPI, allowInteractiveExpand, __livePage);
   };
 }

package/dist/es2019/legacyExpand/plugin.js

@@ -39,10 +39,11 @@ export const expandPlugin = ({
         name: 'expand',
         plugin: ({
           dispatch,
-          getIntl
+          getIntl,
+          nodeViewPortalProviderAPI
         }) => {
           var _options$allowInterac;
-          return createPlugin(dispatch, getIntl, options.appearance, options.useLongPressSelection, api, (_options$allowInterac = options.allowInteractiveExpand) !== null && _options$allowInterac !== void 0 ? _options$allowInterac : true, options.__livePage);
+          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/es2019/legacyExpand/pm-plugins/main.js

@@ -12,7 +12,7 @@ export function containsClass(element, className) {
   var _element$classList;
   return Boolean(element === null || element === void 0 ? void 0 : (_element$classList = element.classList) === null || _element$classList === void 0 ? void 0 : _element$classList.contains(className));
 }
-export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLongPressSelection = false, api, allowInteractiveExpand = true, __livePage = false) => {
+export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLongPressSelection = false, api, nodeViewPortalProviderAPI, allowInteractiveExpand = true, __livePage = false) => {
   const state = createPluginState(dispatch, {});
   const isMobile = false;
   return new SafePlugin({
@@ -24,6 +24,7 @@ export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLon
           getIntl,
           isMobile,
           api,
+          nodeViewPortalProviderAPI,
           allowInteractiveExpand,
           __livePage
         }),
@@ -31,6 +32,7 @@ export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLon
           getIntl,
           isMobile,
           api,
+          nodeViewPortalProviderAPI,
           allowInteractiveExpand,
           __livePage
         })

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

@@ -1,5 +1,7 @@
 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';
@@ -8,10 +10,12 @@ 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 class ExpandNodeView {
-  constructor(_node, view, getPos, getIntl, isMobile, selectNearNode, api, allowInteractiveExpand = true, __livePage = false, cleanUpEditorDisabledOnChange) {
+  constructor(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI, allowInteractiveExpand = true, __livePage = false, cleanUpEditorDisabledOnChange) {
     var _api$editorDisabled, _api$editorDisabled$s, _this$api6;
     _defineProperty(this, "allowInteractiveExpand", true);
     _defineProperty(this, "isMobile", false);
@@ -360,10 +364,29 @@ export class ExpandNodeView {
       }
       return contentEditable;
     });
+    _defineProperty(this, "renderIcon", (icon, expanded) => {
+      if (!icon) {
+        return;
+      }
+      if (fg('platform_editor_react18_plugin_portalprovider')) {
+        this.nodeViewPortalProviderAPI.render(() => /*#__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;
@@ -379,11 +402,12 @@ export class ExpandNodeView {
     this.icon = this.dom.querySelector(`.${expandClassNames.icon}`);
     this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
     this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
+    this.renderKey = uuid();
     this.content = this.dom.querySelector(`.${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;
     }
@@ -463,7 +487,7 @@ export class ExpandNodeView {
       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();
   }
@@ -489,18 +513,23 @@ export class ExpandNodeView {
     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);
+    }
   }
 }
 export default function ({
   getIntl,
   isMobile,
   api,
+  nodeViewPortalProviderAPI,
   allowInteractiveExpand = true,
   __livePage
 }) {
   return (node, view, getPos) => {
     var _api$selection, _api$selection$action;
-    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$action = _api$selection.actions) === null || _api$selection$action === void 0 ? void 0 : _api$selection$action.selectNearNode, api, allowInteractiveExpand, __livePage);
+    return new ExpandNodeView(node, view, getPos, getIntl, isMobile, api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$action = _api$selection.actions) === null || _api$selection$action === void 0 ? void 0 : _api$selection$action.selectNearNode, api, nodeViewPortalProviderAPI, allowInteractiveExpand, __livePage);
   };
 }

package/dist/es2019/singlePlayerExpand/plugin.js

@@ -38,10 +38,11 @@ export const expandPlugin = ({
         name: 'expand',
         plugin: ({
           dispatch,
-          getIntl
+          getIntl,
+          nodeViewPortalProviderAPI
         }) => {
           var _options$allowInterac;
-          return createPlugin(dispatch, getIntl, options.appearance, options.useLongPressSelection, api, (_options$allowInterac = options.allowInteractiveExpand) !== null && _options$allowInterac !== void 0 ? _options$allowInterac : true, options.__livePage);
+          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/es2019/singlePlayerExpand/pm-plugins/main.js

@@ -11,7 +11,7 @@ export function containsClass(element, className) {
   var _element$classList;
   return Boolean(element === null || element === void 0 ? void 0 : (_element$classList = element.classList) === null || _element$classList === void 0 ? void 0 : _element$classList.contains(className));
 }
-export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLongPressSelection = false, api, allowInteractiveExpand = true, __livePage = false) => {
+export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLongPressSelection = false, api, nodeViewPortalProviderAPI, allowInteractiveExpand = true, __livePage = false) => {
   const isMobile = false;
   return new SafePlugin({
     key: pluginKey,
@@ -21,6 +21,7 @@ export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLon
           getIntl,
           isMobile,
           api,
+          nodeViewPortalProviderAPI,
           allowInteractiveExpand,
           __livePage
         }),
@@ -28,6 +29,7 @@ export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLon
           getIntl,
           isMobile,
           api,
+          nodeViewPortalProviderAPI,
           allowInteractiveExpand,
           __livePage
         })