@atlaskit/editor-plugin-block-controls 17.1.0 → 17.1.2

package/dist/esm/ui/block-controls-surface.js

@@ -17,16 +17,12 @@ import { getAbsoluteSurfacePlacement, getSurfacePlacement } from './utils/get-su
 import { VisibilityContainer } from './visibility-container';
 var BLOCK_CONTROLS_SURFACE_Z_INDEX = 100;
 var surfaceStyles = null;
-export var BlockControlsSurface = function BlockControlsSurface(_ref) {
-  var _api$uiControlRegistr, _api$uiControlRegistr2;
-  var api = _ref.api,
-    editorView = _ref.editorView;
-  var activeNode = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
-    var _states$blockControls;
-    return {
-      activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode
-    };
-  }).activeNode;
+var BlockControlsSurfaceAtTarget = function BlockControlsSurfaceAtTarget(_ref) {
+  var _api$uiControlRegistr, _api$uiControlRegistr2, _activeNode$handleOpt;
+  var activeNode = _ref.activeNode,
+    api = _ref.api,
+    editorView = _ref.editorView,
+    target = _ref.target;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     position = _useState2[0],
@@ -34,8 +30,8 @@ export var BlockControlsSurface = function BlockControlsSurface(_ref) {
   var animationFrameRef = useRef(undefined);
   var components = (_api$uiControlRegistr = (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   var blockControlsContext = useMemo(function () {
-    return createBlockControlsSurfaceContext(editorView, activeNode);
-  }, [activeNode, editorView]);
+    return createBlockControlsSurfaceContext(editorView, activeNode, target);
+  }, [activeNode, editorView, target]);
   var surfaceContext = useMemo(function () {
     return blockControlsContext ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined;
   }, [blockControlsContext]);
@@ -45,29 +41,29 @@ export var BlockControlsSurface = function BlockControlsSurface(_ref) {
       setPosition(undefined);
       return;
     }
-    var rootNodeElement = editorView.nodeDOM(blockControlsContext.rootNode.pos);
-    var rootElement = rootNodeElement instanceof HTMLElement ? rootNodeElement : rootNodeElement === null || rootNodeElement === void 0 ? void 0 : rootNodeElement.parentElement;
-    if (!rootElement) {
+    var targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
+    var targetElementRoot = targetNodeElement instanceof HTMLElement ? targetNodeElement : targetNodeElement === null || targetNodeElement === void 0 ? void 0 : targetNodeElement.parentElement;
+    if (!targetElementRoot) {
       setPosition(undefined);
       return;
     }
-    var targetElement = getNodeContentElement(rootElement, blockControlsContext.rootNode.type.name);
+    var targetElement = getNodeContentElement(targetElementRoot, blockControlsContext.targetNode.type.name);
     var offsetParent = editorView.dom.offsetParent;
     var isDocumentOffsetParent = !offsetParent || offsetParent === ((_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.body);
     var scrollingOffsetParent = offsetParent instanceof HTMLElement && !isDocumentOffsetParent ? offsetParent : undefined;
     var updatePosition = function updatePosition() {
-      var _rootElement$getAttri, _scrollingOffsetParen, _scrollingOffsetParen2;
+      var _targetElementRoot$ge, _scrollingOffsetParen, _scrollingOffsetParen2;
       animationFrameRef.current = undefined;
-      if (!rootElement.isConnected || !targetElement.isConnected) {
+      if (!targetElementRoot.isConnected || !targetElement.isConnected) {
         setPosition(undefined);
         return;
       }
       var placement = getSurfacePlacement({
-        layout: (_rootElement$getAttri = rootElement.getAttribute('layout')) !== null && _rootElement$getAttri !== void 0 ? _rootElement$getAttri : '',
+        layout: (_targetElementRoot$ge = targetElementRoot.getAttribute('layout')) !== null && _targetElementRoot$ge !== void 0 ? _targetElementRoot$ge : '',
         nodeRect: targetElement.getBoundingClientRect(),
-        nodeType: blockControlsContext.rootNode.type.name,
-        nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.rootNode.node),
-        parentNodeType: blockControlsContext.rootNode.parentType === 'doc' ? undefined : blockControlsContext.rootNode.parentType
+        nodeType: blockControlsContext.targetNode.type.name,
+        nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.targetNode.node),
+        parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType
       });
       var offsetParentRect = offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.getBoundingClientRect();
       var offsetParentScrollTop = (_scrollingOffsetParen = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollTop) !== null && _scrollingOffsetParen !== void 0 ? _scrollingOffsetParen : window.scrollY;
@@ -135,17 +131,46 @@ export var BlockControlsSurface = function BlockControlsSurface(_ref) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
+    "data-editor-block-controls-surface": true
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved from the active node's runtime DOM geometry.
+    ,
     style: position,
-    "data-testid": "block-controls-left-surface",
-    className: ax(["_1e0c1txw _kqswstnw _1pbyb4wl"])
+    "data-testid": target === 'root' ? 'block-controls-left-surface' : 'block-controls-left-surface-active',
+    className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw _kqswstnw _1pbyb4wl"])
   }, /*#__PURE__*/React.createElement(VisibilityContainer, {
     api: api,
     controlSide: "left",
+    forceVisibleOnMouseOut: Boolean((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused),
     shouldUseDisplayContents: true
   }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
     components: components,
     surface: BLOCK_CONTROLS_LEFT_SURFACE,
     surfaceContext: surfaceContext
   })));
+};
+export var BlockControlsSurface = function BlockControlsSurface(_ref2) {
+  var _activeNode$rootPos;
+  var api = _ref2.api,
+    editorView = _ref2.editorView;
+  var activeNode = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
+    var _states$blockControls;
+    return {
+      activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode
+    };
+  }).activeNode;
+  if (!activeNode) {
+    return null;
+  }
+  var rootPos = (_activeNode$rootPos = activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : activeNode.pos;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BlockControlsSurfaceAtTarget, {
+    activeNode: activeNode,
+    api: api,
+    editorView: editorView,
+    target: "root"
+  }), rootPos !== activeNode.pos ? /*#__PURE__*/React.createElement(BlockControlsSurfaceAtTarget, {
+    activeNode: activeNode,
+    api: api,
+    editorView: editorView,
+    target: "active"
+  }) : null);
 };

