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

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

@@ -0,0 +1,51 @@
+const getNodeContext = (view, pos) => {
+  const node = view.state.doc.nodeAt(pos);
+  if (!node) {
+    return undefined;
+  }
+  const $pos = view.state.doc.resolve(pos);
+  const ancestors = [];
+  for (let depth = 0; depth <= $pos.depth; depth++) {
+    const ancestor = $pos.node(depth);
+    ancestors.push({
+      depth,
+      pos: depth === 0 ? 0 : $pos.before(depth),
+      type: {
+        name: ancestor.type.name
+      }
+    });
+  }
+  return {
+    ancestors,
+    depth: $pos.depth + 1,
+    node,
+    parentType: $pos.parent.type.name,
+    pos,
+    type: {
+      name: node.type.name
+    }
+  };
+};
+export const createBlockControlsSurfaceContext = (view, activeNode) => {
+  var _activeNode$rootPos, _activeNode$rootNodeT;
+  if (!activeNode) {
+    return undefined;
+  }
+  const rootPos = (_activeNode$rootPos = activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : activeNode.pos;
+  const activeNodeContext = getNodeContext(view, activeNode.pos);
+  const rootNodeContext = getNodeContext(view, rootPos);
+  if (!activeNodeContext || !rootNodeContext) {
+    return undefined;
+  }
+  return {
+    activeNode: {
+      ...activeNodeContext,
+      rootPos,
+      rootType: {
+        name: (_activeNode$rootNodeT = activeNode.rootNodeType) !== null && _activeNode$rootNodeT !== void 0 ? _activeNode$rootNodeT : rootNodeContext.type.name
+      }
+    },
+    rootNode: rootNodeContext,
+    targetNode: rootNodeContext
+  };
+};

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

@@ -0,0 +1,3 @@
+._1e0c1txw{display:flex}
+._1pbyb4wl{z-index:100}
+._kqswstnw{position:absolute}

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

@@ -0,0 +1,144 @@
+/* block-controls-surface.tsx generated by @compiled/babel-plugin v2.0.0 */
+import "./block-controls-surface.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { getDocument } from '@atlaskit/browser-apis';
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/types';
+import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
+import { createBlockControlsSurfaceContext } from './block-controls-surface-context';
+import { getNodeContentElement } from './utils/get-node-content-element';
+import { getAbsoluteSurfacePlacement, getSurfacePlacement } from './utils/get-surface-placement';
+import { VisibilityContainer } from './visibility-container';
+const BLOCK_CONTROLS_SURFACE_Z_INDEX = 100;
+const surfaceStyles = null;
+export const BlockControlsSurface = ({
+  api,
+  editorView
+}) => {
+  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;
+  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 surfaceContext = useMemo(() => blockControlsContext ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined, [blockControlsContext]);
+  useLayoutEffect(() => {
+    var _getDocument;
+    if (!blockControlsContext) {
+      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) {
+      setPosition(undefined);
+      return;
+    }
+    const targetElement = getNodeContentElement(rootElement, blockControlsContext.rootNode.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;
+      animationFrameRef.current = undefined;
+      if (!rootElement.isConnected || !targetElement.isConnected) {
+        setPosition(undefined);
+        return;
+      }
+      const placement = getSurfacePlacement({
+        layout: (_rootElement$getAttri = rootElement.getAttribute('layout')) !== null && _rootElement$getAttri !== void 0 ? _rootElement$getAttri : '',
+        nodeRect: targetElement.getBoundingClientRect(),
+        nodeType: blockControlsContext.rootNode.type.name,
+        nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.rootNode.node),
+        parentNodeType: blockControlsContext.rootNode.parentType === 'doc' ? undefined : blockControlsContext.rootNode.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;
+      const offsetParentScrollLeft = (_scrollingOffsetParen2 = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollLeft) !== null && _scrollingOffsetParen2 !== void 0 ? _scrollingOffsetParen2 : window.scrollX;
+      setPosition(getAbsoluteSurfacePlacement({
+        offsetParentRect,
+        offsetParentScrollLeft,
+        offsetParentScrollTop,
+        placement
+      }));
+    };
+    const schedulePositionUpdate = () => {
+      if (animationFrameRef.current === undefined) {
+        animationFrameRef.current = requestAnimationFrame(updatePosition);
+      }
+    };
+    updatePosition();
+    const resizeObserver = new ResizeObserver(schedulePositionUpdate);
+    resizeObserver.observe(editorView.dom);
+    if (targetElement && targetElement !== editorView.dom) {
+      resizeObserver.observe(targetElement);
+    }
+    if (offsetParent instanceof HTMLElement && offsetParent !== editorView.dom) {
+      resizeObserver.observe(offsetParent);
+    }
+    const unbindWindowResize = bind(window, {
+      type: 'resize',
+      listener: schedulePositionUpdate
+    });
+    const unbindWindowScroll = bind(window, {
+      type: 'scroll',
+      listener: schedulePositionUpdate,
+      options: {
+        capture: true,
+        passive: true
+      }
+    });
+    const visualViewport = window.visualViewport;
+    const unbindVisualViewportResize = visualViewport ? bind(visualViewport, {
+      type: 'resize',
+      listener: schedulePositionUpdate
+    }) : undefined;
+    const unbindVisualViewportScroll = visualViewport ? bind(visualViewport, {
+      type: 'scroll',
+      listener: schedulePositionUpdate
+    }) : undefined;
+    const unbindTransitionEnd = bind(targetElement, {
+      type: 'transitionend',
+      listener: schedulePositionUpdate
+    });
+    return () => {
+      if (animationFrameRef.current !== undefined) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = undefined;
+      }
+      resizeObserver.disconnect();
+      unbindWindowResize();
+      unbindWindowScroll();
+      unbindVisualViewportResize === null || unbindVisualViewportResize === void 0 ? void 0 : unbindVisualViewportResize();
+      unbindVisualViewportScroll === null || unbindVisualViewportScroll === void 0 ? void 0 : unbindVisualViewportScroll();
+      unbindTransitionEnd();
+    };
+  }, [blockControlsContext, editorView]);
+  if (components.length === 0 || !blockControlsContext || !surfaceContext || !position || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    // 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"])
+  }, /*#__PURE__*/React.createElement(VisibilityContainer, {
+    api: api,
+    controlSide: "left",
+    shouldUseDisplayContents: true
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: components,
+    surface: BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  })));
+};

