@atlaskit/editor-plugin-block-controls 1.4.20 → 1.4.22

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.22
+
+### Patch Changes
+
+- [#111855](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111855)
+  [`858997cc1d1e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/858997cc1d1e0) -
+  ED-23619 Improve drop latency by cleaning up decorations before they are being redrawn
+
+## 1.4.21
+
+### Patch Changes
+
+- [#111695](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111695)
+  [`4dadac69832d7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4dadac69832d7) -
+  Refactor Pragmatic usage
+- [#111695](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111695)
+  [`c8e7bf89f5bd8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c8e7bf89f5bd8) -
+  reduce rerenders in mousemovewrapper
+
 ## 1.4.20
 
 ### Patch Changes

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

@@ -14,6 +14,7 @@ var _dropTarget = require("../ui/drop-target");
 var _mouseMoveWrapper = require("../ui/mouse-move-wrapper");
 var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api) {
   var decs = [];
+  unmountDecorations('data-blocks-drop-target-container');
   // Decoration state is used to keep track of the position of the drop targets
   // and allows us to easily map the updated position in the plugin apply method.
   var decorationState = [];
@@ -24,6 +25,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     });
     decs.push(_view.Decoration.widget(pos, function () {
       var element = document.createElement('div');
+      element.setAttribute('data-blocks-drop-target-container', 'true');
       _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
         api: api,
         index: index
@@ -48,6 +50,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
   });
   decs.push(_view.Decoration.widget(newState.doc.nodeSize - 2, function () {
     var element = document.createElement('div');
+    element.setAttribute('data-blocks-drop-target-container', 'true');
     _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
       api: api,
       index: decorationState.length
@@ -80,10 +83,12 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
  */
 var mouseMoveWrapperDecorations = exports.mouseMoveWrapperDecorations = function mouseMoveWrapperDecorations(newState, api) {
   var decs = [];
+  unmountDecorations('data-blocks-decoration-container');
   newState.doc.descendants(function (node, pos, _parent, index) {
     var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
     decs.push(_view.Decoration.widget(pos, function (view, getPos) {
       var element = document.createElement('div');
+      element.setAttribute('data-blocks-decoration-container', 'true');
       _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_mouseMoveWrapper.MouseMoveWrapper, {
         view: view,
         api: api,
@@ -108,6 +113,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
   return _view.Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement('div');
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
+    element.setAttribute('data-blocks-drag-handle-container', 'true');
     _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
       view: view,
       api: api,
@@ -118,6 +124,17 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     return element;
   }, {
     side: -1,
-    id: 'drag-handle'
+    id: 'drag-handle',
+    destroy: function destroy(node) {
+      _reactDom.default.unmountComponentAtNode(node);
+    }
+  });
+};
+var unmountDecorations = function unmountDecorations(selector) {
+  // 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);
   });
 };

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

@@ -12,26 +12,46 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
+var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _decorations = require("./decorations");
 var key = exports.key = new _state.PluginKey('blockControls');
 var destroyFn = function destroyFn(api) {
-  return (0, _adapter.monitorForElements)({
+  var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
+  var cleanupFn = [];
+  if (scrollable) {
+    cleanupFn.push((0, _element.autoScrollForElements)({
+      element: scrollable
+    }));
+  }
+  cleanupFn.push((0, _adapter.monitorForElements)({
     canMonitor: function canMonitor(_ref) {
       var source = _ref.source;
       return source.data.type === 'element';
     },
+    onDragStart: function onDragStart() {
+      scrollable.style.setProperty('scroll-behavior', 'unset');
+    },
     onDrop: function onDrop(_ref2) {
+      var _api$core;
       var location = _ref2.location,
         source = _ref2.source;
+      scrollable.style.setProperty('scroll-behavior', null);
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
+        var tr = _ref3.tr;
+        return tr.setMeta(key, {
+          isDragging: false
+        });
+      });
       // if no drop targets are rendered, assume that drop is invalid
       if (location.current.dropTargets.length === 0) {
-        var _api$core;
-        var _ref3 = source.data,
-          start = _ref3.start;
-        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref4) {
+        var _api$core2;
+        var _ref4 = source.data,
+          start = _ref4.start;
+        api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref5) {
           var _api$analytics;
-          var tr = _ref4.tr;
+          var tr = _ref5.tr;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
           api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
@@ -48,7 +68,8 @@ var destroyFn = function destroyFn(api) {
         });
       }
     }
-  });
+  }));
+  return _combine.combine.apply(void 0, cleanupFn);
 };
 var initialState = {
   decorations: _view.DecorationSet.empty,
@@ -56,8 +77,6 @@ var initialState = {
   activeNode: null,
   isDragging: false,
   isMenuOpen: false,
-  start: null,
-  end: null,
   editorHeight: 0,
   isResizerResizing: false,
   isDocSizeLimitEnabled: false
@@ -74,7 +93,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         return initialState;
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight, _isResizerResizing;
+        var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
         if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
           return initialState;
         }
@@ -89,29 +108,31 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         // If tables or media are being resized, we want to hide the drag handle
         var resizerMeta = tr.getMeta('is-resizer-resizing');
         isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
-        var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
-
-        // This is not targeted enough - it's trying to catch events like expand being set to breakout
-        var maybeWidthUpdated = tr.docChanged && oldState.doc.nodeSize === newState.doc.nodeSize && oldState.doc.childCount === newState.doc.childCount;
         var nodeCountChanged = oldState.doc.childCount !== newState.doc.childCount;
 
         // During resize, remove the drag handle widget
-        if (isResizerResizing || nodeCountChanged) {
-          var oldHandle = decorations.find().filter(function (_ref5) {
-            var spec = _ref5.spec;
+        if (isResizerResizing || nodeCountChanged || meta !== null && meta !== void 0 && meta.nodeMoved) {
+          var oldHandle = decorations.find().filter(function (_ref6) {
+            var spec = _ref6.spec;
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(oldHandle);
         }
 
+        // This is not targeted enough - it's trying to catch events like expand being set to breakout
+        var maybeWidthUpdated = tr.docChanged && oldState.doc.nodeSize === newState.doc.nodeSize && !nodeCountChanged;
+        var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || resizerMeta === false || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
+
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
-        var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || resizerMeta === false || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) && tr.docChanged;
-        if (redrawDecorations && isResizerResizing === false && api) {
+        if (redrawDecorations && !isResizerResizing && api) {
           decorations = _view.DecorationSet.create(newState.doc, []);
           var nodeDecs = (0, _decorations.nodeDecorations)(newState);
           var mouseWrapperDecs = (0, _decorations.mouseMoveWrapperDecorations)(newState, api);
           decorations = decorations.add(newState.doc, [].concat((0, _toConsumableArray2.default)(nodeDecs), (0, _toConsumableArray2.default)(mouseWrapperDecs)));
-          if (activeNode) {
+
+          // Note: Quite often the handle is not in the right position after a node is moved
+          // it is safer for now to not show it when a node is moved
+          if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
             var draghandleDec = (0, _decorations.dragHandleDecoration)(activeNode.pos, activeNode.anchorName, activeNode.nodeType, api);
             decorations = decorations.add(newState.doc, [draghandleDec]);
           }
@@ -119,8 +140,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
 
         // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
         if (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) && api) {
-          var _oldHandle = decorations.find().filter(function (_ref6) {
-            var spec = _ref6.spec;
+          var _oldHandle = decorations.find().filter(function (_ref7) {
+            var spec = _ref7.spec;
             return spec.id === 'drag-handle';
           });
           decorations = decorations.remove(_oldHandle);
@@ -139,8 +160,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
 
         // Remove drop target decoration when dragging stops
         if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !tr.docChanged) {
-          var dropTargetDecs = decorations.find().filter(function (_ref7) {
-            var spec = _ref7.spec;
+          var dropTargetDecs = decorations.find().filter(function (_ref8) {
+            var spec = _ref8.spec;
             return spec.type === 'drop-target-decoration';
           });
           decorations = decorations.remove(dropTargetDecs);
@@ -148,9 +169,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
 
         // Map drop target decoration positions when the document changes
         if (tr.docChanged && currentState.isDragging) {
-          decorationState = decorationState.map(function (_ref8) {
-            var index = _ref8.index,
-              pos = _ref8.pos;
+          decorationState = decorationState.map(function (_ref9) {
+            var index = _ref9.index,
+              pos = _ref9.pos;
             return {
               index: index,
               pos: tr.mapping.map(pos)
@@ -169,6 +190,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           anchorName: activeNode.anchorName,
           nodeType: activeNode.nodeType
         } : activeNode;
+        var isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
         return {
           decorations: decorations,
           decorationState: (_decorationState = decorationState) !== null && _decorationState !== void 0 ? _decorationState : currentState.decorationState,
@@ -176,7 +198,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : currentState.isDragging,
           isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
           editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
-          isResizerResizing: (_isResizerResizing = isResizerResizing) !== null && _isResizerResizing !== void 0 ? _isResizerResizing : isResizerResizing,
+          isResizerResizing: isResizerResizing,
           isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled
         };
       }
@@ -209,10 +231,13 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
 
       // Start observing the editor DOM element
       resizeObserver.observe(dom);
+
+      // Start pragmatic monitors
+      var pragmaticCleanup = destroyFn(api);
       return {
         destroy: function destroy() {
           resizeObserver.unobserve(dom);
-          return destroyFn(api);
+          pragmaticCleanup();
         }
       };
     }

package/dist/cjs/ui/drag-handle.js

@@ -132,15 +132,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         }
         api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType));
         api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.focus();
-      },
-      onDrop: function onDrop() {
-        var _api$core7;
-        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref6) {
-          var tr = _ref6.tr;
-          return tr.setMeta(_main.key, {
-            isDragging: false
-          });
-        });
       }
     });
   }, [api, start, view, anchorName, nodeType]);

package/dist/cjs/ui/drop-target.js

@@ -10,9 +10,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
-var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 /** @jsx jsx */
 
@@ -47,21 +45,11 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
     if (!element) {
       return;
     }
-    var combined = [];
-    var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
-    if (scrollable) {
-      combined.push((0, _element.autoScrollForElements)({
-        element: scrollable
-      }));
-    }
-    combined.push((0, _adapter.dropTargetForElements)({
+    return (0, _adapter.dropTargetForElements)({
       element: element,
       getIsSticky: function getIsSticky() {
         return true;
       },
-      onDrag: function onDrag() {
-        scrollable.style.setProperty('scroll-behavior', 'unset');
-      },
       onDragEnter: function onDragEnter() {
         setIsDraggedOver(true);
       },
@@ -70,7 +58,6 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
       },
       onDrop: function onDrop() {
         var _api$blockControls;
-        scrollable.style.setProperty('scroll-behavior', null);
         var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
           activeNode = _ref2.activeNode,
           decorationState = _ref2.decorationState;
@@ -103,8 +90,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
           });
         }
       }
-    }));
-    return _combine.combine.apply(void 0, combined);
+    });
   }, [index, api]);
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop

package/dist/cjs/ui/mouse-move-wrapper.js

@@ -9,7 +9,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
-var _hooks = require("@atlaskit/editor-common/hooks");
 var _dragHandlePositions = require("../utils/drag-handle-positions");
 /** @jsx jsx */
 
@@ -29,21 +28,17 @@ var MouseMoveWrapper = exports.MouseMoveWrapper = function MouseMoveWrapper(_ref
     anchorName = _ref.anchorName,
     nodeType = _ref.nodeType,
     getPos = _ref.getPos;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockControls']),
-    blockControlsState = _useSharedPluginState.blockControlsState;
+  // Using a ref for isDragging reduce re-renders
+  var isDragging = (0, _react.useRef)(false);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isDragging = _useState2[0],
-    setIsDragging = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    hideWrapper = _useState4[0],
-    setHideWrapper = _useState4[1];
+    hideWrapper = _useState2[0],
+    setHideWrapper = _useState2[1];
   var ref = (0, _react.useRef)(null);
-  var _useState5 = (0, _react.useState)(),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    pos = _useState6[0],
-    setPos = _useState6[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    pos = _useState4[0],
+    setPos = _useState4[1];
   (0, _react.useEffect)(function () {
     // Adding this event listener to fix issue where wrapper isn't hidden if user navigates to node before page finishes loading
     // This will be removed when we refactor to remove this component
@@ -63,34 +58,42 @@ var MouseMoveWrapper = exports.MouseMoveWrapper = function MouseMoveWrapper(_ref
     };
   }, []);
   var onMouseEnter = (0, _react.useCallback)(function () {
-    if (!isDragging) {
+    if (!isDragging.current) {
       setHideWrapper(true);
     }
     var pos = getPos();
     if (pos === undefined) {
       return;
     }
-    if (api && api.blockControls && !isDragging) {
+    if (api && api.blockControls && !isDragging.current) {
       var _api$core;
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api.blockControls.commands.showDragHandleAt(pos, anchorName, nodeType));
     }
-  }, [setHideWrapper, getPos, isDragging, api, anchorName, nodeType]);
-  (0, _react.useEffect)(function () {
-    var _blockControlsState$a;
-    setIsDragging(Boolean(blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging));
-    var pos = getPos();
-    if (!(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.activeNode)) {
-      return;
-    }
-    if ((blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$a = blockControlsState.activeNode) === null || _blockControlsState$a === void 0 ? void 0 : _blockControlsState$a.pos) !== pos && !(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging)) {
+  }, [getPos, isDragging, api, anchorName, nodeType]);
+
+  //THIS IS TRIGGERED A LOT!
+  var onSharedStateChange = (0, _react.useCallback)(function (_ref2) {
+    var _nextSharedState$acti;
+    var nextSharedState = _ref2.nextSharedState;
+    if ((nextSharedState === null || nextSharedState === void 0 || (_nextSharedState$acti = nextSharedState.activeNode) === null || _nextSharedState$acti === void 0 ? void 0 : _nextSharedState$acti.anchorName) !== anchorName && !isDragging.current) {
       setHideWrapper(false);
-      return;
     }
-    if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging) {
+    if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.isDragging && !isDragging.current) {
+      isDragging.current = true;
       setHideWrapper(true);
-      return;
     }
-  }, [getPos, blockControlsState]);
+    if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isDragging) === false && isDragging.current) {
+      isDragging.current = false;
+      setHideWrapper(false);
+    }
+  }, [anchorName]);
+  (0, _react.useEffect)(function () {
+    var _api$blockControls;
+    var unbind = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.onChange(onSharedStateChange);
+    return function () {
+      unbind === null || unbind === void 0 || unbind();
+    };
+  }, [onSharedStateChange, api]);
   (0, _react.useLayoutEffect)(function () {
     var supportsAnchor = CSS.supports('height', "anchor-size(".concat(anchorName, " height)")) && CSS.supports('top', "anchor(".concat(anchorName, " start)"));
     if (supportsAnchor) {

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

@@ -6,6 +6,7 @@ import { DropTarget } from '../ui/drop-target';
 import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
 export const dropTargetDecorations = (oldState, newState, api) => {
   const decs = [];
+  unmountDecorations('data-blocks-drop-target-container');
   // Decoration state is used to keep track of the position of the drop targets
   // and allows us to easily map the updated position in the plugin apply method.
   const decorationState = [];
@@ -16,6 +17,7 @@ export const dropTargetDecorations = (oldState, newState, api) => {
     });
     decs.push(Decoration.widget(pos, () => {
       const element = document.createElement('div');
+      element.setAttribute('data-blocks-drop-target-container', 'true');
       ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
         api,
         index
@@ -40,6 +42,7 @@ export const dropTargetDecorations = (oldState, newState, api) => {
   });
   decs.push(Decoration.widget(newState.doc.nodeSize - 2, () => {
     const element = document.createElement('div');
+    element.setAttribute('data-blocks-drop-target-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
       api,
       index: decorationState.length
@@ -73,10 +76,12 @@ export const nodeDecorations = newState => {
  */
 export const mouseMoveWrapperDecorations = (newState, api) => {
   const decs = [];
+  unmountDecorations('data-blocks-decoration-container');
   newState.doc.descendants((node, pos, _parent, index) => {
     const anchorName = `--node-anchor-${node.type.name}-${index}`;
     decs.push(Decoration.widget(pos, (view, getPos) => {
       const element = document.createElement('div');
+      element.setAttribute('data-blocks-decoration-container', 'true');
       ReactDOM.render( /*#__PURE__*/createElement(MouseMoveWrapper, {
         view,
         api,
@@ -101,6 +106,7 @@ export const dragHandleDecoration = (pos, anchorName, nodeType, api) => {
   return Decoration.widget(pos, (view, getPos) => {
     const element = document.createElement('div');
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
+    element.setAttribute('data-blocks-drag-handle-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
       view,
       api,
@@ -111,6 +117,17 @@ export const dragHandleDecoration = (pos, anchorName, nodeType, api) => {
     return element;
   }, {
     side: -1,
-    id: 'drag-handle'
+    id: 'drag-handle',
+    destroy: node => {
+      ReactDOM.unmountComponentAtNode(node);
+    }
+  });
+};
+const unmountDecorations = selector => {
+  // 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);
   });
 };

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

@@ -4,25 +4,46 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { dragHandleDecoration, dropTargetDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
 export const key = new PluginKey('blockControls');
 const destroyFn = api => {
-  return monitorForElements({
+  const scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
+  const cleanupFn = [];
+  if (scrollable) {
+    cleanupFn.push(autoScrollForElements({
+      element: scrollable
+    }));
+  }
+  cleanupFn.push(monitorForElements({
     canMonitor: ({
       source
     }) => source.data.type === 'element',
+    onDragStart: () => {
+      scrollable.style.setProperty('scroll-behavior', 'unset');
+    },
     onDrop: ({
       location,
       source
     }) => {
+      var _api$core;
+      scrollable.style.setProperty('scroll-behavior', null);
+      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+        tr
+      }) => {
+        return tr.setMeta(key, {
+          isDragging: false
+        });
+      });
       // if no drop targets are rendered, assume that drop is invalid
       if (location.current.dropTargets.length === 0) {
-        var _api$core;
+        var _api$core2;
         const {
           start
         } = source.data;
-        api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+        api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
           tr
         }) => {
           var _api$analytics;
@@ -42,7 +63,8 @@ const destroyFn = api => {
         });
       }
     }
-  });
+  }));
+  return combine(...cleanupFn);
 };
 const initialState = {
   decorations: DecorationSet.empty,
@@ -50,8 +72,6 @@ const initialState = {
   activeNode: null,
   isDragging: false,
   isMenuOpen: false,
-  start: null,
-  end: null,
   editorHeight: 0,
   isResizerResizing: false,
   isDocSizeLimitEnabled: false
@@ -68,7 +88,7 @@ export const createPlugin = api => {
         return initialState;
       },
       apply(tr, currentState, oldState, newState) {
-        var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight, _isResizerResizing;
+        var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
         if (initialState.isDocSizeLimitEnabled && newState.doc.nodeSize > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
           return initialState;
         }
@@ -85,28 +105,30 @@ export const createPlugin = api => {
         // If tables or media are being resized, we want to hide the drag handle
         const resizerMeta = tr.getMeta('is-resizer-resizing');
         isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
-        const isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
-
-        // This is not targeted enough - it's trying to catch events like expand being set to breakout
-        const maybeWidthUpdated = tr.docChanged && oldState.doc.nodeSize === newState.doc.nodeSize && oldState.doc.childCount === newState.doc.childCount;
         const nodeCountChanged = oldState.doc.childCount !== newState.doc.childCount;
 
         // During resize, remove the drag handle widget
-        if (isResizerResizing || nodeCountChanged) {
+        if (isResizerResizing || nodeCountChanged || meta !== null && meta !== void 0 && meta.nodeMoved) {
           const oldHandle = decorations.find().filter(({
             spec
           }) => spec.id === 'drag-handle');
           decorations = decorations.remove(oldHandle);
         }
 
+        // This is not targeted enough - it's trying to catch events like expand being set to breakout
+        const maybeWidthUpdated = tr.docChanged && oldState.doc.nodeSize === newState.doc.nodeSize && !nodeCountChanged;
+        const redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || resizerMeta === false || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
+
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
-        const redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || maybeWidthUpdated || nodeCountChanged || resizerMeta === false || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) && tr.docChanged;
-        if (redrawDecorations && isResizerResizing === false && api) {
+        if (redrawDecorations && !isResizerResizing && api) {
           decorations = DecorationSet.create(newState.doc, []);
           const nodeDecs = nodeDecorations(newState);
           const mouseWrapperDecs = mouseMoveWrapperDecorations(newState, api);
           decorations = decorations.add(newState.doc, [...nodeDecs, ...mouseWrapperDecs]);
-          if (activeNode) {
+
+          // Note: Quite often the handle is not in the right position after a node is moved
+          // it is safer for now to not show it when a node is moved
+          if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved)) {
             const draghandleDec = dragHandleDecoration(activeNode.pos, activeNode.anchorName, activeNode.nodeType, api);
             decorations = decorations.add(newState.doc, [draghandleDec]);
           }
@@ -164,6 +186,7 @@ export const createPlugin = api => {
           anchorName: activeNode.anchorName,
           nodeType: activeNode.nodeType
         } : activeNode;
+        const isEmptyDoc = newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
         return {
           decorations,
           decorationState: (_decorationState = decorationState) !== null && _decorationState !== void 0 ? _decorationState : currentState.decorationState,
@@ -171,7 +194,7 @@ export const createPlugin = api => {
           isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : currentState.isDragging,
           isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
           editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
-          isResizerResizing: (_isResizerResizing = isResizerResizing) !== null && _isResizerResizing !== void 0 ? _isResizerResizing : isResizerResizing,
+          isResizerResizing: isResizerResizing,
           isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled
         };
       }
@@ -204,10 +227,13 @@ export const createPlugin = api => {
 
       // Start observing the editor DOM element
       resizeObserver.observe(dom);
+
+      // Start pragmatic monitors
+      const pragmaticCleanup = destroyFn(api);
       return {
         destroy() {
           resizeObserver.unobserve(dom);
-          return destroyFn(api);
+          pragmaticCleanup();
         }
       };
     }