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

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,62 @@
+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,
+    index = _ref.index;
+  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() {
+        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.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,12 @@
+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>) => {
+    decs: Decoration[];
+    decorationState: {
+        index: number;
+        pos: number;
+    }[];
+};
+export declare const dragHandleDecoration: (oldState: EditorState, meta: any, api: ExtractInjectionAPI<BlockControlsPlugin>) => DecorationSet;

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

@@ -1,13 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import type { BlockControlsPlugin } from '../types';
+import type { BlockControlsPlugin, PluginState } from '../types';
 export declare const key: PluginKey<PluginState>;
-export interface PluginState {
-    decorations: DecorationSet;
-    isDragging: boolean;
-}
-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,30 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { EditorCommand, NextEditorPlugin } from '@atlaskit/editor-common/types';
+import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export interface PluginState {
+    decorations: DecorationSet;
+    decorationState: DecorationState;
+    isDragging: boolean;
+    isMenuOpen?: boolean;
+    activeNode: {
+        pos: number;
+    } | null;
+}
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [];
-    sharedState: undefined;
+    sharedState: {
+        isMenuOpen: boolean;
+        activeNode: {
+            pos: number;
+        };
+        decorationState: DecorationState;
+    } | undefined;
     actions: {};
+    commands: {
+        moveNode: (start: number, to: number) => EditorCommand;
+    };
 }>;
+export type DecorationState = {
+    index: number;
+    pos: 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,8 @@
+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, }: {
+    dom: HTMLElement;
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+    start: 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, index, }: {
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+    index: 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,12 @@
+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>) => {
+    decs: Decoration[];
+    decorationState: {
+        index: number;
+        pos: number;
+    }[];
+};
+export declare const dragHandleDecoration: (oldState: EditorState, meta: any, api: ExtractInjectionAPI<BlockControlsPlugin>) => DecorationSet;

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

@@ -1,13 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import type { BlockControlsPlugin } from '../types';
+import type { BlockControlsPlugin, PluginState } from '../types';
 export declare const key: PluginKey<PluginState>;
-export interface PluginState {
-    decorations: DecorationSet;
-    isDragging: boolean;
-}
-export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => SafePlugin<{
-    decorations: DecorationSet;
-}>;
+export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => SafePlugin<PluginState>;

package/dist/types-ts4.5/types.d.ts

@@ -1,8 +1,31 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { EditorCommand, NextEditorPlugin } from '@atlaskit/editor-common/types';
+import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export interface PluginState {
+    decorations: DecorationSet;
+    decorationState: DecorationState;
+    isDragging: boolean;
+    isMenuOpen?: boolean;
+    activeNode: {
+        pos: number;
+    } | null;
+}
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [
     ];
-    sharedState: undefined;
+    sharedState: {
+        isMenuOpen: boolean;
+        activeNode: {
+            pos: number;
+        };
+        decorationState: DecorationState;
+    } | undefined;
     actions: {};
+    commands: {
+        moveNode: (start: number, to: number) => EditorCommand;
+    };
 }>;
+export type DecorationState = {
+    index: number;
+    pos: number;
+}[];

package/dist/types-ts4.5/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-ts4.5/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-ts4.5/ui/drag-handle.d.ts

@@ -0,0 +1,8 @@
+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, }: {
+    dom: HTMLElement;
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+    start: number;
+}) => jsx.JSX.Element;

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

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

package/dist/types-ts4.5/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, index, }: {
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+    index: number;
+}) => JSX.Element;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-block-controls",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Block controls plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,12 +31,15 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^78.31.0",
+    "@atlaskit/editor-common": "^78.37.0",
     "@atlaskit/editor-prosemirror": "4.0.0",
-    "@babel/runtime": "^7.0.0"
+    "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "devDependencies": {
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0"