@atlaskit/editor-plugin-block-controls 1.3.5 → 1.3.7

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.3.7
+
+### Patch Changes
+
+-   [#98222](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98222)
+    [`d94cd00110eb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d94cd00110eb) -
+    [ux] ED-23206 Set node selection when drag handle is clicked, dragged and content is dropped
+-   [#100193](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100193)
+    [`e9a08f4f88aa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e9a08f4f88aa) -
+    [ux] Update drag handle position
+-   Updated dependencies
+
+## 1.3.6
+
+### Patch Changes
+
+-   [#100030](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100030)
+    [`f246ee5d3b7f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f246ee5d3b7f) -
+    [ux] Change drop target design, refactor styles
+-   Updated dependencies
+
 ## 1.3.5
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _main = require("./pm-plugins/main");
 var _dragHandleMenu = require("./ui/drag-handle-menu");
 var _globalStyles = require("./ui/global-styles");
+var _getSelection = require("./utils/getSelection");
 var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPlugin(_ref) {
   var api = _ref.api;
   return {
@@ -24,7 +25,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
     commands: {
       moveNode: function moveNode(start, to) {
         return function (_ref2) {
-          var _node$nodeSize, _api$core;
+          var _node$nodeSize;
           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;
@@ -33,7 +34,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           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();
+          tr.setSelection((0, _getSelection.getSelection)(tr, mappedTo));
+          api === null || api === void 0 || api.core.actions.focus();
           return tr;
         };
       }

package/dist/cjs/pm-plugins/decorations.js

@@ -8,6 +8,7 @@ exports.dropTargetDecorations = exports.dragHandleDecoration = void 0;
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _consts = require("../ui/consts");
 var _dragHandle = require("../ui/drag-handle");
 var _dropTarget = require("../ui/drop-target");
 var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api) {
@@ -55,9 +56,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     decorationState: decorationState
   };
 };
-var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(oldState,
-// @ts-ignore
-meta, api) {
+var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(oldState, meta, api) {
   return _view.DecorationSet.create(oldState.doc, [_view.Decoration.widget(meta.pos, function (view, getPos) {
     var element = document.createElement('div');
     _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
@@ -66,6 +65,19 @@ meta, api) {
       start: meta.pos
     }), element);
     element.style.position = 'absolute';
+    element.style.zIndex = '1';
+    var resizer = meta.dom.querySelector('.resizer-item');
+    if (resizer) {
+      element.style.left = "".concat(resizer.offsetLeft - parseInt(getComputedStyle(resizer).marginLeft) - _consts.DRAG_HANDLE_NODE_GAP - _consts.DRAG_HANDLE_WIDTH, "px");
+    } else {
+      element.style.left = "".concat(meta.dom.offsetLeft - _consts.DRAG_HANDLE_NODE_GAP - _consts.DRAG_HANDLE_WIDTH, "px");
+    }
+    if (meta.type === 'table') {
+      var table = meta.dom.querySelector('table');
+      element.style.top = "".concat(meta.dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0), "px");
+    } else {
+      element.style.top = "".concat(meta.dom.offsetTop, "px");
+    }
     return element;
   })]);
 };

package/dist/cjs/ui/consts.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
+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;
 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_BORDER_RADIUS = exports.DRAG_HANDLE_BORDER_RADIUS = 4;
+var DROP_TARGET_LINE_WIDTH = exports.DROP_TARGET_LINE_WIDTH = 2;
+var DROP_TARGET_CIRCLE_DIAMETER = exports.DROP_TARGET_CIRCLE_DIAMETER = 4;
+var DRAG_HANDLE_NODE_GAP = exports.DRAG_HANDLE_NODE_GAP = 12;

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

@@ -12,16 +12,12 @@ var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-han
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
 var _main = require("../pm-plugins/main");
+var _getSelection = require("../utils/getSelection");
 var _consts = require("./consts");
 var _dragPreview = require("./drag-preview");
 /** @jsx jsx */
 
 var dragHandleButtonStyles = (0, _react2.css)({
-  position: 'relative',
-  // TODO - we have ticket ED-23209 to correctly position the drag handle for each node
-  //https://product-fabric.atlassian.net/browse/ED-23209
-  top: 12,
-  left: -18,
   padding: "var(--ds-space-025, 2px)".concat(" 0"),
   boxSizing: 'border-box',
   display: 'flex',
@@ -56,6 +52,22 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     dragHandleSelected = _useState2[0],
     setDragHandleSelected = _useState2[1];
+  var handleClick = (0, _react.useCallback)(function () {
+    var _api$core, _api$core2;
+    setDragHandleSelected(!dragHandleSelected);
+    // TODO - add drag menu
+    // api?.core?.actions.execute(({ tr }) =>
+    //   tr.setMeta(key, {
+    //     toggleMenu: true,
+    //   }),
+    // );
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      tr.setSelection((0, _getSelection.getSelection)(tr, start));
+      return tr;
+    });
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
+  }, [start, api, dragHandleSelected, setDragHandleSelected]);
   (0, _react.useEffect)(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -63,8 +75,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }
     return (0, _adapter.draggable)({
       element: element,
-      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
-        var nativeSetDragImage = _ref2.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
+        var nativeSetDragImage = _ref3.nativeSetDragImage;
         (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
           getOffset: function getOffset() {
             var rect = domRef.current.getBoundingClientRect();
@@ -74,27 +86,31 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
               y: rect.height / 2
             };
           },
-          render: function render(_ref3) {
-            var container = _ref3.container;
+          render: function render(_ref4) {
+            var container = _ref4.container;
             return (0, _dragPreview.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(_main.key, {
+        var _api$core3, _api$core4;
+        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref5) {
+          var tr = _ref5.tr;
+          var newTr = tr;
+          newTr.setSelection((0, _getSelection.getSelection)(newTr, start));
+          newTr.setMeta(_main.key, {
             isDragging: true,
             start: start
           });
+          return newTr;
         });
+        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
       },
       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;
+        var _api$core5;
+        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
+          var tr = _ref6.tr;
           return tr.setMeta(_main.key, {
             isDragging: false
           });
@@ -106,16 +122,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
     ref: buttonRef,
-    onClick: function onClick() {
-      setDragHandleSelected(!dragHandleSelected);
-
-      // TODO - add drag menu
-      // api?.core?.actions.execute(({ tr }) =>
-      //   tr.setMeta(key, {
-      //     toggleMenu: true,
-      //   }),
-      // );
-    }
+    onClick: handleClick
   }, (0, _react2.jsx)(_dragHandler.default, {
     label: "",
     size: "medium"

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

@@ -1,16 +1,48 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DropTarget = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _colors = require("@atlaskit/theme/colors");
+var _consts = require("./consts");
+/** @jsx jsx */
+
+var styleHighlighted = (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 - 2.5px)"),
+  //2.5px 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: "calc(".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, " + ").concat(_consts.DROP_TARGET_LINE_WIDTH, " * 2)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: '-5px'
+  }
+});
+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")
+  }
+});
 var DropTarget = exports.DropTarget = function DropTarget(_ref) {
   var api = _ref.api,
     index = _ref.index;
@@ -56,16 +88,9 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
     });
   }, [index, api]);
   return (
-    /*#__PURE__*/
     // Note: Firefox has trouble with using a button element as the handle for drag and drop
-    _react.default.createElement("div", {
-      style: {
-        height: '20px',
-        marginTop: '-22px',
-        top: '10px',
-        position: 'relative',
-        borderBottom: "solid ".concat(isDraggedOver ? 'blue' : 'transparent', " 2px")
-      },
+    (0, _react2.jsx)("div", {
+      css: isDraggedOver ? styleHighlighted : styleDisabled,
       ref: ref
     })
   );

package/dist/cjs/utils/getSelection.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSelection = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var getSelection = exports.getSelection = function getSelection(tr, start) {
+  var node = tr.doc.nodeAt(start);
+  var isNodeSelection = node && _state.NodeSelection.isSelectable(node);
+  var nodeSize = node ? node.nodeSize : 1;
+  var depth = tr.doc.resolve(start).depth;
+  var selection = isNodeSelection ? new _state.NodeSelection(tr.doc.resolve(start)) : new _state.TextSelection(tr.doc.resolve(start), tr.doc.resolve(start + nodeSize - depth));
+  return selection;
+};

package/dist/es2019/plugin.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { createPlugin, key } from './pm-plugins/main';
 import { DragHandleMenu } from './ui/drag-handle-menu';
 import { GlobalStylesWrapper } from './ui/global-styles';
+import { getSelection } from './utils/getSelection';
 export const blockControlsPlugin = ({
   api
 }) => ({
@@ -16,7 +17,7 @@ export const blockControlsPlugin = ({
     moveNode: (start, to) => ({
       tr
     }) => {
-      var _node$nodeSize, _api$core;
+      var _node$nodeSize;
       const node = tr.doc.nodeAt(start);
       const size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
       const end = start + size;
@@ -24,7 +25,8 @@ export const blockControlsPlugin = ({
       tr.delete(start, end); // delete the content from the original position
       const mappedTo = tr.mapping.map(to);
       tr.insert(mappedTo, nodeCopy); // insert the content at the new position
-      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.focus();
+      tr.setSelection(getSelection(tr, mappedTo));
+      api === null || api === void 0 ? void 0 : api.core.actions.focus();
       return tr;
     }
   },

package/dist/es2019/pm-plugins/decorations.js

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { DRAG_HANDLE_NODE_GAP, DRAG_HANDLE_WIDTH } from '../ui/consts';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 export const dropTargetDecorations = (oldState, newState, api) => {
@@ -48,9 +49,7 @@ export const dropTargetDecorations = (oldState, newState, api) => {
     decorationState
   };
 };
-export const dragHandleDecoration = (oldState,
-// @ts-ignore
-meta, api) => {
+export const dragHandleDecoration = (oldState, meta, api) => {
   return DecorationSet.create(oldState.doc, [Decoration.widget(meta.pos, (view, getPos) => {
     const element = document.createElement('div');
     ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
@@ -59,6 +58,19 @@ meta, api) => {
       start: meta.pos
     }), element);
     element.style.position = 'absolute';
+    element.style.zIndex = '1';
+    const resizer = meta.dom.querySelector('.resizer-item');
+    if (resizer) {
+      element.style.left = `${resizer.offsetLeft - parseInt(getComputedStyle(resizer).marginLeft) - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH}px`;
+    } else {
+      element.style.left = `${meta.dom.offsetLeft - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH}px`;
+    }
+    if (meta.type === 'table') {
+      const table = meta.dom.querySelector('table');
+      element.style.top = `${meta.dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0)}px`;
+    } else {
+      element.style.top = `${meta.dom.offsetTop}px`;
+    }
     return element;
   })]);
 };

package/dist/es2019/ui/consts.js

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

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

@@ -1,18 +1,14 @@
 /** @jsx jsx */
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 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 { getSelection } from '../utils/getSelection';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH } from './consts';
 import { dragPreview } from './drag-preview';
 const dragHandleButtonStyles = css({
-  position: 'relative',
-  // TODO - we have ticket ED-23209 to correctly position the drag handle for each node
-  //https://product-fabric.atlassian.net/browse/ED-23209
-  top: 12,
-  left: -18,
   padding: `${"var(--ds-space-025, 2px)"} 0`,
   boxSizing: 'border-box',
   display: 'flex',
@@ -45,6 +41,23 @@ export const DragHandle = ({
   const buttonRef = useRef(null);
   const domRef = useRef(dom);
   const [dragHandleSelected, setDragHandleSelected] = useState(false);
+  const handleClick = useCallback(() => {
+    var _api$core, _api$core2;
+    setDragHandleSelected(!dragHandleSelected);
+    // TODO - add drag menu
+    // api?.core?.actions.execute(({ tr }) =>
+    //   tr.setMeta(key, {
+    //     toggleMenu: true,
+    //   }),
+    // );
+    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+      tr
+    }) => {
+      tr.setSelection(getSelection(tr, start));
+      return tr;
+    });
+    api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.focus();
+  }, [start, api, dragHandleSelected, setDragHandleSelected]);
   useEffect(() => {
     const element = buttonRef.current;
     if (!element) {
@@ -73,17 +86,23 @@ export const DragHandle = ({
         });
       },
       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(({
+        var _api$core3, _api$core4;
+        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, {
-          isDragging: true,
-          start
-        }));
+        }) => {
+          const newTr = tr;
+          newTr.setSelection(getSelection(newTr, start));
+          newTr.setMeta(key, {
+            isDragging: true,
+            start
+          });
+          return newTr;
+        });
+        api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.focus();
       },
       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(({
+        var _api$core5;
+        api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
           tr
         }) => tr.setMeta(key, {
           isDragging: false
@@ -95,16 +114,7 @@ export const DragHandle = ({
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
     ref: buttonRef,
-    onClick: () => {
-      setDragHandleSelected(!dragHandleSelected);
-
-      // TODO - add drag menu
-      // api?.core?.actions.execute(({ tr }) =>
-      //   tr.setMeta(key, {
-      //     toggleMenu: true,
-      //   }),
-      // );
-    }
+    onClick: handleClick
   }, jsx(DragHandlerIcon, {
     label: "",
     size: "medium"

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

@@ -1,5 +1,39 @@
-import React, { useEffect, useRef, useState } from 'react';
+/** @jsx jsx */
+import { useEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
 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({
+  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 - 2.5px)`,
+  //2.5px 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: `calc(${DROP_TARGET_CIRCLE_DIAMETER} + ${DROP_TARGET_LINE_WIDTH} * 2)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: '-5px'
+  }
+});
+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`
+  }
+});
 export const DropTarget = ({
   api,
   index
@@ -39,16 +73,9 @@ export const DropTarget = ({
     });
   }, [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`
