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

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

@@ -0,0 +1,90 @@
+/** @jsx jsx */
+import { useEffect, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+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',
+  zIndex: 1,
+  height: DRAG_HANDLE_HEIGHT,
+  width: DRAG_HANDLE_WIDTH,
+  left: -DRAG_HANDLE_WIDTH
+});
+export const DragHandle = ({
+  dom,
+  api,
+  start,
+  end
+}) => {
+  const buttonRef = useRef(null);
+  const domRef = useRef(dom);
+  useEffect(() => {
+    const element = buttonRef.current;
+    if (!element) {
+      return;
+    }
+    return combine(draggable({
+      element,
+      getInitialData: () => ({
+        start,
+        end
+      }),
+      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
+        }));
+      },
+      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, end]);
+  return jsx("button", {
+    css: styles,
+    style: {
+      bottom: dom.clientHeight / 2 - DRAG_HANDLE_HEIGHT / 2
+    },
+    ref: buttonRef,
+    type: "button",
+    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,39 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+export const DropTarget = ({
+  api,
+  pos
+}) => {
+  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: event => {
+        var _api$core, _api$blockControls, _api$blockControls$co;
+        const {
+          start,
+          end
+        } = event.source.data;
+        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$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$co = _api$blockControls.commands) === null || _api$blockControls$co === void 0 ? void 0 : _api$blockControls$co.moveNode(start, end, pos));
+      }
+    });
+  }, [pos, api]);
+  return /*#__PURE__*/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,32 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         }
       }];
     },