package/dist/esm/ui/consts.js

@@ -10,6 +10,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var ACTIVE_DRAG_HANDLE_ATTR = 'data-active-drag-handle';
 export var ACTIVE_QUICK_INSERT_ATTR = 'data-active-quick-insert';
+export var BLOCK_CONTROLS_SURFACE_SELECTOR = '[data-editor-block-controls-surface]';
 export var ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = '--editor-block-controls-active-drag-handle-anchor';
 export var ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = '--editor-block-controls-active-quick-insert-anchor';
 export var DRAG_HANDLE_HEIGHT = 24;

package/dist/esm/ui/surface-editor-view-context.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+/** Provides registered block-control surface contributors with their owning editor view. */
+export var SurfaceEditorViewContext = /*#__PURE__*/createContext(undefined);
+export var useSurfaceEditorView = function useSurfaceEditorView() {
+  return useContext(SurfaceEditorViewContext);
+};

package/dist/esm/ui/use-block-controls-surface-drag-source.js

@@ -0,0 +1,166 @@
+import { useEffect } from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { startMeasure } from '@atlaskit/editor-common/performance-measures';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/utils/set-custom-native-drag-preview';
+import { defaultActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
+import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
+import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
+import { dragPreview } from './drag-preview';
+import { getNodeMarginsForDragPreview, getNodeSpacingForDragPreview } from './block-controls-surface-drag-handle-utils';
+var EDITOR_BLOCKS_DRAG_INIT = 'Editor Blocks Drag Initialization Time';
+/**
+ * Registry surface drag source. This intentionally duplicates the stable widget handle's drag
+ * contract so the legacy implementation remains byte-for-byte unchanged during migration.
+ */
+export var useBlockControlsSurfaceDragSource = function useBlockControlsSurfaceDragSource(_ref) {
+  var api = _ref.api,
+    elementRef = _ref.elementRef,
+    getAnchorName = _ref.getAnchorName,
+    getPos = _ref.getPos,
+    nodeType = _ref.nodeType,
+    start = _ref.start,
+    view = _ref.view;
+  useEffect(function () {
+    var element = elementRef.current;
+    if (!element || !view) {
+      return;
+    }
+    return draggable({
+      element: element,
+      getInitialData: function getInitialData() {
+        return {
+          type: 'element',
+          start: start
+        };
+      },
+      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
+        var _api$core, _api$blockControls$sh;
+        var nativeSetDragImage = _ref2.nativeSetDragImage;
+        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
+          var tr = _ref3.tr;
+          var handlePos = getPos();
+          if (typeof handlePos !== 'number') {
+            return tr;
+          }
+          if (!tr.selection.empty && isHandleCorrelatedToSelection(view.state, tr.selection, handlePos)) {
+            var _api$blockControls;
+            api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setMultiSelectPositions()({
+              tr: tr
+            });
+          } else {
+            tr = selectNode(tr, handlePos, nodeType, api);
+          }
+          return tr;
+        });
+        var startPos = getPos();
+        var _view$state = view.state,
+          doc = _view$state.doc,
+          selection = _view$state.selection;
+        var sliceFrom = selection.from;
+        var sliceTo = selection.to;
+        var multiSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
+        if (multiSelect) {
+          sliceFrom = Math.min(multiSelect.anchor, multiSelect.head);
+          sliceTo = Math.max(multiSelect.anchor, multiSelect.head);
+        }
+        var expandedSlice = doc.slice(sliceFrom, sliceTo);
+        var isDraggingMultipleNodes = startPos !== undefined && startPos >= sliceFrom && startPos < sliceTo && expandedSlice.content.childCount > 1;
+        setCustomNativeDragPreview({
+          getOffset: function getOffset() {
+            if (!isDraggingMultipleNodes || startPos === undefined) {
+              return {
+                x: 0,
+                y: 0
+              };
+            }
+            var domAtPos = view.domAtPos.bind(view);
+            var heightBeforeHandle = 0;
+            var nodeStart = sliceFrom;
+            var activeNodeMarginTop = 0;
+            for (var index = 0; index < expandedSlice.content.childCount; index++) {
+              var _node$nodeSize;
+              var node = expandedSlice.content.maybeChild(index);
+              var nodeEnd = nodeStart + ((_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 0);
+              if (nodeEnd <= startPos) {
+                var nodeElement = findDomRefAtPos(nodeStart, domAtPos);
+                var margins = getNodeMarginsForDragPreview(node);
+                heightBeforeHandle += (nodeElement instanceof HTMLElement ? nodeElement.offsetHeight : 0) + margins.top + margins.bottom;
+              } else {
+                activeNodeMarginTop = getNodeMarginsForDragPreview(node).top;
+                break;
+              }
+              nodeStart = nodeEnd;
+            }
+            return {
+              x: 0,
+              y: heightBeforeHandle + activeNodeMarginTop
+            };
+          },
+          render: function render(_ref4) {
+            var container = _ref4.container;
+            if (!isDraggingMultipleNodes && startPos !== undefined) {
+              var dom = findDomRefAtPos(startPos, view.domAtPos.bind(view));
+              return dom instanceof HTMLElement ? dragPreview(container, {
+                dom: dom,
+                nodeType: nodeType
+              }) : undefined;
+            }
+            var previewContent = [];
+            expandedSlice.content.descendants(function (node, pos) {
+              var dom = findDomRefAtPos(sliceFrom + pos, view.domAtPos.bind(view));
+              if (dom instanceof HTMLElement) {
+                previewContent.push({
+                  dom: dom,
+                  nodeSpacing: getNodeSpacingForDragPreview(node),
+                  nodeType: node.type.name
+                });
+              }
+              return false;
+            });
+            return previewContent.length > 0 ? dragPreview(container, previewContent) : undefined;
+          },
+          nativeSetDragImage: nativeSetDragImage
+        });
+      },
+      onDragStart: function onDragStart() {
+        var _api$core2;
+        if (start === undefined) {
+          return;
+        }
+
+        // This handle is outside ProseMirror, so it owns the side effects normally started by PM.
+        startMeasure(EDITOR_BLOCKS_DRAG_INIT);
+        defaultActiveAnchorTracker.reset();
+        api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref5) {
+          var _api$blockControls$sh2, _resolvedMovingNode$n, _api$blockControls2, _api$analytics;
+          var tr = _ref5.tr;
+          var resolvedMovingNode = tr.doc.resolve(start);
+          var multiSelect = api === null || api === void 0 || (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.multiSelectDnD;
+          var attributes = multiSelect ? getMultiSelectAnalyticsAttributes(tr, multiSelect.anchor, multiSelect.head) : {
+            hasSelectedMultipleNodes: false,
+            nodeTypes: (_resolvedMovingNode$n = resolvedMovingNode.nodeAfter) === null || _resolvedMovingNode$n === void 0 ? void 0 : _resolvedMovingNode$n.type.name
+          };
+          api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.setNodeDragged(getPos, getAnchorName(), nodeType)({
+            tr: tr
+          });
+          tr.setMeta('scrollIntoView', false);
+          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+            action: ACTION.DRAGGED,
+            actionSubject: ACTION_SUBJECT.ELEMENT,
+            actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+            attributes: {
+              hasSelectedMultipleNodes: attributes.hasSelectedMultipleNodes,
+              nodeDepth: resolvedMovingNode.depth,
+              nodeTypes: attributes.nodeTypes || ''
+            },
+            eventType: EVENT_TYPE.UI
+          })(tr);
+          return tr;
+        });
+        view.focus();
+      }
+    });
+  }, [api, elementRef, getAnchorName, getPos, nodeType, start, view]);
+};