-      },
+    jsx("div", {
+      css: isDraggedOver ? styleHighlighted : styleDisabled,
       ref: ref
     })
   );

package/dist/es2019/utils/getSelection.js

@@ -0,0 +1,9 @@
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+export const getSelection = (tr, start) => {
+  const node = tr.doc.nodeAt(start);
+  const isNodeSelection = node && NodeSelection.isSelectable(node);
+  const nodeSize = node ? node.nodeSize : 1;
+  const depth = tr.doc.resolve(start).depth;
+  const selection = isNodeSelection ? new NodeSelection(tr.doc.resolve(start)) : new TextSelection(tr.doc.resolve(start), tr.doc.resolve(start + nodeSize - depth));
+  return selection;
+};

package/dist/esm/plugin.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { createPlugin, key } from './pm-plugins/main';
 import { DragHandleMenu } from './ui/drag-handle-menu';
 import { GlobalStylesWrapper } from './ui/global-styles';
+import { getSelection } from './utils/getSelection';
 export var blockControlsPlugin = function blockControlsPlugin(_ref) {
   var api = _ref.api;
   return {
@@ -17,7 +18,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
     commands: {
       moveNode: function moveNode(start, to) {
         return function (_ref2) {
-          var _node$nodeSize, _api$core;
+          var _node$nodeSize;
           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;
@@ -26,7 +27,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           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();
+          tr.setSelection(getSelection(tr, mappedTo));
+          api === null || api === void 0 || api.core.actions.focus();
           return tr;
         };
       }

package/dist/esm/pm-plugins/decorations.js

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { DRAG_HANDLE_NODE_GAP, DRAG_HANDLE_WIDTH } from '../ui/consts';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 export var dropTargetDecorations = function dropTargetDecorations(oldState, newState, api) {
@@ -48,9 +49,7 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
     decorationState: decorationState
   };
 };
-export var dragHandleDecoration = function dragHandleDecoration(oldState,
-// @ts-ignore
-meta, api) {
+export var dragHandleDecoration = function dragHandleDecoration(oldState, meta, api) {
   return DecorationSet.create(oldState.doc, [Decoration.widget(meta.pos, function (view, getPos) {
     var element = document.createElement('div');
     ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
@@ -59,6 +58,19 @@ meta, api) {
       start: meta.pos
     }), element);
     element.style.position = 'absolute';
+    element.style.zIndex = '1';
+    var resizer = meta.dom.querySelector('.resizer-item');
+    if (resizer) {
+      element.style.left = "".concat(resizer.offsetLeft - parseInt(getComputedStyle(resizer).marginLeft) - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH, "px");
+    } else {
+      element.style.left = "".concat(meta.dom.offsetLeft - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH, "px");
+    }
+    if (meta.type === 'table') {
+      var table = meta.dom.querySelector('table');
+      element.style.top = "".concat(meta.dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0), "px");
+    } else {
+      element.style.top = "".concat(meta.dom.offsetTop, "px");
+    }
     return element;
   })]);
 };

