@atlaskit/editor-plugin-block-controls 1.4.9 → 1.4.10

package/dist/es2019/plugin.js

@@ -26,8 +26,40 @@ export const blockControlsPlugin = ({
       const mappedTo = tr.mapping.map(to);
       tr.insert(mappedTo, nodeCopy); // insert the content at the new position
       tr.setSelection(getSelection(tr, mappedTo));
+      tr.setMeta(key, {
+        nodeMoved: true
+      });
       api === null || api === void 0 ? void 0 : api.core.actions.focus();
       return tr;
+    },
+    showDragHandleAt: (pos, anchorName, nodeType) => ({
+      tr
+    }) => {
+      tr.setMeta(key, {
+        activeNode: {
+          pos,
+          anchorName,
+          nodeType
+        }
+      });
+      return tr;
+    },
+    setNodeDragged: (pos, anchorName) => ({
+      tr
+    }) => {
+      const newTr = tr;
+      if (pos === undefined) {
+        return tr;
+      }
+      newTr.setSelection(getSelection(newTr, pos));
+      newTr.setMeta(key, {
+        isDragging: true,
+        activeNode: {
+          pos,
+          anchorName
+        }
+      });
+      return newTr;
     }
   },
   getSharedState(editorState) {

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

@@ -1,9 +1,9 @@
 import { createElement } from 'react';
 import ReactDOM from 'react-dom';
-import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { DRAG_HANDLE_WIDTH, dragHandleGap } from '../ui/consts';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
+import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
 export const dropTargetDecorations = (oldState, newState, api) => {
   const decs = [];
   // Decoration state is used to keep track of the position of the drop targets
@@ -21,6 +21,8 @@ export const dropTargetDecorations = (oldState, newState, api) => {
         index
       }), element);
       return element;
+    }, {
+      type: 'drop-target-decoration'
     }));
     return false;
   });
@@ -43,39 +45,72 @@ export const dropTargetDecorations = (oldState, newState, api) => {
       index: decorationState.length
     }), element);
     return element;
+  }, {
+    type: 'drop-target-decoration'
   }));
   return {
     decs,
     decorationState
   };
 };
-export const dragHandleDecoration = (oldState, meta, api) => {
-  return DecorationSet.create(oldState.doc, [Decoration.widget(meta.pos, (view, getPos) => {
+export const nodeDecorations = newState => {
+  const decs = [];
+  newState.doc.descendants((node, pos, _parent, index) => {
+    const anchorName = `--node-anchor-${node.type.name}-${index}`;
+    const style = `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}`;
+    decs.push(Decoration.node(pos, pos + node.nodeSize, {
+      style,
+      ['data-drag-handler-anchor-name']: anchorName
+    }));
+    return false;
+  });
+  return decs;
+};
+/**
+ * Setting up decorations around each node to track mousemove events into each node
+ * When a mouseenter event is triggered on the node, we will set the activeNode to the node
+ * And show the drag handle
+ */
+export const mouseMoveWrapperDecorations = (newState, api) => {
+  const decs = [];
+  newState.doc.descendants((node, pos, _parent, index) => {
+    const anchorName = `--node-anchor-${node.type.name}-${index}`;
+    decs.push(Decoration.widget(pos, (view, getPos) => {
+      const element = document.createElement('div');
+      ReactDOM.render( /*#__PURE__*/createElement(MouseMoveWrapper, {
+        view,
+        api,
+        anchorName,
+        nodeType: node.type.name,
+        getPos
+      }), element);
+      return element;
+    }, {
+      type: 'mouse-move-wrapper',
+      side: -1,
+      ignoreSelection: true,
+      stopEvent: e => {
+        return true;
+      }
+    }));
+    return false;
+  });
+  return decs;
+};
+export const dragHandleDecoration = (pos, anchorName, nodeType, api) => {
+  return Decoration.widget(pos, (view, getPos) => {
     const element = document.createElement('div');
+    element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
-      dom: meta.dom,
+      view,
       api,
-      start: meta.pos
+      getPos,
+      anchorName,
+      nodeType
     }), element);
-    element.style.position = 'absolute';
-    element.style.zIndex = '1';
-
-    // If the selected node is a table or mediaSingle with resizer, we need to adjust the position of the drag handle
-    const resizer = ['table', 'mediaSingle'].includes(meta.type) ? meta.dom.querySelector('.resizer-item') : null;
-    if (resizer) {
-      element.style.left = getComputedStyle(resizer).transform === 'none' ? `${resizer.offsetLeft - dragHandleGap(meta.type) - DRAG_HANDLE_WIDTH}px` : `${resizer.offsetLeft - resizer.offsetWidth / 2 - dragHandleGap(meta.type) - DRAG_HANDLE_WIDTH}px`;
-    } else {
-      element.style.left = `${meta.dom.offsetLeft - dragHandleGap(meta.type) - DRAG_HANDLE_WIDTH}px`;
-    }
-    if (meta.type === 'table') {
-      const table = meta.dom.querySelector('table');
-      element.style.top = `${meta.dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0)}px`;
-    } else {
-      element.style.top = `${meta.dom.offsetTop}px`;
-    }
-    element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     return element;
   }, {
-    side: -1
-  })]);
+    side: -1,
+    id: 'drag-handle'
+  });
 };

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

