@atlaskit/editor-plugin-block-controls 8.4.3 → 8.5.0

package/dist/es2019/ui/remix-button.js

@@ -0,0 +1,144 @@
+/**
+ * Remix block control: positioned at the right edge of the block.
+ * Uses anchor(anchorName end) or getRightPositionForRootElement (same coordinate system
+ * as left controls). The widget span has no position:relative so position:absolute
+ * uses the same containing block as the node.
+ */
+/* @jsxRuntime classic */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { bind } from 'bind-event-listener';
+import { IconButton } from '@atlaskit/button/new';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import RandomizeIcon from '@atlaskit/icon-lab/core/randomize';
+import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
+import { getRightPositionForRootElement } from '../pm-plugins/utils/widget-positions';
+import { REMIX_BUTTON_DIMENSIONS, REMIX_BUTTON_RIGHT_OFFSET, rootElementGap, topPositionAdjustment } from './consts';
+import { refreshAnchorName } from './utils/anchor-name';
+import { getAnchorAttrName } from './utils/dom-attr-name';
+import { VisibilityContainer } from './visibility-container';
+const containerBaseStyles = css({
+  position: 'absolute',
+  zIndex: 100,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+export const RemixButton = ({
+  view,
+  api,
+  getPos,
+  anchorName,
+  rootAnchorName,
+  rootNodeType
+}) => {
+  const {
+    macroInteractionUpdates
+  } = useSharedPluginStateWithSelector(api, ['featureFlags'], states => {
+    var _states$featureFlagsS;
+    return {
+      macroInteractionUpdates: (_states$featureFlagsS = states.featureFlagsState) === null || _states$featureFlagsS === void 0 ? void 0 : _states$featureFlagsS.macroInteractionUpdates
+    };
+  });
+  const [positionStyles, setPositionStyles] = useState({
+    display: 'none'
+  });
+
+  // Same positioning pattern as quick insert / drag handle: anchor(start/end) or offset-based left/top
+  const calculatePosition = useCallback(() => {
+    var _innerContainer, _dom$offsetLeft;
+    const safeAnchorName = refreshAnchorName({
+      getPos,
+      view,
+      anchorName: rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName
+    });
+    const dom = view.dom.querySelector(`[${getAnchorAttrName()}="${safeAnchorName}"]`);
+    if (!dom) {
+      return {
+        display: 'none'
+      };
+    }
+    const hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
+    const isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
+    const isBlockCard = rootNodeType === 'blockCard';
+    const isEmbedCard = rootNodeType === 'embedCard';
+    const isMacroInteractionUpdates = macroInteractionUpdates && isExtension;
+    let innerContainer = null;
+    if (dom) {
+      if (isEmbedCard) {
+        innerContainer = dom.querySelector('.rich-media-item');
+      } else if (hasResizer) {
+        innerContainer = dom.querySelector('.resizer-item');
+      } else if (isExtension) {
+        innerContainer = dom.querySelector('.extension-container[data-layout]');
+      } else if (isBlockCard) {
+        innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
+      }
+    }
+    const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+
+    // Check anchor first (no reflow). Only call expensive getRightPositionForRootElement when fallback needed.
+    const supportsAnchorRight = CSS.supports('left', `anchor(${safeAnchorName} end)`) && CSS.supports('top', `anchor(${safeAnchorName} start)`);
+    if (supportsAnchorRight && !isEdgeCase) {
+      return {
+        left: `calc(anchor(${safeAnchorName} end) - ${REMIX_BUTTON_DIMENSIONS.width}px - ${rootElementGap(rootNodeType)}px + ${REMIX_BUTTON_RIGHT_OFFSET}px)`,
+        top: `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(rootNodeType)}px)`,
+        height: `${REMIX_BUTTON_DIMENSIONS.height}px`,
+        bottom: 'unset'
+      };
+    }
+    // Fallback: offset-based (triggers reflow). When isEdgeCase add dom.offsetLeft (same as left controls).
+    const rightEdgeLeft = getRightPositionForRootElement(dom, rootNodeType, REMIX_BUTTON_DIMENSIONS, (_innerContainer = innerContainer) !== null && _innerContainer !== void 0 ? _innerContainer : undefined, isMacroInteractionUpdates);
+    return {
+      left: isEdgeCase ? `calc(${(_dom$offsetLeft = dom === null || dom === void 0 ? void 0 : dom.offsetLeft) !== null && _dom$offsetLeft !== void 0 ? _dom$offsetLeft : 0}px + (${rightEdgeLeft}) + ${REMIX_BUTTON_RIGHT_OFFSET}px)` : `calc(${rightEdgeLeft} + ${REMIX_BUTTON_RIGHT_OFFSET}px)`,
+      top: getTopPosition(dom, rootNodeType),
+      height: `${REMIX_BUTTON_DIMENSIONS.height}px`,
+      bottom: 'unset'
+    };
+  }, [view, getPos, anchorName, rootAnchorName, rootNodeType, macroInteractionUpdates]);
+
+  // Recompute button position on mount and when extension/embedCard layout changes (e.g. expand/collapse).
+  // For extension/embedCard we listen to transitionend so position updates after CSS transitions finish.
+  useEffect(() => {
+    let cleanUpTransitionListener;
+    if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {
+      const anchorDom = view.dom.querySelector(`[${getAnchorAttrName()}="${rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName}"]`);
+      if (anchorDom) {
+        cleanUpTransitionListener = bind(anchorDom, {
+          type: 'transitionend',
+          listener: () => setPositionStyles(calculatePosition())
+        });
+      }
+    }
+    const id = requestAnimationFrame(() => setPositionStyles(calculatePosition()));
+    return () => {
+      var _cleanUpTransitionLis;
+      cancelAnimationFrame(id);
+      (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 ? void 0 : _cleanUpTransitionLis();
+    };
+  }, [calculatePosition, view.dom, rootAnchorName, rootNodeType, anchorName]);
+  return jsx(VisibilityContainer, {
+    api: api
+  }, jsx("div", {
+    css: containerBaseStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Dynamic positioning (left, top, height) calculated at runtime
+    ,
+    style: positionStyles,
+    "data-testid": "block-ctrl-remix-button"
+  }, jsx(IconButton, {
+    spacing: "compact",
+    appearance: "subtle",
+    label: "Remix",
+    icon: () => jsx(RandomizeIcon, {
+      label: ""
+    }),
+    onMouseDown: e => e.preventDefault()
+  })));
+};

package/dist/esm/pm-plugins/decorations-remix-button.js

@@ -0,0 +1,59 @@
+import { createElement } from 'react';
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+import uuid from 'uuid';
+import { getDocument } from '@atlaskit/browser-apis';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { RemixButton } from '../ui/remix-button';
+var TYPE_REMIX_BUTTON = 'REMIX_BUTTON';
+export var findRemixButtonDecoration = function findRemixButtonDecoration(decorations, from, to) {
+  return decorations.find(from, to, function (spec) {
+    return spec.type === TYPE_REMIX_BUTTON;
+  });
+};
+/** Right-edge Remix button: same gutter as left controls (side: -4) but positioned at block right edge. */
+export var remixButtonDecoration = function remixButtonDecoration(_ref) {
+  var api = _ref.api,
+    formatMessage = _ref.formatMessage,
+    rootPos = _ref.rootPos,
+    anchorName = _ref.anchorName,
+    nodeType = _ref.nodeType,
+    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
+    rootAnchorName = _ref.rootAnchorName,
+    rootNodeType = _ref.rootNodeType;
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+  var key = uuid();
+  var widgetSpec = {
+    side: -4,
+    type: TYPE_REMIX_BUTTON,
+    destroy: function destroy(_) {
+      if (fg('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
+  };
+  return Decoration.widget(rootPos, function (view, getPos) {
+    var doc = getDocument();
+    if (!doc) {
+      throw new Error('Document not available');
+    }
+    var element = doc.createElement('span');
+    element.style.display = 'block';
+    element.contentEditable = 'false';
+    element.setAttribute('data-blocks-remix-button-container', 'true');
+    element.setAttribute('data-testid', 'block-ctrl-remix-button-container');
+    nodeViewPortalProviderAPI.render(function () {
+      return /*#__PURE__*/createElement(RemixButton, {
+        api: api,
+        getPos: getPos,
+        formatMessage: formatMessage,
+        view: view,
+        nodeType: nodeType,
+        anchorName: anchorName,
+        rootAnchorName: rootAnchorName,
+        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType
+      });
+    }, element, key, undefined, true);
+    return element;
+  }, widgetSpec);
+};

package/dist/esm/pm-plugins/main.js

@@ -26,6 +26,7 @@ import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } fr
 import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
 import { getActiveDropTargetDecorations } from './decorations-drop-target-active';
 import { findQuickInsertInsertButtonDecoration, quickInsertButtonDecoration } from './decorations-quick-insert-button';
+import { findRemixButtonDecoration, remixButtonDecoration } from './decorations-remix-button';
 import { handleMouseDown } from './handle-mouse-down';
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
@@ -432,12 +433,17 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
       var _activeNode7, _activeNode8;
       var oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.rootPos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
+      if (expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
+        var _activeNode9, _activeNode0;
+        var oldRemixButton = findRemixButtonDecoration(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.rootPos);
+        decorations = decorations.remove(oldRemixButton);
+      }
     }
   } else if (api) {
     var _latestActiveNode5;
     if (shouldRecreateHandle) {
-      var _activeNode9, _activeNode0, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
-      var _oldHandle = findHandleDec(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.pos);
+      var _activeNode1, _activeNode10, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
+      var _oldHandle = findHandleDec(decorations, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.pos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.pos);
       decorations = decorations.remove(_oldHandle);
       var handleDec = dragHandleDecoration({
         api: api,
@@ -455,8 +461,8 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined &&
     // platform_editor_controls note: enables quick insert
     flags.toolbarFlagsEnabled) {
-      var _activeNode1, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
-      var _oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
+      var _activeNode11, _activeNode12, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
+      var _oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.rootPos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.rootPos);
       decorations = decorations.remove(_oldQuickInsertButton);
       var quickInsertButton = quickInsertButtonDecoration({
         api: api,
@@ -471,6 +477,28 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
         editorState: newState
       });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
+      if (expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
+        var _activeNode13, _activeNode14, _latestActiveNode1, _latestActiveNode10, _latestActiveNode11, _latestActiveNode12, _latestActiveNode13;
+        var _oldRemixButton = findRemixButtonDecoration(decorations, (_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.rootPos, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.rootPos);
+        decorations = decorations.remove(_oldRemixButton);
+        var remixButton = remixButtonDecoration({
+          api: api,
+          formatMessage: formatMessage,
+          anchorName: (_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.anchorName,
+          nodeType: (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.nodeType,
+          nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
+          rootPos: (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.rootPos,
+          rootAnchorName: (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.rootAnchorName,
+          rootNodeType: (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.rootNodeType,
+          editorState: newState
+        });
+        decorations = decorations.add(newState.doc, [remixButton]);
+      } else {
+        var _activeNode15, _activeNode16;
+        // Remove remix decoration when experiment is off so it disappears when flag is toggled
+        var _oldRemixButton2 = findRemixButtonDecoration(decorations, (_activeNode15 = activeNode) === null || _activeNode15 === void 0 ? void 0 : _activeNode15.rootPos, (_activeNode16 = activeNode) === null || _activeNode16 === void 0 ? void 0 : _activeNode16.rootPos);
+        decorations = decorations.remove(_oldRemixButton2);
+      }
     }
   }
 
@@ -518,12 +546,12 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   var newActiveNode;
   // platform_editor_controls note: enables quick insert
   if (flags.toolbarFlagsEnabled) {
-    var _latestActiveNode1, _latestActiveNode10;
+    var _latestActiveNode14, _latestActiveNode15;
     // remove isEmptyDoc check and let decorations render and determine their own visibility
-    newActiveNode = !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.pos, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.pos).length === 0 ? null : latestActiveNode;
+    newActiveNode = !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos, (_latestActiveNode15 = latestActiveNode) === null || _latestActiveNode15 === void 0 ? void 0 : _latestActiveNode15.pos).length === 0 ? null : latestActiveNode;
   } else {
-    var _latestActiveNode11, _latestActiveNode12;
-    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length === 0 ? null : latestActiveNode;
+    var _latestActiveNode16, _latestActiveNode17;
+    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode16 = latestActiveNode) === null || _latestActiveNode16 === void 0 ? void 0 : _latestActiveNode16.pos, (_latestActiveNode17 = latestActiveNode) === null || _latestActiveNode17 === void 0 ? void 0 : _latestActiveNode17.pos).length === 0 ? null : latestActiveNode;
   }
   var isMenuOpenNew = isMenuOpen;
   if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {

package/dist/esm/pm-plugins/utils/widget-positions.js

@@ -17,4 +17,24 @@ export var getLeftPositionForRootElement = function getLeftPositionForRootElemen
   var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
   var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
   return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment - rootElementGap(nodeType) - widgetDimensions.width, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - rootElementGap(nodeType) - widgetDimensions.width, "px");
+};
+
+/**
+ * Left position (in px) for a widget on the right edge of the block.
+ * Mirrors getLeftPositionForRootElement: when innerContainer is set (table, mediaSingle,
+ * extension, blockCard, embedCard) use it for the right edge so the button aligns to the
+ * content box and does not overlap; otherwise use the block (dom).
+ */
+export var getRightPositionForRootElement = function getRightPositionForRootElement(dom, nodeType, widgetDimensions, innerContainer, macroInteractionUpdates) {
+  if (!dom) {
+    return 'auto';
+  }
+  var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
+  var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
+  var gap = rootElementGap(nodeType);
+  var width = widgetDimensions.width;
+  if (!innerContainer) {
+    return "".concat(dom.offsetLeft + leftAdjustment + dom.offsetWidth - gap - width, "px");
+  }
+  return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment + innerContainer.offsetWidth - gap - width, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment + innerContainer.offsetWidth / 2 - gap - width, "px");
 };

package/dist/esm/ui/consts.js

@@ -37,6 +37,14 @@ export var QUICK_INSERT_DIMENSIONS = {
   height: QUICK_INSERT_HEIGHT
 };
 export var QUICK_INSERT_LEFT_OFFSET = 16;
+export var REMIX_BUTTON_HEIGHT = 24;
+export var REMIX_BUTTON_WIDTH = 24;
+export var REMIX_BUTTON_DIMENSIONS = {
+  width: REMIX_BUTTON_WIDTH,
+  height: REMIX_BUTTON_HEIGHT
+};
+/** Extra offset to the right for the right-side Remix button (px) */
+export var REMIX_BUTTON_RIGHT_OFFSET = 55;
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 var breakoutResizableNodes = ['expand', 'layoutSection', 'codeBlock'];
 export var dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {

package/dist/esm/ui/remix-button.js

@@ -0,0 +1,154 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * Remix block control: positioned at the right edge of the block.
+ * Uses anchor(anchorName end) or getRightPositionForRootElement (same coordinate system
+ * as left controls). The widget span has no position:relative so position:absolute
+ * uses the same containing block as the node.
+ */
+/* @jsxRuntime classic */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { bind } from 'bind-event-listener';
+import { IconButton } from '@atlaskit/button/new';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import RandomizeIcon from '@atlaskit/icon-lab/core/randomize';
+import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
+import { getRightPositionForRootElement } from '../pm-plugins/utils/widget-positions';
+import { REMIX_BUTTON_DIMENSIONS, REMIX_BUTTON_RIGHT_OFFSET, rootElementGap, topPositionAdjustment } from './consts';
+import { refreshAnchorName } from './utils/anchor-name';
+import { getAnchorAttrName } from './utils/dom-attr-name';
+import { VisibilityContainer } from './visibility-container';
+var containerBaseStyles = css({
+  position: 'absolute',
+  zIndex: 100,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+export var RemixButton = function RemixButton(_ref) {
+  var view = _ref.view,
+    api = _ref.api,
+    getPos = _ref.getPos,
+    anchorName = _ref.anchorName,
+    rootAnchorName = _ref.rootAnchorName,
+    rootNodeType = _ref.rootNodeType;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['featureFlags'], function (states) {
+      var _states$featureFlagsS;
+      return {
+        macroInteractionUpdates: (_states$featureFlagsS = states.featureFlagsState) === null || _states$featureFlagsS === void 0 ? void 0 : _states$featureFlagsS.macroInteractionUpdates
+      };
+    }),
+    macroInteractionUpdates = _useSharedPluginState.macroInteractionUpdates;
+  var _useState = useState({
+      display: 'none'
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    positionStyles = _useState2[0],
+    setPositionStyles = _useState2[1];
+
+  // Same positioning pattern as quick insert / drag handle: anchor(start/end) or offset-based left/top
+  var calculatePosition = useCallback(function () {
+    var _dom$offsetLeft;
+    var safeAnchorName = refreshAnchorName({
+      getPos: getPos,
+      view: view,
+      anchorName: rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName
+    });
+    var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(safeAnchorName, "\"]"));
+    if (!dom) {
+      return {
+        display: 'none'
+      };
+    }
+    var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
+    var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
+    var isBlockCard = rootNodeType === 'blockCard';
+    var isEmbedCard = rootNodeType === 'embedCard';
+    var isMacroInteractionUpdates = macroInteractionUpdates && isExtension;
+    var innerContainer = null;
+    if (dom) {
+      if (isEmbedCard) {
+        innerContainer = dom.querySelector('.rich-media-item');
+      } else if (hasResizer) {
+        innerContainer = dom.querySelector('.resizer-item');
+      } else if (isExtension) {
+        innerContainer = dom.querySelector('.extension-container[data-layout]');
+      } else if (isBlockCard) {
+        innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
+      }
+    }
+    var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+
+    // Check anchor first (no reflow). Only call expensive getRightPositionForRootElement when fallback needed.
+    var supportsAnchorRight = CSS.supports('left', "anchor(".concat(safeAnchorName, " end)")) && CSS.supports('top', "anchor(".concat(safeAnchorName, " start)"));
+    if (supportsAnchorRight && !isEdgeCase) {
+      return {
+        left: "calc(anchor(".concat(safeAnchorName, " end) - ").concat(REMIX_BUTTON_DIMENSIONS.width, "px - ").concat(rootElementGap(rootNodeType), "px + ").concat(REMIX_BUTTON_RIGHT_OFFSET, "px)"),
+        top: "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(rootNodeType), "px)"),
+        height: "".concat(REMIX_BUTTON_DIMENSIONS.height, "px"),
+        bottom: 'unset'
+      };
+    }
+    // Fallback: offset-based (triggers reflow). When isEdgeCase add dom.offsetLeft (same as left controls).
+    var rightEdgeLeft = getRightPositionForRootElement(dom, rootNodeType, REMIX_BUTTON_DIMENSIONS, innerContainer !== null && innerContainer !== void 0 ? innerContainer : undefined, isMacroInteractionUpdates);
+    return {
+      left: isEdgeCase ? "calc(".concat((_dom$offsetLeft = dom === null || dom === void 0 ? void 0 : dom.offsetLeft) !== null && _dom$offsetLeft !== void 0 ? _dom$offsetLeft : 0, "px + (").concat(rightEdgeLeft, ") + ").concat(REMIX_BUTTON_RIGHT_OFFSET, "px)") : "calc(".concat(rightEdgeLeft, " + ").concat(REMIX_BUTTON_RIGHT_OFFSET, "px)"),
+      top: getTopPosition(dom, rootNodeType),
+      height: "".concat(REMIX_BUTTON_DIMENSIONS.height, "px"),
+      bottom: 'unset'
+    };
+  }, [view, getPos, anchorName, rootAnchorName, rootNodeType, macroInteractionUpdates]);
+
+  // Recompute button position on mount and when extension/embedCard layout changes (e.g. expand/collapse).
+  // For extension/embedCard we listen to transitionend so position updates after CSS transitions finish.
+  useEffect(function () {
+    var cleanUpTransitionListener;
+    if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {
+      var anchorDom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, "\"]"));
+      if (anchorDom) {
+        cleanUpTransitionListener = bind(anchorDom, {
+          type: 'transitionend',
+          listener: function listener() {
+            return setPositionStyles(calculatePosition());
+          }
+        });
+      }
+    }
+    var id = requestAnimationFrame(function () {
+      return setPositionStyles(calculatePosition());
+    });
+    return function () {
+      var _cleanUpTransitionLis;
+      cancelAnimationFrame(id);
+      (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
+    };
+  }, [calculatePosition, view.dom, rootAnchorName, rootNodeType, anchorName]);
+  return jsx(VisibilityContainer, {
+    api: api
+  }, jsx("div", {
+    css: containerBaseStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Dynamic positioning (left, top, height) calculated at runtime
+    ,
+    style: positionStyles,
+    "data-testid": "block-ctrl-remix-button"
+  }, jsx(IconButton, {
+    spacing: "compact",
+    appearance: "subtle",
+    label: "Remix",
+    icon: function icon() {
+      return jsx(RandomizeIcon, {
+        label: ""
+      });
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    }
+  })));
+};

package/dist/types/pm-plugins/decorations-remix-button.d.ts

@@ -0,0 +1,21 @@
+import { type IntlShape } from 'react-intl-next';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+export declare const findRemixButtonDecoration: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
+type RemixButtonDecorationParams = {
+    anchorName: string;
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    editorState: EditorState;
+    formatMessage: IntlShape['formatMessage'];
+    nodeType: string;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
+    rootAnchorName?: string;
+    rootNodeType?: string;
+    rootPos: number;
+};
+/** Right-edge Remix button: same gutter as left controls (side: -4) but positioned at block right edge. */
+export declare const remixButtonDecoration: ({ api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, }: RemixButtonDecorationParams) => Decoration;
+export {};

package/dist/types/pm-plugins/utils/widget-positions.d.ts

@@ -2,3 +2,13 @@ export declare const getLeftPositionForRootElement: (dom: HTMLElement | null, no
     height: number;
     width: number;
 }, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;
+/**
+ * Left position (in px) for a widget on the right edge of the block.
+ * Mirrors getLeftPositionForRootElement: when innerContainer is set (table, mediaSingle,
+ * extension, blockCard, embedCard) use it for the right edge so the button aligns to the
+ * content box and does not overlap; otherwise use the block (dom).
+ */
+export declare const getRightPositionForRootElement: (dom: HTMLElement | null, nodeType: string, widgetDimensions: {
+    height: number;
+    width: number;
+}, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;

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

@@ -30,6 +30,14 @@ export declare const QUICK_INSERT_DIMENSIONS: {
     height: number;
 };
 export declare const QUICK_INSERT_LEFT_OFFSET = 16;
+export declare const REMIX_BUTTON_HEIGHT = 24;
+export declare const REMIX_BUTTON_WIDTH = 24;
+export declare const REMIX_BUTTON_DIMENSIONS: {
+    width: number;
+    height: number;
+};
+/** Extra offset to the right for the right-side Remix button (px) */
+export declare const REMIX_BUTTON_RIGHT_OFFSET = 55;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
 export declare const rootElementGap: (nodeType: string) => number;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";

package/dist/types/ui/remix-button.d.ts

@@ -0,0 +1,17 @@
+import { jsx } from '@emotion/react';
+import type { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+type RemixButtonProps = {
+    anchorName: string;
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    formatMessage: IntlShape['formatMessage'];
+    getPos: () => number | undefined;
+    nodeType: string;
+    rootAnchorName?: string;
+    rootNodeType: string;
+    view: EditorView;
+};
+export declare const RemixButton: ({ view, api, getPos, anchorName, rootAnchorName, rootNodeType, }: RemixButtonProps) => jsx.JSX.Element;
+export {};

package/dist/types/ui/utils/anchor-name.d.ts

@@ -8,5 +8,5 @@ type RefreshAnchorNameParams = {
  * Checks for plugin state for latest anchorName based on the position, returns
  * provided anchorName if available
  */
-export declare const refreshAnchorName: ({ getPos, view, anchorName }: RefreshAnchorNameParams) => string;
+export declare const refreshAnchorName: ({ getPos, view, anchorName, }: RefreshAnchorNameParams) => string;
 export {};

package/dist/types-ts4.5/pm-plugins/decorations-remix-button.d.ts

@@ -0,0 +1,21 @@
+import { type IntlShape } from 'react-intl-next';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+export declare const findRemixButtonDecoration: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
+type RemixButtonDecorationParams = {
+    anchorName: string;
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    editorState: EditorState;
+    formatMessage: IntlShape['formatMessage'];
+    nodeType: string;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
+    rootAnchorName?: string;
+    rootNodeType?: string;
+    rootPos: number;
+};
+/** Right-edge Remix button: same gutter as left controls (side: -4) but positioned at block right edge. */
+export declare const remixButtonDecoration: ({ api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, }: RemixButtonDecorationParams) => Decoration;
+export {};

package/dist/types-ts4.5/pm-plugins/utils/widget-positions.d.ts

@@ -2,3 +2,13 @@ export declare const getLeftPositionForRootElement: (dom: HTMLElement | null, no
     height: number;
     width: number;
 }, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;
+/**
+ * Left position (in px) for a widget on the right edge of the block.
+ * Mirrors getLeftPositionForRootElement: when innerContainer is set (table, mediaSingle,
+ * extension, blockCard, embedCard) use it for the right edge so the button aligns to the
+ * content box and does not overlap; otherwise use the block (dom).
+ */
+export declare const getRightPositionForRootElement: (dom: HTMLElement | null, nodeType: string, widgetDimensions: {
+    height: number;
+    width: number;
+}, innerContainer?: HTMLElement | null, macroInteractionUpdates?: boolean) => string;

package/dist/types-ts4.5/ui/consts.d.ts

@@ -30,6 +30,14 @@ export declare const QUICK_INSERT_DIMENSIONS: {
     height: number;
 };
 export declare const QUICK_INSERT_LEFT_OFFSET = 16;
+export declare const REMIX_BUTTON_HEIGHT = 24;
+export declare const REMIX_BUTTON_WIDTH = 24;
+export declare const REMIX_BUTTON_DIMENSIONS: {
+    width: number;
+    height: number;
+};
+/** Extra offset to the right for the right-side Remix button (px) */
+export declare const REMIX_BUTTON_RIGHT_OFFSET = 55;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
 export declare const rootElementGap: (nodeType: string) => number;
 export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";

package/dist/types-ts4.5/ui/remix-button.d.ts

@@ -0,0 +1,17 @@
+import { jsx } from '@emotion/react';
+import type { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+type RemixButtonProps = {
+    anchorName: string;
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    formatMessage: IntlShape['formatMessage'];
+    getPos: () => number | undefined;
+    nodeType: string;
+    rootAnchorName?: string;
+    rootNodeType: string;
+    view: EditorView;
+};
+export declare const RemixButton: ({ view, api, getPos, anchorName, rootAnchorName, rootNodeType, }: RemixButtonProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/utils/anchor-name.d.ts

@@ -8,5 +8,5 @@ type RefreshAnchorNameParams = {
  * Checks for plugin state for latest anchorName based on the position, returns
  * provided anchorName if available
  */
-export declare const refreshAnchorName: ({ getPos, view, anchorName }: RefreshAnchorNameParams) => string;
+export declare const refreshAnchorName: ({ getPos, view, anchorName, }: RefreshAnchorNameParams) => string;
 export {};