package/dist/esm/ui/utils/get-surface-placement.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { QUICK_INSERT_LEFT_OFFSET, dragHandleGap, topPositionAdjustment } from '../consts';
+import { dragHandleGap, topPositionAdjustment } from '../consts';
 export var getAbsoluteSurfacePlacement = function getAbsoluteSurfacePlacement(_ref) {
   var _offsetParentRect$lef, _offsetParentRect$top;
   var offsetParentRect = _ref.offsetParentRect,
@@ -24,9 +24,16 @@ export var getSurfacePlacement = function getSurfacePlacement(_ref2) {
     nodeType = _ref2.nodeType,
     nodeTypeWithLevel = _ref2.nodeTypeWithLevel,
     parentNodeType = _ref2.parentNodeType;
+  if (nodeType === 'layoutColumn') {
+    return {
+      left: nodeRect.left + nodeRect.width / 2,
+      top: nodeRect.top,
+      transform: 'translate(-50%, -50%)'
+    };
+  }
   return {
     left: nodeRect.left,
     top: nodeRect.top + topPositionAdjustment(nodeTypeWithLevel, layout),
-    transform: "translateX(calc(-100% - ".concat(dragHandleGap(nodeType, parentNodeType) + QUICK_INSERT_LEFT_OFFSET, "px))")
+    transform: "translateX(calc(-100% - ".concat(dragHandleGap(nodeType, parentNodeType), "px))")
   };
 };

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

@@ -9,6 +9,11 @@ import type { ActiveDropTargetNode, BlockControlsMeta, BlockControlsPlugin, Mult
 import { AnchorRectCache } from './utils/anchor-utils';
 export declare const key: PluginKey<PluginState>;
 export interface FlagType {
+    /**
+     * Whether the legacy widget-decoration drag handle is rendered. The registry surface renders
+     * its replacement when this is false.
+     */
+    legacyDragHandleEnabled: boolean;
     toolbarFlagsEnabled: boolean;
 }
 export declare const getDecorations: (state: EditorState) => DecorationSet | undefined;
@@ -36,7 +41,7 @@ export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | und
     menuTriggerByNode: any;
     multiSelectDnD: MultiSelectDnD | undefined;
 };
-export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[], rightSideControlsEnabled?: boolean, quickInsertButtonEnabled?: boolean) => SafePlugin<PluginState | {
+export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[], rightSideControlsEnabled?: boolean, quickInsertButtonEnabled?: boolean, legacyDragHandleEnabled?: boolean) => SafePlugin<PluginState | {
     activeDropTargetNode: ActiveDropTargetNode | undefined;
     activeNode: any;
     blockMenuOptions: {

package/dist/types/ui/block-controls-surface-context.d.ts

@@ -1,4 +1,4 @@
 import type { BlockControlUIContext } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveNode } from '../blockControlsPluginType';
-export declare const createBlockControlsSurfaceContext: (view: EditorView, activeNode: ActiveNode | undefined) => BlockControlUIContext | undefined;
+export declare const createBlockControlsSurfaceContext: (view: EditorView, activeNode: ActiveNode | undefined, target?: 'active' | 'root') => BlockControlUIContext | undefined;

package/dist/types/ui/block-controls-surface-drag-handle-registration.d.ts

@@ -0,0 +1,6 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterButton } from '@atlaskit/editor-ui-control-model/types';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+export declare const getBlockControlsSurfaceDragHandleComponents: ({ api, }: {
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+}) => RegisterButton[];