package/dist/es2019/ui/quick-insert-button.js

@@ -150,6 +150,15 @@ const getQuickInsertAnchorReference = ({
   }
   return `anchor(${safeAnchorName} ${edge})`;
 };
+
+/**
+ * Legacy widget-decoration Quick Insert implementation.
+ *
+ * Its behavior is intentionally duplicated by the registry-backed control in
+ * `editor-plugin-quick-insert`. Remove this implementation when
+ * `platform_editor_block_control_migration` is cleaned up; until then this path remains unchanged
+ * for users outside the experiment.
+ */
 export const TypeAheadControl = ({
   view,
   api,

package/dist/es2019/ui/utils/get-node-content-element.js

@@ -0,0 +1,18 @@
+import { resizerItemClassName } from '@atlaskit/editor-common/styles';
+const INNER_CONTAINER_SELECTORS = {
+  blockCard: '.datasourceView-content-inner-wrap',
+  bodiedExtension: '.extension-container[data-layout]',
+  embedCard: '.rich-media-item',
+  extension: '.extension-container[data-layout]',
+  mediaSingle: `.${resizerItemClassName}`,
+  multiBodiedExtension: '.extension-container[data-layout]',
+  table: `.${resizerItemClassName}`
+};
+export const getNodeContentElement = (nodeElement, nodeType) => {
+  var _nodeElement$querySel;
+  const selector = INNER_CONTAINER_SELECTORS[nodeType];
+  if (!selector) {
+    return nodeElement;
+  }
+  return (_nodeElement$querySel = nodeElement.querySelector(selector)) !== null && _nodeElement$querySel !== void 0 ? _nodeElement$querySel : nodeElement;
+};

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

@@ -0,0 +1,30 @@
+import { QUICK_INSERT_LEFT_OFFSET, dragHandleGap, topPositionAdjustment } from '../consts';
+export const getAbsoluteSurfacePlacement = ({
+  offsetParentRect,
+  offsetParentScrollLeft,
+  offsetParentScrollTop,
+  placement
+}) => {
+  var _offsetParentRect$lef, _offsetParentRect$top;
+  return {
+    ...placement,
+    left: placement.left - ((_offsetParentRect$lef = offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.left) !== null && _offsetParentRect$lef !== void 0 ? _offsetParentRect$lef : 0) + offsetParentScrollLeft,
+    top: placement.top - ((_offsetParentRect$top = offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.top) !== null && _offsetParentRect$top !== void 0 ? _offsetParentRect$top : 0) + offsetParentScrollTop
+  };
+};
+
+/**
+ * Positions the Task 1 left surface beside the legacy drag-handle slot.
+ * The surface's own width is handled by the transform, so later controls do not require measuring it.
+ */
+export const getSurfacePlacement = ({
+  layout,
+  nodeRect,
+  nodeType,
+  nodeTypeWithLevel,
+  parentNodeType
+}) => ({
+  left: nodeRect.left,
+  top: nodeRect.top + topPositionAdjustment(nodeTypeWithLevel, layout),
+  transform: `translateX(calc(-100% - ${dragHandleGap(nodeType, parentNodeType) + QUICK_INSERT_LEFT_OFFSET}px))`
+});

package/dist/esm/blockControlsPlugin.js

@@ -2,6 +2,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 React from 'react';
+import { BLOCK_CONTROLS_LEFT_GROUP, BLOCK_CONTROLS_LEFT_SECTION, BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -24,6 +25,7 @@ import { selectionPreservationPluginKey } from './pm-plugins/selection-preservat
 import { createSelectionPreservationPlugin } from './pm-plugins/selection-preservation/pm-plugin';
 import { expandAndUpdateSelection as _expandAndUpdateSelection } from './pm-plugins/utils/expand-and-update-selection';
 import { selectNode } from './pm-plugins/utils/getSelection';
+import { BlockControlsSurface } from './ui/block-controls-surface';
 import { GlobalStylesWrapper } from './ui/global-styles';
 export var blockControlsPlugin = function blockControlsPlugin(_ref) {
   var _config$rightSideCont, _config$quickInsertBu;
@@ -32,6 +34,19 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
   var nodeDecorationRegistry = [];
   var rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   var quickInsertButtonEnabled = (_config$quickInsertBu = config === null || config === void 0 ? void 0 : config.quickInsertButtonEnabled) !== null && _config$quickInsertBu !== void 0 ? _config$quickInsertBu : true;
+  var blockControlMigrationEnabled = isExperimentEnabled('platform_editor_block_control_migration');
+  if (blockControlMigrationEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register([BLOCK_CONTROLS_LEFT_SURFACE, _objectSpread(_objectSpread({}, BLOCK_CONTROLS_LEFT_SECTION), {}, {
+      parents: [_objectSpread(_objectSpread({}, BLOCK_CONTROLS_LEFT_SURFACE), {}, {
+        rank: 100
+      })]
+    }), _objectSpread(_objectSpread({}, BLOCK_CONTROLS_LEFT_GROUP), {}, {
+      parents: [_objectSpread(_objectSpread({}, BLOCK_CONTROLS_LEFT_SECTION), {}, {
+        rank: 100
+      })]
+    })]);
+  }
   return {
     name: 'blockControls',
     actions: {
@@ -100,7 +115,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled);
+          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && !blockControlMigrationEnabled);
         }
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
@@ -415,10 +430,14 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       }
       return sharedState;
     },
-    contentComponent: function contentComponent() {
-      return /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
+    contentComponent: function contentComponent(_ref0) {
+      var editorView = _ref0.editorView;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
         api: api
-      });
+      }), blockControlMigrationEnabled && editorView && api ? /*#__PURE__*/React.createElement(BlockControlsSurface, {
+        api: api,
+        editorView: editorView
+      }) : null);
     }
   };
 };

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

