@atlaskit/editor-plugin-block-controls 17.2.4 → 17.3.0

package/dist/cjs/ui/block-controls-right-surfaces.js

@@ -0,0 +1,222 @@
+/* block-controls-right-surfaces.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.BlockControlsRightSurfaces = void 0;
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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 _types = require("@atlaskit/editor-ui-control-model/types");
+var _decorationsCommon = require("../pm-plugins/decorations-common");
+var _blockControlsRightSurface = require("./block-controls-right-surface");
+var _blockControlsSurfaceContext = require("./block-controls-surface-context");
+var _blockControlsSurfaceTargets = require("./block-controls-surface-targets");
+var _getNodeContentElement = require("./utils/get-node-content-element");
+var _getSurfacePlacement = require("./utils/get-surface-placement");
+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); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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 EMPTY_SURFACE_POSITIONS = [];
+var EMPTY_SURFACE_COMPONENTS = [];
+/**
+ * Registry-backed right surface tree. Mirrors the left surface's single-tree, measured-placement
+ * approach, but keeps its own components lookup, targets, placements and measurement lifecycle so
+ * the right surface never depends on the left surface's render pass.
+ */
+var BlockControlsRightSurfaces = exports.BlockControlsRightSurfaces = function BlockControlsRightSurfaces(_ref) {
+  var _api$uiControlRegistr, _api$uiControlRegistr2;
+  var api = _ref.api,
+    editorView = _ref.editorView;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
+      var _states$blockControls, _states$blockControls2, _states$blockControls3;
+      return {
+        activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode,
+        surfaceNodePositions: (_states$blockControls2 = (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.surfaceNodePositions) !== null && _states$blockControls2 !== void 0 ? _states$blockControls2 : EMPTY_SURFACE_POSITIONS
+      };
+    }),
+    activeNode = _useSharedPluginState.activeNode,
+    surfaceNodePositions = _useSharedPluginState.surfaceNodePositions;
+  var components = (_api$uiControlRegistr = (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : EMPTY_SURFACE_COMPONENTS;
+  var targets = (0, _react.useMemo)(function () {
+    return (0, _blockControlsSurfaceTargets.getBlockControlsSurfaceTargets)(activeNode, surfaceNodePositions);
+  }, [activeNode, surfaceNodePositions]);
+  var surfaces = (0, _react.useMemo)(function () {
+    return targets.flatMap(function (target) {
+      var context = target.source === 'stored' ? (0, _blockControlsSurfaceContext.createBlockControlsSurfaceContextForPosition)(editorView.state, target.position, activeNode) : (0, _blockControlsSurfaceContext.createBlockControlsSurfaceContext)(editorView, activeNode, target.source);
+      if (!context) {
+        return [];
+      }
+      var surfaceContext = (0, _types.createSurfaceContext)(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT, context);
+      return [_objectSpread(_objectSpread({}, target), {}, {
+        blockControlsContext: context,
+        surfaceContext: surfaceContext
+      })];
+    });
+  }, [activeNode, editorView, targets]);
+  var _useState = (0, _react.useState)(new Map()),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    placements = _useState2[0],
+    setPlacements = _useState2[1];
+  var animationFrameRef = (0, _react.useRef)(undefined);
+  (0, _react.useLayoutEffect)(function () {
+    var _getDocument;
+    if (surfaces.length === 0) {
+      setPlacements(new Map());
+      return;
+    }
+    var measurementTargets = surfaces.flatMap(function (_ref2) {
+      var blockControlsContext = _ref2.blockControlsContext,
+        position = _ref2.position;
+      var targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
+      var targetElementRoot = targetNodeElement instanceof HTMLElement ? targetNodeElement : targetNodeElement === null || targetNodeElement === void 0 ? void 0 : targetNodeElement.parentElement;
+      if (!targetElementRoot) {
+        return [];
+      }
+      return [{
+        blockControlsContext: blockControlsContext,
+        position: position,
+        targetElement: (0, _getNodeContentElement.getNodeContentElement)(targetElementRoot, blockControlsContext.targetNode.type.name),
+        targetElementRoot: targetElementRoot
+      }];
+    });
+    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 updatePositions = function updatePositions() {
+      var _scrollingOffsetParen, _scrollingOffsetParen2;
+      animationFrameRef.current = undefined;
+      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;
+      var nextPlacements = new Map();
+      var _iterator = _createForOfIteratorHelper(measurementTargets),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _targetElementRoot$ge;
+          var _step$value = _step.value,
+            blockControlsContext = _step$value.blockControlsContext,
+            position = _step$value.position,
+            targetElement = _step$value.targetElement,
+            targetElementRoot = _step$value.targetElementRoot;
+          if (!targetElementRoot.isConnected || !targetElement.isConnected) {
+            continue;
+          }
+          var placement = (0, _getSurfacePlacement.getSurfacePlacement)({
+            layout: (_targetElementRoot$ge = targetElementRoot.getAttribute('layout')) !== null && _targetElementRoot$ge !== void 0 ? _targetElementRoot$ge : '',
+            nodeRect: targetElement.getBoundingClientRect(),
+            nodeType: blockControlsContext.targetNode.type.name,
+            nodeTypeWithLevel: (0, _decorationsCommon.getNodeTypeWithLevel)(blockControlsContext.targetNode.node),
+            parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType,
+            side: 'right'
+          });
+          nextPlacements.set(position, (0, _getSurfacePlacement.getAbsoluteSurfacePlacement)({
+            offsetParentRect: offsetParentRect,
+            offsetParentScrollLeft: offsetParentScrollLeft,
+            offsetParentScrollTop: offsetParentScrollTop,
+            placement: placement
+          }));
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      setPlacements(nextPlacements);
+    };
+    var schedulePositionUpdate = function schedulePositionUpdate() {
+      if (animationFrameRef.current === undefined) {
+        animationFrameRef.current = requestAnimationFrame(updatePositions);
+      }
+    };
+    updatePositions();
+    var resizeObserver = new ResizeObserver(schedulePositionUpdate);
+    var observedElements = new Set([editorView.dom]);
+    var _iterator2 = _createForOfIteratorHelper(measurementTargets),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var targetElement = _step2.value.targetElement;
+        observedElements.add(targetElement);
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    if (offsetParent instanceof HTMLElement) {
+      observedElements.add(offsetParent);
+    }
+    observedElements.forEach(function (element) {
+      return resizeObserver.observe(element);
+    });
+    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)(editorView.dom, {
+      type: 'transitionend',
+      listener: schedulePositionUpdate,
+      options: {
+        capture: true
+      }
+    });
+    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();
+    };
+  }, [editorView, surfaces]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, surfaces.map(function (_ref3) {
+    var _activeNode$handleOpt;
+    var position = _ref3.position,
+      source = _ref3.source,
+      surfaceContext = _ref3.surfaceContext;
+    return /*#__PURE__*/_react.default.createElement(_blockControlsRightSurface.BlockControlsRightSurface, {
+      api: api,
+      components: components,
+      forceVisibleOnMouseOut: Boolean(activeNode === null || activeNode === void 0 || (_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused),
+      key: position,
+      placement: placements.get(position),
+      source: source,
+      surfaceContext: surfaceContext
+    });
+  }));
+};