@@ -1,7 +1,8 @@
+import rafSchedule from 'raf-schd';
 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';
+import { dragHandleDecoration, dropTargetDecorations, mouseMoveWrapperDecorations, nodeDecorations } from './decorations';
 export const key = new PluginKey('blockControls');
 export const createPlugin = api => {
   return new SafePlugin({
@@ -15,27 +16,47 @@ export const createPlugin = api => {
           isDragging: false,
           isMenuOpen: false,
           start: null,
-          end: null
+          end: null,
+          editorHeight: 0
         };
       },
       apply(tr, currentState, oldState, newState) {
-        var _decorationState, _meta$pos, _meta$isDragging;
+        var _decorationState, _meta$activeNode, _meta$isDragging, _meta$editorHeight;
         // return currentState;
         let {
           activeNode,
           decorations,
           isMenuOpen,
-          decorationState
+          decorationState,
+          editorHeight
         } = 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) {
+        // 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 || tr.docChanged && tr.doc.childCount === newState.doc.childCount || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) && tr.docChanged;
+        if (redrawDecorations && api) {
           decorations = DecorationSet.create(newState.doc, []);
+          const nodeDecs = nodeDecorations(newState);
+          const mouseWrapperDecs = mouseMoveWrapperDecorations(newState, api);
+          decorations = decorations.add(newState.doc, [...nodeDecs, ...mouseWrapperDecs]);
+          if (activeNode) {
+            const draghandleDec = dragHandleDecoration(activeNode.pos, activeNode.anchorName, activeNode.nodeType, api);
+            decorations = decorations.add(newState.doc, [draghandleDec]);
+          }
+        }
+
+        // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
+        if (meta !== null && meta !== void 0 && meta.activeNode && (meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) && api) {
+          const oldHandle = decorations.find().filter(({
+            spec
+          }) => spec.id === 'drag-handle');
+          decorations = decorations.remove(oldHandle);
+          const decs = dragHandleDecoration(meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, api);
+          decorations = decorations.add(newState.doc, [decs]);
+        }
+
+        // Add drop targets when node is being dragged
+        if (meta !== null && meta !== void 0 && meta.isDragging && !tr.docChanged && api) {
           const {
             decs,
             decorationState: updatedDecorationState
@@ -44,14 +65,12 @@ export const createPlugin = api => {
           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 = DecorationSet.create(newState.doc, []);
-        }
-
-        // Map decorations when the document changes
-        if (tr.docChanged && decorations !== DecorationSet.empty) {
-          decorations = decorations.map(tr.mapping, tr.doc);
+        // Remove drop target decoration when dragging stops
+        if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !tr.docChanged) {
+          const dropTargetDecs = decorations.find().filter(({
+            spec
+          }) => spec.type === 'drop-target-decoration');
+          decorations = decorations.remove(dropTargetDecs);
         }
 
         // Map drop target decoration positions when the document changes
@@ -67,16 +86,23 @@ export const createPlugin = api => {
           });
         }
 
+        // Map decorations if document changes and node decorations do not need to be redrawn
+        if (tr.docChanged && !redrawDecorations) {
+          decorations = decorations.map(tr.mapping, tr.doc);
+        }
+
         // Map active node position when the document changes
-        const mappedActiveNodePos = tr.docChanged && activeNode ? tr.mapping.map(activeNode.pos) : activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
+        const mappedActiveNodePos = tr.docChanged && activeNode ? {
+          pos: tr.mapping.map(activeNode.pos),
+          anchorName: activeNode.anchorName
+        } : activeNode;
         return {
           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
-          },
+          activeNode: (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : 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
+          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
         };
       }
     },
@@ -84,39 +110,31 @@ 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 ? void 0 : pos.inside) !== undefined && 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,
-              dom,
-              type: topLevelNode.type.name
-            }));
-          }
-        }
       }
+    },
+    view: editorView => {
+      const dom = editorView.dom;
+
+      // Use ResizeObserver to observe height changes
+      const resizeObserver = new ResizeObserver(rafSchedule(() => {
+        const editorHeight = dom.offsetHeight;
+
+        // Update the plugin state when the height changes
+        const pluginState = key.getState(editorView.state);
+        if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
+          editorView.dispatch(editorView.state.tr.setMeta(key, {
+            editorHeight
+          }));
+        }
+      }));
+
+      // Start observing the editor DOM element
+      resizeObserver.observe(dom);
+      return {
+        destroy() {
+          resizeObserver.unobserve(dom);
+        }
+      };
     }
   });
 };

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