@@ -1,6 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createElement } from 'react';
-import { bind } from 'bind-event-listener';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
@@ -54,7 +53,6 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
     anchorRectCache = _ref.anchorRectCache,
     editorState = _ref.editorState;
   unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
-  var unbind;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = uuid();
   var widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
@@ -67,19 +65,13 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
      * Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
      * Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
      */
-    marks: expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? getMatchingBlockMarks(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize]) : [],
-    destroy: function destroy(node) {
-      unbind && unbind();
-    }
+    marks: expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? getMatchingBlockMarks(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize]) : []
   } : {
     side: -1,
     type: TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
-    marks: expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? getMatchingBlockMarks(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize]) : [],
-    destroy: function destroy(node) {
-      unbind && unbind();
-    }
+    marks: expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? getMatchingBlockMarks(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize]) : []
   };
   return Decoration.widget(pos, function (view, getPosUnsafe) {
     var element = document.createElement('span');
@@ -110,18 +102,9 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
      * However, the tooltip for nested drag handle is no long working.
      */
     if (newPos === undefined || !isTopLevelNode) {
-      if (fg('platform_editor_fix_widget_destroy')) {
-        element.onmouseover = function (e) {
-          e.stopPropagation();
-        };
-      } else {
-        unbind = bind(element, {
-          type: 'mouseover',
-          listener: function listener(e) {
-            e.stopPropagation();
-          }
-        });
-      }
+      element.onmouseover = function (e) {
+        e.stopPropagation();
+      };
     }
 
     // There are times when global clear: "both" styles are applied to this decoration causing jumpiness

package/dist/esm/pm-plugins/decorations-quick-insert-button.js

@@ -56,9 +56,7 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(_r
 
     marks: expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? getMatchingBlockMarks(editorState, rootPos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize]) : [],
     destroy: function destroy(_) {
-      if (fg('platform_editor_fix_widget_destroy')) {
-        nodeViewPortalProviderAPI.remove(key);
-      }
+      nodeViewPortalProviderAPI.remove(key);
       cleanupCallbacks.forEach(function (cb) {
         cb();
       });
@@ -67,9 +65,7 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(_r
     side: -2,
     type: TYPE_QUICK_INSERT,
     destroy: function destroy(_) {
-      if (fg('platform_editor_fix_widget_destroy')) {
-        nodeViewPortalProviderAPI.remove(key);
-      }
+      nodeViewPortalProviderAPI.remove(key);
       cleanupCallbacks.forEach(function (cb) {
         cb();
       });

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

@@ -0,0 +1,53 @@
+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; }
+var getNodeContext = function getNodeContext(view, pos) {
+  var node = view.state.doc.nodeAt(pos);
+  if (!node) {
+    return undefined;
+  }
+  var $pos = view.state.doc.resolve(pos);
+  var ancestors = [];
+  for (var depth = 0; depth <= $pos.depth; depth++) {
+    var ancestor = $pos.node(depth);
+    ancestors.push({
+      depth: depth,
+      pos: depth === 0 ? 0 : $pos.before(depth),
+      type: {
+        name: ancestor.type.name
+      }
+    });
+  }
+  return {
+    ancestors: ancestors,
+    depth: $pos.depth + 1,
+    node: node,
+    parentType: $pos.parent.type.name,
+    pos: pos,
+    type: {
+      name: node.type.name
+    }
+  };
+};
+export var createBlockControlsSurfaceContext = function createBlockControlsSurfaceContext(view, activeNode) {
+  var _activeNode$rootPos, _activeNode$rootNodeT;
+  if (!activeNode) {
+    return undefined;
+  }
+  var rootPos = (_activeNode$rootPos = activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : activeNode.pos;
+  var activeNodeContext = getNodeContext(view, activeNode.pos);
+  var rootNodeContext = getNodeContext(view, rootPos);
+  if (!activeNodeContext || !rootNodeContext) {
+    return undefined;
+  }
+  return {
+    activeNode: _objectSpread(_objectSpread({}, activeNodeContext), {}, {
+      rootPos: rootPos,
+      rootType: {
+        name: (_activeNode$rootNodeT = activeNode.rootNodeType) !== null && _activeNode$rootNodeT !== void 0 ? _activeNode$rootNodeT : rootNodeContext.type.name
+      }
+    }),
+    rootNode: rootNodeContext,
+    targetNode: rootNodeContext
+  };
+};

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

@@ -0,0 +1,3 @@
+._1e0c1txw{display:flex}
+._1pbyb4wl{z-index:100}
+._kqswstnw{position:absolute}

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

@@ -0,0 +1,151 @@
+/* block-controls-surface.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./block-controls-surface.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { getDocument } from '@atlaskit/browser-apis';
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/types';
+import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
+import { createBlockControlsSurfaceContext } from './block-controls-surface-context';
+import { getNodeContentElement } from './utils/get-node-content-element';
+import { getAbsoluteSurfacePlacement, getSurfacePlacement } from './utils/get-surface-placement';
+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 _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  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]);
+  var surfaceContext = useMemo(function () {
+    return blockControlsContext ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined;
+  }, [blockControlsContext]);
+  useLayoutEffect(function () {
+    var _getDocument;
+    if (!blockControlsContext) {
+      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) {
+      setPosition(undefined);
+      return;
+    }
+    var targetElement = getNodeContentElement(rootElement, blockControlsContext.rootNode.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;
+      animationFrameRef.current = undefined;
+      if (!rootElement.isConnected || !targetElement.isConnected) {
+        setPosition(undefined);
+        return;
+      }
+      var placement = getSurfacePlacement({
+        layout: (_rootElement$getAttri = rootElement.getAttribute('layout')) !== null && _rootElement$getAttri !== void 0 ? _rootElement$getAttri : '',
+        nodeRect: targetElement.getBoundingClientRect(),
+        nodeType: blockControlsContext.rootNode.type.name,
+        nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.rootNode.node),
+        parentNodeType: blockControlsContext.rootNode.parentType === 'doc' ? undefined : blockControlsContext.rootNode.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;
+      var offsetParentScrollLeft = (_scrollingOffsetParen2 = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollLeft) !== null && _scrollingOffsetParen2 !== void 0 ? _scrollingOffsetParen2 : window.scrollX;
+      setPosition(getAbsoluteSurfacePlacement({
+        offsetParentRect: offsetParentRect,
+        offsetParentScrollLeft: offsetParentScrollLeft,
+        offsetParentScrollTop: offsetParentScrollTop,
+        placement: placement
+      }));
+    };
+    var schedulePositionUpdate = function schedulePositionUpdate() {
+      if (animationFrameRef.current === undefined) {
+        animationFrameRef.current = requestAnimationFrame(updatePosition);
+      }
+    };
+    updatePosition();
+    var resizeObserver = new ResizeObserver(schedulePositionUpdate);
+    resizeObserver.observe(editorView.dom);
+    if (targetElement && targetElement !== editorView.dom) {
+      resizeObserver.observe(targetElement);
+    }
+    if (offsetParent instanceof HTMLElement && offsetParent !== editorView.dom) {
+      resizeObserver.observe(offsetParent);
+    }
+    var unbindWindowResize = bind(window, {
+      type: 'resize',
+      listener: schedulePositionUpdate
+    });
+    var unbindWindowScroll = bind(window, {
+      type: 'scroll',
+      listener: schedulePositionUpdate,
+      options: {
+        capture: true,
+        passive: true
+      }
+    });
+    var visualViewport = window.visualViewport;
+    var unbindVisualViewportResize = visualViewport ? bind(visualViewport, {
+      type: 'resize',
+      listener: schedulePositionUpdate
+    }) : undefined;
+    var unbindVisualViewportScroll = visualViewport ? bind(visualViewport, {
+      type: 'scroll',
+      listener: schedulePositionUpdate
+    }) : undefined;
+    var unbindTransitionEnd = bind(targetElement, {
+      type: 'transitionend',
+      listener: schedulePositionUpdate
+    });
+    return function () {
+      if (animationFrameRef.current !== undefined) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = undefined;
+      }
+      resizeObserver.disconnect();
+      unbindWindowResize();
+      unbindWindowScroll();
+      unbindVisualViewportResize === null || unbindVisualViewportResize === void 0 || unbindVisualViewportResize();
+      unbindVisualViewportScroll === null || unbindVisualViewportScroll === void 0 || unbindVisualViewportScroll();
+      unbindTransitionEnd();
+    };
+  }, [blockControlsContext, editorView]);
+  if (components.length === 0 || !blockControlsContext || !surfaceContext || !position || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    // 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"])
+  }, /*#__PURE__*/React.createElement(VisibilityContainer, {
+    api: api,
+    controlSide: "left",
+    shouldUseDisplayContents: true
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: components,
+    surface: BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  })));
+};

package/dist/esm/ui/quick-insert-button.js

@@ -153,6 +153,15 @@ var getQuickInsertAnchorReference = function getQuickInsertAnchorReference(_ref)
   }
   return "anchor(".concat(safeAnchorName, " ").concat(edge, ")");
 };