-    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 = 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.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,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 var dropTargetDecorations = function dropTargetDecorations(oldState, newState, api) {
+  var decorations = [];
+  oldState.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos) {
+    decorations.push(Decoration.widget(pos + node.nodeSize, function () {
+      var element = document.createElement('div');
+      ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
+        api: api,
+        pos: pos + node.nodeSize
+      }), element);
+      return element;
+    }));
+    return false;
+  });
+  decorations.push(Decoration.widget(0, function () {
+    var element = document.createElement('div');
+    ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
+      api: api,
+      pos: 0
+    }), element);
+    return element;
+  }));
+  return decorations;
+};
+export var dragHandleDecoration = function dragHandleDecoration(oldState,
+// @ts-ignore
+meta, api) {
+  return DecorationSet.create(oldState.doc, [Decoration.widget(meta.pos + meta.size, function (view, getPos) {
+    var element = document.createElement('div');
+    ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
+      dom: meta.dom,
+      api: api,
+      start: meta.pos,
+      end: meta.pos + meta.size
+    }), 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,40 @@ export var createPlugin = function createPlugin(api) {
     state: {
       init: function init() {
         return {
-          decorations: DecorationSet.empty
+          decorations: 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 = dragHandleDecoration(newState, meta, api);
+        }
+        // Drop target decorations
+        if (meta !== null && meta !== void 0 && meta.isDragging && api) {
+          decorations = DecorationSet.create(newState.doc, []);
+          var 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
+          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
         };
       }
     },
@@ -22,6 +50,40 @@ 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 (_ref) {
+              var tr = _ref.tr;
+              return tr.setMeta(key, {
+                pos: topLevelPos,
+                size: topLevelNode.nodeSize,
+                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,92 @@
+/** @jsx jsx */
+import { useEffect, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+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',
+  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,
+    end = _ref.end;
+  var buttonRef = useRef(null);
+  var domRef = useRef(dom);
+  useEffect(function () {
+    var element = buttonRef.current;
+    if (!element) {
+      return;
+    }
+    return combine(draggable({
+      element: element,
+      getInitialData: function getInitialData() {
+        return {
+          start: start,
+          end: end
+        };
+      },
+      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
+          });
+        });
+      },
+      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, end]);
+  return jsx("button", {
+    css: styles,
+    style: {
+      bottom: dom.clientHeight / 2 - 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(key, {
+          toggleMenu: true
+        });
+      });
+    }
+  });
+};

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

@@ -0,0 +1,29 @@
+export var 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/esm/ui/drop-target.js

@@ -0,0 +1,47 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useRef, useState } from 'react';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+export var DropTarget = function DropTarget(_ref) {
+  var api = _ref.api,
+    pos = _ref.pos;
+  var ref = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDraggedOver = _useState2[0],
+    setIsDraggedOver = _useState2[1];
+  useEffect(function () {
+    var element = ref.current;
+    if (!element) {
+      return;
+    }
+    return 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.createElement("div", {
+    style: {
+      height: '20px',
+      marginTop: '-22px',
+      top: '10px',
+      position: 'relative',
+      borderBottom: "solid ".concat(isDraggedOver ? 'blue' : 'transparent', " 2px")
+    },
+    ref: ref
+  });
+};

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

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

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

@@ -0,0 +1,6 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../types';
+export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => Decoration[];
+export declare const dragHandleDecoration: (oldState: EditorState, meta: any, api: ExtractInjectionAPI<BlockControlsPlugin>) => DecorationSet;

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

@@ -7,7 +7,10 @@ export declare const key: PluginKey<PluginState>;
 export interface PluginState {
     decorations: DecorationSet;
     isDragging: boolean;
+    isMenuOpen?: boolean;
+    activeNode: {
+        pos: number;
+        size: number;
+    } | null;
 }
-export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => SafePlugin<{
-    decorations: DecorationSet;
-}>;
+export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => SafePlugin<PluginState>;

package/dist/types/types.d.ts

@@ -1,7 +1,16 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { EditorCommand, NextEditorPlugin } from '@atlaskit/editor-common/types';
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [];
-    sharedState: undefined;
+    sharedState: {
+        isMenuOpen: boolean;
+    } | undefined;
     actions: {};
+    commands: {
+        moveNode: (start: number, end: number, to: number) => EditorCommand;
+    };
 }>;
+export interface DraggableSourceData extends Record<string | symbol, unknown> {
+    start: number;
+    end: number;
+}

package/dist/types/ui/consts.d.ts

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

package/dist/types/ui/drag-handle-menu.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockControlsPlugin } from '../types';
+export declare const DragHandleMenu: ({ api, }: {
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+}) => JSX.Element | null;

package/dist/types/ui/drag-handle.d.ts

@@ -0,0 +1,9 @@
+import { jsx } from '@emotion/react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockControlsPlugin } from '../types';
+export declare const DragHandle: ({ dom, api, start, end, }: {
+    dom: HTMLElement;
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+    start: number;
+    end: number;
+}) => jsx.JSX.Element;

package/dist/types/ui/drag-preview.d.ts

@@ -0,0 +1 @@
+export declare const dragPreview: (container: HTMLElement, domRef: React.MutableRefObject<HTMLElement>) => () => HTMLElement;

package/dist/types/ui/drop-target.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockControlsPlugin } from '../types';
+export declare const DropTarget: ({ api, pos, }: {
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+    pos: number;
+}) => JSX.Element;

package/dist/types/ui/global-styles.d.ts

@@ -0,0 +1,3 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const GlobalStylesWrapper: () => jsx.JSX.Element;

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

@@ -0,0 +1,6 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../types';
+export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => Decoration[];
+export declare const dragHandleDecoration: (oldState: EditorState, meta: any, api: ExtractInjectionAPI<BlockControlsPlugin>) => DecorationSet;

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

@@ -7,7 +7,10 @@ export declare const key: PluginKey<PluginState>;
 export interface PluginState {
     decorations: DecorationSet;
     isDragging: boolean;
+    isMenuOpen?: boolean;
+    activeNode: {
+        pos: number;
+        size: number;
+    } | null;
 }
-export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => SafePlugin<{
-    decorations: DecorationSet;
-}>;
+export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => SafePlugin<PluginState>;