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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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

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

@@ -70,9 +70,9 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     // 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/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) => {
@@ -63,9 +63,9 @@ export const dragHandleDecoration = (oldState, meta, api) => {
     // 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/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) {
@@ -63,9 +63,9 @@ export var dragHandleDecoration = function dragHandleDecoration(oldState, meta,
     // 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/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,16 +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/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,16 +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.8",
+  "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",