package/dist/types/ui/block-controls-surface-drag-handle-utils.d.ts

@@ -0,0 +1,14 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const buildLayoutColumnMenuMeta: (anchorPos: number, openedViaKeyboard: boolean) => {
+    anchorPos: number;
+    isOpen?: true;
+    openedViaKeyboard: boolean;
+};
+export declare const getNodeSpacingForDragPreview: (node?: PMNode | null) => {
+    bottom: string;
+    top: string;
+};
+export declare const getNodeMarginsForDragPreview: (node?: PMNode | null) => {
+    bottom: number;
+    top: number;
+};

package/dist/types/ui/block-controls-surface-drag-handle.d.ts

@@ -0,0 +1,10 @@
+import { jsx } from '@atlaskit/css';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { SurfaceContext } from '@atlaskit/editor-ui-control-model/types';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+type Props = {
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+    surfaceContext?: SurfaceContext;
+};
+export declare const BlockControlsSurfaceDragHandle: ({ api, surfaceContext, }: Props) => jsx.JSX.Element | null;
+export {};

package/dist/types/ui/block-controls-surface.d.ts

@@ -1,6 +1,7 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag React.Fragment
  */
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';

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

@@ -1,5 +1,6 @@
 export declare const ACTIVE_DRAG_HANDLE_ATTR = "data-active-drag-handle";
 export declare const ACTIVE_QUICK_INSERT_ATTR = "data-active-quick-insert";