@@ -1,14 +1,16 @@
 /** @jsx jsx */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { key } from '../pm-plugins/main';
+import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
 import { getSelection } from '../utils/getSelection';
-import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH } from './consts';
+import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, dragHandleGap } from './consts';
 import { dragPreview } from './drag-preview';
 const dragHandleButtonStyles = css({
+  position: 'absolute',
   padding: `${"var(--ds-space-025, 2px)"} 0`,
   boxSizing: 'border-box',
   display: 'flex',
@@ -22,10 +24,11 @@ const dragHandleButtonStyles = css({
   borderRadius: DRAG_HANDLE_BORDER_RADIUS,
   color: "var(--ds-icon, #44546F)",
   cursor: 'grab',
-  ':hover': {
+  zIndex: 2,
+  '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
   },
-  ':active': {
+  '&:active': {
     backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
   }
 });
@@ -34,26 +37,28 @@ const selectedStyles = css({
   color: "var(--ds-icon-selected, #0C66E4)"
 });
 export const DragHandle = ({
-  dom,
+  view,
   api,
-  start
+  getPos,
+  anchorName,
+  nodeType
 }) => {
+  const start = getPos();
   const buttonRef = useRef(null);
-  const domRef = useRef(dom);
   const [dragHandleSelected, setDragHandleSelected] = useState(false);
   const handleClick = useCallback(() => {
     var _api$core, _api$core2;
     setDragHandleSelected(!dragHandleSelected);
-    // TODO - add drag menu
-    // api?.core?.actions.execute(({ tr }) =>
-    //   tr.setMeta(key, {
-    //     toggleMenu: true,
-    //   }),
-    // );
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
       tr
     }) => {
+      if (start === undefined) {
+        return tr;
+      }
       tr.setSelection(getSelection(tr, start));
+      tr.setMeta(key, {
+        pos: start
+      });
       return tr;
     });
     api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.focus();
@@ -72,40 +77,58 @@ export const DragHandle = ({
           render: ({
             container
           }) => {
-            return dragPreview(container, domRef);
+            const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
+            if (!dom) {
+              return;
+            }
+            return dragPreview(container, dom);
           },
           nativeSetDragImage
         });
       },
       onDragStart() {
-        var _api$core3, _api$core4;
-        api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
-          tr
-        }) => {
-          const newTr = tr;
-          newTr.setSelection(getSelection(newTr, start));
-          newTr.setMeta(key, {
-            isDragging: true,
-            start
-          });
-          return newTr;
-        });
+        var _api$core3, _api$blockControls, _api$core4;
+        if (start === undefined) {
+          return;
+        }
+        api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setNodeDragged(start, anchorName));
         api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.focus();
       },
       onDrop() {
         var _api$core5;
         api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
           tr
-        }) => tr.setMeta(key, {
-          isDragging: false
-        }));
+        }) => {
+          return tr.setMeta(key, {
+            isDragging: false
+          });
+        });
       }
     });