package/dist/esm/ui/consts.js

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

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

@@ -1,19 +1,15 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 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 { getSelection } from '../utils/getSelection';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH } from './consts';
 import { dragPreview } from './drag-preview';
 var dragHandleButtonStyles = css({
-  position: 'relative',
-  // TODO - we have ticket ED-23209 to correctly position the drag handle for each node
-  //https://product-fabric.atlassian.net/browse/ED-23209
-  top: 12,
-  left: -18,
   padding: "var(--ds-space-025, 2px)".concat(" 0"),
   boxSizing: 'border-box',
   display: 'flex',
@@ -48,6 +44,22 @@ export var DragHandle = function DragHandle(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     dragHandleSelected = _useState2[0],
     setDragHandleSelected = _useState2[1];
+  var handleClick = useCallback(function () {
+    var _api$core, _api$core2;
+    setDragHandleSelected(!dragHandleSelected);
+    // TODO - add drag menu
+    // api?.core?.actions.execute(({ tr }) =>
+    //   tr.setMeta(key, {
+    //     toggleMenu: true,
+    //   }),
+    // );
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      tr.setSelection(getSelection(tr, start));
+      return tr;
+    });
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
+  }, [start, api, dragHandleSelected, setDragHandleSelected]);
   useEffect(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -55,8 +67,8 @@ export var DragHandle = function DragHandle(_ref) {
     }
     return draggable({
       element: element,
-      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
-        var nativeSetDragImage = _ref2.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
+        var nativeSetDragImage = _ref3.nativeSetDragImage;
         setCustomNativeDragPreview({
           getOffset: function getOffset() {
             var rect = domRef.current.getBoundingClientRect();
@@ -66,27 +78,31 @@ export var DragHandle = function DragHandle(_ref) {
               y: rect.height / 2
             };
           },
-          render: function render(_ref3) {
-            var container = _ref3.container;
+          render: function render(_ref4) {
+            var container = _ref4.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, {
+        var _api$core3, _api$core4;
+        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref5) {
+          var tr = _ref5.tr;
+          var newTr = tr;
+          newTr.setSelection(getSelection(newTr, start));
+          newTr.setMeta(key, {
             isDragging: true,
             start: start
           });
+          return newTr;
         });
+        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.focus();
       },
       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;
+        var _api$core5;
+        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
+          var tr = _ref6.tr;
           return tr.setMeta(key, {
             isDragging: false
           });
@@ -98,16 +114,7 @@ export var DragHandle = function DragHandle(_ref) {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
     ref: buttonRef,
-    onClick: function onClick() {
-      setDragHandleSelected(!dragHandleSelected);
-
-      // TODO - add drag menu
-      // api?.core?.actions.execute(({ tr }) =>
-      //   tr.setMeta(key, {
-      //     toggleMenu: true,
-      //   }),
-      // );
-    }
+    onClick: handleClick
   }, jsx(DragHandlerIcon, {
     label: "",
     size: "medium"

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

@@ -1,6 +1,40 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useEffect, useRef, useState } from 'react';
+/** @jsx jsx */
+import { useEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
 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({
+  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 - 2.5px)"),
+  //2.5px 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: "calc(".concat(DROP_TARGET_CIRCLE_DIAMETER, " + ").concat(DROP_TARGET_LINE_WIDTH, " * 2)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: '-5px'
+  }
+});
+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")
+  }
+});
 export var DropTarget = function DropTarget(_ref) {
   var api = _ref.api,
     index = _ref.index;
@@ -46,16 +80,9 @@ export var DropTarget = function DropTarget(_ref) {
     });
   }, [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")
-      },
+    jsx("div", {
+      css: isDraggedOver ? styleHighlighted : styleDisabled,
       ref: ref
     })
   );

package/dist/esm/utils/getSelection.js

@@ -0,0 +1,9 @@
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+export var getSelection = function getSelection(tr, start) {
+  var node = tr.doc.nodeAt(start);
+  var isNodeSelection = node && NodeSelection.isSelectable(node);
+  var nodeSize = node ? node.nodeSize : 1;
+  var depth = tr.doc.resolve(start).depth;
+  var selection = isNodeSelection ? new NodeSelection(tr.doc.resolve(start)) : new TextSelection(tr.doc.resolve(start), tr.doc.resolve(start + nodeSize - depth));
+  return selection;
+};

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

@@ -1,7 +1,7 @@
 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';
+import type { BlockControlsMeta, BlockControlsPlugin } from '../types';
 export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => {
     decs: Decoration[];
     decorationState: {
@@ -9,4 +9,4 @@ export declare const dropTargetDecorations: (oldState: EditorState, newState: Ed
         pos: number;
     }[];
 };
-export declare const dragHandleDecoration: (oldState: EditorState, meta: any, api: ExtractInjectionAPI<BlockControlsPlugin>) => DecorationSet;
+export declare const dragHandleDecoration: (oldState: EditorState, meta: BlockControlsMeta, api: ExtractInjectionAPI<BlockControlsPlugin>) => DecorationSet;

package/dist/types/types.d.ts

@@ -28,3 +28,8 @@ export type DecorationState = {
     index: number;
     pos: number;
 }[];
+export type BlockControlsMeta = {
+    pos: number;
+    type: string;
+    dom: HTMLElement;
+};

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

@@ -1,3 +1,6 @@
 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 DROP_TARGET_LINE_WIDTH = 2;
+export declare const DROP_TARGET_CIRCLE_DIAMETER = 4;
+export declare const DRAG_HANDLE_NODE_GAP = 12;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/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;
+}) => jsx.JSX.Element;