+export declare const BLOCK_CONTROLS_SURFACE_SELECTOR = "[data-editor-block-controls-surface]";
 export declare const ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = "--editor-block-controls-active-drag-handle-anchor";
 export declare const ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = "--editor-block-controls-active-quick-insert-anchor";
 export declare const DRAG_HANDLE_HEIGHT = 24;

package/dist/types/ui/surface-editor-view-context.d.ts

@@ -0,0 +1,5 @@
+import { type Context } from 'react';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+/** Provides registered block-control surface contributors with their owning editor view. */
+export declare const SurfaceEditorViewContext: Context<EditorView | undefined>;
+export declare const useSurfaceEditorView: () => EditorView | undefined;

package/dist/types/ui/use-block-controls-surface-drag-source.d.ts

@@ -0,0 +1,19 @@
+import { type RefObject } from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+type Options = {
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+    elementRef: RefObject<HTMLElement>;
+    getAnchorName: () => string;
+    getPos: () => number | undefined;
+    nodeType: string;
+    start: number | undefined;
+    view: EditorView | undefined;
+};
+/**
+ * Registry surface drag source. This intentionally duplicates the stable widget handle's drag
+ * contract so the legacy implementation remains byte-for-byte unchanged during migration.
+ */
+export declare const useBlockControlsSurfaceDragSource: ({ api, elementRef, getAnchorName, getPos, nodeType, start, view, }: Options) => void;
+export {};

package/dist/types/ui/utils/get-surface-placement.d.ts

@@ -5,7 +5,7 @@ export type SurfacePlacement = {
 };
 export type SurfacePlacementOptions = {
     layout: string;
-    nodeRect: Pick<DOMRect, 'left' | 'top'>;
+    nodeRect: Pick<DOMRect, 'left' | 'top' | 'width'>;
     nodeType: string;
     nodeTypeWithLevel: string;
     parentNodeType?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "17.1.0",
+	"version": "17.1.2",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -55,10 +55,11 @@
 		"@atlaskit/primitives": "^22.4.0",
 		"@atlaskit/section-message": "^10.1.0",
 		"@atlaskit/theme": "^28.1.0",
-		"@atlaskit/tmp-editor-statsig": "^161.0.0",
+		"@atlaskit/tmp-editor-statsig": "^162.0.0",
 		"@atlaskit/tokens": "^16.8.0",
 		"@atlaskit/tooltip": "^24.2.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^1.0.2",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
 		"memoize-one": "^6.0.0",
@@ -66,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.1.0",
+		"@atlaskit/editor-common": "^120.3.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"