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

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;
 };

package/dist/es2019/pm-plugins/handle-mouse-over.js

@@ -8,13 +8,19 @@ const isEmptyNestedParagraphOrHeading = target => {
   }
   return false;
 };
+const isEmptyParagraphOrPlaceholder = node => {
+  if (node && node.type.name === 'paragraph') {
+    var _node$firstChild;
+    return node.childCount === 0 || node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'placeholder';
+  }
+  return false;
+};
 const isLayoutColumnWithoutContent = node => {
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutColumn') {
     let foundNonEmptyNode = false;
     for (let i = 0; i < node.childCount; i++) {
-      var _child$firstChild;
       const child = node.child(i);
-      if (child.content.size && ((_child$firstChild = child.firstChild) === null || _child$firstChild === void 0 ? void 0 : _child$firstChild.type.name) !== 'placeholder') {
+      if (!isEmptyParagraphOrPlaceholder(child)) {
         foundNonEmptyNode = true;
         break;
       }

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

@@ -93,7 +93,7 @@ const initialState = {
   isDocSizeLimitEnabled: null,
   isPMDragging: false
 };
-export const newApply = (api, formatMessage, tr, currentState, newState, flags, anchorRectCache) => {
+export const 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;
   let {
     activeNode,
@@ -186,7 +186,7 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     var _activeNode5, _activeNode6;
     const oldHandle = 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);
-    const handleDec = 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);
+    const handleDec = 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]);
   }
 
@@ -194,7 +194,7 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
   const 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 || isBlocksDragTargetDebug()) {
     const dropTargetDecs = findDropTargetDecs(decorations);
     decorations = decorations.remove(dropTargetDecs);
   }
@@ -202,7 +202,7 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
   // Add drop targets when dragging starts or some are missing
   if (api) {
     if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing || isBlocksDragTargetDebug()) {
-      const decs = dropTargetDecorations(newState, api, formatMessage, latestActiveNode, anchorRectCache);
+      const decs = dropTargetDecorations(newState, api, formatMessage, nodeViewPortalProviderAPI, latestActiveNode, anchorRectCache);
       decorations = decorations.add(newState.doc, decs);
     }
   }
@@ -227,7 +227,7 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
   };
 };
