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

package/dist/es2019/ui/block-controls-surface-drag-handle.js

@@ -0,0 +1,282 @@
+/* block-controls-surface-drag-handle.tsx generated by @compiled/babel-plugin v2.0.0 */
+import "./block-controls-surface-drag-handle.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+
+// oxlint-disable-next-line typescript/consistent-type-imports -- jsx is the runtime factory for the classic JSX pragma above.
+
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { surfaceDragHandleElementStore } from '@atlaskit/editor-common/block-controls/surface-drag-handle-element';
+import { getBrowserInfo } from '@atlaskit/editor-common/browser';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
+import { blockControlsMessages } from '@atlaskit/editor-common/messages';
+import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import Tooltip from '@atlaskit/tooltip/Tooltip';
+import { selectionPreservationPluginKey } from '../pm-plugins/selection-preservation/plugin-key';
+import { expandAndUpdateSelection } from '../pm-plugins/utils/expand-and-update-selection';
+import { isHandleCorrelatedToSelection } from '../pm-plugins/utils/getSelection';
+import { buildLayoutColumnMenuMeta } from './block-controls-surface-drag-handle-utils';
+import { DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH } from './consts';
+import { DragHandleNestedIcon } from './drag-handle-nested-icon';
+import { shouldUseNestedDragHandleIcon } from './should-use-nested-drag-handle-icon';
+import { useSurfaceEditorView } from './surface-editor-view-context';
+import { useBlockControlsSurfaceDragSource } from './use-block-controls-surface-drag-source';
+import { getAnchorAttrName, NODE_ANCHOR_ATTR_NAME } from './utils/dom-attr-name';
+
+// Keep style values co-located for Compiled while matching the legacy drag handle dimensions.
+const SURFACE_DRAG_HANDLE_HEIGHT = 24;
+const SURFACE_DRAG_HANDLE_WIDTH = 12;
+const SURFACE_DRAG_HANDLE_BORDER_RADIUS = 4;
+const SURFACE_DRAG_HANDLE_Z_INDEX = 100;
+const dragHandleStyles = {
+  root: "_19itglyw _2rko1y44 _12ji1r31 _1qu2glyw _12y31o36 _1e0c1txw _vchhusvi _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i1tcg _1bsb1crf _bfhksm61 _syazdgkc _80om1qgj _1pbyb4wl _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _cun91j28 _vbqb2sac _1ygbdfik _irr31dpa _6g80187o _1di6fcek",
+  scaled: "_4t3i1myc _1bsbx5ub",
+  selected: "_bfhk15s3 _syazxl6c",
+  keyboardFocused: "_1a37dfik",
+  firefoxSelection: "_1p1y1j28",
+  layoutColumn: "_t9ec14w8",
+  iconWrapper: "_1e0c1txw _4cvr1h6o _1bah1h6o"
+};
+const handleIconDragStart = event => {
+  var _event$currentTarget$;
+  if (!getBrowserInfo().chrome) {
+    return;
+  }
+  event.stopPropagation();
+  (_event$currentTarget$ = event.currentTarget.parentElement) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.dispatchEvent(new DragEvent('dragstart', {
+    bubbles: true,
+    cancelable: true,
+    dataTransfer: event.dataTransfer
+  }));
+};
+const isSelected = (selection, pos, view) => {
+  if (typeof pos !== 'number' || !selection || !view) {
+    return false;
+  }
+  return isHandleCorrelatedToSelection(view.state, selection, pos);
+};
+export const BlockControlsSurfaceDragHandle = ({
+  api,
+  surfaceContext
+}) => {
+  var _activeNode$type$name;
+  const {
+    formatMessage
+  } = useIntl();
+  const view = useSurfaceEditorView();
+  const context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT);
+  const activeNode = context === null || context === void 0 ? void 0 : context.activeNode;
+  const pos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
+  const nodeType = (_activeNode$type$name = activeNode === null || activeNode === void 0 ? void 0 : activeNode.type.name) !== null && _activeNode$type$name !== void 0 ? _activeNode$type$name : '';
+  const buttonRef = useRef(null);
+  const posRef = useRef(pos);
+  posRef.current = pos;
+  const getPos = useCallback(() => posRef.current, []);
+  const {
+    activeNodeAnchorName,
+    handleOptions,
+    interactionState,
+    isShiftDown,
+    selection
+  } = useSharedPluginStateWithSelector(api, ['blockControls', 'interaction', 'selection'], states => {
+    var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$blockControls4, _states$interactionSt, _states$blockControls5, _states$selectionStat;
+    return {
+      activeNodeAnchorName: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : (_states$blockControls2 = _states$blockControls.activeNode) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.anchorName,
+      handleOptions: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : (_states$blockControls4 = _states$blockControls3.activeNode) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.handleOptions,
+      interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
+      isShiftDown: (_states$blockControls5 = states.blockControlsState) === null || _states$blockControls5 === void 0 ? void 0 : _states$blockControls5.isShiftDown,
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+    };
+  });
+  const [dragHandleSelected, setDragHandleSelected] = useState(false);
+  useEffect(() => {
+    setDragHandleSelected(isSelected(selection, pos, view));
+  }, [pos, selection, view]);
+  const isLayoutColumn = nodeType === 'layoutColumn';
+  const isTopLevelNode = (activeNode === null || activeNode === void 0 ? void 0 : activeNode.parentType) === 'doc';
+  const isDisabled = useMemo(() => {
+    var _api$blockControls$sh;
+    if (!isShiftDown || !view || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
+      return false;
+    }
+    if (isLayoutColumn && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      return false;
+    }
+    const multiSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
+    const $anchor = (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.anchor) !== undefined ? view.state.doc.resolve(multiSelect.anchor) : view.state.selection.$anchor;
+    return !isTopLevelNode || $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH;
+  }, [api, isLayoutColumn, isShiftDown, isTopLevelNode, view]);
+  const getAnchorName = useCallback(() => {
+    var _ref, _ref2, _dom$getAttribute, _dom$closest;
+    if (activeNodeAnchorName) {
+      return activeNodeAnchorName;
+    }
+    const currentPos = posRef.current;
+    if (!view || currentPos === undefined) {
+      return '';
+    }
+    const dom = view.nodeDOM(currentPos);
+    if (!(dom instanceof HTMLElement)) {
+      return '';
+    }
+    const anchorAttrName = getAnchorAttrName();
+    return (_ref = (_ref2 = (_dom$getAttribute = dom.getAttribute(anchorAttrName)) !== null && _dom$getAttribute !== void 0 ? _dom$getAttribute : dom.getAttribute(NODE_ANCHOR_ATTR_NAME)) !== null && _ref2 !== void 0 ? _ref2 : (_dom$closest = dom.closest(`[${anchorAttrName}]`)) === null || _dom$closest === void 0 ? void 0 : _dom$closest.getAttribute(anchorAttrName)) !== null && _ref !== void 0 ? _ref : '';
+  }, [activeNodeAnchorName, view]);
+  useLayoutEffect(() => {
+    const element = buttonRef.current;
+    if (!view || !element) {
+      return;
+    }
+    surfaceDragHandleElementStore.set(view, element);
+    return () => surfaceDragHandleElementStore.release(view, element);
+  }, [view]);
+  useEffect(() => {
+    if (!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused) || !buttonRef.current || !view) {
+      return;
+    }
+    let animationFrameId;
+    let attempts = 0;
+    const focusHandle = () => {
+      const button = buttonRef.current;
+      if (!button) {
+        return;
+      }
+      button.focus();
+      if (button.ownerDocument.activeElement !== button && attempts < 5) {
+        attempts++;
+        animationFrameId = requestAnimationFrame(focusHandle);
+      }
+    };
+    focusHandle();
+    return () => {
+      if (animationFrameId !== undefined) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      view.focus();
+    };
+  }, [handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
+  useBlockControlsSurfaceDragSource({
+    api,
+    elementRef: buttonRef,
+    getAnchorName,
+    getPos,
+    nodeType,
+    start: pos,
+    view
+  });
+  const handleMouseDown = useCallback(() => {
+    var _api$core, _api$blockControls;
+    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setSelectedViaDragHandle(true));
+  }, [api]);
+  const handleClick = useCallback(event => {
+    var _api$core2;
+    if (!view || isDisabled) {
+      return;
+    }
+    const openedViaKeyboard = event.detail === 0;
+    api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
+      tr
+    }) => {
+      var _selectionPreservatio, _selectionPreservatio2, _api$analytics, _resolvedStartPos$nod, _api$blockControls2, _api$blockControls3, _activeNode$rootPos;
+      const startPos = getPos();
+      if (startPos === undefined) {
+        return tr;
+      }
+      if (nodeType === 'layoutColumn' && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
+        tr.setMeta('toggleLayoutColumnMenu', buildLayoutColumnMenuMeta(startPos, openedViaKeyboard));
+      }
+      const selection = (_selectionPreservatio = (_selectionPreservatio2 = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio2 === void 0 ? void 0 : _selectionPreservatio2.preservedSelection) !== null && _selectionPreservatio !== void 0 ? _selectionPreservatio : tr.selection;
+      const resolvedStartPos = tr.doc.resolve(startPos);
+      api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
+        action: ACTION.CLICKED,
+        actionSubject: ACTION_SUBJECT.BUTTON,
+        actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+        attributes: {
+          nodeDepth: resolvedStartPos.depth,
+          nodeTypes: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
+        },
+        eventType: EVENT_TYPE.UI
+      })(tr);
+      expandAndUpdateSelection({
+        api,
+        isShiftPressed: event.shiftKey,
+        nodeType,
+        selection,
+        startPos,
+        tr
+      });
+      api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.startPreservingSelection()({
+        tr
+      });
+      api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.toggleBlockMenu({
+        anchorName: getAnchorName(),
+        openedViaKeyboard,
+        triggerByNode: {
+          nodeType,
+          pos: startPos,
+          rootPos: (_activeNode$rootPos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : resolvedStartPos.before(1)
+        }
+      })({
+        tr
+      });
+      tr.setMeta('scrollIntoView', false);
+      return tr;
+    });
+    view.focus();
+  }, [activeNode === null || activeNode === void 0 ? void 0 : activeNode.rootPos, api, getAnchorName, getPos, isDisabled, nodeType, view]);
+  const label = formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
+    br: ' '
+  });
+  const helpDescriptors = useMemo(() => [{
+    description: formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
+      br: /*#__PURE__*/React.createElement("br", null)
+    })
+  }], [formatMessage]);
+  const handleTooltipShow = useCallback(() => {
+    var _api$accessibilityUti;
+    api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify(label, {
+      priority: 'important'
+    });
+  }, [api, label]);
+  if (!view || !activeNode || pos === undefined) {
+    return null;
+  }
+  const tooltipContent = /*#__PURE__*/React.createElement(TooltipContentWithMultipleShortcuts, {
+    helpDescriptors: helpDescriptors
+  });
+  const browser = getBrowserInfo();
+  const button = /*#__PURE__*/React.createElement("button", {
+    ref: buttonRef,
+    type: "button",
+    "aria-label": label,
+    disabled: isDisabled,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop -- Pragmatic DnD owns this native drag source.
+    ,
+    onDrop: event => event.stopPropagation(),
+    "data-editor-block-ctrl-drag-handle": true,
+    "data-blocks-drag-handle": fg('confluence_remix_button_right_side_block_fg') || undefined,
+    "data-testid": "block-controls-surface-drag-handle",
+    className: ax([dragHandleStyles.root, browser.gecko && dragHandleStyles.firefoxSelection, isLayoutColumn && dragHandleStyles.layoutColumn, dragHandleSelected && interactionState !== 'hasNotHadInteraction' && dragHandleStyles.selected, (handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused) && dragHandleStyles.keyboardFocused, dragHandleStyles.scaled])
+  }, /*#__PURE__*/React.createElement("span", {
+    onDragStart: handleIconDragStart,
+    className: ax([dragHandleStyles.iconWrapper])
+  }, shouldUseNestedDragHandleIcon(Boolean(isTopLevelNode), isLayoutColumn) ? /*#__PURE__*/React.createElement(DragHandleNestedIcon, null) : /*#__PURE__*/React.createElement(DragHandleVerticalIcon, {
+    label: "",
+    size: "small",
+    spacing: "spacious"
+  })));
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    position: "top",
+    content: tooltipContent,
+    ignoreTooltipPointerEvents: true,
+    onShow: handleTooltipShow
+  }, button);
+};

