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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 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,14 @@ exports.DropTarget = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 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,
@@ -91,8 +64,13 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
   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,12 @@
 /** @jsx jsx */
 import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 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,
@@ -76,8 +49,13 @@ export const DropTarget = ({
   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,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 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,
@@ -83,8 +56,13 @@ export var DropTarget = function DropTarget(_ref) {
   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.3.12",
   "description": "Block controls plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "@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-react-drop-indicator": "^1.1.0",
     "@atlaskit/tokens": "^1.48.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"