-  }, [api, start]);
+  }, [api, start, view, anchorName]);
+  const positionStyles = useMemo(() => {
+    const supportsAnchor = CSS.supports('top', `anchor(${anchorName} start)`) && CSS.supports('left', `anchor(${anchorName} start)`);
+    const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
+    if (supportsAnchor) {
+      const hasResizer = (anchorName.includes('table') || anchorName.includes('mediaSingle')) && dom;
+      return {
+        left: hasResizer ? getLeftPosition(dom, nodeType) : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
+        top: anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
+      };
+    }
+    if (!dom) {
+      return;
+    }
+    return {
+      left: getLeftPosition(dom, nodeType),
+      top: getTopPosition(dom)
+    };
+  }, [anchorName, view, nodeType]);
   return jsx("button", {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
     ref: buttonRef,
+    style: positionStyles,
     onClick: handleClick,
     "data-testid": "block-ctrl-drag-handle"
   }, jsx(DragHandlerIcon, {

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

@@ -1,5 +1,5 @@
-export const dragPreview = (container, domRef) => {
-  const rect = domRef.current.getBoundingClientRect();
+export const dragPreview = (container, dom) => {
+  const rect = dom.getBoundingClientRect();
   container.style.width = `${rect.width}px`;
   container.style.height = `${rect.height}px`;
   container.style.pointerEvents = 'none';
@@ -7,8 +7,8 @@ export const dragPreview = (container, domRef) => {
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   parent.classList.add('ProseMirror');
   parent.style.opacity = '0.3';
-  const resizer = domRef.current.querySelector('.resizer-item');
-  const clonedDom = resizer ? resizer.cloneNode(true) : domRef.current.cloneNode(true);
+  const resizer = dom.querySelector('.resizer-item');
+  const clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(true);
 
   // Remove any margin from the cloned element to ensure is doesn't position incorrectly
   clonedDom.style.marginLeft = '0';

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

@@ -0,0 +1,77 @@
+/** @jsx jsx */
+import { useCallback, useLayoutEffect, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { getTopPosition } from '../utils/drag-handle-positions';
+const basicStyles = css({
+  position: 'absolute',
+  width: '100%',
+  left: '0',
+  display: 'block',
+  zIndex: -1
+});
+const mouseMoveWrapperStyles = css({
+  zIndex: 1
+});
+export const MouseMoveWrapper = ({
+  view,
+  api,
+  anchorName,
+  nodeType,
+  getPos
+}) => {
+  const {
+    blockControlsState
+  } = useSharedPluginState(api, ['blockControls']);
+  const activeNode = blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.activeNode;
+  const isDragging = blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging;
+  const [hideWrapper, setHideWrapper] = useState(false);
+  const [pos, setPos] = useState();
+  const onMouseEnter = useCallback(() => {
+    const pos = getPos();
+    if (pos === undefined) {
+      return;
+    }
+    if (api && api.blockControls && (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) !== pos && !isDragging) {
+      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));
+    }
+  }, [getPos, api, anchorName, isDragging, activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos, nodeType]);
+  useLayoutEffect(() => {
+    if (!activeNode) {
+      return;
+    }
+    const pos = getPos();
+    if (activeNode.pos !== pos && !isDragging) {
+      setHideWrapper(false);
+      return;
+    }
+    setHideWrapper(true);
+  }, [activeNode, isDragging, getPos]);
+  useLayoutEffect(() => {
+    const supportsAnchor = CSS.supports('height', `anchor-size(${anchorName} height)`) && CSS.supports('top', `anchor(${anchorName} start)`);
+    if (supportsAnchor) {
+      setPos({
+        height: `anchor-size(${anchorName} height)`,
+        top: `anchor(${anchorName} start)`
+      });
+      return;
+    }
+    const calcPos = requestAnimationFrame(() => {
+      const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
+      if (!dom) {
+        return;
+      }
+      setPos({
+        height: `${dom.offsetHeight}px`,
+        top: getTopPosition(dom)
+      });
+    });
+    return () => cancelAnimationFrame(calcPos);
+  }, [view, anchorName]);
+  return jsx("div", {
+    onMouseEnter: onMouseEnter,
+    css: [basicStyles, !hideWrapper && mouseMoveWrapperStyles],
+    style: pos
+  });
+};

package/dist/es2019/utils/drag-handle-positions.js

@@ -0,0 +1,17 @@
+import { DRAG_HANDLE_WIDTH, dragHandleGap } from '../ui/consts';
+export const getTopPosition = dom => {
+  const table = dom.querySelector('table');
+  if (table) {
+    return `${dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0)}px`;
+  } else {
+    return `${dom.offsetTop}px`;
+  }
+};
+export const getLeftPosition = (dom, type) => {
+  const resizer = ['table', 'mediaSingle'].includes(type) ? dom.querySelector('.resizer-item') : null;
+  let left = `${dom.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px`;
+  if (resizer) {
+    left = getComputedStyle(resizer).transform === 'none' ? `${resizer.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px` : `${resizer.offsetLeft - resizer.offsetWidth / 2 - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px`;
+  }
+  return left;
+};

package/dist/esm/plugin.js

@@ -28,9 +28,43 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           var mappedTo = tr.mapping.map(to);
           tr.insert(mappedTo, nodeCopy); // insert the content at the new position
           tr.setSelection(getSelection(tr, mappedTo));
+          tr.setMeta(key, {
+            nodeMoved: true
+          });
           api === null || api === void 0 || api.core.actions.focus();
           return tr;
         };
+      },
+      showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType) {
+        return function (_ref3) {
+          var tr = _ref3.tr;
+          tr.setMeta(key, {
+            activeNode: {
+              pos: pos,
+              anchorName: anchorName,
+              nodeType: nodeType
+            }
+          });
+          return tr;
+        };
+      },
+      setNodeDragged: function setNodeDragged(pos, anchorName) {
+        return function (_ref4) {
+          var tr = _ref4.tr;
+          var newTr = tr;
+          if (pos === undefined) {
+            return tr;
+          }
+          newTr.setSelection(getSelection(newTr, pos));
+          newTr.setMeta(key, {
+            isDragging: true,
+            activeNode: {
+              pos: pos,
+              anchorName: anchorName
+            }
+          });
+          return newTr;
+        };
       }
     },
     getSharedState: function getSharedState(editorState) {