package/dist/es2019/ui/block-controls-surface.compiled.css

@@ -1,3 +1,4 @@
-._1e0c1txw{display:flex}
+._zulpv77o{gap:var(--ds-space-025,2px)}._1e0c1txw{display:flex}
 ._1pbyb4wl{z-index:100}
+._4cvr1h6o{align-items:center}
 ._kqswstnw{position:absolute}

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

@@ -16,21 +16,17 @@ import { getAbsoluteSurfacePlacement, getSurfacePlacement } from './utils/get-su
 import { VisibilityContainer } from './visibility-container';
 const BLOCK_CONTROLS_SURFACE_Z_INDEX = 100;
 const surfaceStyles = null;
-export const BlockControlsSurface = ({
+const BlockControlsSurfaceAtTarget = ({
+  activeNode,
   api,
-  editorView
+  editorView,
+  target
 }) => {
-  var _api$uiControlRegistr, _api$uiControlRegistr2;
-  const activeNode = useSharedPluginStateWithSelector(api, ['blockControls'], states => {
-    var _states$blockControls;
-    return {
-      activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode
-    };
-  }).activeNode;
+  var _api$uiControlRegistr, _api$uiControlRegistr2, _activeNode$handleOpt;
   const [position, setPosition] = useState();
   const animationFrameRef = useRef(undefined);
   const 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 : [];
-  const blockControlsContext = useMemo(() => createBlockControlsSurfaceContext(editorView, activeNode), [activeNode, editorView]);
+  const blockControlsContext = useMemo(() => createBlockControlsSurfaceContext(editorView, activeNode, target), [activeNode, editorView, target]);
   const surfaceContext = useMemo(() => blockControlsContext ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined, [blockControlsContext]);
   useLayoutEffect(() => {
     var _getDocument;
@@ -38,29 +34,29 @@ export const BlockControlsSurface = ({
       setPosition(undefined);
       return;
     }
-    const rootNodeElement = editorView.nodeDOM(blockControlsContext.rootNode.pos);
-    const rootElement = rootNodeElement instanceof HTMLElement ? rootNodeElement : rootNodeElement === null || rootNodeElement === void 0 ? void 0 : rootNodeElement.parentElement;
-    if (!rootElement) {
+    const targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
+    const targetElementRoot = targetNodeElement instanceof HTMLElement ? targetNodeElement : targetNodeElement === null || targetNodeElement === void 0 ? void 0 : targetNodeElement.parentElement;
+    if (!targetElementRoot) {
       setPosition(undefined);
       return;
     }
-    const targetElement = getNodeContentElement(rootElement, blockControlsContext.rootNode.type.name);
+    const targetElement = getNodeContentElement(targetElementRoot, blockControlsContext.targetNode.type.name);
     const offsetParent = editorView.dom.offsetParent;
     const isDocumentOffsetParent = !offsetParent || offsetParent === ((_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.body);
     const scrollingOffsetParent = offsetParent instanceof HTMLElement && !isDocumentOffsetParent ? offsetParent : undefined;
     const 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;
       }
       const 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
       });
       const offsetParentRect = offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.getBoundingClientRect();
       const offsetParentScrollTop = (_scrollingOffsetParen = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollTop) !== null && _scrollingOffsetParen !== void 0 ? _scrollingOffsetParen : window.scrollY;
@@ -128,17 +124,47 @@ export const BlockControlsSurface = ({
     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 const BlockControlsSurface = ({
+  api,
+  editorView
+}) => {
+  var _activeNode$rootPos;
+  const activeNode = useSharedPluginStateWithSelector(api, ['blockControls'], 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;
+  }
+  const 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/es2019/ui/consts.js

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

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

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

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

@@ -0,0 +1,170 @@
+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';
+const 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 const useBlockControlsSurfaceDragSource = ({
+  api,
+  elementRef,
+  getAnchorName,
+  getPos,
+  nodeType,
+  start,
+  view
+}) => {
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element || !view) {
+      return;
+    }
+    return draggable({
+      element,
+      getInitialData: () => ({
+        type: 'element',
+        start
+      }),
+      onGenerateDragPreview: ({
+        nativeSetDragImage
+      }) => {
+        var _api$core, _api$blockControls$sh;
+        api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+          tr
+        }) => {
+          const 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 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.setMultiSelectPositions()({
+              tr
+            });
+          } else {
+            tr = selectNode(tr, handlePos, nodeType, api);
+          }
+          return tr;
+        });
+        const startPos = getPos();
+        const {
+          doc,
+          selection
+        } = view.state;
+        let sliceFrom = selection.from;
+        let sliceTo = selection.to;
+        const multiSelect = api === null || api === void 0 ? 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);
+        }
+        const expandedSlice = doc.slice(sliceFrom, sliceTo);
+        const isDraggingMultipleNodes = startPos !== undefined && startPos >= sliceFrom && startPos < sliceTo && expandedSlice.content.childCount > 1;
+        setCustomNativeDragPreview({
+          getOffset: () => {
+            if (!isDraggingMultipleNodes || startPos === undefined) {
+              return {
+                x: 0,
+                y: 0
+              };
+            }
+            const domAtPos = view.domAtPos.bind(view);
+            let heightBeforeHandle = 0;
+            let nodeStart = sliceFrom;
+            let activeNodeMarginTop = 0;
+            for (let index = 0; index < expandedSlice.content.childCount; index++) {
+              var _node$nodeSize;
+              const node = expandedSlice.content.maybeChild(index);
+              const nodeEnd = nodeStart + ((_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 0);
+              if (nodeEnd <= startPos) {
+                const nodeElement = findDomRefAtPos(nodeStart, domAtPos);
+                const 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: ({
+            container
+          }) => {
+            if (!isDraggingMultipleNodes && startPos !== undefined) {
+              const dom = findDomRefAtPos(startPos, view.domAtPos.bind(view));
+              return dom instanceof HTMLElement ? dragPreview(container, {
+                dom,
+                nodeType
+              }) : undefined;
+            }
+            const previewContent = [];
+            expandedSlice.content.descendants((node, pos) => {
+              const dom = findDomRefAtPos(sliceFrom + pos, view.domAtPos.bind(view));
+              if (dom instanceof HTMLElement) {
+                previewContent.push({
+                  dom,
+                  nodeSpacing: getNodeSpacingForDragPreview(node),
+                  nodeType: node.type.name
+                });
+              }
+              return false;
+            });
+            return previewContent.length > 0 ? dragPreview(container, previewContent) : undefined;
+          },
+          nativeSetDragImage
+        });
+      },
+      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 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
+          tr
+        }) => {
+          var _api$blockControls$sh2, _resolvedMovingNode$n, _api$blockControls2, _api$analytics;
+          const resolvedMovingNode = tr.doc.resolve(start);
+          const multiSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.multiSelectDnD;
+          const 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 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.setNodeDragged(getPos, getAnchorName(), nodeType)({
+            tr
+          });
+          tr.setMeta('scrollIntoView', false);
+          api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? 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/es2019/ui/utils/get-surface-placement.js

@@ -1,4 +1,4 @@
-import { QUICK_INSERT_LEFT_OFFSET, dragHandleGap, topPositionAdjustment } from '../consts';
+import { dragHandleGap, topPositionAdjustment } from '../consts';
 export const getAbsoluteSurfacePlacement = ({
   offsetParentRect,
   offsetParentScrollLeft,
@@ -23,8 +23,17 @@ export const getSurfacePlacement = ({
   nodeType,
   nodeTypeWithLevel,
   parentNodeType
-}) => ({
-  left: nodeRect.left,
-  top: nodeRect.top + topPositionAdjustment(nodeTypeWithLevel, layout),
-  transform: `translateX(calc(-100% - ${dragHandleGap(nodeType, parentNodeType) + QUICK_INSERT_LEFT_OFFSET}px))`
-});
+}) => {
+  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% - ${dragHandleGap(nodeType, parentNodeType)}px))`
+  };
+};