@atlaskit/editor-plugin-block-controls 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.2.0
+
+### Minor Changes
+
+- [#93512](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93512) [`15155cd6eb61`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/15155cd6eb61) - add basic dnd behaviour to block controls plugin
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/cjs/plugin.js

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.blockControlsPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _main = require("./pm-plugins/main");
+var _dragHandleMenu = require("./ui/drag-handle-menu");
+var _globalStyles = require("./ui/global-styles");
 var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPlugin(_ref) {
   var api = _ref.api;
   return {
@@ -17,8 +21,32 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         }
       }];
     },
-    getSharedState: function getSharedState(_editorState) {
-      return undefined;
+    commands: {
+      moveNode: function moveNode(start, end, to) {
+        return function (_ref2) {
+          var _api$core;
+          var tr = _ref2.tr;
+          var node = tr.doc.content.cut(start, end); // cut the content
+          tr.delete(start, end); // delete the content from the original position
+          tr.insert(tr.mapping.map(to), node); // insert the content at the new position
+          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.focus();
+          return tr;
+        };
+      }
+    },
+    getSharedState: function getSharedState(editorState) {
+      var _key$getState$isMenuO, _key$getState;
+      if (!editorState) {
+        return undefined;
+      }
+      return {
+        isMenuOpen: (_key$getState$isMenuO = (_key$getState = _main.key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false
+      };
+    },
+    contentComponent: function contentComponent() {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dragHandleMenu.DragHandleMenu, {
+        api: api
+      }), /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null));
     }
   };
 };

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dropTargetDecorations = exports.dragHandleDecoration = void 0;
+var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _dragHandle = require("../ui/drag-handle");
+var _dropTarget = require("../ui/drop-target");
+var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api) {
+  var decorations = [];
+  oldState.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos) {
+    decorations.push(_view.Decoration.widget(pos + node.nodeSize, function () {
+      var element = document.createElement('div');
+      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
+        api: api,
+        pos: pos + node.nodeSize
+      }), element);
+      return element;
+    }));
+    return false;
+  });
+  decorations.push(_view.Decoration.widget(0, function () {
+    var element = document.createElement('div');
+    _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
+      api: api,
+      pos: 0
+    }), element);
+    return element;
+  }));
+  return decorations;
+};
+var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(oldState,
+// @ts-ignore
+meta, api) {
+  return _view.DecorationSet.create(oldState.doc, [_view.Decoration.widget(meta.pos + meta.size, function (view, getPos) {
+    var element = document.createElement('div');
+    _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
+      dom: meta.dom,
+      api: api,
+      start: meta.pos,
+      end: meta.pos + meta.size
+    }), element);
+    element.style.position = 'absolute';
+    return element;
+  })]);
+};

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

@@ -7,6 +7,7 @@ exports.key = exports.createPlugin = void 0;
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _decorations = require("./decorations");
 var key = exports.key = new _state.PluginKey('blockControls');
 var createPlugin = exports.createPlugin = function createPlugin(api) {
   return new _safePlugin.SafePlugin({
@@ -14,13 +15,40 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
     state: {
       init: function init() {
         return {
-          decorations: _view.DecorationSet.empty
+          decorations: _view.DecorationSet.empty,
+          activeNode: null,
+          isDragging: false,
+          isMenuOpen: false
         };
       },
-      apply: function apply(tr, currentState) {
-        var decorations = currentState.decorations;
+      apply: function apply(tr, currentState, oldState, newState) {
+        var _meta$isDragging;
+        var activeNode = currentState.activeNode,
+          decorations = currentState.decorations,
+          isMenuOpen = currentState.isMenuOpen;
+        var meta = tr.getMeta(key);
+        // Drag handle decoration
+        if (meta && meta.pos !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && api) {
+          decorations = (0, _decorations.dragHandleDecoration)(newState, meta, api);
+        }
+        // Drop target decorations
+        if (meta !== null && meta !== void 0 && meta.isDragging && api) {
+          decorations = _view.DecorationSet.create(newState.doc, []);
+          var decs = (0, _decorations.dropTargetDecorations)(oldState, newState, api);
+          decorations = decorations.add(newState.doc, decs);
+        }
+        // Remove target decorations when dragging is stopped
+        if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false) {
+          decorations = _view.DecorationSet.create(newState.doc, []);
+        }
         return {
-          decorations: decorations
+          decorations: decorations,
+          activeNode: {
+            pos: meta === null || meta === void 0 ? void 0 : meta.pos,
+            size: meta === null || meta === void 0 ? void 0 : meta.size
+          },
+          isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : false,
+          isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen
         };
       }
     },
@@ -28,6 +56,40 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
       decorations: function decorations(state) {
         var _key$getState;
         return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
+      },
+      handleDOMEvents: {
+        mousemove: function mousemove(view, event) {
+          var pos = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY
+          });
+          if (pos !== null && pos !== void 0 && pos.inside && pos.inside > 0) {
+            var _api$core;
+            var node = view.state.doc.nodeAt(pos.inside);
+            if (!node) {
+              return;
+            }
+            var resolvedPos = view.state.doc.resolve(pos.pos);
+            var topLevelPos = resolvedPos.before(1); // 1 here restricts the depth to the root level
+            var topLevelNode = view.state.doc.nodeAt(topLevelPos);
+            if (!topLevelNode) {
+              return;
+            }
+            var dom = view.nodeDOM(topLevelPos);
+            if (!dom) {
+              return;
+            }
+            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref) {
+              var tr = _ref.tr;
+              return tr.setMeta(key, {
+                pos: topLevelPos,
+                size: topLevelNode.nodeSize,
+                dom: dom,
+                type: topLevelNode.type.name
+              });
+            });
+          }
+        }
       }
     }
   });