-export const oldApply = (api, formatMessage, tr, currentState, oldState, newState, flags, anchorRectCache) => {
+export const 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;
   const {
     isNestedEnabled
@@ -319,7 +319,7 @@ export const oldApply = (api, formatMessage, tr, currentState, oldState, newStat
           decorations = decorations.remove(oldHandle);
         }
         const decAtPos = newNodeDecs.find(dec => dec.from === mappedPosisiton);
-        draghandleDec = dragHandleDecoration(api, formatMessage, (_meta$activeNode$pos = meta === null || meta === void 0 ? 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, (_ref = (_meta$activeNode$anch = meta === null || meta === void 0 ? 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 ? void 0 : (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref !== void 0 ? _ref : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref2 = (_meta$activeNode$node = meta === null || meta === void 0 ? 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 ? void 0 : (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref2 !== void 0 ? _ref2 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, meta === null || meta === void 0 ? void 0 : (_meta$activeNode6 = meta.activeNode) === null || _meta$activeNode6 === void 0 ? void 0 : _meta$activeNode6.handleOptions);
+        draghandleDec = dragHandleDecoration(api, formatMessage, (_meta$activeNode$pos = meta === null || meta === void 0 ? 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, (_ref = (_meta$activeNode$anch = meta === null || meta === void 0 ? 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 ? void 0 : (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref !== void 0 ? _ref : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref2 = (_meta$activeNode$node = meta === null || meta === void 0 ? 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 ? void 0 : (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref2 !== void 0 ? _ref2 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, nodeViewPortalProviderAPI, meta === null || meta === void 0 ? void 0 : (_meta$activeNode6 = meta.activeNode) === null || _meta$activeNode6 === void 0 ? void 0 : _meta$activeNode6.handleOptions);
       } else {
         let nodeType = activeNode.nodeType;
         let anchorName = activeNode.anchorName;
@@ -332,7 +332,7 @@ export const oldApply = (api, formatMessage, tr, currentState, oldState, newStat
             anchorName
           };
         }
-        draghandleDec = dragHandleDecoration(api, formatMessage, activeNode.pos, anchorName, nodeType);
+        draghandleDec = dragHandleDecoration(api, formatMessage, activeNode.pos, anchorName, nodeType, nodeViewPortalProviderAPI);
       }
       decorations = decorations.add(newState.doc, [draghandleDec]);
     }
@@ -342,7 +342,7 @@ export const oldApply = (api, formatMessage, tr, currentState, oldState, newStat
   if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand2 = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand2 !== void 0 && _meta$activeNode$hand2.isFocused)) {
     const oldHandle = decorations.find(undefined, undefined, spec => spec.type === 'drag-handle');
     decorations = decorations.remove(oldHandle);
-    const decs = dragHandleDecoration(api, formatMessage, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
+    const decs = dragHandleDecoration(api, formatMessage, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, nodeViewPortalProviderAPI, meta.activeNode.handleOptions);
     decorations = decorations.add(newState.doc, [decs]);
   }
 
@@ -350,10 +350,10 @@ export const oldApply = (api, formatMessage, tr, currentState, oldState, newStat
   if (!isPerformanceFix && activeNodeWithNewNodeType && ((_activeNodeWithNewNod = activeNodeWithNewNodeType) === null || _activeNodeWithNewNod === void 0 ? void 0 : _activeNodeWithNewNod.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) && api) {
     const oldHandle = decorations.find(undefined, undefined, spec => spec.type === 'drag-handle');
     decorations = decorations.remove(oldHandle);
-    const decs = dragHandleDecoration(api, formatMessage, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
+    const decs = 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 || isBlocksDragTargetDebug()) {
     // Remove drop target decoration when dragging stops
     const dropTargetDecs = decorations.find(undefined, undefined, spec => spec.type === 'drop-target-decoration');
     decorations = decorations.remove(dropTargetDecs);
@@ -371,7 +371,7 @@ export const oldApply = (api, formatMessage, tr, currentState, oldState, newStat
     // if the transaction is only for analytics and user is dragging, continue to draw drop targets
     if (shouldCreateDropTargets || isBlocksDragTargetDebug()) {
       var _meta$activeNode7;
-      const decs = 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);
+      const decs = 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, decs);
     }
   }
@@ -396,7 +396,7 @@ export const oldApply = (api, formatMessage, tr, currentState, oldState, newStat
     isPMDragging: (_meta$isPMDragging2 = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging2 !== void 0 ? _meta$isPMDragging2 : isPMDragging
   };
 };
-export const createPlugin = (api, getIntl) => {
+export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
   const {
     formatMessage
   } = getIntl();
@@ -425,9 +425,9 @@ export const createPlugin = (api, getIntl) => {
       },
       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/esm/plugin.js

@@ -14,8 +14,9 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       return [{
         name: 'blockControlsPmPlugin',
         plugin: function plugin(_ref2) {
-          var getIntl = _ref2.getIntl;
-          return createPlugin(api, getIntl);
+          var getIntl = _ref2.getIntl,
+            nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
+          return createPlugin(api, getIntl, nodeViewPortalProviderAPI);
         }
       }];
     },

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

@@ -3,6 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 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 var TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 export var TYPE_HANDLE_DEC = 'drag-handle';
@@ -32,11 +33,18 @@ var ObjHash = /*#__PURE__*/function () {
   return ObjHash;
 }();
 _defineProperty(ObjHash, "caching", new WeakMap());
-export var unmountDecorations = function unmountDecorations(selector) {
+export var 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.unmountComponentAtNode(el);
+    if (fg('platform_editor_react18_plugin_portalprovider')) {
+      var nodeKey = el.getAttribute(key);
+      if (nodeKey) {
+        nodeViewPortalProviderAPI.remove(nodeKey);
+      }
+    } else {
+      ReactDOM.unmountComponentAtNode(el);
+    }
   });
 };

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

@@ -22,9 +22,10 @@ export var findHandleDec = function findHandleDec(decorations, from, to) {
     return spec.type === TYPE_HANDLE_DEC;
   });
 };
-export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, handleOptions) {
-  unmountDecorations('data-blocks-drag-handle-container');
+export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions) {
+  unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   var unbind;
+  var key = uuid();
   return 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
@@ -32,6 +33,7 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
     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);
     var isTopLevelNode = true;
     if (editorExperiment('nested-dnd', true)) {
       var newPos = fg('platform_editor_element_dnd_nested_fix_patch_3') ? getPos() : pos;
@@ -57,16 +59,31 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
     // 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: view,
-      api: api,
-      formatMessage: formatMessage,
-      getPos: getPos,
-      anchorName: anchorName,
-      nodeType: nodeType,
-      handleOptions: handleOptions,
-      isTopLevelNode: isTopLevelNode
-    }), element);
+    if (fg('platform_editor_react18_plugin_portalprovider')) {
+      nodeViewPortalProviderAPI.render(function () {
+        return /*#__PURE__*/createElement(DragHandle, {
+          view: view,
+          api: api,
+          formatMessage: formatMessage,
+          getPos: getPos,
+          anchorName: anchorName,
+          nodeType: nodeType,
+          handleOptions: handleOptions,
+          isTopLevelNode: isTopLevelNode
+        });
+      }, element, key);
+    } else {
+      ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
+        view: view,
+        api: api,
+        formatMessage: formatMessage,
+        getPos: getPos,
+        anchorName: anchorName,
+        nodeType: nodeType,
+        handleOptions: handleOptions,
+        isTopLevelNode: isTopLevelNode
+      }), element);
+    }
     return element;
   }, {
     side: -1,

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

@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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';
@@ -81,10 +82,12 @@ export var findDropTargetDecs = function findDropTargetDecs(decorations, from, t
     return spec.type === TYPE_DROP_TARGET_DEC;
   });
 };