+
+/**
+ * Legacy widget-decoration Quick Insert implementation.
+ *
+ * Its behavior is intentionally duplicated by the registry-backed control in
+ * `editor-plugin-quick-insert`. Remove this implementation when
+ * `platform_editor_block_control_migration` is cleaned up; until then this path remains unchanged
+ * for users outside the experiment.
+ */
 export var TypeAheadControl = function TypeAheadControl(_ref2) {
   var view = _ref2.view,
     api = _ref2.api,

package/dist/esm/ui/utils/get-node-content-element.js

@@ -0,0 +1,18 @@
+import { resizerItemClassName } from '@atlaskit/editor-common/styles';
+var INNER_CONTAINER_SELECTORS = {
+  blockCard: '.datasourceView-content-inner-wrap',
+  bodiedExtension: '.extension-container[data-layout]',
+  embedCard: '.rich-media-item',
+  extension: '.extension-container[data-layout]',
+  mediaSingle: ".".concat(resizerItemClassName),
+  multiBodiedExtension: '.extension-container[data-layout]',
+  table: ".".concat(resizerItemClassName)
+};
+export var getNodeContentElement = function getNodeContentElement(nodeElement, nodeType) {
+  var _nodeElement$querySel;
+  var selector = INNER_CONTAINER_SELECTORS[nodeType];
+  if (!selector) {
+    return nodeElement;
+  }
+  return (_nodeElement$querySel = nodeElement.querySelector(selector)) !== null && _nodeElement$querySel !== void 0 ? _nodeElement$querySel : nodeElement;
+};