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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 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/main.js

@@ -12,18 +12,32 @@ 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 location = _ref2.location,
         source = _ref2.source;
+      scrollable.style.setProperty('scroll-behavior', null);
+
       // if no drop targets are rendered, assume that drop is invalid
       if (location.current.dropTargets.length === 0) {
         var _api$core;
@@ -48,7 +62,8 @@ var destroyFn = function destroyFn(api) {
         });
       }
     }
-  });
+  }));
+  return _combine.combine.apply(void 0, cleanupFn);
 };
 var initialState = {
   decorations: _view.DecorationSet.empty,
@@ -56,8 +71,6 @@ var initialState = {
   activeNode: null,
   isDragging: false,
   isMenuOpen: false,
-  start: null,
-  end: null,
   editorHeight: 0,
   isResizerResizing: false,
   isDocSizeLimitEnabled: false
@@ -74,7 +87,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,14 +102,10 @@ 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) {
+        if (isResizerResizing || nodeCountChanged || meta !== null && meta !== void 0 && meta.nodeMoved) {
           var oldHandle = decorations.find().filter(function (_ref5) {
             var spec = _ref5.spec;
             return spec.id === 'drag-handle';
@@ -104,14 +113,20 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
           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]);
           }
@@ -169,6 +184,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 +192,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 +225,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);
+          return pragmaticCleanup;
         }
       };
     }

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/main.js

@@ -4,18 +4,32 @@ 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
     }) => {
+      scrollable.style.setProperty('scroll-behavior', null);
+
       // if no drop targets are rendered, assume that drop is invalid
       if (location.current.dropTargets.length === 0) {
         var _api$core;
@@ -42,7 +56,8 @@ const destroyFn = api => {
         });
       }
     }
-  });
+  }));
+  return combine(...cleanupFn);
 };
 const initialState = {
   decorations: DecorationSet.empty,
@@ -50,8 +65,6 @@ const initialState = {
   activeNode: null,
   isDragging: false,
   isMenuOpen: false,
-  start: null,
-  end: null,
   editorHeight: 0,
   isResizerResizing: false,
   isDocSizeLimitEnabled: false
@@ -68,7 +81,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 +98,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 +179,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 +187,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 +220,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);
+          return pragmaticCleanup;
         }
       };
     }

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