package/dist/types/utils/getSelection.d.ts

@@ -0,0 +1,2 @@
+import { NodeSelection, TextSelection, type Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const getSelection: (tr: Transaction, start: number) => NodeSelection | TextSelection;

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

@@ -1,7 +1,7 @@
 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';
+import type { BlockControlsMeta, BlockControlsPlugin } from '../types';
 export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => {
     decs: Decoration[];
     decorationState: {
@@ -9,4 +9,4 @@ export declare const dropTargetDecorations: (oldState: EditorState, newState: Ed
         pos: number;
     }[];
 };
-export declare const dragHandleDecoration: (oldState: EditorState, meta: any, api: ExtractInjectionAPI<BlockControlsPlugin>) => DecorationSet;
+export declare const dragHandleDecoration: (oldState: EditorState, meta: BlockControlsMeta, api: ExtractInjectionAPI<BlockControlsPlugin>) => DecorationSet;

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

@@ -29,3 +29,8 @@ export type DecorationState = {
     index: number;
     pos: number;
 }[];
+export type BlockControlsMeta = {
+    pos: number;
+    type: string;
+    dom: HTMLElement;
+};

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

@@ -1,3 +1,6 @@
 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 DROP_TARGET_LINE_WIDTH = 2;
+export declare const DROP_TARGET_CIRCLE_DIAMETER = 4;
+export declare const DRAG_HANDLE_NODE_GAP = 12;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/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;
+}) => jsx.JSX.Element;

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

@@ -0,0 +1,2 @@
+import { NodeSelection, TextSelection, type Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const getSelection: (tr: Transaction, start: number) => NodeSelection | TextSelection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-block-controls",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "description": "Block controls plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,10 +31,11 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^80.0.0",
+    "@atlaskit/editor-common": "^80.2.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
-    "@atlaskit/icon": "^22.1.0",
+    "@atlaskit/icon": "^22.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
+    "@atlaskit/theme": "^12.8.0",
     "@atlaskit/tokens": "^1.48.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"