@atlaskit/editor-plugin-block-controls 8.6.3 → 8.7.0

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

@@ -1,67 +0,0 @@
-"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/ui/remix-button.js

@@ -1,163 +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.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

@@ -1,56 +0,0 @@
-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/ui/remix-button.js

@@ -1,144 +0,0 @@
-/**
- * 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

@@ -1,59 +0,0 @@
-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/ui/remix-button.js

@@ -1,154 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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 {};