@@ -3,9 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 const DEFAULT_DROP_INDICATOR_WIDTH = 760;
 const styleDropTarget = css({
@@ -37,26 +35,15 @@ export const DropTarget = ({
     if (!element) {
       return;
     }
-    const combined = [];
-    const scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
-    if (scrollable) {
-      combined.push(autoScrollForElements({
-        element: scrollable
-      }));
-    }
-    combined.push(dropTargetForElements({
+    return dropTargetForElements({
       element,
       getIsSticky: () => true,
-      onDrag: () => {
-        scrollable.style.setProperty('scroll-behavior', 'unset');
-      },
       onDragEnter: () => {
         setIsDraggedOver(true);
       },
       onDragLeave: () => setIsDraggedOver(false),
       onDrop: () => {
         var _api$blockControls;
-        scrollable.style.setProperty('scroll-behavior', null);
         const {
           activeNode,
           decorationState
@@ -91,8 +78,7 @@ export const DropTarget = ({
           });
         }
       }
-    }));
-    return combine(...combined);
+    });
   }, [index, api]);
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop

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

@@ -2,7 +2,6 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTopPosition } from '../utils/drag-handle-positions';
 const basicStyles = css({
   position: 'absolute',
@@ -21,10 +20,8 @@ export const MouseMoveWrapper = ({
   nodeType,
   getPos
 }) => {
-  const {
-    blockControlsState
-  } = useSharedPluginState(api, ['blockControls']);
-  const [isDragging, setIsDragging] = useState(false);
+  // Using a ref for isDragging reduce re-renders
+  const isDragging = useRef(false);
   const [hideWrapper, setHideWrapper] = useState(false);
   const ref = useRef(null);
   const [pos, setPos] = useState();
@@ -47,34 +44,43 @@ export const MouseMoveWrapper = ({
     };
   }, []);
   const onMouseEnter = useCallback(() => {
-    if (!isDragging) {
+    if (!isDragging.current) {
       setHideWrapper(true);
     }
     const 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 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api.blockControls.commands.showDragHandleAt(pos, anchorName, nodeType));
     }
-  }, [setHideWrapper, getPos, isDragging, api, anchorName, nodeType]);
-  useEffect(() => {
-    var _blockControlsState$a;
-    setIsDragging(Boolean(blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging));
-    const pos = getPos();
-    if (!(blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.activeNode)) {
-      return;
-    }
-    if ((blockControlsState === null || blockControlsState === void 0 ? 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!
+  const onSharedStateChange = useCallback(({
+    nextSharedState
+  }) => {
+    var _nextSharedState$acti;
+    if ((nextSharedState === null || nextSharedState === void 0 ? 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]);
+  useEffect(() => {
+    var _api$blockControls;
+    const unbind = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.onChange(onSharedStateChange);
+    return () => {
+      unbind === null || unbind === void 0 ? void 0 : unbind();
+    };
+  }, [onSharedStateChange, api]);
   useLayoutEffect(() => {
     const supportsAnchor = CSS.supports('height', `anchor-size(${anchorName} height)`) && CSS.supports('top', `anchor(${anchorName} start)`);
     if (supportsAnchor) {

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

@@ -5,18 +5,32 @@ 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 var key = new PluginKey('blockControls');
 var destroyFn = function destroyFn(api) {
-  return monitorForElements({
+  var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
+  var cleanupFn = [];
+  if (scrollable) {
+    cleanupFn.push(autoScrollForElements({
+      element: scrollable
+    }));
+  }
+  cleanupFn.push(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 location = _ref2.location,
         source = _ref2.source;
+      scrollable.style.setProperty('scroll-behavior', null);
+
       // if no drop targets are rendered, assume that drop is invalid
       if (location.current.dropTargets.length === 0) {
         var _api$core;
@@ -41,7 +55,8 @@ var destroyFn = function destroyFn(api) {
         });
       }
     }
-  });
+  }));
+  return combine.apply(void 0, cleanupFn);
 };
 var initialState = {
   decorations: DecorationSet.empty,
@@ -49,8 +64,6 @@ var initialState = {
   activeNode: null,
   isDragging: false,
   isMenuOpen: false,
-  start: null,
-  end: null,
   editorHeight: 0,
   isResizerResizing: false,
   isDocSizeLimitEnabled: false
@@ -67,7 +80,7 @@ export var 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;
         }
@@ -82,14 +95,10 @@ export var 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) {
+        if (isResizerResizing || nodeCountChanged || meta !== null && meta !== void 0 && meta.nodeMoved) {
           var oldHandle = decorations.find().filter(function (_ref5) {
             var spec = _ref5.spec;
             return spec.id === 'drag-handle';
@@ -97,14 +106,20 @@ export var createPlugin = function createPlugin(api) {
           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 === 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 === 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, []);
           var nodeDecs = nodeDecorations(newState);
           var mouseWrapperDecs = mouseMoveWrapperDecorations(newState, api);
           decorations = decorations.add(newState.doc, [].concat(_toConsumableArray(nodeDecs), _toConsumableArray(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 = dragHandleDecoration(activeNode.pos, activeNode.anchorName, activeNode.nodeType, api);
             decorations = decorations.add(newState.doc, [draghandleDec]);
           }
@@ -162,6 +177,7 @@ export var 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,
@@ -169,7 +185,7 @@ export var 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
         };
       }
@@ -202,10 +218,13 @@ export var 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);
+          return pragmaticCleanup;
         }
       };
     }

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

@@ -4,9 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 var DEFAULT_DROP_INDICATOR_WIDTH = 760;
 var styleDropTarget = css({
@@ -39,21 +37,11 @@ export var DropTarget = function DropTarget(_ref) {
     if (!element) {
       return;
     }
-    var combined = [];
-    var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
-    if (scrollable) {
-      combined.push(autoScrollForElements({
-        element: scrollable
-      }));
-    }
-    combined.push(dropTargetForElements({
+    return dropTargetForElements({
       element: element,
       getIsSticky: function getIsSticky() {
         return true;
       },
-      onDrag: function onDrag() {
-        scrollable.style.setProperty('scroll-behavior', 'unset');
-      },
       onDragEnter: function onDragEnter() {
         setIsDraggedOver(true);
       },
@@ -62,7 +50,6 @@ export var 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;
@@ -95,8 +82,7 @@ export var DropTarget = function DropTarget(_ref) {
           });
         }
       }
-    }));
-    return 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/esm/ui/mouse-move-wrapper.js

@@ -3,7 +3,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTopPosition } from '../utils/drag-handle-positions';
 var basicStyles = css({
   position: 'absolute',
@@ -21,21 +20,17 @@ export var MouseMoveWrapper = function MouseMoveWrapper(_ref) {
     anchorName = _ref.anchorName,
     nodeType = _ref.nodeType,
     getPos = _ref.getPos;
-  var _useSharedPluginState = useSharedPluginState(api, ['blockControls']),
-    blockControlsState = _useSharedPluginState.blockControlsState;
+  // Using a ref for isDragging reduce re-renders
+  var isDragging = useRef(false);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isDragging = _useState2[0],
-    setIsDragging = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hideWrapper = _useState4[0],
-    setHideWrapper = _useState4[1];
+    hideWrapper = _useState2[0],
+    setHideWrapper = _useState2[1];
   var ref = useRef(null);
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    pos = _useState6[0],
-    setPos = _useState6[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pos = _useState4[0],
+    setPos = _useState4[1];
   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
@@ -55,34 +50,42 @@ export var MouseMoveWrapper = function MouseMoveWrapper(_ref) {
     };
   }, []);
   var onMouseEnter = 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]);
-  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 = 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]);
+  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]);
   useLayoutEffect(function () {
     var supportsAnchor = CSS.supports('height', "anchor-size(".concat(anchorName, " height)")) && CSS.supports('top', "anchor(".concat(anchorName, " start)"));
     if (supportsAnchor) {

package/dist/types/pm-plugins/main.d.ts

@@ -1,6 +1,16 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, PluginState } from '../types';
 export declare const key: PluginKey<PluginState>;
-export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => SafePlugin<PluginState>;
+export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => SafePlugin<PluginState | {
+    decorations: DecorationSet;
+    decorationState: import("../types").DecorationState;
+    activeNode: any;
+    isDragging: any;
+    isMenuOpen: boolean | undefined;
+    editorHeight: any;
+    isResizerResizing: boolean;
+    isDocSizeLimitEnabled: boolean;
+}>;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -1,6 +1,16 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, PluginState } from '../types';
 export declare const key: PluginKey<PluginState>;
-export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => SafePlugin<PluginState>;
+export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => SafePlugin<PluginState | {
+    decorations: DecorationSet;
+    decorationState: import("../types").DecorationState;
+    activeNode: any;
+    isDragging: any;
+    isMenuOpen: boolean | undefined;
+    editorHeight: any;
+    isResizerResizing: boolean;
+    isDocSizeLimitEnabled: boolean;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.4.20",
+	"version": "1.4.21",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",