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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 17.1.0
+
+### Minor Changes
+
+- [`5f66a8c3706e3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5f66a8c3706e3) -
+  Add the registry-backed Block Controls Quick Insert surface behind
+  `platform_editor_block_control_migration`, including typed surface context, cached registry
+  lookup, stable left/right surface identities, and experiment-gated Quick Insert registration.
+
+### Patch Changes
+
+- [`63734bcc6ac05`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63734bcc6ac05) -
+  Clean up feature gate `platform_editor_fix_widget_destroy`
+- Updated dependencies
+
 ## 17.0.1
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.blockControlsPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _selection = require("@atlaskit/editor-common/selection");
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -29,6 +30,7 @@ var _pluginKey = require("./pm-plugins/selection-preservation/plugin-key");
 var _pmPlugin2 = require("./pm-plugins/selection-preservation/pm-plugin");
 var _expandAndUpdateSelection2 = require("./pm-plugins/utils/expand-and-update-selection");
 var _getSelection = require("./pm-plugins/utils/getSelection");
+var _blockControlsSurface = require("./ui/block-controls-surface");
 var _globalStyles = require("./ui/global-styles");
 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) { (0, _defineProperty2.default)(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; }
@@ -39,6 +41,19 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
   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 = (0, _isExperimentEnabled.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([_surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, _objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_LEFT_SECTION), {}, {
+      parents: [_objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE), {}, {
+        rank: 100
+      })]
+    }), _objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_LEFT_GROUP), {}, {
+      parents: [_objectSpread(_objectSpread({}, _surfaceKeys.BLOCK_CONTROLS_LEFT_SECTION), {}, {
+        rank: 100
+      })]
+    })]);
+  }
   return {
     name: 'blockControls',
     actions: {
@@ -107,7 +122,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled);
+          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && !blockControlMigrationEnabled);
         }
       }];
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
@@ -422,10 +437,14 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       }
       return sharedState;
     },
-    contentComponent: function contentComponent() {
-      return /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, {
+    contentComponent: function contentComponent(_ref0) {
+      var editorView = _ref0.editorView;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, {
         api: api
-      });
+      }), blockControlMigrationEnabled && editorView && api ? /*#__PURE__*/_react.default.createElement(_blockControlsSurface.BlockControlsSurface, {
+        api: api,
+        editorView: editorView
+      }) : null);
     }
   };
 };

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.findHandleDec = exports.findActiveDragHandleNodeDec = exports.emptyParagraphNodeDecorations = exports.dragHandleDecoration = exports.createActiveDragHandleNodeDecoration = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
-var _bindEventListener = require("bind-event-listener");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
@@ -62,7 +61,6 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     anchorRectCache = _ref.anchorRectCache,
     editorState = _ref.editorState;
   (0, _decorationsCommon.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 = (0, _uuid.default)();
   var widgetSpec = (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? {
@@ -75,19 +73,13 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
      * 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: (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) ? (0, _marks.getMatchingBlockMarks)(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize]) : [],
-    destroy: function destroy(node) {
-      unbind && unbind();
-    }
+    marks: (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) ? (0, _marks.getMatchingBlockMarks)(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize]) : []
   } : {
     side: -1,
     type: _decorationsCommon.TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
-    marks: (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) ? (0, _marks.getMatchingBlockMarks)(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize]) : [],
-    destroy: function destroy(node) {
-      unbind && unbind();
-    }
+    marks: (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) ? (0, _marks.getMatchingBlockMarks)(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize]) : []
   };
   return _view.Decoration.widget(pos, function (view, getPosUnsafe) {
     var element = document.createElement('span');
@@ -118,18 +110,9 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
      * However, the tooltip for nested drag handle is no long working.
      */
     if (newPos === undefined || !isTopLevelNode) {
-      if ((0, _fg.fg)('platform_editor_fix_widget_destroy')) {
-        element.onmouseover = function (e) {
-          e.stopPropagation();
-        };
-      } else {
-        unbind = (0, _bindEventListener.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/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -64,9 +64,7 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
 
     marks: (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) ? (0, _marks.getMatchingBlockMarks)(editorState, rootPos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize]) : [],
     destroy: function destroy(_) {
-      if ((0, _fg.fg)('platform_editor_fix_widget_destroy')) {
-        nodeViewPortalProviderAPI.remove(key);
-      }
+      nodeViewPortalProviderAPI.remove(key);
       cleanupCallbacks.forEach(function (cb) {
         cb();
       });
@@ -75,9 +73,7 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
     side: -2,
     type: TYPE_QUICK_INSERT,
     destroy: function destroy(_) {
-      if ((0, _fg.fg)('platform_editor_fix_widget_destroy')) {
-        nodeViewPortalProviderAPI.remove(key);
-      }
+      nodeViewPortalProviderAPI.remove(key);
       cleanupCallbacks.forEach(function (cb) {
         cb();
       });

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createBlockControlsSurfaceContext = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@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) { (0, _defineProperty2.default)(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
+    }
+  };
+};
+var createBlockControlsSurfaceContext = exports.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/cjs/ui/block-controls-surface.compiled.css

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

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

@@ -0,0 +1,160 @@
+/* block-controls-surface.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockControlsSurface = void 0;
+require("./block-controls-surface.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _browserApis = require("@atlaskit/browser-apis");
+var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/block-control-ui-context");
+var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
+var _types = require("@atlaskit/editor-ui-control-model/types");
+var _decorationsCommon = require("../pm-plugins/decorations-common");
+var _blockControlsSurfaceContext = require("./block-controls-surface-context");
+var _getNodeContentElement = require("./utils/get-node-content-element");
+var _getSurfacePlacement = require("./utils/get-surface-placement");
+var _visibilityContainer = require("./visibility-container");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var BLOCK_CONTROLS_SURFACE_Z_INDEX = 100;
+var surfaceStyles = null;
+var BlockControlsSurface = exports.BlockControlsSurface = function BlockControlsSurface(_ref) {
+  var _api$uiControlRegistr, _api$uiControlRegistr2;
+  var api = _ref.api,
+    editorView = _ref.editorView;
+  var activeNode = (0, _hooks.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 = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  var animationFrameRef = (0, _react.useRef)(undefined);
+  var components = (_api$uiControlRegistr = (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+  var blockControlsContext = (0, _react.useMemo)(function () {
+    return (0, _blockControlsSurfaceContext.createBlockControlsSurfaceContext)(editorView, activeNode);
+  }, [activeNode, editorView]);
+  var surfaceContext = (0, _react.useMemo)(function () {
+    return blockControlsContext ? (0, _types.createSurfaceContext)(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined;
+  }, [blockControlsContext]);
+  (0, _react.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 = (0, _getNodeContentElement.getNodeContentElement)(rootElement, blockControlsContext.rootNode.type.name);
+    var offsetParent = editorView.dom.offsetParent;
+    var isDocumentOffsetParent = !offsetParent || offsetParent === ((_getDocument = (0, _browserApis.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 = (0, _getSurfacePlacement.getSurfacePlacement)({
+        layout: (_rootElement$getAttri = rootElement.getAttribute('layout')) !== null && _rootElement$getAttri !== void 0 ? _rootElement$getAttri : '',
+        nodeRect: targetElement.getBoundingClientRect(),
+        nodeType: blockControlsContext.rootNode.type.name,
+        nodeTypeWithLevel: (0, _decorationsCommon.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((0, _getSurfacePlacement.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 = (0, _bindEventListener.bind)(window, {
+      type: 'resize',
+      listener: schedulePositionUpdate
+    });
+    var unbindWindowScroll = (0, _bindEventListener.bind)(window, {
+      type: 'scroll',
+      listener: schedulePositionUpdate,
+      options: {
+        capture: true,
+        passive: true
+      }
+    });
+    var visualViewport = window.visualViewport;
+    var unbindVisualViewportResize = visualViewport ? (0, _bindEventListener.bind)(visualViewport, {
+      type: 'resize',
+      listener: schedulePositionUpdate
+    }) : undefined;
+    var unbindVisualViewportScroll = visualViewport ? (0, _bindEventListener.bind)(visualViewport, {
+      type: 'scroll',
+      listener: schedulePositionUpdate
+    }) : undefined;
+    var unbindTransitionEnd = (0, _bindEventListener.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 || !(0, _surfaceRenderer.willSurfaceRender)(components, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.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: (0, _runtime.ax)(["_1e0c1txw _kqswstnw _1pbyb4wl"])
+  }, /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
+    api: api,
+    controlSide: "left",
+    shouldUseDisplayContents: true
+  }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
+    components: components,
+    surface: _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  })));
+};

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

@@ -159,6 +159,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.
+ */
 var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref2) {
   var view = _ref2.view,
     api = _ref2.api,

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNodeContentElement = void 0;
+var _styles = require("@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(_styles.resizerItemClassName),
+  multiBodiedExtension: '.extension-container[data-layout]',
+  table: ".".concat(_styles.resizerItemClassName)
+};
+var getNodeContentElement = exports.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;
+};

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

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSurfacePlacement = exports.getAbsoluteSurfacePlacement = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _consts = require("../consts");
+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) { (0, _defineProperty2.default)(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 getAbsoluteSurfacePlacement = exports.getAbsoluteSurfacePlacement = function getAbsoluteSurfacePlacement(_ref) {
+  var _offsetParentRect$lef, _offsetParentRect$top;
+  var offsetParentRect = _ref.offsetParentRect,
+    offsetParentScrollLeft = _ref.offsetParentScrollLeft,
+    offsetParentScrollTop = _ref.offsetParentScrollTop,
+    placement = _ref.placement;
+  return _objectSpread(_objectSpread({}, 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.
+ */
+var getSurfacePlacement = exports.getSurfacePlacement = function getSurfacePlacement(_ref2) {
+  var layout = _ref2.layout,
+    nodeRect = _ref2.nodeRect,
+    nodeType = _ref2.nodeType,
+    nodeTypeWithLevel = _ref2.nodeTypeWithLevel,
+    parentNodeType = _ref2.parentNodeType;
+  return {
+    left: nodeRect.left,
+    top: nodeRect.top + (0, _consts.topPositionAdjustment)(nodeTypeWithLevel, layout),
+    transform: "translateX(calc(-100% - ".concat((0, _consts.dragHandleGap)(nodeType, parentNodeType) + _consts.QUICK_INSERT_LEFT_OFFSET, "px))")
+  };
+};

package/dist/es2019/blockControlsPlugin.js

@@ -1,4 +1,5 @@
 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';
@@ -21,6 +22,7 @@ import { selectionPreservationPluginKey } from './pm-plugins/selection-preservat
 import { createSelectionPreservationPlugin } from './pm-plugins/selection-preservation/pm-plugin';
 import { 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 const blockControlsPlugin = ({
   api,
@@ -30,6 +32,23 @@ export const blockControlsPlugin = ({
   const nodeDecorationRegistry = [];
   const rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   const quickInsertButtonEnabled = (_config$quickInsertBu = config === null || config === void 0 ? void 0 : config.quickInsertButtonEnabled) !== null && _config$quickInsertBu !== void 0 ? _config$quickInsertBu : true;
+  const blockControlMigrationEnabled = isExperimentEnabled('platform_editor_block_control_migration');
+  if (blockControlMigrationEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register([BLOCK_CONTROLS_LEFT_SURFACE, {
+      ...BLOCK_CONTROLS_LEFT_SECTION,
+      parents: [{
+        ...BLOCK_CONTROLS_LEFT_SURFACE,
+        rank: 100
+      }]
+    }, {
+      ...BLOCK_CONTROLS_LEFT_GROUP,
+      parents: [{
+        ...BLOCK_CONTROLS_LEFT_SECTION,
+        rank: 100
+      }]
+    }]);
+  }
   return {
     name: 'blockControls',
     actions: {
@@ -98,7 +117,7 @@ export const blockControlsPlugin = ({
         plugin: ({
           getIntl,
           nodeViewPortalProviderAPI
-        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled)
+        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && !blockControlMigrationEnabled)
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         pmPlugins.push({
@@ -407,10 +426,15 @@ export const blockControlsPlugin = ({
       }
       return sharedState;
     },
-    contentComponent() {
-      return /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
+    contentComponent({
+      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/es2019/pm-plugins/decorations-drag-handle.js

@@ -1,5 +1,4 @@
 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';
@@ -49,7 +48,6 @@ export const dragHandleDecoration = ({
   editorState
 }) => {
   unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
-  let unbind;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   const key = uuid();
   const widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
@@ -62,19 +60,13 @@ export const dragHandleDecoration = ({
      * 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: 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: `${TYPE_HANDLE_DEC}-${uuid()}`,
-    marks: expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? getMatchingBlockMarks(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize]) : [],
-    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, (view, getPosUnsafe) => {
     const element = document.createElement('span');
@@ -105,18 +97,9 @@ export const dragHandleDecoration = ({
      * However, the tooltip for nested drag handle is no long working.
      */
     if (newPos === undefined || !isTopLevelNode) {
-      if (fg('platform_editor_fix_widget_destroy')) {
-        element.onmouseover = e => {
-          e.stopPropagation();
-        };
-      } else {
-        unbind = bind(element, {
-          type: 'mouseover',
-          listener: e => {
-            e.stopPropagation();
-          }
-        });
-      }
+      element.onmouseover = e => {
+        e.stopPropagation();
+      };
     }
 
     // There are times when global clear: "both" styles are applied to this decoration causing jumpiness

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

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