@atlaskit/editor-plugin-block-controls 1.4.7 → 1.4.9

package/.eslintrc.js

@@ -1,14 +1,14 @@
 module.exports = {
-  rules: {
-    '@typescript-eslint/no-duplicate-imports': 'error',
-    '@typescript-eslint/no-explicit-any': 'error',
-  },
-  overrides: [
-    {
-      files: ['**/__tests__/**/*.{js,ts,tsx}', '**/examples/**/*.{js,ts,tsx}'],
-      rules: {
-        '@typescript-eslint/no-explicit-any': 'off',
-      },
-    },
-  ],
+	rules: {
+		'@typescript-eslint/no-duplicate-imports': 'error',
+		'@typescript-eslint/no-explicit-any': 'error',
+	},
+	overrides: [
+		{
+			files: ['**/__tests__/**/*.{js,ts,tsx}', '**/examples/**/*.{js,ts,tsx}'],
+			rules: {
+				'@typescript-eslint/no-explicit-any': 'off',
+			},
+		},
+	],
 };

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.9
+
+### Patch Changes
+
+- [#106586](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/106586)
+  [`861ecd061c72`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/861ecd061c72) -
+  Increase the editor page guttering for full page appearance to support block drag and drop
+- [#107579](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107579)
+  [`4953d4a32c98`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4953d4a32c98) -
+  [ux] Expand blocks drop target to full doc width
+- Updated dependencies
+
+## 1.4.8
+
+### Patch Changes
+
+- [#103640](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103640)
+  [`8efbf0dd0174`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8efbf0dd0174) -
+  Hide floating toolbar on dragging
+- [#105200](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105200)
+  [`6ba0d6402f38`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6ba0d6402f38) -
+  Fix drag handle position when the node contains nested image
+
 ## 1.4.7
 
 ### Patch Changes

package/LICENSE.md

@@ -1,13 +1,11 @@
 Copyright 2023 Atlassian Pty Ltd
 
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
 
     http://www.apache.org/licenses/LICENSE-2.0
 
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.

package/dist/cjs/plugin.js

@@ -41,14 +41,15 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3;
+      var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3, _key$getState$isDragg, _key$getState4;
       if (!editorState) {
         return undefined;
       }
       return {
         isMenuOpen: (_key$getState$isMenuO = (_key$getState = _main.key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
         activeNode: (_key$getState$activeN = (_key$getState2 = _main.key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : null,
-        decorationState: (_key$getState$decorat = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : []
+        decorationState: (_key$getState$decorat = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : [],
+        isDragging: (_key$getState$isDragg = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false
       };
     },
     contentComponent: function contentComponent() {

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

@@ -66,11 +66,13 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     }), element);
     element.style.position = 'absolute';
     element.style.zIndex = '1';
-    var resizer = meta.dom.querySelector('.resizer-item');
+
+    // If the selected node is a table or mediaSingle with resizer, we need to adjust the position of the drag handle
+    var resizer = ['table', 'mediaSingle'].includes(meta.type) ? meta.dom.querySelector('.resizer-item') : null;
     if (resizer) {
-      element.style.left = getComputedStyle(resizer).transform === 'none' ? "".concat(resizer.offsetLeft - _consts.DRAG_HANDLE_NODE_GAP - _consts.DRAG_HANDLE_WIDTH, "px") : "".concat(resizer.offsetLeft - resizer.offsetWidth / 2 - _consts.DRAG_HANDLE_NODE_GAP - _consts.DRAG_HANDLE_WIDTH, "px");
+      element.style.left = getComputedStyle(resizer).transform === 'none' ? "".concat(resizer.offsetLeft - (0, _consts.dragHandleGap)(meta.type) - _consts.DRAG_HANDLE_WIDTH, "px") : "".concat(resizer.offsetLeft - resizer.offsetWidth / 2 - (0, _consts.dragHandleGap)(meta.type) - _consts.DRAG_HANDLE_WIDTH, "px");
     } else {
-      element.style.left = "".concat(meta.dom.offsetLeft - _consts.DRAG_HANDLE_NODE_GAP - _consts.DRAG_HANDLE_WIDTH, "px");
+      element.style.left = "".concat(meta.dom.offsetLeft - (0, _consts.dragHandleGap)(meta.type) - _consts.DRAG_HANDLE_WIDTH, "px");
     }
     if (meta.type === 'table') {
       var table = meta.dom.querySelector('table');

package/dist/cjs/ui/consts.js

@@ -3,8 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_NODE_GAP = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
+exports.dragHandleGap = exports.DRAG_HANDLE_WIDTH = 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 nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
+var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType) {
+  if (nodeTypeExcludeList.includes(nodeType)) {
+    return 12;
+  }
+  return 8;
+};

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

@@ -8,15 +8,26 @@ exports.DropTarget = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _hooks = require("@atlaskit/editor-common/hooks");
 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");
 /** @jsx jsx */
 
+var DEFAULT_DROP_INDICATOR_WIDTH = 760;
 var styleDropTarget = (0, _react2.css)({
   height: "var(--ds-space-100, 8px)",
   marginTop: "var(--ds-space-negative-100, -8px)",
+  position: 'absolute',
+  width: '100%',
+  left: '0',
+  display: 'block'
+});
+var styleDropIndicator = (0, _react2.css)({
+  height: '100%',
+  width: '100%',
+  margin: '0 auto',
   position: 'relative'
 });
 var DropTarget = exports.DropTarget = function DropTarget(_ref) {
@@ -27,6 +38,9 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  var lineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH;
   (0, _react.useEffect)(function () {
     var element = ref.current;
     if (!element) {
@@ -83,9 +97,15 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
       "data-testid": "block-ctrl-drop-target"
     },
     //4px gap to clear expand node border
-    isDraggedOver && (0, _react2.jsx)(_box.DropIndicator, {
+    isDraggedOver && (0, _react2.jsx)("div", {
+      css: styleDropIndicator,
+      style: {
+        'width': "".concat(lineLength, "px")
+      },
+      "data-testid": "block-ctrl-drop-indicator"
+    }, (0, _react2.jsx)(_box.DropIndicator, {
       edge: "bottom",
       gap: "4px"
-    }))
+    })))
   );
 };

package/dist/es2019/plugin.js

@@ -31,14 +31,15 @@ export const blockControlsPlugin = ({
     }
   },
   getSharedState(editorState) {
-    var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3;
+    var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3, _key$getState$isDragg, _key$getState4;
     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,
       activeNode: (_key$getState$activeN = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : null,
-      decorationState: (_key$getState$decorat = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : []
+      decorationState: (_key$getState$decorat = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : [],
+      isDragging: (_key$getState$isDragg = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false
     };
   },
   contentComponent() {

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

@@ -1,7 +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 { DRAG_HANDLE_WIDTH, dragHandleGap } from '../ui/consts';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 export const dropTargetDecorations = (oldState, newState, api) => {
@@ -59,11 +59,13 @@ export const dragHandleDecoration = (oldState, meta, api) => {
     }), element);
     element.style.position = 'absolute';
     element.style.zIndex = '1';
-    const resizer = meta.dom.querySelector('.resizer-item');
+
+    // If the selected node is a table or mediaSingle with resizer, we need to adjust the position of the drag handle
+    const resizer = ['table', 'mediaSingle'].includes(meta.type) ? meta.dom.querySelector('.resizer-item') : null;
     if (resizer) {
-      element.style.left = getComputedStyle(resizer).transform === 'none' ? `${resizer.offsetLeft - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH}px` : `${resizer.offsetLeft - resizer.offsetWidth / 2 - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH}px`;
+      element.style.left = getComputedStyle(resizer).transform === 'none' ? `${resizer.offsetLeft - dragHandleGap(meta.type) - DRAG_HANDLE_WIDTH}px` : `${resizer.offsetLeft - resizer.offsetWidth / 2 - dragHandleGap(meta.type) - DRAG_HANDLE_WIDTH}px`;
     } else {
-      element.style.left = `${meta.dom.offsetLeft - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH}px`;
+      element.style.left = `${meta.dom.offsetLeft - dragHandleGap(meta.type) - DRAG_HANDLE_WIDTH}px`;
     }
     if (meta.type === 'table') {
       const table = meta.dom.querySelector('table');

package/dist/es2019/ui/consts.js

@@ -1,4 +1,10 @@
 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;
+const nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
+export const dragHandleGap = nodeType => {
+  if (nodeTypeExcludeList.includes(nodeType)) {
+    return 12;
+  }
+  return 8;
+};

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

@@ -1,13 +1,24 @@
 /** @jsx jsx */
 import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 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';
+const DEFAULT_DROP_INDICATOR_WIDTH = 760;
 const styleDropTarget = css({
   height: "var(--ds-space-100, 8px)",
   marginTop: "var(--ds-space-negative-100, -8px)",
+  position: 'absolute',
+  width: '100%',
+  left: '0',
+  display: 'block'
+});
+const styleDropIndicator = css({
+  height: '100%',
+  width: '100%',
+  margin: '0 auto',
   position: 'relative'
 });
 export const DropTarget = ({
@@ -16,6 +27,10 @@ export const DropTarget = ({
 }) => {
   const ref = useRef(null);
   const [isDraggedOver, setIsDraggedOver] = useState(false);
+  const {
+    widthState
+  } = useSharedPluginState(api, ['width']);
+  const lineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH;
   useEffect(() => {
     const element = ref.current;
     if (!element) {
@@ -68,9 +83,15 @@ export const DropTarget = ({
       "data-testid": "block-ctrl-drop-target"
     },
     //4px gap to clear expand node border
-    isDraggedOver && jsx(DropIndicator, {
+    isDraggedOver && jsx("div", {
+      css: styleDropIndicator,
+      style: {
+        'width': `${lineLength}px`
+      },
+      "data-testid": "block-ctrl-drop-indicator"
+    }, jsx(DropIndicator, {
       edge: "bottom",
       gap: "4px"
-    }))
+    })))
   );
 };

package/dist/esm/plugin.js

@@ -34,14 +34,15 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3;
+      var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3, _key$getState$isDragg, _key$getState4;
       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,
         activeNode: (_key$getState$activeN = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : null,
-        decorationState: (_key$getState$decorat = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : []
+        decorationState: (_key$getState$decorat = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : [],
+        isDragging: (_key$getState$isDragg = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false
       };
     },
     contentComponent: function contentComponent() {

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

@@ -1,7 +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 { DRAG_HANDLE_WIDTH, dragHandleGap } from '../ui/consts';
 import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 export var dropTargetDecorations = function dropTargetDecorations(oldState, newState, api) {
@@ -59,11 +59,13 @@ export var dragHandleDecoration = function dragHandleDecoration(oldState, meta,
     }), element);
     element.style.position = 'absolute';
     element.style.zIndex = '1';
-    var resizer = meta.dom.querySelector('.resizer-item');
+
+    // If the selected node is a table or mediaSingle with resizer, we need to adjust the position of the drag handle
+    var resizer = ['table', 'mediaSingle'].includes(meta.type) ? meta.dom.querySelector('.resizer-item') : null;
     if (resizer) {
-      element.style.left = getComputedStyle(resizer).transform === 'none' ? "".concat(resizer.offsetLeft - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH, "px") : "".concat(resizer.offsetLeft - resizer.offsetWidth / 2 - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH, "px");
+      element.style.left = getComputedStyle(resizer).transform === 'none' ? "".concat(resizer.offsetLeft - dragHandleGap(meta.type) - DRAG_HANDLE_WIDTH, "px") : "".concat(resizer.offsetLeft - resizer.offsetWidth / 2 - dragHandleGap(meta.type) - DRAG_HANDLE_WIDTH, "px");
     } else {
-      element.style.left = "".concat(meta.dom.offsetLeft - DRAG_HANDLE_NODE_GAP - DRAG_HANDLE_WIDTH, "px");
+      element.style.left = "".concat(meta.dom.offsetLeft - dragHandleGap(meta.type) - DRAG_HANDLE_WIDTH, "px");
     }
     if (meta.type === 'table') {
       var table = meta.dom.querySelector('table');

package/dist/esm/ui/consts.js

@@ -1,4 +1,10 @@
 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;
+var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
+export var dragHandleGap = function dragHandleGap(nodeType) {
+  if (nodeTypeExcludeList.includes(nodeType)) {
+    return 12;
+  }
+  return 8;
+};

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

@@ -2,13 +2,24 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 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';
+var DEFAULT_DROP_INDICATOR_WIDTH = 760;
 var styleDropTarget = css({
   height: "var(--ds-space-100, 8px)",
   marginTop: "var(--ds-space-negative-100, -8px)",
+  position: 'absolute',
+  width: '100%',
+  left: '0',
+  display: 'block'
+});
+var styleDropIndicator = css({
+  height: '100%',
+  width: '100%',
+  margin: '0 auto',
   position: 'relative'
 });
 export var DropTarget = function DropTarget(_ref) {
@@ -19,6 +30,9 @@ export var DropTarget = function DropTarget(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
+  var _useSharedPluginState = useSharedPluginState(api, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  var lineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH;
   useEffect(function () {
     var element = ref.current;
     if (!element) {
@@ -75,9 +89,15 @@ export var DropTarget = function DropTarget(_ref) {
       "data-testid": "block-ctrl-drop-target"
     },
     //4px gap to clear expand node border
-    isDraggedOver && jsx(DropIndicator, {
+    isDraggedOver && jsx("div", {
+      css: styleDropIndicator,
+      style: {
+        'width': "".concat(lineLength, "px")
+      },
+      "data-testid": "block-ctrl-drop-indicator"
+    }, jsx(DropIndicator, {
       edge: "bottom",
       gap: "4px"
-    }))
+    })))
   );
 };

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { blockControlsPlugin } from './plugin';
-export type { BlockControlsPlugin } from './types';
+export type { BlockControlsPlugin, DecorationState } from './types';

package/dist/types/plugin.d.ts

@@ -1,2 +1,2 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-export declare const blockControlsPlugin: NextEditorPlugin<'blockControls'>;
+import type { BlockControlsPlugin } from './types';
+export declare const blockControlsPlugin: BlockControlsPlugin;

package/dist/types/types.d.ts

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

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

@@ -1,4 +1,4 @@
 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 dragHandleGap: (nodeType: string) => 12 | 8;

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

@@ -1,2 +1,2 @@
 export { blockControlsPlugin } from './plugin';
-export type { BlockControlsPlugin } from './types';
+export type { BlockControlsPlugin, DecorationState } from './types';

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

@@ -1,2 +1,2 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-export declare const blockControlsPlugin: NextEditorPlugin<'blockControls'>;
+import type { BlockControlsPlugin } from './types';
+export declare const blockControlsPlugin: BlockControlsPlugin;

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

@@ -1,4 +1,5 @@
-import type { EditorCommand, NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export interface PluginState {
     decorations: DecorationSet;
@@ -12,15 +13,16 @@ export interface PluginState {
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [
+        OptionalPlugin<WidthPlugin>
     ];
     sharedState: {
         isMenuOpen: boolean;
         activeNode: {
             pos: number;
-        };
+        } | null;
         decorationState: DecorationState;
+        isDragging: boolean;
     } | undefined;
-    actions: {};
     commands: {
         moveNode: (start: number, to: number) => EditorCommand;
     };

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

@@ -1,4 +1,4 @@
 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 dragHandleGap: (nodeType: string) => 12 | 8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-block-controls",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "description": "Block controls plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,7 +31,8 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^81.1.0",
+    "@atlaskit/editor-common": "^82.0.0",
+    "@atlaskit/editor-plugin-width": "^1.1.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
     "@atlaskit/icon": "^22.3.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",