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

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,74 @@ export const createPlugin = api => {
     state: {
       init() {
         return {
-          decorations: DecorationSet.empty
+          decorations: DecorationSet.empty,
+          decorationState: [],
+          activeNode: null,
+          isDragging: false,
+          isMenuOpen: false,
+          start: null,
+          end: null
         };
       },
-      apply(tr, currentState) {
-        const {
-          decorations
+      apply(tr, currentState, oldState, newState) {
+        var _decorationState, _meta$pos, _meta$isDragging;
+        // return currentState;
+        let {
+          activeNode,
+          decorations,
+          isMenuOpen,
+          decorationState
         } = 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,
+            decorationState: updatedDecorationState
+          } = dropTargetDecorations(oldState, newState, api);
+          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 = DecorationSet.create(newState.doc, []);
+        }
+
+        // Map decorations when the document changes
+        if (tr.docChanged && decorations !== 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(({
+            index,
+            pos
+          }) => {
+            return {
+              index,
+              pos: tr.mapping.map(pos)
+            };
+          });
+        }
+
+        // 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;
         return {
-          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
         };
       }
     },
@@ -24,6 +84,38 @@ 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,
+              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;
+};

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

@@ -0,0 +1,86 @@
+/** @jsx jsx */
+import { useEffect, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
+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 { DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH } from './consts';
+import { dragPreview } from './drag-preview';
+const styles = css({
+  position: 'absolute',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  background: 'grey',
+  zIndex: 1,
+  height: DRAG_HANDLE_HEIGHT,
+  width: DRAG_HANDLE_WIDTH,
+  left: -DRAG_HANDLE_WIDTH
+});
+export const DragHandle = ({
+  dom,
+  api,
+  start
+}) => {
+  const buttonRef = useRef(null);
+  const domRef = useRef(dom);
+  useEffect(() => {
+    const element = buttonRef.current;
+    if (!element) {
+      return;
+    }
+    return draggable({
+      element,
+      onGenerateDragPreview: ({
+        nativeSetDragImage
+      }) => {
+        setCustomNativeDragPreview({
+          getOffset: () => {
+            const rect = domRef.current.getBoundingClientRect();
+            // Offset the drag preview to the center of the element
+            return {
+              x: 0,
+              y: rect.height / 2
+            };
+          },
+          render: ({
+            container
+          }) => {
+            return dragPreview(container, domRef);
+          },
+          nativeSetDragImage
+        });
+      },
+      onDragStart() {
+        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(({
+          tr
+        }) => tr.setMeta(key, {
+          isDragging: true,
+          start
+        }));
+      },
+      onDrop() {
+        var _api$core2;
+        api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
+          tr
+        }) => tr.setMeta(key, {
+          isDragging: false
+        }));
+      }
+    });
+  }, [api, start]);
+  return jsx("div", {
+    css: styles,
+    style: {
+      top: dom.clientHeight / 2 - DRAG_HANDLE_HEIGHT / 2
+    },
+    ref: buttonRef,
+    onClick: () => {
+      var _api$core3;
+      api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
+        tr
+      }) => tr.setMeta(key, {
+        toggleMenu: true
+      }));
+    }
+  });
+};

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

@@ -0,0 +1,27 @@
+export const dragPreview = (container, domRef) => {
+  const rect = domRef.current.getBoundingClientRect();
+  container.style.width = `${rect.width}px`;
+  container.style.height = `${rect.height}px`;
+  container.style.pointerEvents = 'none';
+  const parent = document.createElement('div');
+  // ProseMirror class is required to make sure the cloned dom is styled correctly
+  parent.classList.add('ProseMirror');
+  const 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);
+  const scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
+  const 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 () => container;
+};

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

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+export const DropTarget = ({
+  api,
+  index
+}) => {
+  const ref = useRef(null);
+  const [isDraggedOver, setIsDraggedOver] = useState(false);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    return dropTargetForElements({
+      element,
+      getIsSticky: () => true,
+      onDragEnter: () => setIsDraggedOver(true),
+      onDragLeave: () => setIsDraggedOver(false),
+      onDrop: () => {
+        var _api$blockControls;
+        const {
+          activeNode,
+          decorationState
+        } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
+        if (!activeNode || !decorationState) {
+          return;
+        }
+        const {
+          pos
+        } = decorationState.find(dec => dec.index === index) || {};
+        if (activeNode && pos !== undefined) {
+          var _api$core, _api$blockControls2, _api$blockControls2$c;
+          const {
+            pos: start
+          } = activeNode;
+          api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveNode(start, pos));
+        }
+      }
+    });
+  }, [index, api]);
+  return (
+    /*#__PURE__*/
+    // Note: Firefox has trouble with using a button element as the handle for drag and drop
+    React.createElement("div", {
+      style: {
+        height: '20px',
+        marginTop: '-22px',
+        top: '10px',
+        position: 'relative',
+        borderBottom: `solid ${isDraggedOver ? 'blue' : 'transparent'} 2px`
+      },
+      ref: ref
+    })
+  );
+};

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

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { css, Global, jsx } from '@emotion/react';
+const globalStyles = css({
+  '.ProseMirror-widget:first-child + *': {
+    'margin-top': '0 !important'
+  }
+});
+export const GlobalStylesWrapper = () => {
+  return jsx(Global, {
+    styles: globalStyles
+  });
+};

