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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.13.24
+
+### Patch Changes
+
+- [#168183](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168183)
+  [`5d8ee46d0ab46`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5d8ee46d0ab46) -
+  Fix dragging issue of a layout column while layout is selected
+
+## 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/cjs/ui/drag-handle.js

@@ -95,6 +95,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     setDragHandleSelected = _useState4[1];
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
     featureFlagsState = _useSharedPluginState.featureFlagsState;
+  var isLayoutColumn = nodeType === 'layoutColumn';
   (0, _react.useEffect)(function () {
     // blockCard/datasource width is rendered correctly after this decoraton does. We need to observe for changes.
     if (nodeType === 'blockCard') {
@@ -146,6 +147,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   // but ensures the preview is generated correctly.
   var handleMouseDown = (0, _react.useCallback)(function () {
     var _api$core3;
+    if (!(isLayoutColumn && (0, _advancedLayoutsFlags.isPreRelease2)()) && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24885')) {
+      return undefined;
+    }
     api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
       var tr = _ref3.tr;
       var startPos = getPos();
@@ -156,12 +160,17 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       if (!node) {
         return tr;
       }
-      var $startPos = tr.doc.resolve(startPos + node.nodeSize);
-      var selection = new _state.TextSelection($startPos);
+      var selection;
+      if (isLayoutColumn && (0, _advancedLayoutsFlags.isPreRelease2)()) {
+        selection = new _state.NodeSelection(tr.doc.resolve(startPos));
+      } else {
+        var $startPos = tr.doc.resolve(startPos + node.nodeSize);
+        selection = new _state.TextSelection($startPos);
+      }
       tr.setSelection(selection);
       return tr;
     });
-  }, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos]);
+  }, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos, isLayoutColumn]);
   var handleKeyDown = (0, _react.useCallback)(function (e) {
     if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
       // allow user to use spacebar to select the node
@@ -282,7 +291,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
     }
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
-    var isLayoutColumn = nodeType === 'layoutColumn';
     if (supportsAnchor) {
       return {
         left: isEdgeCase ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : (0, _advancedLayoutsFlags.isPreRelease2)() && isLayoutColumn ? "calc((anchor(".concat(anchorName, " right) + anchor(").concat(anchorName, " left))/2 - ").concat(_consts.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
@@ -293,7 +301,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates, parentNodeType),
       top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? (0, _dragHandlePositions.getTopPosition)(dom, nodeType) : (0, _dragHandlePositions.getTopPosition)(dom)
     };
-  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos]);
+  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos, isLayoutColumn]);
   var _useState5 = (0, _react.useState)({
       display: 'none'
     }),
@@ -409,13 +417,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
       (0, _react2.jsx)("button", {
         type: "button",
-        css: [dragHandleButtonStyles, (0, _advancedLayoutsFlags.isPreRelease2)() && nodeType === 'layoutColumn' && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
+        css: [dragHandleButtonStyles, (0, _advancedLayoutsFlags.isPreRelease2)() && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
         style: positionStyles,
         onClick: handleOnClick,
-        onMouseDown: (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24885') ? undefined : handleMouseDown,
+        onMouseDown: handleMouseDown,
         onKeyDown: handleKeyDown,
         "data-testid": "block-ctrl-drag-handle"
       }, (0, _react2.jsx)(_dragHandler.default, {

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,