package/dist/cjs/ui/consts.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_HEIGHT = void 0;
+var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 48;
+var DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_WIDTH = 24;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandleMenu = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var DragHandleMenu = exports.DragHandleMenu = function DragHandleMenu(_ref) {
+  var api = _ref.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockControls']),
+    blockControlsState = _useSharedPluginState.blockControlsState;
+  return blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen ? /*#__PURE__*/_react.default.createElement("div", null, "menu") : null;
+};

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

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandle = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
+var _main = require("../pm-plugins/main");
+var _consts = require("./consts");
+var _dragPreview = require("./drag-preview");
+/** @jsx jsx */
+
+var styles = (0, _react2.css)({
+  position: 'absolute',
+  zIndex: 1,
+  height: _consts.DRAG_HANDLE_HEIGHT,
+  width: _consts.DRAG_HANDLE_WIDTH,
+  left: -_consts.DRAG_HANDLE_WIDTH
+});
+var DragHandle = exports.DragHandle = function DragHandle(_ref) {
+  var dom = _ref.dom,
+    api = _ref.api,
+    start = _ref.start,
+    end = _ref.end;
+  var buttonRef = (0, _react.useRef)(null);
+  var domRef = (0, _react.useRef)(dom);
+  (0, _react.useEffect)(function () {
+    var element = buttonRef.current;
+    if (!element) {
+      return;
+    }
+    return (0, _combine.combine)((0, _adapter.draggable)({
+      element: element,
+      getInitialData: function getInitialData() {
+        return {
+          start: start,
+          end: end
+        };
+      },
+      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
+        var nativeSetDragImage = _ref2.nativeSetDragImage;
+        (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
+          getOffset: function getOffset() {
+            var rect = domRef.current.getBoundingClientRect();
+            // Offset the drag preview to the center of the element
+            return {
+              x: 0,
+              y: rect.height / 2
+            };
+          },
+          render: function render(_ref3) {
+            var container = _ref3.container;
+            return (0, _dragPreview.dragPreview)(container, domRef);
+          },
+          nativeSetDragImage: nativeSetDragImage
+        });
+      },
+      onDragStart: function onDragStart() {
+        var _api$core;
+        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref4) {
+          var tr = _ref4.tr;
+          return tr.setMeta(_main.key, {
+            isDragging: true
+          });
+        });
+      },
+      onDrop: function onDrop() {
+        var _api$core2;
+        api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref5) {
+          var tr = _ref5.tr;
+          return tr.setMeta(_main.key, {
+            isDragging: false
+          });
+        });
+      }
+    }));
+  }, [api, start, end]);
+  return (0, _react2.jsx)("button", {
+    css: styles,
+    style: {
+      bottom: dom.clientHeight / 2 - _consts.DRAG_HANDLE_HEIGHT / 2
+    },
+    ref: buttonRef,
+    type: "button",
+    onClick: function onClick() {
+      var _api$core3;
+      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref6) {
+        var tr = _ref6.tr;
+        return tr.setMeta(_main.key, {
+          toggleMenu: true
+        });
+      });
+    }
+  });
+};

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dragPreview = void 0;
+var dragPreview = exports.dragPreview = function dragPreview(container, domRef) {
+  var rect = domRef.current.getBoundingClientRect();
+  container.style.width = "".concat(rect.width, "px");
+  container.style.height = "".concat(rect.height, "px");
+  container.style.pointerEvents = 'none';
+  var parent = document.createElement('div');
+  // ProseMirror class is required to make sure the cloned dom is styled correctly
+  parent.classList.add('ProseMirror');
+  var clonedDom = domRef.current.cloneNode(true);
+
+  // Remove any margin from the cloned element to ensure is doesn't position incorrectly
+  clonedDom.style.marginLeft = '0';
+  clonedDom.style.marginTop = '0';
+  clonedDom.style.marginRight = '0';
+  clonedDom.style.marginBottom = '0';
+  parent.appendChild(clonedDom);
+  container.appendChild(parent);
+  var scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
+  var scrollParentClassNames = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.className;
+
+  // Add the scroll parent class to the container to ensure the cloned element is styled correctly
+  container.className = scrollParentClassNames || '';
+  container.classList.remove('fabric-editor-popup-scroll-parent');
+  // Prevents a scrollbar from showing
+  container.style.overflow = 'visible';
+  return function () {
+    return container;
+  };
+};

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropTarget = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var DropTarget = exports.DropTarget = function DropTarget(_ref) {
+  var api = _ref.api,
+    pos = _ref.pos;
+  var ref = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isDraggedOver = _useState2[0],
+    setIsDraggedOver = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var element = ref.current;
+    if (!element) {
+      return;
+    }
+    return (0, _adapter.dropTargetForElements)({
+      element: element,
+      getIsSticky: function getIsSticky() {
+        return true;
+      },
+      onDragEnter: function onDragEnter() {
+        return setIsDraggedOver(true);
+      },
+      onDragLeave: function onDragLeave() {
+        return setIsDraggedOver(false);
+      },
+      onDrop: function onDrop(event) {
+        var _api$core, _api$blockControls;
+        var _ref2 = event.source.data,
+          start = _ref2.start,
+          end = _ref2.end;
+        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.moveNode(start, end, pos));
+      }
+    });
+  }, [pos, api]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '20px',
+      marginTop: '-22px',
+      top: '10px',
+      position: 'relative',
+      borderBottom: "solid ".concat(isDraggedOver ? 'blue' : 'transparent', " 2px")
+    },
+    ref: ref
+  });
+};

