@atlaskit/editor-plugin-block-controls 1.4.11 → 1.4.12

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.4.12
+
+### Patch Changes
+
+- [#108853](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108853)
+  [`390f442689fd6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/390f442689fd6) -
+  Fix position of drag handle for extension/ bodiedExtension nodes in wide or fullWidth layout
+
 ## 1.4.11
 
 ### Patch Changes

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

@@ -8,6 +8,7 @@ exports.DragHandle = 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 _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
@@ -57,6 +58,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     dragHandleSelected = _useState2[0],
     setDragHandleSelected = _useState2[1];
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
+    featureFlagsState = _useSharedPluginState.featureFlagsState;
   var handleClick = (0, _react.useCallback)(function () {
     var _api$core, _api$core2;
     setDragHandleSelected(!dragHandleSelected);
@@ -113,24 +116,27 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
     });
   }, [api, start, view, anchorName, nodeType]);
+  var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var positionStyles = (0, _react.useMemo)(function () {
     var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
     var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+    if (!dom) {
+      return;
+    }
+    var hasResizer = anchorName.includes('table') || anchorName.includes('mediaSingle');
+    var isExtension = anchorName.includes('extension') || anchorName.includes('bodiedExtension');
+    var innerContainer = hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null;
     if (supportsAnchor) {
-      var hasResizer = (anchorName.includes('table') || anchorName.includes('mediaSingle')) && dom;
       return {
-        left: hasResizer ? (0, _dragHandlePositions.getLeftPosition)(dom, nodeType) : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
+        left: hasResizer || isExtension ? (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
         top: anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
-    if (!dom) {
-      return;
-    }
     return {
-      left: (0, _dragHandlePositions.getLeftPosition)(dom, nodeType),
+      left: (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: (0, _dragHandlePositions.getTopPosition)(dom)
     };
-  }, [anchorName, view, nodeType]);
+  }, [anchorName, view, nodeType, macroInteractionUpdates]);
   return (0, _react2.jsx)("button", {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],

package/dist/cjs/utils/drag-handle-positions.js

@@ -13,11 +13,14 @@ var getTopPosition = exports.getTopPosition = function getTopPosition(dom) {
     return "".concat(dom.offsetTop, "px");
   }
 };
-var getLeftPosition = exports.getLeftPosition = function getLeftPosition(dom, type) {
-  var resizer = ['table', 'mediaSingle'].includes(type) ? dom.querySelector('.resizer-item') : null;
-  var left = "".concat(dom.offsetLeft - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px");
-  if (resizer) {
-    left = getComputedStyle(resizer).transform === 'none' ? "".concat(resizer.offsetLeft - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px") : "".concat(resizer.offsetLeft - resizer.offsetWidth / 2 - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px");
+var getLeftPosition = exports.getLeftPosition = function getLeftPosition(dom, type, innerContainer, macroInteractionUpdates) {
+  if (!innerContainer) {
+    return "".concat(dom.offsetLeft - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px");
   }
-  return left;
+
+  // There is a showMacroInteractionDesignUpdates prop in extension node wrapper that can add a relative span under the top level div
+  // We need to adjust the left offset position of the drag handle to account for the relative span
+  var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
+  var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
+  return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - (0, _consts.dragHandleGap)(type) - _consts.DRAG_HANDLE_WIDTH, "px");
 };

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 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';
@@ -46,6 +47,9 @@ export const DragHandle = ({
   const start = getPos();
   const buttonRef = useRef(null);
   const [dragHandleSelected, setDragHandleSelected] = useState(false);
+  const {
+    featureFlagsState
+  } = useSharedPluginState(api, ['featureFlags']);
   const handleClick = useCallback(() => {
     var _api$core, _api$core2;
     setDragHandleSelected(!dragHandleSelected);
@@ -106,24 +110,27 @@ export const DragHandle = ({
       }
     });
   }, [api, start, view, anchorName, nodeType]);
+  const macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   const positionStyles = useMemo(() => {
     const supportsAnchor = CSS.supports('top', `anchor(${anchorName} start)`) && CSS.supports('left', `anchor(${anchorName} start)`);
     const dom = view.dom.querySelector(`[data-drag-handler-anchor-name="${anchorName}"]`);
+    if (!dom) {
+      return;
+    }
+    const hasResizer = anchorName.includes('table') || anchorName.includes('mediaSingle');
+    const isExtension = anchorName.includes('extension') || anchorName.includes('bodiedExtension');
+    const innerContainer = hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null;
     if (supportsAnchor) {
-      const hasResizer = (anchorName.includes('table') || anchorName.includes('mediaSingle')) && dom;
       return {
-        left: hasResizer ? getLeftPosition(dom, nodeType) : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
+        left: hasResizer || isExtension ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType)}px)`,
         top: anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
       };
     }
-    if (!dom) {
-      return;
-    }
     return {
-      left: getLeftPosition(dom, nodeType),
+      left: getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: getTopPosition(dom)
     };
-  }, [anchorName, view, nodeType]);
+  }, [anchorName, view, nodeType, macroInteractionUpdates]);
   return jsx("button", {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],

package/dist/es2019/utils/drag-handle-positions.js

@@ -7,11 +7,14 @@ export const getTopPosition = dom => {
     return `${dom.offsetTop}px`;
   }
 };