package/dist/{esm/ui/block-controls-left-surface-targets.js → cjs/ui/block-controls-surface-targets.js}

@@ -1,8 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBlockControlsSurfaceTargets = void 0;
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-/** Combines hover-driven and stored surface positions into one deduplicated list. */
-export var getBlockControlsLeftSurfaceTargets = function getBlockControlsLeftSurfaceTargets(activeNode, storedPositions) {
+/**
+ * Combines hover-driven and stored surface positions into one deduplicated list.
+ * Shared by both the left and right surfaces: this is pure position bookkeeping with no
+ * surface-specific behavior, so there's nothing to keep independent between them. What *is*
+ * kept independent is each surface's own React tree (component lookup, measurement effects,
+ * observers) — see block-controls-left-surfaces.tsx / block-controls-right-surfaces.tsx.
+ */
+var getBlockControlsSurfaceTargets = exports.getBlockControlsSurfaceTargets = function getBlockControlsSurfaceTargets(activeNode, storedPositions) {
   var targetsByPosition = new Map();
   var _iterator = _createForOfIteratorHelper(storedPositions),
     _step;

package/dist/cjs/ui/consts.js

@@ -13,7 +13,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _dropTargetMarginMap;
 var ACTIVE_DRAG_HANDLE_ATTR = exports.ACTIVE_DRAG_HANDLE_ATTR = 'data-active-drag-handle';
 var ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_QUICK_INSERT_ATTR = 'data-active-quick-insert';
@@ -70,7 +70,7 @@ var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, par
   } else {
     breakoutResizableNodesList = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? [].concat((0, _toConsumableArray2.default)(_utils.breakoutResizableNodes), ['rule', 'panel']) : _utils.breakoutResizableNodes;
   }
-  if ((0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) && breakoutResizableNodesList.includes(nodeType)) {
+  if ((0, _editorExperiment.editorExperiment)('platform_editor_breakout_resizing', true) && breakoutResizableNodesList.includes(nodeType)) {
     if (nodeType === 'layoutSection') {
       return DRAG_HANDLE_MAX_GAP + 20;
     } else {
@@ -94,7 +94,7 @@ var rootElementGap = exports.rootElementGap = function rootElementGap(nodeType)
   } else {
     breakoutResizableNodesList = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? [].concat((0, _toConsumableArray2.default)(_utils.breakoutResizableNodes), ['rule', 'panel']) : _utils.breakoutResizableNodes;
   }
-  if (nodeTypeExcludeList.includes(nodeType) || (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) && breakoutResizableNodesList.includes(nodeType)) {
+  if (nodeTypeExcludeList.includes(nodeType) || (0, _editorExperiment.editorExperiment)('platform_editor_breakout_resizing', true) && breakoutResizableNodesList.includes(nodeType)) {
     if (nodeType === 'layoutSection') {
       return DRAG_HANDLE_MAX_GAP + 20;
     } else {
@@ -131,7 +131,7 @@ var getNestedNodeLeftPaddingMargin = exports.getNestedNodeLeftPaddingMargin = fu
   }
 };
 var topPositionAdjustment = exports.topPositionAdjustment = function topPositionAdjustment(nodeType, layout) {
-  if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
+  if ((0, _editorExperiment.editorExperiment)('advanced_layouts', true)) {
     switch (nodeType) {
       case 'layoutSection':
         return DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT;

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

@@ -22,13 +22,14 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _consts = require("@atlaskit/editor-shared-styles/consts");
 var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _elementAdapter = require("@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/utils/set-custom-native-drag-preview");
 var _primitives = require("@atlaskit/primitives");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _main = require("../pm-plugins/main");
@@ -831,7 +832,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
     var node = parentPos !== undefined ? view.state.doc.nodeAt(parentPos) : undefined;
     var parentNodeType = node === null || node === void 0 ? void 0 : node.type.name;
     var supportsAnchor = CSS.supports('top', "anchor(".concat(anchorName, " start)")) && CSS.supports('left', "anchor(".concat(anchorName, " start)"));
-    var safeAnchorName = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _anchorName.refreshAnchorName)({
+    var safeAnchorName = (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _anchorName.refreshAnchorName)({
       getPos: getPos,
       view: view,
       anchorName: anchorName
@@ -883,13 +884,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
         edge: 'right',
         safeAnchorName: safeAnchorName
       });
-      var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn, _consts2.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME) : {};
+      var bottom = (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNodeValue, isLayoutColumn, _consts2.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME) : {};
       return _objectSpread({
-        left: isEdgeCase ? "calc(".concat(anchorStart, " + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((".concat(anchorRight, " + ").concat(anchorLeft, ")/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(".concat(anchorStart, " - ").concat(_styles.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
-        top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(".concat(anchorTop, " - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(".concat(anchorStart, " + ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
+        left: isEdgeCase ? "calc(".concat(anchorStart, " + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _editorExperiment.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((".concat(anchorRight, " + ").concat(anchorLeft, ")/2 - ").concat(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(".concat(anchorStart, " - ").concat(_styles.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
+        top: (0, _editorExperiment.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(".concat(anchorTop, " - ").concat(_styles.DRAG_HANDLE_WIDTH, "px)") : "calc(".concat(anchorStart, " + ").concat((0, _consts2.topPositionAdjustment)((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? $pos && $pos.nodeAfter && (0, _decorationsCommon.getNodeTypeWithLevel)($pos.nodeAfter) || nodeType : nodeType, (dom === null || dom === void 0 ? void 0 : dom.getAttribute('layout')) || ''), "px)")
       }, bottom);
     }
-    var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    var height = (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNodeValue, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
@@ -979,7 +980,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
   }, [isReliableAnchorEnabled, calculatePositionOld, view.dom, anchorName, nodeType, docDepForReliableAnchor]);
   var isHandleShown = positionStylesOld.display !== 'none';
   (0, _react.useEffect)(function () {
-    if ((0, _fg.fg)('nike_r19_render_unmount')) {
+    if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_react19_migration')) {
       return;
     }
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
@@ -994,7 +995,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
   (0, _react.useEffect)(function () {
-    if (!(0, _fg.fg)('nike_r19_render_unmount')) {
+    if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_react19_migration')) {
       return;
     }
     if (!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && isHandleShown && buttonRef.current)) {
@@ -1050,7 +1051,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
       setDragHandleDisabled(false);
     }
   }, [api === null || api === void 0 || (_api$blockControls8 = api.blockControls) === null || _api$blockControls8 === void 0 ? void 0 : _api$blockControls8.sharedState, isLayoutColumn, isShiftDown, isTopLevelNodeValue, view]);
-  var dragHandleMessage = (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
+  var dragHandleMessage = (0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true) ? formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
     br: (0, _react2.jsx)("br", null)
   }) : formatMessage(_messages.blockControlsMessages.dragToMove);
 
@@ -1101,7 +1102,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
   }
 
   // When advanced layout is on, layout column drag handle show only show 'Drag to move', no shortcuts
-  if ((0, _experiments.editorExperiment)('advanced_layouts', true) && nodeType === 'layoutColumn') {
+  if ((0, _editorExperiment.editorExperiment)('advanced_layouts', true) && nodeType === 'layoutColumn') {
     helpDescriptors = [{
       description: formatMessage(_messages.blockControlsMessages.dragToRearrange)
     }, {
@@ -1118,7 +1119,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
       keymap: _keymaps.dragToMoveRight
     }];
   }
-  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+  if ((0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1')) {
     helpDescriptors = [{
       description: dragHandleMessage
     }];
@@ -1136,18 +1137,18 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
       (0, _react2.jsx)("button", {
         type: "button",
-        css: [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
+        css: [(0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
         // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
         // See https://product-fabric.atlassian.net/browse/ED-26266
-        browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && isFocused && keyboardFocusedDragHandleStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? focusedStyles : focusedStylesOld, dragHandleButtonScaledStyles],
+        browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _editorExperiment.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _editorExperiment.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles, (0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true) && isFocused && keyboardFocusedDragHandleStyles, (0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true) ? focusedStyles : focusedStylesOld, dragHandleButtonScaledStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
-        style: !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? positionStylesOld : {},
+        style: !(0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? positionStylesOld : {},
         onMouseDown: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_selection_toolbar_block_handle', 'isEnabled', true) ? handleMouseDown : undefined,
-        onMouseUp: (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? handleMouseUp : undefined,
-        onClick: (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? handleOnClickNew : handleOnClick,
-        onKeyDown: (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? handleKeyDownNew : handleKeyDown
+        onMouseUp: (0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true) ? handleMouseUp : undefined,
+        onClick: (0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true) ? handleOnClickNew : handleOnClick,
+        onKeyDown: (0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true) ? handleKeyDownNew : handleKeyDown
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,
         onDrop: handleOnDrop,
@@ -1157,7 +1158,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
         "data-testid": "block-ctrl-drag-handle",
         "aria-label": dragHandleAriaLabel,
         onBlur: function onBlur() {
-          if ((0, _experiments.editorExperiment)('platform_editor_block_menu', true)) {
+          if ((0, _editorExperiment.editorExperiment)('platform_editor_block_menu', true)) {
             setIsFocused(false);
           }
           var pos = getPos();
@@ -1256,7 +1257,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
   var isTooltip = !dragHandleDisabled;
   var stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
   var render = isTooltip ? buttonWithTooltip() : renderButton();
-  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? stickyRender : render;
+  return (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? stickyRender : render;
 };
 var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref10) {
   var view = _ref10.view,

package/dist/cjs/ui/drop-target.js

@@ -16,7 +16,7 @@ var _box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box")
 var _elementAdapter = require("@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter");
 var _constants = require("@atlaskit/theme/constants");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _activeAnchorTracker = require("../pm-plugins/utils/active-anchor-tracker");
 var _anchorUtils = require("../pm-plugins/utils/anchor-utils");
@@ -114,7 +114,7 @@ var HoverZone = function HoverZone(_ref) {
       return (0, _elementAdapter.dropTargetForElements)({
         element: ref.current,
         onDragEnter: function onDragEnter() {
-          if ((!isNestedDropTarget || isInsideBodiedSyncBlock) && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
+          if ((!isNestedDropTarget || isInsideBodiedSyncBlock) && (0, _editorExperiment.editorExperiment)('advanced_layouts', true)) {
             setActiveAnchor();
           }
           _onDragEnter();

package/dist/cjs/ui/global-styles.js

@@ -13,7 +13,7 @@ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _consts = require("./consts");
 var _domAttrName = require("./utils/dom-attr-name");
 /**
@@ -38,10 +38,10 @@ var dragHandlerAnchorSelectorNext = "[".concat(_domAttrName.NODE_ANCHOR_ATTR_NAM
  */
 var dragHandlerAnchorSelectorWithTaskExclusion = "[".concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "]:not([data-prosemirror-node-name=\"tableRow\"], [data-prosemirror-node-name=\"tableCell\"],  [data-prosemirror-node-name=\"tableHeader\"], [data-prosemirror-node-name=\"media\"], [data-prosemirror-node-inline=\"true\"], [data-prosemirror-node-name=\"taskList\"] [").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "])");
 var gutterPaddingWidth = function gutterPaddingWidth() {
-  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '100%';
+  return (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '100%';
 };
 var gutterPaddingLeft = function gutterPaddingLeft() {
-  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? "-".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '-100px';
+  return (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? "-".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '-100px';
 };
 var extendedHoverZone = function extendedHoverZone() {
   return (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
@@ -419,11 +419,11 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
   return (0, _react.jsx)(_react.Global
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
   , {
-    styles: [globalStyles(), globalDnDStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
+    styles: [globalStyles(), globalDnDStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), (0, _editorExperiment.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
       exposure: true
     }) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) ?
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _editorExperiment.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) ?
     // dragAnchorStyles sets anchor-name on ALL nodes during drag (needed for drop target positioning).
     // staticControlsAnchorStyles handles anchor-name via node decorations for non-drag state.
     // shouldRenderAnchors guards both: only apply anchor styles on browsers that support CSS anchor positioning.

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

@@ -22,25 +22,39 @@ var getAbsoluteSurfacePlacement = exports.getAbsoluteSurfacePlacement = function
 };
 
 /**
- * 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.
+ * Positions the surface beside the legacy drag-handle slot, on either the left or right edge
+ * of the target node. Node-type-specific gap/top-adjustment maths (layouts, tables, media, cards,
+ * extensions, etc.) live in one place so left/right edge cases can't drift out of sync.
+ *
+ * The left side grows away from the node without knowing its own width, so it needs
+ * `translateX(-100%)` to anchor its right edge at `nodeRect.left` and extend backward. The right
+ * side grows in the normal box-flow direction (away from the node, into the margin), so the gap
+ * can be folded straight into `left` with no transform needed.
  */
 var getSurfacePlacement = exports.getSurfacePlacement = function getSurfacePlacement(_ref2) {
   var layout = _ref2.layout,
     nodeRect = _ref2.nodeRect,
     nodeType = _ref2.nodeType,
     nodeTypeWithLevel = _ref2.nodeTypeWithLevel,
-    parentNodeType = _ref2.parentNodeType;
+    parentNodeType = _ref2.parentNodeType,
+    side = _ref2.side;
   if (nodeType === 'layoutColumn') {
+    // nodeRect.left + width/2 === nodeRect.right - width/2 — side-independent.
     return {
       left: nodeRect.left + nodeRect.width / 2,
       top: nodeRect.top,
       transform: 'translate(-50%, -50%)'
     };
   }
-  return {
+  var gap = (0, _consts.dragHandleGap)(nodeType, parentNodeType);
+  var top = nodeRect.top + (0, _consts.topPositionAdjustment)(nodeTypeWithLevel, layout);
+  return side === 'right' ? {
+    left: nodeRect.right + gap,
+    top: top,
+    transform: ''
+  } : {
     left: nodeRect.left,
-    top: nodeRect.top + (0, _consts.topPositionAdjustment)(nodeTypeWithLevel, layout),
-    transform: "translateX(calc(-100% - ".concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px))")
+    top: top,
+    transform: "translateX(calc(-100% - ".concat(gap, "px))")
   };
 };

package/dist/cjs/ui/visibility-container.js

@@ -14,7 +14,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _primitives = require("@atlaskit/primitives");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 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); }
 /**
  * @jsxRuntime classic
@@ -135,7 +135,7 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
     };
   }, [shouldHideImmediate, isRightControlViewMode]);
   var shouldHide = isRightControlViewMode ? delayedShouldHide : shouldHideImmediate;
-  if ((0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
+  if ((0, _editorExperiment.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
     exposure: true
   })) {
     return (0, _react2.jsx)("div", {