package/dist/cjs/ui/global-styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlobalStylesWrapper = void 0;
+var _react = require("@emotion/react");
+/** @jsx jsx */
+
+var globalStyles = (0, _react.css)({
+  '.ProseMirror-widget:first-child + *': {
+    'margin-top': '0 !important'
+  }
+});
+var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
+  return (0, _react.jsx)(_react.Global, {
+    styles: globalStyles
+  });
+};

package/dist/es2019/plugin.js

@@ -1,4 +1,7 @@
-import { createPlugin } from './pm-plugins/main';
+import React from 'react';
+import { createPlugin, key } from './pm-plugins/main';
+import { DragHandleMenu } from './ui/drag-handle-menu';
+import { GlobalStylesWrapper } from './ui/global-styles';
 export const blockControlsPlugin = ({
   api
 }) => ({
@@ -9,7 +12,30 @@ export const blockControlsPlugin = ({
       plugin: () => createPlugin(api)
     }];
   },
-  getSharedState(_editorState) {
-    return undefined;
+  commands: {
+    moveNode: (start, end, to) => ({
+      tr
+    }) => {
+      var _api$core;
+      let node = tr.doc.content.cut(start, end); // cut the content
+      tr.delete(start, end); // delete the content from the original position
+      tr.insert(tr.mapping.map(to), node); // insert the content at the new position
+      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.focus();
+      return tr;
+    }
+  },
+  getSharedState(editorState) {
+    var _key$getState$isMenuO, _key$getState;
+    if (!editorState) {
+      return undefined;
+    }
+    return {
+      isMenuOpen: (_key$getState$isMenuO = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false
+    };
+  },
+  contentComponent() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragHandleMenu, {
+      api: api
+    }), /*#__PURE__*/React.createElement(GlobalStylesWrapper, null));
   }
 });

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