-export const getLeftPosition = (dom, type) => {
-  const resizer = ['table', 'mediaSingle'].includes(type) ? dom.querySelector('.resizer-item') : null;
-  let left = `${dom.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px`;
-  if (resizer) {
-    left = getComputedStyle(resizer).transform === 'none' ? `${resizer.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px` : `${resizer.offsetLeft - resizer.offsetWidth / 2 - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px`;
+export const getLeftPosition = (dom, type, innerContainer, macroInteractionUpdates) => {
+  if (!innerContainer) {
+    return `${dom.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px`;
   }
-  return left;
+
+  // There is a showMacroInteractionDesignUpdates prop in extension node wrapper that can add a relative span under the top level div
+  // We need to adjust the left offset position of the drag handle to account for the relative span
+  const relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
+  const leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
+  return getComputedStyle(innerContainer).transform === 'none' ? `${innerContainer.offsetLeft + leftAdjustment - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px` : `${innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - dragHandleGap(type) - DRAG_HANDLE_WIDTH}px`;
 };

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

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 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';
@@ -49,6 +50,8 @@ export var DragHandle = function DragHandle(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     dragHandleSelected = _useState2[0],
     setDragHandleSelected = _useState2[1];
+  var _useSharedPluginState = useSharedPluginState(api, ['featureFlags']),
+    featureFlagsState = _useSharedPluginState.featureFlagsState;
   var handleClick = useCallback(function () {
     var _api$core, _api$core2;
     setDragHandleSelected(!dragHandleSelected);
@@ -105,24 +108,27 @@ export var DragHandle = function DragHandle(_ref) {
       }
     });
   }, [api, start, view, anchorName, nodeType]);
+  var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
   var positionStyles = useMemo(function () {
     var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
     var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
+    if (!dom) {
+      return;
+    }
+    var hasResizer = anchorName.includes('table') || anchorName.includes('mediaSingle');
+    var isExtension = anchorName.includes('extension') || anchorName.includes('bodiedExtension');
+    var innerContainer = hasResizer ? dom.querySelector('.resizer-item') : isExtension ? dom.querySelector('.extension-container[data-layout]') : null;
     if (supportsAnchor) {
-      var hasResizer = (anchorName.includes('table') || anchorName.includes('mediaSingle')) && dom;
       return {
-        left: hasResizer ? getLeftPosition(dom, nodeType) : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
+        left: hasResizer || isExtension ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
         top: anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
       };
     }
-    if (!dom) {
-      return;
-    }
     return {
-      left: getLeftPosition(dom, nodeType),
+      left: getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
       top: getTopPosition(dom)
     };
-  }, [anchorName, view, nodeType]);
+  }, [anchorName, view, nodeType, macroInteractionUpdates]);
   return jsx("button", {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],

package/dist/esm/utils/drag-handle-positions.js

@@ -7,11 +7,14 @@ export var getTopPosition = function getTopPosition(dom) {
     return "".concat(dom.offsetTop, "px");
   }
 };
-export var getLeftPosition = function getLeftPosition(dom, type) {
-  var resizer = ['table', 'mediaSingle'].includes(type) ? dom.querySelector('.resizer-item') : null;
-  var left = "".concat(dom.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH, "px");
-  if (resizer) {
-    left = getComputedStyle(resizer).transform === 'none' ? "".concat(resizer.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH, "px") : "".concat(resizer.offsetLeft - resizer.offsetWidth / 2 - dragHandleGap(type) - DRAG_HANDLE_WIDTH, "px");
+export var getLeftPosition = function getLeftPosition(dom, type, innerContainer, macroInteractionUpdates) {
+  if (!innerContainer) {
+    return "".concat(dom.offsetLeft - dragHandleGap(type) - DRAG_HANDLE_WIDTH, "px");
   }
-  return left;
+
+  // There is a showMacroInteractionDesignUpdates prop in extension node wrapper that can add a relative span under the top level div
+  // We need to adjust the left offset position of the drag handle to account for the relative span
+  var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
+  var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
+  return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment - dragHandleGap(type) - DRAG_HANDLE_WIDTH, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - dragHandleGap(type) - DRAG_HANDLE_WIDTH, "px");
 };

package/dist/types/types.d.ts

@@ -1,4 +1,5 @@
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export interface PluginState {
@@ -15,7 +16,7 @@ export interface PluginState {
 }
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
-    dependencies: [OptionalPlugin<WidthPlugin>];
+    dependencies: [OptionalPlugin<WidthPlugin>, OptionalPlugin<FeatureFlagsPlugin>];
     sharedState: {
         isMenuOpen: boolean;
         activeNode: {

package/dist/types/utils/drag-handle-positions.d.ts

@@ -1,2 +1,2 @@
 export declare const getTopPosition: (dom: HTMLElement) => string;
-export declare const getLeftPosition: (dom: HTMLElement, type: string) => string;
+export declare const getLeftPosition: (dom: HTMLElement, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;

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

@@ -1,4 +1,5 @@
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export interface PluginState {
@@ -16,7 +17,8 @@ export interface PluginState {
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
     dependencies: [
-        OptionalPlugin<WidthPlugin>
+        OptionalPlugin<WidthPlugin>,
+        OptionalPlugin<FeatureFlagsPlugin>
     ];
     sharedState: {
         isMenuOpen: boolean;

package/dist/types-ts4.5/utils/drag-handle-positions.d.ts

@@ -1,2 +1,2 @@
 export declare const getTopPosition: (dom: HTMLElement) => string;
-export declare const getLeftPosition: (dom: HTMLElement, type: string) => string;
+export declare const getLeftPosition: (dom: HTMLElement, type: string, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-block-controls",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "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": "^82.1.0",
+    "@atlaskit/editor-common": "^82.2.0",
+    "@atlaskit/editor-plugin-feature-flags": "^1.1.0",
     "@atlaskit/editor-plugin-width": "^1.1.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
     "@atlaskit/editor-tables": "^2.7.0",