package/dist/esm/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 var blockControlsPlugin = function blockControlsPlugin(_ref) {
   var api = _ref.api;
   return {
@@ -11,8 +14,38 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         }
       }];
     },
-    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 = 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: function contentComponent() {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragHandleMenu, {
+        api: api
+      }), /*#__PURE__*/React.createElement(GlobalStylesWrapper, null));
     }
   };
 };

package/dist/esm/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 var 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(Decoration.widget(pos, function () {
+      var element = document.createElement('div');
+      ReactDOM.render( /*#__PURE__*/createElement(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(Decoration.widget(newState.doc.nodeSize - 2, function () {
+    var element = document.createElement('div');
+    ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
+      api: api,
+      index: decorationState.length
+    }), element);
+    return element;
+  }));
+  return {
+    decs: decs,
+    decorationState: decorationState
+  };
+};
+export var dragHandleDecoration = function dragHandleDecoration(oldState,
+// @ts-ignore
+meta, api) {
+  return DecorationSet.create(oldState.doc, [Decoration.widget(meta.pos, function (view, getPos) {
+    var element = document.createElement('div');
+    ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
+      dom: meta.dom,
+      api: api,
+      start: meta.pos
+    }), element);
+    element.style.position = 'absolute';
+    return element;
+  })]);
+};

package/dist/esm/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 var key = new PluginKey('blockControls');
 export var createPlugin = function createPlugin(api) {
   return new SafePlugin({
@@ -8,13 +9,70 @@ export var createPlugin = function createPlugin(api) {
     state: {
       init: function init() {
         return {
-          decorations: DecorationSet.empty
+          decorations: 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 = dragHandleDecoration(newState, meta, api);
+        }
+        // Drop target decorations
+        if (meta !== null && meta !== void 0 && meta.isDragging && api) {
+          decorations = DecorationSet.create(newState.doc, []);
+          var _dropTargetDecoration = 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 = DecorationSet.create(newState.doc, []);
+        }
+
+        // Map decorations when the document changes
+        if (tr.docChanged && decorations !== 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
         };
       }
     },
@@ -22,6 +80,39 @@ export var 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/esm/ui/consts.js

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

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

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

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

@@ -0,0 +1,86 @@
+/** @jsx jsx */
+import { useEffect, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
+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 { DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH } from './consts';
+import { dragPreview } from './drag-preview';
+var styles = css({
+  position: 'absolute',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  background: 'grey',
+  zIndex: 1,
+  height: DRAG_HANDLE_HEIGHT,
+  width: DRAG_HANDLE_WIDTH,
+  left: -DRAG_HANDLE_WIDTH
+});
+export var DragHandle = function DragHandle(_ref) {
+  var dom = _ref.dom,
+    api = _ref.api,
+    start = _ref.start;
+  var buttonRef = useRef(null);
+  var domRef = useRef(dom);
+  useEffect(function () {
+    var element = buttonRef.current;
+    if (!element) {
+      return;
+    }
+    return draggable({
+      element: element,
+      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
+        var nativeSetDragImage = _ref2.nativeSetDragImage;
+        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 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(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(key, {
+            isDragging: false
+          });
+        });
+      }
+    });
+  }, [api, start]);
+  return jsx("div", {
+    css: styles,
+    style: {
+      top: dom.clientHeight / 2 - 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(key, {
+          toggleMenu: true
+        });
+      });
+    }
+  });
+};