-export var createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorRectCache, isSameLayout) {
+export var createDropTargetDecoration = function createDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, side, anchorRectCache, isSameLayout) {
+  var key = uuid();
   return 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 (fg('platform_editor_drag_and_drop_target_v2')) {
       var _getGapAndOffset = getGapAndOffset(props.prevNode, props.nextNode, props.parentNode),
@@ -93,15 +96,33 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
       element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, "".concat(offset, "px"));
       element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, "".concat(gap, "px"));
       element.style.setProperty('display', 'block');
-      ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
-        getPos: getPos,
-        anchorRectCache: anchorRectCache,
-        isSameLayout: isSameLayout
-      })), element);
+      if (fg('platform_editor_react18_plugin_portalprovider')) {
+        nodeViewPortalProviderAPI.render(function () {
+          return /*#__PURE__*/createElement(DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
+            getPos: getPos,
+            anchorRectCache: anchorRectCache,
+            isSameLayout: isSameLayout
+          }));
+        }, element, key);
+      } else {
+        ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
+          getPos: getPos,
+          anchorRectCache: anchorRectCache,
+          isSameLayout: isSameLayout
+        })), element);
+      }
     } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DropTarget, _objectSpread(_objectSpread({}, props), {}, {
-        getPos: getPos
-      })), element);
+      if (fg('platform_editor_react18_plugin_portalprovider')) {
+        nodeViewPortalProviderAPI.render(function () {
+          return /*#__PURE__*/createElement(DropTarget, _objectSpread(_objectSpread({}, props), {}, {
+            getPos: getPos
+          }));
+        }, element, key);
+      } else {
+        ReactDOM.render( /*#__PURE__*/createElement(DropTarget, _objectSpread(_objectSpread({}, props), {}, {
+          getPos: getPos
+        })), element);
+      }
     }
     return element;
   }, {
@@ -109,22 +130,33 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
     side: side
   });
 };
-export var createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props, anchorRectCache) {
+export var createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, anchorRectCache) {
+  var key = uuid();
   return 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.render( /*#__PURE__*/createElement(DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
-      getPos: getPos,
-      anchorRectCache: anchorRectCache
-    })), element);
+    if (fg('platform_editor_react18_plugin_portalprovider')) {
+      nodeViewPortalProviderAPI.render(function () {
+        return /*#__PURE__*/createElement(DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
+          getPos: getPos,
+          anchorRectCache: anchorRectCache
+        }));
+      }, element, key);
+    } else {
+      ReactDOM.render( /*#__PURE__*/createElement(DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
+        getPos: getPos,
+        anchorRectCache: anchorRectCache
+      })), element);
+    }
     return element;
   }, {
     type: TYPE_DROP_TARGET_DEC
   });
 };
-export var dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode, anchorRectCache, from, to) {
-  unmountDecorations('data-blocks-drop-target-container');
+export var dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, nodeViewPortalProviderAPI, activeNode, anchorRectCache, from, to) {
+  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;
@@ -168,7 +200,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
             api: api,
             parent: parent,
             formatMessage: formatMessage
-          }, anchorRectCache));
+          }, nodeViewPortalProviderAPI, anchorRectCache));
         }
       }
       if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
@@ -214,7 +246,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
       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,
@@ -222,7 +254,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
         parentNode: parent || undefined,
         formatMessage: formatMessage,
         dropTargetStyle: 'remainingHeight'
-      }, -1, anchorRectCache));
+      }, nodeViewPortalProviderAPI, -1, anchorRectCache));
     }
     if (fg('platform_editor_drag_and_drop_target_v2')) {
       pushNodeStack(node, depth);
@@ -237,7 +269,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
       formatMessage: formatMessage,
       prevNode: newState.doc.lastChild || undefined,
       parentNode: newState.doc
-    }, undefined, anchorRectCache));
+    }, nodeViewPortalProviderAPI, undefined, anchorRectCache));
   }
   return decs;
 };

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -8,13 +8,19 @@ var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(t
   }
   return false;
 };
+var isEmptyParagraphOrPlaceholder = function isEmptyParagraphOrPlaceholder(node) {
+  if (node && node.type.name === 'paragraph') {
+    var _node$firstChild;
+    return node.childCount === 0 || node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'placeholder';
+  }
+  return false;
+};
 var isLayoutColumnWithoutContent = function isLayoutColumnWithoutContent(node) {
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutColumn') {
     var foundNonEmptyNode = false;
     for (var i = 0; i < node.childCount; i++) {
-      var _child$firstChild;
       var child = node.child(i);
-      if (child.content.size && ((_child$firstChild = child.firstChild) === null || _child$firstChild === void 0 ? void 0 : _child$firstChild.type.name) !== 'placeholder') {
+      if (!isEmptyParagraphOrPlaceholder(child)) {
         foundNonEmptyNode = true;
         break;
       }