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

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 8.5.0
+
+### Minor Changes
+
+- [`db19daf3a712a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/db19daf3a712a) -
+  [ux] Add remix button to platform
+
+## 8.4.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.4.3
 
 ### Patch Changes

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

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.remixButtonDecoration = exports.findRemixButtonDecoration = void 0;
+var _react = require("react");
+var _uuid = _interopRequireDefault(require("uuid"));
+var _browserApis = require("@atlaskit/browser-apis");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _remixButton = require("../ui/remix-button");
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+
+var TYPE_REMIX_BUTTON = 'REMIX_BUTTON';
+var findRemixButtonDecoration = exports.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. */
+var remixButtonDecoration = exports.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 = (0, _uuid.default)();
+  var widgetSpec = {
+    side: -4,
+    type: TYPE_REMIX_BUTTON,
+    destroy: function destroy(_) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
+  };
+  return _view.Decoration.widget(rootPos, function (view, getPos) {
+    var doc = (0, _browserApis.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__*/(0, _react.createElement)(_remixButton.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/cjs/pm-plugins/main.js

@@ -31,6 +31,7 @@ var _decorationsDragHandle = require("./decorations-drag-handle");
 var _decorationsDropTarget = require("./decorations-drop-target");
 var _decorationsDropTargetActive = require("./decorations-drop-target-active");
 var _decorationsQuickInsertButton = require("./decorations-quick-insert-button");
+var _decorationsRemixButton = require("./decorations-remix-button");
 var _handleMouseDown = require("./handle-mouse-down");
 var _handleMouseOver = require("./handle-mouse-over");
 var _keymap = require("./keymap");
@@ -439,12 +440,17 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
       var _activeNode7, _activeNode8;
       var oldQuickInsertButton = (0, _decorationsQuickInsertButton.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 ((0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true)) {
+        var _activeNode9, _activeNode0;
+        var oldRemixButton = (0, _decorationsRemixButton.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 = (0, _decorationsDragHandle.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 = (0, _decorationsDragHandle.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 = (0, _decorationsDragHandle.dragHandleDecoration)({
         api: api,
@@ -462,8 +468,8 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     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 = (0, _decorationsQuickInsertButton.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 = (0, _decorationsQuickInsertButton.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 = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)({
         api: api,
@@ -478,6 +484,28 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
         editorState: newState
       });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
+      if ((0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true)) {
+        var _activeNode13, _activeNode14, _latestActiveNode1, _latestActiveNode10, _latestActiveNode11, _latestActiveNode12, _latestActiveNode13;
+        var _oldRemixButton = (0, _decorationsRemixButton.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 = (0, _decorationsRemixButton.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 = (0, _decorationsRemixButton.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);
+      }
     }
   }
 
@@ -525,12 +553,12 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   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) && (0, _decorationsDragHandle.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) && (0, _decorationsDragHandle.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) && (0, _decorationsDragHandle.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) && (0, _decorationsDragHandle.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 ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLeftPositionForRootElement = void 0;
+exports.getRightPositionForRootElement = exports.getLeftPositionForRootElement = void 0;
 var _consts = require("../../ui/consts");
 // Adapted from `src/pm-plugins/utils/drag-handle-positions.ts`
 // CHANGES - removed parentNodeType, use only for positioning widgets for top level element
@@ -22,4 +22,24 @@ var getLeftPositionForRootElement = exports.getLeftPositionForRootElement = func
   var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
   var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
   return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment - (0, _consts.rootElementGap)(nodeType) - widgetDimensions.width, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - (0, _consts.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).
+ */
+var getRightPositionForRootElement = exports.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 = (0, _consts.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/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
+exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.REMIX_BUTTON_WIDTH = exports.REMIX_BUTTON_RIGHT_OFFSET = exports.REMIX_BUTTON_HEIGHT = exports.REMIX_BUTTON_DIMENSIONS = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -44,6 +44,14 @@ var QUICK_INSERT_DIMENSIONS = exports.QUICK_INSERT_DIMENSIONS = {
   height: QUICK_INSERT_HEIGHT
 };
 var QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_LEFT_OFFSET = 16;
+var REMIX_BUTTON_HEIGHT = exports.REMIX_BUTTON_HEIGHT = 24;
+var REMIX_BUTTON_WIDTH = exports.REMIX_BUTTON_WIDTH = 24;
+var REMIX_BUTTON_DIMENSIONS = exports.REMIX_BUTTON_DIMENSIONS = {
+  width: REMIX_BUTTON_WIDTH,
+  height: REMIX_BUTTON_HEIGHT
+};
+/** Extra offset to the right for the right-side Remix button (px) */
+var REMIX_BUTTON_RIGHT_OFFSET = exports.REMIX_BUTTON_RIGHT_OFFSET = 55;
 var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
 var breakoutResizableNodes = ['expand', 'layoutSection', 'codeBlock'];
 var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {

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

@@ -0,0 +1,163 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RemixButton = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _bindEventListener = require("bind-event-listener");
+var _new = require("@atlaskit/button/new");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _randomize = _interopRequireDefault(require("@atlaskit/icon-lab/core/randomize"));
+var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
+var _widgetPositions = require("../pm-plugins/utils/widget-positions");
+var _consts = require("./consts");
+var _anchorName = require("./utils/anchor-name");
+var _domAttrName = require("./utils/dom-attr-name");
+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); }
+/**
+ * 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
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var containerBaseStyles = (0, _react2.css)({
+  position: 'absolute',
+  zIndex: 100,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var RemixButton = exports.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 = (0, _hooks.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 = (0, _react.useState)({
+      display: 'none'
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_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 = (0, _react.useCallback)(function () {
+    var _dom$offsetLeft;
+    var safeAnchorName = (0, _anchorName.refreshAnchorName)({
+      getPos: getPos,
+      view: view,
+      anchorName: rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName
+    });
+    var dom = view.dom.querySelector("[".concat((0, _domAttrName.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(_consts.REMIX_BUTTON_DIMENSIONS.width, "px - ").concat((0, _consts.rootElementGap)(rootNodeType), "px + ").concat(_consts.REMIX_BUTTON_RIGHT_OFFSET, "px)"),
+        top: "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(rootNodeType), "px)"),
+        height: "".concat(_consts.REMIX_BUTTON_DIMENSIONS.height, "px"),
+        bottom: 'unset'
+      };
+    }
+    // Fallback: offset-based (triggers reflow). When isEdgeCase add dom.offsetLeft (same as left controls).
+    var rightEdgeLeft = (0, _widgetPositions.getRightPositionForRootElement)(dom, rootNodeType, _consts.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(_consts.REMIX_BUTTON_RIGHT_OFFSET, "px)") : "calc(".concat(rightEdgeLeft, " + ").concat(_consts.REMIX_BUTTON_RIGHT_OFFSET, "px)"),
+      top: (0, _dragHandlePositions.getTopPosition)(dom, rootNodeType),
+      height: "".concat(_consts.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.
+  (0, _react.useEffect)(function () {
+    var cleanUpTransitionListener;
+    if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {
+      var anchorDom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, "\"]"));
+      if (anchorDom) {
+        cleanUpTransitionListener = (0, _bindEventListener.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 (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
+    api: api
+  }, (0, _react2.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"
+  }, (0, _react2.jsx)(_new.IconButton, {
+    spacing: "compact",
+    appearance: "subtle",
+    label: "Remix",
+    icon: function icon() {
+      return (0, _react2.jsx)(_randomize.default, {
+        label: ""
+      });
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    }
+  })));
+};

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

@@ -0,0 +1,56 @@
+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';
+const TYPE_REMIX_BUTTON = 'REMIX_BUTTON';
+export const findRemixButtonDecoration = (decorations, from, to) => {
+  return decorations.find(from, to, spec => spec.type === TYPE_REMIX_BUTTON);
+};
+/** Right-edge Remix button: same gutter as left controls (side: -4) but positioned at block right edge. */
+export const remixButtonDecoration = ({
+  api,
+  formatMessage,
+  rootPos,
+  anchorName,
+  nodeType,
+  nodeViewPortalProviderAPI,
+  rootAnchorName,
+  rootNodeType
+}) => {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+  const key = uuid();
+  const widgetSpec = {
+    side: -4,
+    type: TYPE_REMIX_BUTTON,
+    destroy: _ => {
+      if (fg('platform_editor_fix_widget_destroy')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
+  };
+  return Decoration.widget(rootPos, (view, getPos) => {
+    const doc = getDocument();
+    if (!doc) {
+      throw new Error('Document not available');
+    }
+    const 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(() => /*#__PURE__*/createElement(RemixButton, {
+      api,
+      getPos,
+      formatMessage,
+      view,
+      nodeType,
+      anchorName,
+      rootAnchorName,
+      rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType
+    }), element, key, undefined, true);
+    return element;
+  }, widgetSpec);
+};

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

@@ -23,6 +23,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';
@@ -436,12 +437,17 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
       var _activeNode7, _activeNode8;
       const 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;
+        const 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;
-      const 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;
+      const 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);
       const handleDec = dragHandleDecoration({
         api,
@@ -459,8 +465,8 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     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;
-      const 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;
+      const 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);
       const quickInsertButton = quickInsertButtonDecoration({
         api,
@@ -475,6 +481,28 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
         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;
+        const 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);
+        const remixButton = remixButtonDecoration({
+          api,
+          formatMessage,
+          anchorName: (_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.anchorName,
+          nodeType: (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.nodeType,
+          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
+        const oldRemixButton = 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(oldRemixButton);
+      }
     }
   }
 
@@ -523,12 +551,12 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   let 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;
   }
   let isMenuOpenNew = isMenuOpen;
   if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {

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

@@ -17,4 +17,24 @@ export const getLeftPositionForRootElement = (dom, nodeType, widgetDimensions, i
   const relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
   const leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
   return getComputedStyle(innerContainer).transform === 'none' ? `${innerContainer.offsetLeft + leftAdjustment - rootElementGap(nodeType) - widgetDimensions.width}px` : `${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 const getRightPositionForRootElement = (dom, nodeType, widgetDimensions, innerContainer, macroInteractionUpdates) => {
+  if (!dom) {
+    return 'auto';
+  }
+  const relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
+  const leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
+  const gap = rootElementGap(nodeType);
+  const width = widgetDimensions.width;
+  if (!innerContainer) {
+    return `${dom.offsetLeft + leftAdjustment + dom.offsetWidth - gap - width}px`;
+  }
+  return getComputedStyle(innerContainer).transform === 'none' ? `${innerContainer.offsetLeft + leftAdjustment + innerContainer.offsetWidth - gap - width}px` : `${innerContainer.offsetLeft + leftAdjustment + innerContainer.offsetWidth / 2 - gap - width}px`;
 };

package/dist/es2019/ui/consts.js

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