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

package/CHANGELOG.md

@@ -1,17 +1,37 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.3.0
+
+### Minor Changes
+
+-   [#95811](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95811)
+    [`115361312a0e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/115361312a0e) -
+    move drag position data to plugin state and map positions for collab support
+
+## 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
 
-- [#91934](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91934) [`b76a78c6a199`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b76a78c6a199) - bumped editor-prosemirror version to 4.0.0
+-   [#91934](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91934)
+    [`b76a78c6a199`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b76a78c6a199) -
+    bumped editor-prosemirror version to 4.0.0
 
 ### Patch Changes
 
-- Updated dependencies
+-   Updated dependencies
 
 ## 1.0.0
 
 ### Major Changes
 
-- [#91350](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91350) [`f27c4b41ebed`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f27c4b41ebed) - Adds new Editor Block Controls plugin
+-   [#91350](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91350)
+    [`f27c4b41ebed`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f27c4b41ebed) -
+    Adds new Editor Block Controls plugin

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,38 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         }
       }];
     },
-    getSharedState: function getSharedState(_editorState) {
-      return undefined;
+    commands: {
+      moveNode: function moveNode(start, to) {
+        return function (_ref2) {
+          var _node$nodeSize, _api$core;
+          var tr = _ref2.tr;
+          var node = tr.doc.nodeAt(start);
+          var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
+          var end = start + size;
+          var nodeCopy = tr.doc.content.cut(start, end); // cut the content
+          tr.delete(start, end); // delete the content from the original position
+          var mappedTo = tr.mapping.map(to);
+          tr.insert(mappedTo, nodeCopy); // 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, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3;
+      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,
+        activeNode: (_key$getState$activeN = (_key$getState2 = _main.key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : null,
+        decorationState: (_key$getState$decorat = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : []
+      };
+    },
+    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,71 @@
+"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 decs = [];
+  // 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 = [];
+  oldState.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (_node, pos, _parent, index) {
+    decorationState.push({
+      index: index,
+      pos: pos
+    });
+    decs.push(_view.Decoration.widget(pos, function () {
+      var element = document.createElement('div');
+      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
+        api: api,
+        index: index
+      }), element);
+      return element;
+    }));
+    return false;
+  });
+
+  /**
+   * We are adding a drop target at the end of the document because by default we
+   * draw all drop targets at the top of every node. It's better to draw the drop targets
+   * at the top of each node because that way we only need to know the start position of the
+   * node and not its size.
+   *
+   */
+  decorationState.push({
+    index: decorationState.length + 1,
+    pos: newState.doc.nodeSize - 2
+  });
+  decs.push(_view.Decoration.widget(newState.doc.nodeSize - 2, function () {
+    var element = document.createElement('div');
+    _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
+      api: api,
+      index: decorationState.length
+    }), element);
+    return element;
+  }));
+  return {
+    decs: decs,
+    decorationState: decorationState
+  };
+};
+var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(oldState,
+// @ts-ignore
+meta, api) {
+  return _view.DecorationSet.create(oldState.doc, [_view.Decoration.widget(meta.pos, 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
+    }), 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,70 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
     state: {
       init: function init() {
         return {
-          decorations: _view.DecorationSet.empty
+          decorations: _view.DecorationSet.empty,
+          decorationState: [],
+          activeNode: null,
+          isDragging: false,
+          isMenuOpen: false,
+          start: null,
+          end: null
         };
       },
-      apply: function apply(tr, currentState) {
-        var decorations = currentState.decorations;
+      apply: function apply(tr, currentState, oldState, newState) {
+        var _decorationState, _meta$pos, _meta$isDragging;
+        // return currentState;
+        var activeNode = currentState.activeNode,
+          decorations = currentState.decorations,
+          isMenuOpen = currentState.isMenuOpen,
+          decorationState = currentState.decorationState;
+        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 _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(oldState, newState, api),
+            decs = _dropTargetDecoration.decs,
+            updatedDecorationState = _dropTargetDecoration.decorationState;
+          decorationState = updatedDecorationState;
+          decorations = decorations.add(newState.doc, decs);
+        }
+
+        // Remove drop target decorations when dragging is stopped
+        if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false) {
+          decorations = _view.DecorationSet.create(newState.doc, []);
+        }
+
+        // Map decorations when the document changes
+        if (tr.docChanged && decorations !== _view.DecorationSet.empty) {
+          decorations = decorations.map(tr.mapping, tr.doc);
+        }
+
+        // Map drop target decoration positions when the document changes
+        if (tr.docChanged && currentState.isDragging) {
+          decorationState = decorationState.map(function (_ref) {
+            var index = _ref.index,
+              pos = _ref.pos;
+            return {
+              index: index,
+              pos: tr.mapping.map(pos)
+            };
+          });
+        }
+
+        // Map active node position when the document changes
+        var mappedActiveNodePos = tr.docChanged && activeNode ? tr.mapping.map(activeNode.pos) : activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
         return {
-          decorations: decorations
+          decorations: decorations,
+          decorationState: (_decorationState = decorationState) !== null && _decorationState !== void 0 ? _decorationState : currentState.decorationState,
+          activeNode: {
+            pos: (_meta$pos = meta === null || meta === void 0 ? void 0 : meta.pos) !== null && _meta$pos !== void 0 ? _meta$pos : mappedActiveNodePos
+          },
+          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
         };
       }
     },
@@ -28,6 +86,39 @@ 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 (_ref2) {
+              var tr = _ref2.tr;
+              return tr.setMeta(key, {
+                pos: topLevelPos,
+                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,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandle = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+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',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  background: 'grey',
+  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;
+  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, _adapter.draggable)({
+      element: element,
+      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,
+            start: start
+          });
+        });
+      },
+      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]);
+  return (0, _react2.jsx)("div", {
+    css: styles,
+    style: {
+      top: dom.clientHeight / 2 - _consts.DRAG_HANDLE_HEIGHT / 2
+    },
+    ref: buttonRef,
+    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,72 @@
+"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,
+    index = _ref.index;
+  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() {
+        var _api$blockControls;
+        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;
+        if (!activeNode || !decorationState) {
+          return;
+        }
+        var _ref3 = decorationState.find(function (dec) {
+            return dec.index === index;
+          }) || {},
+          pos = _ref3.pos;
+        if (activeNode && pos !== undefined) {
+          var _api$core, _api$blockControls2;
+          var start = activeNode.pos;
+          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos));
+        }
+      }
+    });
+  }, [index, api]);
+  return (
+    /*#__PURE__*/
+    // Note: Firefox has trouble with using a button element as the handle for drag and drop
+    _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,36 @@ export const blockControlsPlugin = ({
       plugin: () => createPlugin(api)
     }];
   },
-  getSharedState(_editorState) {
-    return undefined;
+  commands: {
+    moveNode: (start, to) => ({
+      tr
+    }) => {
+      var _node$nodeSize, _api$core;
+      const node = tr.doc.nodeAt(start);
+      const size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
+      const end = start + size;
+      let nodeCopy = tr.doc.content.cut(start, end); // cut the content
+      tr.delete(start, end); // delete the content from the original position
+      const mappedTo = tr.mapping.map(to);
+      tr.insert(mappedTo, nodeCopy); // 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, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3;
+    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,
+      activeNode: (_key$getState$activeN = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : null,
+      decorationState: (_key$getState$decorat = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : []
+    };
+  },
+  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,64 @@
+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 decs = [];
+  // 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 = [];
+  oldState.doc.nodesBetween(0, newState.doc.nodeSize - 2, (_node, pos, _parent, index) => {
+    decorationState.push({
+      index,
+      pos
+    });
+    decs.push(Decoration.widget(pos, () => {
+      const element = document.createElement('div');
+      ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
+        api,
+        index
+      }), element);
+      return element;
+    }));
+    return false;
+  });
+
+  /**
+   * We are adding a drop target at the end of the document because by default we
+   * draw all drop targets at the top of every node. It's better to draw the drop targets
+   * at the top of each node because that way we only need to know the start position of the
+   * node and not its size.
+   *
+   */
+  decorationState.push({
+    index: decorationState.length + 1,
+    pos: newState.doc.nodeSize - 2
+  });
+  decs.push(Decoration.widget(newState.doc.nodeSize - 2, () => {
+    const element = document.createElement('div');
+    ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
+      api,
+      index: decorationState.length
+    }), element);
+    return element;
+  }));
+  return {
+    decs,
+    decorationState
+  };
+};
+export const dragHandleDecoration = (oldState,
+// @ts-ignore
+meta, api) => {
+  return DecorationSet.create(oldState.doc, [Decoration.widget(meta.pos, (view, getPos) => {
+    const element = document.createElement('div');
+    ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
+      dom: meta.dom,
+      api,
+      start: meta.pos
+    }), element);
+    element.style.position = 'absolute';
+    return element;
+  })]);
+};