@@ -0,0 +1,43 @@
+import { createElement } from 'react';
+import ReactDOM from 'react-dom';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { DragHandle } from '../ui/drag-handle';
+import { DropTarget } from '../ui/drop-target';
+export const dropTargetDecorations = (oldState, newState, api) => {
+  const decorations = [];
+  oldState.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos) => {
+    decorations.push(Decoration.widget(pos + node.nodeSize, () => {
+      const element = document.createElement('div');
+      ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
+        api,
+        pos: pos + node.nodeSize
+      }), element);
+      return element;
+    }));
+    return false;
+  });
+  decorations.push(Decoration.widget(0, () => {
+    const element = document.createElement('div');
+    ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
+      api,
+      pos: 0
+    }), element);
+    return element;
+  }));
+  return decorations;
+};
+export const dragHandleDecoration = (oldState,
+// @ts-ignore
+meta, api) => {
+  return DecorationSet.create(oldState.doc, [Decoration.widget(meta.pos + meta.size, (view, getPos) => {
+    const element = document.createElement('div');
+    ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
+      dom: meta.dom,
+      api,
+      start: meta.pos,
+      end: meta.pos + meta.size
+    }), element);
+    element.style.position = 'absolute';
+    return element;
+  })]);
+};

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

@@ -1,6 +1,7 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { dragHandleDecoration, dropTargetDecorations } from './decorations';
 export const key = new PluginKey('blockControls');
 export const createPlugin = api => {
   return new SafePlugin({
@@ -8,15 +9,42 @@ export const createPlugin = api => {
     state: {
       init() {
         return {
-          decorations: DecorationSet.empty
+          decorations: DecorationSet.empty,
+          activeNode: null,
+          isDragging: false,
+          isMenuOpen: false
         };
       },
-      apply(tr, currentState) {
-        const {
-          decorations
+      apply(tr, currentState, oldState, newState) {
+        var _meta$isDragging;
+        let {
+          activeNode,
+          decorations,
+          isMenuOpen
         } = currentState;
+        const meta = tr.getMeta(key);
+        // Drag handle decoration
+        if (meta && meta.pos !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && api) {
+          decorations = dragHandleDecoration(newState, meta, api);
+        }
+        // Drop target decorations
+        if (meta !== null && meta !== void 0 && meta.isDragging && api) {
+          decorations = DecorationSet.create(newState.doc, []);
+          const decs = dropTargetDecorations(oldState, newState, api);
+          decorations = decorations.add(newState.doc, decs);
+        }
+        // Remove target decorations when dragging is stopped
+        if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false) {
+          decorations = DecorationSet.create(newState.doc, []);
+        }
         return {
-          decorations
+          decorations,
+          activeNode: {
+            pos: meta === null || meta === void 0 ? void 0 : meta.pos,
+            size: meta === null || meta === void 0 ? void 0 : meta.size
+          },
+          isDragging: (_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : false,
+          isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen
         };
       }
     },
@@ -24,6 +52,39 @@ export const createPlugin = api => {
       decorations: state => {
         var _key$getState;
         return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
+      },
+      handleDOMEvents: {
+        mousemove(view, event) {
+          const pos = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY
+          });
+          if (pos !== null && pos !== void 0 && pos.inside && pos.inside > 0) {
+            var _api$core;
+            const node = view.state.doc.nodeAt(pos.inside);
+            if (!node) {
+              return;
+            }
+            const resolvedPos = view.state.doc.resolve(pos.pos);
+            const topLevelPos = resolvedPos.before(1); // 1 here restricts the depth to the root level
+            const topLevelNode = view.state.doc.nodeAt(topLevelPos);
+            if (!topLevelNode) {
+              return;
+            }
+            const dom = view.nodeDOM(topLevelPos);
+            if (!dom) {
+              return;
+            }
+            api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+              tr
+            }) => tr.setMeta(key, {
+              pos: topLevelPos,
+              size: topLevelNode.nodeSize,
+              dom,
+              type: topLevelNode.type.name
+            }));
+          }
+        }
       }
     }
   });

package/dist/es2019/ui/consts.js

@@ -0,0 +1,2 @@
+export const DRAG_HANDLE_HEIGHT = 48;
+export const DRAG_HANDLE_WIDTH = 24;

package/dist/es2019/ui/drag-handle-menu.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+export const DragHandleMenu = ({
+  api
+}) => {
+  const {
+    blockControlsState
+  } = useSharedPluginState(api, ['blockControls']);
+  return blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen ? /*#__PURE__*/React.createElement("div", null, "menu") : null;
+};