@atlaskit/editor-plugin-block-controls 1.3.11 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.0
+
+### Minor Changes
+
+-   [#101384](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101384)
+    [`649f601103e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/649f601103e0) -
+    [ux] Add autoscroller support to blocks plugin
+
+## 1.3.12
+
+### Patch Changes
+
+-   [#101305](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101305)
+    [`8df2f2cd6748`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8df2f2cd6748) -
+    Refactor drop target to use Pragmatic DnD indicator package
+
 ## 1.3.11
 
 ### Patch Changes

package/dist/cjs/ui/consts.js

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DROP_TARGET_LINE_WIDTH = exports.DROP_TARGET_CIRCLE_DIAMETER = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_NODE_GAP = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
+exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_NODE_GAP = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
 var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
 var DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_WIDTH = 12;
 var DRAG_HANDLE_BORDER_RADIUS = exports.DRAG_HANDLE_BORDER_RADIUS = 4;
-var DRAG_HANDLE_NODE_GAP = exports.DRAG_HANDLE_NODE_GAP = 12;
-var DROP_TARGET_LINE_WIDTH = exports.DROP_TARGET_LINE_WIDTH = 2;
-var DROP_TARGET_CIRCLE_DIAMETER = exports.DROP_TARGET_CIRCLE_DIAMETER = 8;
+var DRAG_HANDLE_NODE_GAP = exports.DRAG_HANDLE_NODE_GAP = 12;

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

@@ -8,41 +8,16 @@ exports.DropTarget = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
+var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
+var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var _colors = require("@atlaskit/theme/colors");
-var _consts = require("./consts");
 /** @jsx jsx */
 
-var styleHighlighted = (0, _react2.css)({
+var styleDropTarget = (0, _react2.css)({
   height: "var(--ds-space-100, 8px)",
-  marginTop: "calc(".concat("var(--ds-space-negative-100, -8px)", " - ", _consts.DROP_TARGET_LINE_WIDTH, "px)"),
-  marginLeft: "var(--ds-space-negative-100, -8px)",
-  top: "calc(".concat("var(--ds-space-100, 8px)", " / 2 - 1px)"),
-  //1px to help clear expand node margin
-  position: 'relative',
-  borderBottom: "solid ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")"), " ", _consts.DROP_TARGET_LINE_WIDTH, "px"),
-  "&:before": {
-    content: '""',
-    width: "".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, "px"),
-    height: "".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, "px"),
-    marginTop: "".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, "px"),
-    borderRadius: '50%',
-    border: "solid ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")"), " ", _consts.DROP_TARGET_LINE_WIDTH, "px"),
-    backgroundColor: "var(--ds-background-input, white)",
-    display: 'block',
-    position: 'absolute',
-    bottom: "".concat(-(_consts.DROP_TARGET_CIRCLE_DIAMETER + _consts.DROP_TARGET_LINE_WIDTH) / 2, "px"),
-    boxSizing: 'border-box'
-  }
-});
-var styleDisabled = (0, _react2.css)({
-  height: "var(--ds-space-100, 8px)",
-  marginTop: "calc(".concat("var(--ds-space-negative-100, -8px)", " - ", _consts.DROP_TARGET_LINE_WIDTH, "px)"),
-  position: 'relative',
-  borderBottom: "solid transparent ".concat(_consts.DROP_TARGET_LINE_WIDTH, "px"),
-  "&:before": {
-    border: "solid transparent ".concat(_consts.DROP_TARGET_LINE_WIDTH, "px")
-  }
+  marginTop: "calc(".concat("var(--ds-space-negative-100, -8px)", ")"),
+  position: 'relative'
 });
 var DropTarget = exports.DropTarget = function DropTarget(_ref) {
   var api = _ref.api,
@@ -57,11 +32,24 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
     if (!element) {
       return;
     }
-    return (0, _adapter.dropTargetForElements)({
+    var combined = [];
+    var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
+    if (scrollable) {
+      combined.push((0, _element.autoScrollForElements)({
+        element: scrollable,
+        canScroll: function canScroll() {
+          return true;
+        }
+      }));
+    }
+    combined.push((0, _adapter.dropTargetForElements)({
       element: element,
       getIsSticky: function getIsSticky() {
         return true;
       },
+      onDrag: function onDrag() {
+        scrollable.style.setProperty('scroll-behavior', 'unset');
+      },
       onDragEnter: function onDragEnter() {
         return setIsDraggedOver(true);
       },
@@ -70,6 +58,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
       },
       onDrop: function onDrop() {
         var _api$blockControls;
+        scrollable.style.setProperty('scroll-behavior', null);
         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;
@@ -86,13 +75,19 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
           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));
         }
       }
-    });
+    }));
+    return _combine.combine.apply(void 0, combined);
   }, [index, api]);
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     (0, _react2.jsx)("div", {
-      css: isDraggedOver ? styleHighlighted : styleDisabled,
+      css: styleDropTarget,
       ref: ref
-    })
+    },
+    //4px gap to clear expand node border
+    isDraggedOver && (0, _react2.jsx)(_box.DropIndicator, {
+      edge: "bottom",
+      gap: "4px"
+    }))
   );
 };

package/dist/es2019/ui/consts.js

@@ -1,6 +1,4 @@
 export const DRAG_HANDLE_HEIGHT = 24;
 export const DRAG_HANDLE_WIDTH = 12;
 export const DRAG_HANDLE_BORDER_RADIUS = 4;
-export const DRAG_HANDLE_NODE_GAP = 12;
-export const DROP_TARGET_LINE_WIDTH = 2;
-export const DROP_TARGET_CIRCLE_DIAMETER = 8;
+export const DRAG_HANDLE_NODE_GAP = 12;

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

@@ -1,39 +1,14 @@
 /** @jsx jsx */
 import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { B300 } from '@atlaskit/theme/colors';
-import { DROP_TARGET_CIRCLE_DIAMETER, DROP_TARGET_LINE_WIDTH } from './consts';
-const styleHighlighted = css({
+const styleDropTarget = css({
   height: "var(--ds-space-100, 8px)",
-  marginTop: `calc(${"var(--ds-space-negative-100, -8px)"} - ${DROP_TARGET_LINE_WIDTH}px)`,
-  marginLeft: "var(--ds-space-negative-100, -8px)",
-  top: `calc(${"var(--ds-space-100, 8px)"} / 2 - 1px)`,
-  //1px to help clear expand node margin
-  position: 'relative',
-  borderBottom: `solid ${`var(--ds-border-selected, ${B300})`} ${DROP_TARGET_LINE_WIDTH}px`,
-  "&:before": {
-    content: '""',
-    width: `${DROP_TARGET_CIRCLE_DIAMETER}px`,
-    height: `${DROP_TARGET_CIRCLE_DIAMETER}px`,
-    marginTop: `${DROP_TARGET_CIRCLE_DIAMETER}px`,
-    borderRadius: '50%',
-    border: `solid ${`var(--ds-border-selected, ${B300})`} ${DROP_TARGET_LINE_WIDTH}px`,
-    backgroundColor: "var(--ds-background-input, white)",
-    display: 'block',
-    position: 'absolute',
-    bottom: `${-(DROP_TARGET_CIRCLE_DIAMETER + DROP_TARGET_LINE_WIDTH) / 2}px`,
-    boxSizing: 'border-box'
-  }
-});
-const styleDisabled = css({
-  height: "var(--ds-space-100, 8px)",
-  marginTop: `calc(${"var(--ds-space-negative-100, -8px)"} - ${DROP_TARGET_LINE_WIDTH}px)`,
-  position: 'relative',
-  borderBottom: `solid transparent ${DROP_TARGET_LINE_WIDTH}px`,
-  "&:before": {
-    border: `solid transparent ${DROP_TARGET_LINE_WIDTH}px`
-  }
+  marginTop: `calc(${"var(--ds-space-negative-100, -8px)"})`,
+  position: 'relative'
 });
 export const DropTarget = ({
   api,
@@ -46,13 +21,27 @@ export const DropTarget = ({
     if (!element) {
       return;
     }
-    return dropTargetForElements({
+    const combined = [];
+    const scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
+    if (scrollable) {
+      combined.push(autoScrollForElements({
+        element: scrollable,
+        canScroll: () => {
+          return true;
+        }
+      }));
+    }
+    combined.push(dropTargetForElements({
       element,
       getIsSticky: () => true,
+      onDrag: () => {
+        scrollable.style.setProperty('scroll-behavior', 'unset');
+      },
       onDragEnter: () => setIsDraggedOver(true),
       onDragLeave: () => setIsDraggedOver(false),
       onDrop: () => {
         var _api$blockControls;
+        scrollable.style.setProperty('scroll-behavior', null);
         const {
           activeNode,
           decorationState
@@ -71,13 +60,19 @@ export const DropTarget = ({
           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));
         }
       }
-    });
+    }));
+    return combine(...combined);
   }, [index, api]);
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     jsx("div", {
-      css: isDraggedOver ? styleHighlighted : styleDisabled,
+      css: styleDropTarget,
       ref: ref
-    })
+    },
+    //4px gap to clear expand node border
+    isDraggedOver && jsx(DropIndicator, {
+      edge: "bottom",
+      gap: "4px"
+    }))
   );
 };

package/dist/esm/ui/consts.js

@@ -1,6 +1,4 @@
 export var DRAG_HANDLE_HEIGHT = 24;
 export var DRAG_HANDLE_WIDTH = 12;
 export var DRAG_HANDLE_BORDER_RADIUS = 4;
-export var DRAG_HANDLE_NODE_GAP = 12;
-export var DROP_TARGET_LINE_WIDTH = 2;
-export var DROP_TARGET_CIRCLE_DIAMETER = 8;
+export var DRAG_HANDLE_NODE_GAP = 12;

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

@@ -2,39 +2,14 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { B300 } from '@atlaskit/theme/colors';
-import { DROP_TARGET_CIRCLE_DIAMETER, DROP_TARGET_LINE_WIDTH } from './consts';
-var styleHighlighted = css({
+var styleDropTarget = css({
   height: "var(--ds-space-100, 8px)",
-  marginTop: "calc(".concat("var(--ds-space-negative-100, -8px)", " - ", DROP_TARGET_LINE_WIDTH, "px)"),
-  marginLeft: "var(--ds-space-negative-100, -8px)",
-  top: "calc(".concat("var(--ds-space-100, 8px)", " / 2 - 1px)"),
-  //1px to help clear expand node margin
-  position: 'relative',
-  borderBottom: "solid ".concat("var(--ds-border-selected, ".concat(B300, ")"), " ", DROP_TARGET_LINE_WIDTH, "px"),
-  "&:before": {
-    content: '""',
-    width: "".concat(DROP_TARGET_CIRCLE_DIAMETER, "px"),
-    height: "".concat(DROP_TARGET_CIRCLE_DIAMETER, "px"),
-    marginTop: "".concat(DROP_TARGET_CIRCLE_DIAMETER, "px"),
-    borderRadius: '50%',
-    border: "solid ".concat("var(--ds-border-selected, ".concat(B300, ")"), " ", DROP_TARGET_LINE_WIDTH, "px"),
-    backgroundColor: "var(--ds-background-input, white)",
-    display: 'block',
-    position: 'absolute',
-    bottom: "".concat(-(DROP_TARGET_CIRCLE_DIAMETER + DROP_TARGET_LINE_WIDTH) / 2, "px"),
-    boxSizing: 'border-box'
-  }
-});
-var styleDisabled = css({
-  height: "var(--ds-space-100, 8px)",
-  marginTop: "calc(".concat("var(--ds-space-negative-100, -8px)", " - ", DROP_TARGET_LINE_WIDTH, "px)"),
-  position: 'relative',
-  borderBottom: "solid transparent ".concat(DROP_TARGET_LINE_WIDTH, "px"),
-  "&:before": {
-    border: "solid transparent ".concat(DROP_TARGET_LINE_WIDTH, "px")
-  }
+  marginTop: "calc(".concat("var(--ds-space-negative-100, -8px)", ")"),
+  position: 'relative'
 });
 export var DropTarget = function DropTarget(_ref) {
   var api = _ref.api,
@@ -49,11 +24,24 @@ export var DropTarget = function DropTarget(_ref) {
     if (!element) {
       return;
     }
-    return dropTargetForElements({
+    var combined = [];
+    var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
+    if (scrollable) {
+      combined.push(autoScrollForElements({
+        element: scrollable,
+        canScroll: function canScroll() {
+          return true;
+        }
+      }));
+    }
+    combined.push(dropTargetForElements({
       element: element,
       getIsSticky: function getIsSticky() {
         return true;
       },
+      onDrag: function onDrag() {
+        scrollable.style.setProperty('scroll-behavior', 'unset');
+      },
       onDragEnter: function onDragEnter() {
         return setIsDraggedOver(true);
       },
@@ -62,6 +50,7 @@ export var DropTarget = function DropTarget(_ref) {
       },
       onDrop: function onDrop() {
         var _api$blockControls;
+        scrollable.style.setProperty('scroll-behavior', null);
         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;
@@ -78,13 +67,19 @@ export var DropTarget = function DropTarget(_ref) {
           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));
         }
       }
-    });
+    }));
+    return combine.apply(void 0, combined);
   }, [index, api]);
   return (
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
     jsx("div", {
-      css: isDraggedOver ? styleHighlighted : styleDisabled,
+      css: styleDropTarget,
       ref: ref
-    })
+    },
+    //4px gap to clear expand node border
+    isDraggedOver && jsx(DropIndicator, {
+      edge: "bottom",
+      gap: "4px"
+    }))
   );
 };

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

@@ -2,5 +2,3 @@ export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_WIDTH = 12;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
 export declare const DRAG_HANDLE_NODE_GAP = 12;
-export declare const DROP_TARGET_LINE_WIDTH = 2;
-export declare const DROP_TARGET_CIRCLE_DIAMETER = 8;

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

@@ -2,5 +2,3 @@ export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_WIDTH = 12;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
 export declare const DRAG_HANDLE_NODE_GAP = 12;
-export declare const DROP_TARGET_LINE_WIDTH = 2;
-export declare const DROP_TARGET_CIRCLE_DIAMETER = 8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-block-controls",
-  "version": "1.3.11",
+  "version": "1.4.0",
   "description": "Block controls plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,7 +35,8 @@
     "@atlaskit/editor-prosemirror": "4.0.1",
     "@atlaskit/icon": "^22.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
-    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
+    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
     "@atlaskit/tokens": "^1.48.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"