@atlaskit/editor-plugin-block-controls 2.13.22 → 2.13.23

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.13.23
+
+### Patch Changes
+
+- [#164073](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/164073)
+  [`74421f65186ac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/74421f65186ac) -
+  ED-25607: replace usages of ReactDOM.render with portal provider
+
 ## 2.13.22
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -21,8 +21,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       return [{
         name: 'blockControlsPmPlugin',
         plugin: function plugin(_ref2) {
-          var getIntl = _ref2.getIntl;
-          return (0, _main.createPlugin)(api, getIntl);
+          var getIntl = _ref2.getIntl,
+            nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
+          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI);
         }
       }];
     },

package/dist/cjs/pm-plugins/decorations-common.js

@@ -10,6 +10,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var TYPE_DROP_TARGET_DEC = exports.TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 var TYPE_HANDLE_DEC = exports.TYPE_HANDLE_DEC = 'drag-handle';
@@ -39,11 +40,18 @@ var ObjHash = /*#__PURE__*/function () {
   return ObjHash;
 }();
 (0, _defineProperty2.default)(ObjHash, "caching", new WeakMap());
-var unmountDecorations = exports.unmountDecorations = function unmountDecorations(selector) {
+var unmountDecorations = exports.unmountDecorations = function unmountDecorations(nodeViewPortalProviderAPI, selector, key) {
   // Removing decorations manually instead of using native destroy function in prosemirror API
   // as it was more responsive and causes less re-rendering
   var decorationsToRemove = document.querySelectorAll("[".concat(selector, "=\"true\"]"));
   decorationsToRemove.forEach(function (el) {
-    _reactDom.default.unmountComponentAtNode(el);
+    if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
+      var nodeKey = el.getAttribute(key);
+      if (nodeKey) {
+        nodeViewPortalProviderAPI.remove(nodeKey);
+      }
+    } else {
+      _reactDom.default.unmountComponentAtNode(el);
+    }
   });
 };

package/dist/cjs/pm-plugins/decorations-drag-handle.js

@@ -29,9 +29,10 @@ var findHandleDec = exports.findHandleDec = function findHandleDec(decorations,
     return spec.type === _decorationsCommon.TYPE_HANDLE_DEC;
   });
 };
-var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, handleOptions) {
-  (0, _decorationsCommon.unmountDecorations)('data-blocks-drag-handle-container');
+var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions) {
+  (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   var unbind;
+  var key = (0, _uuid.default)();
   return _view.Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement('span');
     // Need to set it to inline to avoid text being split when merging two paragraphs
@@ -39,6 +40,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     element.style.display = (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? 'block' : 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
+    element.setAttribute('data-blocks-drag-handle-key', key);
     var isTopLevelNode = true;
     if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
       var newPos = (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? getPos() : pos;
@@ -64,16 +66,31 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
     // due to margins applied to other nodes eg. Headings
     element.style.clear = 'unset';
-    _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
-      view: view,
-      api: api,
-      formatMessage: formatMessage,
-      getPos: getPos,
-      anchorName: anchorName,
-      nodeType: nodeType,
-      handleOptions: handleOptions,
-      isTopLevelNode: isTopLevelNode
-    }), element);
+    if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
+      nodeViewPortalProviderAPI.render(function () {
+        return /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
+          view: view,
+          api: api,
+          formatMessage: formatMessage,
+          getPos: getPos,
+          anchorName: anchorName,
+          nodeType: nodeType,
+          handleOptions: handleOptions,
+          isTopLevelNode: isTopLevelNode
+        });
+      }, element, key);
+    } else {
+      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
+        view: view,
+        api: api,
+        formatMessage: formatMessage,
+        getPos: getPos,
+        anchorName: anchorName,
+        nodeType: nodeType,
+        handleOptions: handleOptions,
+        isTopLevelNode: isTopLevelNode
+      }), element);
+    }
     return element;
   }, {
     side: -1,

package/dist/cjs/pm-plugins/decorations-drop-target.js

@@ -8,6 +8,7 @@ exports.findDropTargetDecs = exports.dropTargetDecorations = exports.createLayou
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _uuid = _interopRequireDefault(require("uuid"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -88,10 +89,12 @@ var findDropTargetDecs = exports.findDropTargetDecs = function findDropTargetDec
     return spec.type === _decorationsCommon.TYPE_DROP_TARGET_DEC;
   });
 };
-var createDropTargetDecoration = exports.createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache, isSameLayout) {
+var createDropTargetDecoration = exports.createDropTargetDecoration = function createDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, side, anchorRectCache, isSameLayout) {
+  var key = (0, _uuid.default)();
   return _view.Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
+    element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
     if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
       var _getGapAndOffset = getGapAndOffset(props.prevNode, props.nextNode, props.parentNode),
@@ -100,15 +103,33 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
       element.style.setProperty(_dropTargetV.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, "".concat(offset, "px"));
       element.style.setProperty(_dropTargetV.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, "".concat(gap, "px"));
       element.style.setProperty('display', 'block');
-      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTargetV.DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
-        getPos: getPos,
-        anchorRectCache: anchorRectCache,
-        isSameLayout: isSameLayout
-      })), element);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
+        nodeViewPortalProviderAPI.render(function () {
+          return /*#__PURE__*/(0, _react.createElement)(_dropTargetV.DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
+            getPos: getPos,
+            anchorRectCache: anchorRectCache,
+            isSameLayout: isSameLayout
+          }));
+        }, element, key);
+      } else {
+        _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTargetV.DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
+          getPos: getPos,
+          anchorRectCache: anchorRectCache,
+          isSameLayout: isSameLayout
+        })), element);
+      }
     } else {
-      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
-        getPos: getPos
-      })), element);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
+        nodeViewPortalProviderAPI.render(function () {
+          return /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
+            getPos: getPos
+          }));
+        }, element, key);
+      } else {
+        _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
+          getPos: getPos
+        })), element);
+      }
     }
     return element;
   }, {
@@ -116,22 +137,33 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
     side: side
   });
 };
-var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props, anchorRectCache) {
+var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, anchorRectCache) {
+  var key = (0, _uuid.default)();
   return _view.Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
+    element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
-    _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTargetLayout.DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
-      getPos: getPos,
-      anchorRectCache: anchorRectCache
-    })), element);
+    if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
+      nodeViewPortalProviderAPI.render(function () {
+        return /*#__PURE__*/(0, _react.createElement)(_dropTargetLayout.DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
+          getPos: getPos,
+          anchorRectCache: anchorRectCache
+        }));
+      }, element, key);
+    } else {
+      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTargetLayout.DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
+        getPos: getPos,
+        anchorRectCache: anchorRectCache
+      })), element);
+    }
     return element;
   }, {
     type: _decorationsCommon.TYPE_DROP_TARGET_DEC
   });
 };
-var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode, anchorRectCache, from, to) {
-  (0, _decorationsCommon.unmountDecorations)('data-blocks-drop-target-container');
+var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, nodeViewPortalProviderAPI, activeNode, anchorRectCache, from, to) {
+  (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
   var decs = [];
   var POS_END_OF_DOC = newState.doc.nodeSize - 2;
   var docFrom = from === undefined || from < 0 ? 0 : from;
@@ -175,7 +207,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
             api: api,
             parent: parent,
             formatMessage: formatMessage
-          }, anchorRectCache));
+          }, nodeViewPortalProviderAPI, anchorRectCache));
         }
       }
       if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
@@ -221,7 +253,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       parentNode: parent || undefined,
       formatMessage: formatMessage,
       dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
-    }, -1, anchorRectCache, isSameLayout));
+    }, nodeViewPortalProviderAPI, -1, anchorRectCache, isSameLayout));
     if (endPos !== undefined) {
       decs.push(createDropTargetDecoration(endPos, {
         api: api,
@@ -229,7 +261,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
         parentNode: parent || undefined,
         formatMessage: formatMessage,
         dropTargetStyle: 'remainingHeight'
-      }, -1, anchorRectCache));
+      }, nodeViewPortalProviderAPI, -1, anchorRectCache));
     }
     if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
       pushNodeStack(node, depth);
@@ -244,7 +276,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
       formatMessage: formatMessage,
       prevNode: newState.doc.lastChild || undefined,
       parentNode: newState.doc
-    }, undefined, anchorRectCache));
+    }, nodeViewPortalProviderAPI, undefined, anchorRectCache));
   }
   return decs;
 };

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

@@ -99,7 +99,7 @@ var initialState = {
   isDocSizeLimitEnabled: null,
   isPMDragging: false
 };
-var newApply = exports.newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, anchorRectCache) {
+var newApply = exports.newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
   var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
@@ -189,7 +189,7 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     var _activeNode5, _activeNode6;
     var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
     decorations = decorations.remove(_oldHandle);
-    var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.anchorName, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.nodeType, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.handleOptions);
+    var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.anchorName, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.nodeType, nodeViewPortalProviderAPI, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.handleOptions);
     decorations = decorations.add(newState.doc, [handleDec]);
   }
 
@@ -197,7 +197,7 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   var isDropTargetsMissing = ((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && maybeNodeCountChanged && !(meta !== null && meta !== void 0 && meta.nodeMoved);
 
   // Remove drop target decorations when dragging stops or they need to be redrawn
-  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
+  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
     var dropTargetDecs = (0, _decorationsDropTarget.findDropTargetDecs)(decorations);
     decorations = decorations.remove(dropTargetDecs);
   }
@@ -205,7 +205,7 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   // Add drop targets when dragging starts or some are missing
   if (api) {
     if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
-      var decs = (0, _decorationsDropTarget.dropTargetDecorations)(newState, api, formatMessage, latestActiveNode, anchorRectCache);
+      var decs = (0, _decorationsDropTarget.dropTargetDecorations)(newState, api, formatMessage, nodeViewPortalProviderAPI, latestActiveNode, anchorRectCache);
       decorations = decorations.add(newState.doc, decs);
     }
   }
@@ -230,7 +230,7 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
   };
 };
-var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, anchorRectCache) {
+var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
   var _meta$activeNode2, _meta$activeNode$hand2, _activeNodeWithNewNod, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2;
   var isNestedEnabled = flags.isNestedEnabled;
   var activeNode = currentState.activeNode,
@@ -335,7 +335,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
         var decAtPos = newNodeDecs.find(function (dec) {
           return dec.from === mappedPosisiton;
         });
-        draghandleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, (_meta$activeNode$pos = meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.pos) !== null && _meta$activeNode$pos !== void 0 ? _meta$activeNode$pos : mappedPosisiton, (_ref6 = (_meta$activeNode$anch = meta === null || meta === void 0 || (_meta$activeNode4 = meta.activeNode) === null || _meta$activeNode4 === void 0 ? void 0 : _meta$activeNode4.anchorName) !== null && _meta$activeNode$anch !== void 0 ? _meta$activeNode$anch : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref6 !== void 0 ? _ref6 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref7 = (_meta$activeNode$node = meta === null || meta === void 0 || (_meta$activeNode5 = meta.activeNode) === null || _meta$activeNode5 === void 0 ? void 0 : _meta$activeNode5.nodeType) !== null && _meta$activeNode$node !== void 0 ? _meta$activeNode$node : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref7 !== void 0 ? _ref7 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, meta === null || meta === void 0 || (_meta$activeNode6 = meta.activeNode) === null || _meta$activeNode6 === void 0 ? void 0 : _meta$activeNode6.handleOptions);
+        draghandleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, (_meta$activeNode$pos = meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.pos) !== null && _meta$activeNode$pos !== void 0 ? _meta$activeNode$pos : mappedPosisiton, (_ref6 = (_meta$activeNode$anch = meta === null || meta === void 0 || (_meta$activeNode4 = meta.activeNode) === null || _meta$activeNode4 === void 0 ? void 0 : _meta$activeNode4.anchorName) !== null && _meta$activeNode$anch !== void 0 ? _meta$activeNode$anch : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref6 !== void 0 ? _ref6 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref7 = (_meta$activeNode$node = meta === null || meta === void 0 || (_meta$activeNode5 = meta.activeNode) === null || _meta$activeNode5 === void 0 ? void 0 : _meta$activeNode5.nodeType) !== null && _meta$activeNode$node !== void 0 ? _meta$activeNode$node : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref7 !== void 0 ? _ref7 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, nodeViewPortalProviderAPI, meta === null || meta === void 0 || (_meta$activeNode6 = meta.activeNode) === null || _meta$activeNode6 === void 0 ? void 0 : _meta$activeNode6.handleOptions);
       } else {
         var nodeType = activeNode.nodeType;
         var anchorName = activeNode.anchorName;
@@ -348,7 +348,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
             anchorName: anchorName
           };
         }
-        draghandleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, activeNode.pos, anchorName, nodeType);
+        draghandleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, activeNode.pos, anchorName, nodeType, nodeViewPortalProviderAPI);
       }
       decorations = decorations.add(newState.doc, [draghandleDec]);
     }
@@ -360,7 +360,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
       return spec.type === 'drag-handle';
     });
     decorations = decorations.remove(_oldHandle3);
-    var decs = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
+    var decs = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, nodeViewPortalProviderAPI, meta.activeNode.handleOptions);
     decorations = decorations.add(newState.doc, [decs]);
   }
 
@@ -370,10 +370,10 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
       return spec.type === 'drag-handle';
     });
     decorations = decorations.remove(_oldHandle4);
-    var _decs = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
+    var _decs = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType, nodeViewPortalProviderAPI);
     decorations = decorations.add(newState.doc, [_decs]);
   }
-  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
+  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
     // Remove drop target decoration when dragging stops
     var dropTargetDecs = decorations.find(undefined, undefined, function (spec) {
       return spec.type === 'drop-target-decoration';
@@ -393,7 +393,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
     // if the transaction is only for analytics and user is dragging, continue to draw drop targets
     if (shouldCreateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
       var _meta$activeNode7;
-      var _decs2 = (0, _decorationsDropTarget.dropTargetDecorations)(newState, api, formatMessage, isNestedEnabled ? (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorRectCache);
+      var _decs2 = (0, _decorationsDropTarget.dropTargetDecorations)(newState, api, formatMessage, nodeViewPortalProviderAPI, isNestedEnabled ? (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorRectCache);
       decorations = decorations.add(newState.doc, _decs2);
     }
   }
@@ -422,7 +422,7 @@ var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, curr
     isPMDragging: (_meta$isPMDragging2 = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging2 !== void 0 ? _meta$isPMDragging2 : isPMDragging
   };
 };
-var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
+var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, nodeViewPortalProviderAPI) {
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isNestedEnabled = (0, _experiments.editorExperiment)('nested-dnd', true, {
@@ -450,9 +450,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
       },
       apply: function apply(tr, currentState, oldState, newState) {
         if (isOptimisedApply) {
-          return newApply(api, formatMessage, tr, currentState, newState, flags, anchorRectCache);
+          return newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache);
         }
-        return oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, anchorRectCache);
+        return oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache);
       }
     },
     props: {

package/dist/es2019/plugin.js

@@ -14,8 +14,9 @@ export const blockControlsPlugin = ({
     return [{
       name: 'blockControlsPmPlugin',
       plugin: ({
-        getIntl
-      }) => createPlugin(api, getIntl)
+        getIntl,
+        nodeViewPortalProviderAPI
+      }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI)
     }];
   },
   commands: {

package/dist/es2019/pm-plugins/decorations-common.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import ReactDOM from 'react-dom';
 import uuid from 'uuid';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 export const TYPE_HANDLE_DEC = 'drag-handle';
@@ -21,11 +22,18 @@ class ObjHash {
   }
 }
 _defineProperty(ObjHash, "caching", new WeakMap());
-export const unmountDecorations = selector => {
+export const unmountDecorations = (nodeViewPortalProviderAPI, selector, key) => {
   // Removing decorations manually instead of using native destroy function in prosemirror API
   // as it was more responsive and causes less re-rendering
   const decorationsToRemove = document.querySelectorAll(`[${selector}="true"]`);
   decorationsToRemove.forEach(el => {
-    ReactDOM.unmountComponentAtNode(el);
+    if (fg('platform_editor_react18_plugin_portalprovider')) {
+      const nodeKey = el.getAttribute(key);
+      if (nodeKey) {
+        nodeViewPortalProviderAPI.remove(nodeKey);
+      }
+    } else {
+      ReactDOM.unmountComponentAtNode(el);
+    }
   });
 };

package/dist/es2019/pm-plugins/decorations-drag-handle.js

@@ -20,9 +20,10 @@ export const emptyParagraphNodeDecorations = () => {
 export const findHandleDec = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_HANDLE_DEC);
 };
-export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeType, handleOptions) => {
-  unmountDecorations('data-blocks-drag-handle-container');
+export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions) => {
+  unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   let unbind;
+  const key = uuid();
   return Decoration.widget(pos, (view, getPos) => {
     const element = document.createElement('span');
     // Need to set it to inline to avoid text being split when merging two paragraphs
@@ -30,6 +31,7 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
     element.style.display = fg('platform_editor_element_dnd_nested_fix_patch_2') ? 'block' : 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
+    element.setAttribute('data-blocks-drag-handle-key', key);
     let isTopLevelNode = true;
     if (editorExperiment('nested-dnd', true)) {
       const newPos = fg('platform_editor_element_dnd_nested_fix_patch_3') ? getPos() : pos;
@@ -55,16 +57,29 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
     // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
     // due to margins applied to other nodes eg. Headings
     element.style.clear = 'unset';
-    ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
-      view,
-      api,
-      formatMessage,
-      getPos,
-      anchorName,
-      nodeType,
-      handleOptions,
-      isTopLevelNode
-    }), element);
+    if (fg('platform_editor_react18_plugin_portalprovider')) {
+      nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DragHandle, {
+        view,
+        api,
+        formatMessage,
+        getPos,
+        anchorName,
+        nodeType,
+        handleOptions,
+        isTopLevelNode
+      }), element, key);
+    } else {
+      ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
+        view,
+        api,
+        formatMessage,
+        getPos,
+        anchorName,
+        nodeType,
+        handleOptions,
+        isTopLevelNode
+      }), element);
+    }
     return element;
   }, {
     side: -1,

package/dist/es2019/pm-plugins/decorations-drop-target.js

@@ -1,5 +1,6 @@
 import { createElement } from 'react';
 import ReactDOM from 'react-dom';
+import uuid from 'uuid';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -76,10 +77,12 @@ const getGapAndOffset = (prevNode, nextNode, parentNode) => {
 export const findDropTargetDecs = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_DROP_TARGET_DEC);
 };
-export const createDropTargetDecoration = (pos, props, side, anchorRectCache, isSameLayout) => {
+export const createDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI, side, anchorRectCache, isSameLayout) => {
+  const key = uuid();
   return Decoration.widget(pos, (_, getPos) => {
     const element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
+    element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
     if (fg('platform_editor_drag_and_drop_target_v2')) {
       const {
@@ -89,17 +92,33 @@ export const createDropTargetDecoration = (pos, props, side, anchorRectCache, is
       element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, `${offset}px`);
       element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, `${gap}px`);
       element.style.setProperty('display', 'block');
-      ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, {
-        ...props,
-        getPos,
-        anchorRectCache,
-        isSameLayout
-      }), element);
+      if (fg('platform_editor_react18_plugin_portalprovider')) {
+        nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetV2, {
+          ...props,
+          getPos,
+          anchorRectCache,
+          isSameLayout
+        }), element, key);
+      } else {
+        ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, {
+          ...props,
+          getPos,
+          anchorRectCache,
+          isSameLayout
+        }), element);
+      }
     } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
-        ...props,
-        getPos
-      }), element);
+      if (fg('platform_editor_react18_plugin_portalprovider')) {
+        nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTarget, {
+          ...props,
+          getPos
+        }), element, key);
+      } else {
+        ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
+          ...props,
+          getPos
+        }), element);
+      }
     }
     return element;
   }, {
@@ -107,23 +126,33 @@ export const createDropTargetDecoration = (pos, props, side, anchorRectCache, is
     side
   });
 };
-export const createLayoutDropTargetDecoration = (pos, props, anchorRectCache) => {
+export const createLayoutDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI, anchorRectCache) => {
+  const key = uuid();
   return Decoration.widget(pos, (_, getPos) => {
     const element = document.createElement('div');
     element.setAttribute('data-blocks-drop-target-container', 'true');
+    element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
-    ReactDOM.render( /*#__PURE__*/createElement(DropTargetLayout, {
-      ...props,
-      getPos,
-      anchorRectCache
-    }), element);
+    if (fg('platform_editor_react18_plugin_portalprovider')) {
+      nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetLayout, {
+        ...props,
+        getPos,
+        anchorRectCache
+      }), element, key);
+    } else {
+      ReactDOM.render( /*#__PURE__*/createElement(DropTargetLayout, {
+        ...props,
+        getPos,
+        anchorRectCache
+      }), element);
+    }
     return element;
   }, {
     type: TYPE_DROP_TARGET_DEC
   });
 };
-export const dropTargetDecorations = (newState, api, formatMessage, activeNode, anchorRectCache, from, to) => {
-  unmountDecorations('data-blocks-drop-target-container');
+export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPortalProviderAPI, activeNode, anchorRectCache, from, to) => {
+  unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
   const decs = [];
   const POS_END_OF_DOC = newState.doc.nodeSize - 2;
   const docFrom = from === undefined || from < 0 ? 0 : from;
@@ -167,7 +196,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
             api,
             parent,
             formatMessage
-          }, anchorRectCache));
+          }, nodeViewPortalProviderAPI, anchorRectCache));
         }
       }
       if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
@@ -213,7 +242,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
       parentNode: parent || undefined,
       formatMessage,
       dropTargetStyle: shouldShowFullHeight ? 'remainingHeight' : 'default'
-    }, -1, anchorRectCache, isSameLayout));
+    }, nodeViewPortalProviderAPI, -1, anchorRectCache, isSameLayout));
     if (endPos !== undefined) {
       decs.push(createDropTargetDecoration(endPos, {
         api,
@@ -221,7 +250,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
         parentNode: parent || undefined,
         formatMessage,
         dropTargetStyle: 'remainingHeight'
-      }, -1, anchorRectCache));
+      }, nodeViewPortalProviderAPI, -1, anchorRectCache));
     }
     if (fg('platform_editor_drag_and_drop_target_v2')) {
       pushNodeStack(node, depth);
@@ -236,7 +265,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
       formatMessage,
       prevNode: newState.doc.lastChild || undefined,
       parentNode: newState.doc
-    }, undefined, anchorRectCache));
+    }, nodeViewPortalProviderAPI, undefined, anchorRectCache));
   }
   return decs;
 };