@atlaskit/editor-plugin-card 16.10.2 → 16.11.0

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

@@ -377,7 +377,7 @@ export var changeSelectedCardToLink = function changeSelectedCardToLink(text, hr
   return function (state, dispatch) {
     var selectedNode = state.selection instanceof NodeSelection ? state.selection.node : undefined;
     var tr;
-    if (node && pos) {
+    if (node && pos !== undefined) {
       tr = cardNodeToLinkWithTransaction(state, text, href, node, pos);
     } else {
       tr = cardToLinkWithTransaction(state, text, href);
@@ -405,7 +405,7 @@ export var changeSelectedCardToLink = function changeSelectedCardToLink(text, hr
 export var changeSelectedCardToLinkFallback = function changeSelectedCardToLinkFallback(text, href, sendAnalytics, node, pos, editorAnalyticsApi) {
   return function (state, dispatch) {
     var tr;
-    if (node && pos) {
+    if (node && pos !== undefined) {
       tr = cardNodeToLinkWithTransaction(state, text, href, node, pos);
     } else {
       tr = cardToLinkWithTransaction(state, text, href);

package/dist/esm/ui/HyperlinkToolbarAppearance.js

@@ -28,21 +28,21 @@ export function HyperlinkToolbarAppearance(props) {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var _props$cardOptions;
       var _props$cardOptions2;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+      return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             if (!((_props$cardOptions = props.cardOptions) !== null && _props$cardOptions !== void 0 && _props$cardOptions.provider)) {
-              _context.next = 2;
+              _context.next = 1;
               break;
             }
             return _context.abrupt("return", (_props$cardOptions2 = props.cardOptions) === null || _props$cardOptions2 === void 0 ? void 0 : _props$cardOptions2.provider);
-          case 2:
+          case 1:
             if (!cardProvider.current) {
-              _context.next = 4;
+              _context.next = 2;
               break;
             }
             return _context.abrupt("return", cardProvider.current);
-          case 4:
+          case 2:
             return _context.abrupt("return", new Promise(function (resolve) {
               var _props$editorPluginAp;
               var cardProvider = (_props$editorPluginAp = props.editorPluginApi) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.card) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.sharedState) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.currentState()) === null || _props$editorPluginAp === void 0 ? void 0 : _props$editorPluginAp.provider;
@@ -50,7 +50,7 @@ export function HyperlinkToolbarAppearance(props) {
                 resolve(cardProvider);
               }
             }));
-          case 5:
+          case 3:
           case "end":
             return _context.stop();
         }
@@ -62,59 +62,59 @@ export function HyperlinkToolbarAppearance(props) {
   }();
   var resolveUrl = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(url) {
-      var isUrlSupported, _yield$provider$findP, provider, newMap;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      var isUrlSupported, _yield$provider$findP, provider, newMap, _t, _t2, _t3, _t4;
+      return _regeneratorRuntime.wrap(function (_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             if (!supportedUrlsMap.has(url)) {
-              _context2.next = 2;
+              _context2.next = 1;
               break;
             }
             return _context2.abrupt("return");
-          case 2:
+          case 1:
             isUrlSupported = false;
-            _context2.prev = 3;
-            _context2.next = 6;
+            _context2.prev = 2;
+            _context2.next = 3;
             return getProvider();
-          case 6:
+          case 3:
             provider = _context2.sent;
-            _context2.next = 9;
+            _context2.next = 4;
             return provider === null || provider === void 0 ? void 0 : provider.findPattern(url);
-          case 9:
-            _context2.t1 = _yield$provider$findP = _context2.sent;
-            _context2.t0 = _context2.t1 !== null;
-            if (!_context2.t0) {
-              _context2.next = 13;
+          case 4:
+            _t2 = _yield$provider$findP = _context2.sent;
+            _t = _t2 !== null;
+            if (!_t) {
+              _context2.next = 5;
               break;
             }
-            _context2.t0 = _yield$provider$findP !== void 0;
-          case 13:
-            if (!_context2.t0) {
-              _context2.next = 17;
+            _t = _yield$provider$findP !== void 0;
+          case 5:
+            if (!_t) {
+              _context2.next = 6;
               break;
             }
-            _context2.t2 = _yield$provider$findP;
-            _context2.next = 18;
+            _t3 = _yield$provider$findP;
+            _context2.next = 7;
             break;
-          case 17:
-            _context2.t2 = false;
-          case 18:
-            isUrlSupported = _context2.t2;
-            _context2.next = 24;
+          case 6:
+            _t3 = false;
+          case 7:
+            isUrlSupported = _t3;
+            _context2.next = 9;
             break;
-          case 21:
-            _context2.prev = 21;
-            _context2.t3 = _context2["catch"](3);
+          case 8:
+            _context2.prev = 8;
+            _t4 = _context2["catch"](2);
             isUrlSupported = false;
-          case 24:
+          case 9:
             newMap = new Map(supportedUrlsMap);
             newMap.set(url, isUrlSupported);
             setSupportedUrlsMap(newMap);
-          case 27:
+          case 10:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[3, 21]]);
+      }, _callee2, null, [[2, 8]]);
     }));
     return function resolveUrl(_x) {
       return _ref2.apply(this, arguments);

package/dist/esm/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -36,21 +36,21 @@ var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var _props$cardOptions;
       var _props$cardOptions2;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+      return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             if (!((_props$cardOptions = props.cardOptions) !== null && _props$cardOptions !== void 0 && _props$cardOptions.provider)) {
-              _context.next = 2;
+              _context.next = 1;
               break;
             }
             return _context.abrupt("return", (_props$cardOptions2 = props.cardOptions) === null || _props$cardOptions2 === void 0 ? void 0 : _props$cardOptions2.provider);
-          case 2:
+          case 1:
             if (!cardProvider.current) {
-              _context.next = 4;
+              _context.next = 2;
               break;
             }
             return _context.abrupt("return", cardProvider.current);
-          case 4:
+          case 2:
             return _context.abrupt("return", new Promise(function (resolve) {
               var _props$editorPluginAp2;
               var cardProvider = (_props$editorPluginAp2 = props.editorPluginApi) === null || _props$editorPluginAp2 === void 0 || (_props$editorPluginAp2 = _props$editorPluginAp2.card) === null || _props$editorPluginAp2 === void 0 || (_props$editorPluginAp2 = _props$editorPluginAp2.sharedState) === null || _props$editorPluginAp2 === void 0 || (_props$editorPluginAp2 = _props$editorPluginAp2.currentState()) === null || _props$editorPluginAp2 === void 0 ? void 0 : _props$editorPluginAp2.provider;
@@ -58,7 +58,7 @@ var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
                 resolve(cardProvider);
               }
             }));
-          case 5:
+          case 3:
           case "end":
             return _context.stop();
         }
@@ -70,60 +70,60 @@ var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
   }();
   var resolveUrl = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(url) {
-      var isUrlSupported, _yield$provider$findP, provider, newMap;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      var isUrlSupported, _yield$provider$findP, provider, newMap, _t, _t2, _t3, _t4;
+      return _regeneratorRuntime.wrap(function (_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             if (!supportedUrlsMap.has(url)) {
-              _context2.next = 2;
+              _context2.next = 1;
               break;
             }
             return _context2.abrupt("return");
-          case 2:
+          case 1:
             isUrlSupported = false;
-            _context2.prev = 3;
-            _context2.next = 6;
+            _context2.prev = 2;
+            _context2.next = 3;
             return getProvider();
-          case 6:
+          case 3:
             provider = _context2.sent;
-            _context2.next = 9;
+            _context2.next = 4;
             return provider === null || provider === void 0 ? void 0 : provider.findPattern(url);
-          case 9:
-            _context2.t1 = _yield$provider$findP = _context2.sent;
-            _context2.t0 = _context2.t1 !== null;
-            if (!_context2.t0) {
-              _context2.next = 13;
+          case 4:
+            _t2 = _yield$provider$findP = _context2.sent;
+            _t = _t2 !== null;
+            if (!_t) {
+              _context2.next = 5;
               break;
             }
-            _context2.t0 = _yield$provider$findP !== void 0;
-          case 13:
-            if (!_context2.t0) {
-              _context2.next = 17;
+            _t = _yield$provider$findP !== void 0;
+          case 5:
+            if (!_t) {
+              _context2.next = 6;
               break;
             }
-            _context2.t2 = _yield$provider$findP;
-            _context2.next = 18;
+            _t3 = _yield$provider$findP;
+            _context2.next = 7;
             break;
-          case 17:
-            _context2.t2 = false;
-          case 18:
-            isUrlSupported = _context2.t2;
-            _context2.next = 24;
+          case 6:
+            _t3 = false;
+          case 7:
+            isUrlSupported = _t3;
+            _context2.next = 9;
             break;
-          case 21:
-            _context2.prev = 21;
-            _context2.t3 = _context2["catch"](3);
+          case 8:
+            _context2.prev = 8;
+            _t4 = _context2["catch"](2);
             // eslint-disable-line no-unused-vars
             isUrlSupported = false;
-          case 24:
+          case 9:
             newMap = new Map(supportedUrlsMap);
             newMap.set(url, isUrlSupported);
             setSupportedUrlsMap(newMap);
-          case 27:
+          case 10:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[3, 21]]);
+      }, _callee2, null, [[2, 8]]);
     }));
     return function resolveUrl(_x) {
       return _ref2.apply(this, arguments);

package/dist/esm/ui/PasteDisplayAsMenu.compiled.css

@@ -0,0 +1,31 @@
+
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
+._1h6dbk0g{border-color:var(--ds-border-disabled,#0515240f)}
+._1h6dq98m{border-color:var(--ds-border-selected,#1868db)}
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1bah1b1v{justify-content:space-around}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
+._4cvr1h6o{align-items:center}
+._4t3izwfg{height:2pc}
+._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
+._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
+._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
+._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
+._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}

package/dist/esm/ui/PasteDisplayAsMenu.js

@@ -0,0 +1,359 @@
+/* PasteDisplayAsMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./PasteDisplayAsMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import { cx } from '@atlaskit/css';
+import { appearancePropsMap } from '@atlaskit/editor-common/card';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { getActiveLinkMark } from '@atlaskit/editor-common/link';
+import { PASTE_MENU, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { isSupportedInParent } from '@atlaskit/editor-common/utils';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { ToolbarDropdownItemSection, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
+import MinusIcon from '@atlaskit/icon/core/minus';
+import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
+import SmartLinkEmbedIcon from '@atlaskit/icon/core/smart-link-embed';
+import SmartLinkInlineIcon from '@atlaskit/icon/core/smart-link-inline';
+import { useSmartCardContext } from '@atlaskit/link-provider';
+import { Box, Flex, Pressable } from '@atlaskit/primitives/compiled';
+import { changeSelectedCardToLink, setSelectedCardAppearance } from '../pm-plugins/doc';
+import { getSingleSmartLinkUrlFromSlice } from './currentPastedSmartLink';
+import { getCardAtPasteRange } from './pasteDisplayAsUtils';
+export var SMART_LINK_DISPLAY_AS_PASTE_MENU_SECTION_KEY = 'smart-link-display-as-paste-menu-section';
+
+// `pasteOptionsToolbarPlugin` is intentionally NOT declared in `CardPluginDependencies`
+// because doing so introduces a runtime package cycle
+// (editor-plugin-card -> editor-plugin-paste-options-toolbar -> editor-plugin-paste
+// -> editor-plugin-card) AND a TS2719 "two different types with this name exist" error
+// at downstream consumers (e.g. Jira's `EditorAfterBanner.tsx`). We instead augment the
+// `api` shape locally at the call sites that need to read the plugin's shared state.
+
+var styles = {
+  appearanceBox: "_2rko1qi0 _bfhkhfxm _19pku2gc _2hwxu2gc _otyru2gc _18u0u2gc _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
+  iconWrapper: "_bfhkvuon _1e0c1txw _1bsb1osq _1bah1b1v",
+  iconButton: "_2rko1qi0 _1h6d1l7x _1dqonqa1 _189ee4h9 _4cvr1h6o _syazi7uo _1e0c1txw _4t3izwfg _1bah1h6o _1bsb1osq _bfhksm61 _irr31dpa _1di6fcek",
+  iconButtonSelected: "_2rko1qi0 _1h6dq98m _1dqonqa1 _189ee4h9 _4cvr1h6o _bfhk15s3 _syazi7uo _1e0c1txw _4t3izwfg _1bah1h6o _1bsb1osq _irr3ufnl _1di6nozp",
+  iconButtonDisabled: "_2rko1qi0 _1h6dbk0g _1dqonqa1 _189ee4h9 _4cvr1h6o _bfhk187o _syaz1gmx _1e0c1txw _4t3izwfg _1bah1h6o _1bsb1osq"
+};
+var AppearanceOptionIconButton = function AppearanceOptionIconButton(_ref) {
+  var appearance = _ref.appearance,
+    currentAppearance = _ref.currentAppearance,
+    isDisabled = _ref.isDisabled,
+    label = _ref.label,
+    Icon = _ref.Icon,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.iconWrapper
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    xcss: cx(styles.iconButton, isDisabled && styles.iconButtonDisabled, !isDisabled && currentAppearance === appearance && styles.iconButtonSelected),
+    "aria-label": label,
+    "aria-pressed": currentAppearance === appearance,
+    isDisabled: isDisabled,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    label: label
+  })));
+};
+var InlineAppearanceIconButton = function InlineAppearanceIconButton(_ref2) {
+  var currentAppearance = _ref2.currentAppearance,
+    isDisabled = _ref2.isDisabled,
+    label = _ref2.label,
+    onClick = _ref2.onClick;
+  return /*#__PURE__*/React.createElement(AppearanceOptionIconButton, {
+    appearance: "inline",
+    currentAppearance: currentAppearance,
+    isDisabled: isDisabled,
+    label: label,
+    Icon: SmartLinkInlineIcon,
+    onClick: onClick
+  });
+};
+var BlockAppearanceIconButton = function BlockAppearanceIconButton(_ref3) {
+  var currentAppearance = _ref3.currentAppearance,
+    isDisabled = _ref3.isDisabled,
+    label = _ref3.label,
+    onClick = _ref3.onClick;
+  return /*#__PURE__*/React.createElement(AppearanceOptionIconButton, {
+    appearance: "block",
+    currentAppearance: currentAppearance,
+    isDisabled: isDisabled,
+    label: label,
+    Icon: SmartLinkCardIcon,
+    onClick: onClick
+  });
+};
+var EmbedAppearanceIconButton = function EmbedAppearanceIconButton(_ref4) {
+  var currentAppearance = _ref4.currentAppearance,
+    isDisabled = _ref4.isDisabled,
+    label = _ref4.label,
+    onClick = _ref4.onClick;
+  return /*#__PURE__*/React.createElement(AppearanceOptionIconButton, {
+    appearance: "embed",
+    currentAppearance: currentAppearance,
+    isDisabled: isDisabled,
+    label: label,
+    Icon: SmartLinkEmbedIcon,
+    onClick: onClick
+  });
+};
+var getCurrentPastedSlice = function getCurrentPastedSlice(api) {
+  var _apiWithPaste$paste, _pasteState$lastConte;
+  var apiWithPaste = api;
+  var pasteState = apiWithPaste === null || apiWithPaste === void 0 || (_apiWithPaste$paste = apiWithPaste.paste) === null || _apiWithPaste$paste === void 0 ? void 0 : _apiWithPaste$paste.sharedState.currentState();
+  var slice = pasteState === null || pasteState === void 0 || (_pasteState$lastConte = pasteState.lastContentPasted) === null || _pasteState$lastConte === void 0 ? void 0 : _pasteState$lastConte.pastedSlice;
+  return slice;
+};
+var getCardUrlAtPasteRange = function getCardUrlAtPasteRange(_ref5) {
+  var _editorView$state$doc, _maybeAttrs$url, _maybeAttrs$data;
+  var editorView = _ref5.editorView,
+    pasteStartPos = _ref5.pasteStartPos,
+    pasteEndPos = _ref5.pasteEndPos;
+  var cardAtPasteRange = getCardAtPasteRange(editorView.state, pasteStartPos, pasteEndPos);
+  var maybeAttrs = cardAtPasteRange ? (_editorView$state$doc = editorView.state.doc.nodeAt(cardAtPasteRange.pos)) === null || _editorView$state$doc === void 0 ? void 0 : _editorView$state$doc.attrs : undefined;
+  var maybeUrl = (_maybeAttrs$url = maybeAttrs === null || maybeAttrs === void 0 ? void 0 : maybeAttrs.url) !== null && _maybeAttrs$url !== void 0 ? _maybeAttrs$url : maybeAttrs === null || maybeAttrs === void 0 || (_maybeAttrs$data = maybeAttrs.data) === null || _maybeAttrs$data === void 0 ? void 0 : _maybeAttrs$data.url;
+  return typeof maybeUrl === 'string' ? maybeUrl : undefined;
+};
+export var setAppearanceSelection = function setAppearanceSelection(_ref6) {
+  var editorView = _ref6.editorView,
+    pasteStartPos = _ref6.pasteStartPos,
+    pasteEndPos = _ref6.pasteEndPos,
+    targetPos = _ref6.targetPos;
+  var state = editorView.state,
+    dispatch = editorView.dispatch;
+  var maxPos = state.doc.content.size;
+  var clampedStart = Math.max(0, Math.min(pasteStartPos, maxPos));
+  var clampedEnd = Math.max(0, Math.min(pasteEndPos, maxPos));
+  var from = Math.min(clampedStart, clampedEnd);
+  var to = Math.max(clampedStart, clampedEnd);
+  var isTargetPosInBounds = targetPos !== undefined && targetPos >= 0 && targetPos <= state.doc.content.size;
+  try {
+    var nextSelection = isTargetPosInBounds && targetPos !== undefined ? NodeSelection.create(state.doc, targetPos) : TextSelection.create(state.doc, from, to);
+    var tr = state.tr.setSelection(nextSelection);
+    dispatch(tr);
+    return true;
+  } catch (_unused) {
+    return false;
+  }
+};
+export var getFirstLinkRangeInSelection = function getFirstLinkRangeInSelection(editorView) {
+  var state = editorView.state;
+  var linkMarkType = state.schema.marks.link;
+  if (!linkMarkType) {
+    return;
+  }
+  var firstLinkRange;
+  state.doc.nodesBetween(state.selection.from, state.selection.to, function (node, pos) {
+    if (firstLinkRange || !node.isText) {
+      return;
+    }
+    if (linkMarkType.isInSet(node.marks)) {
+      firstLinkRange = {
+        from: pos,
+        to: pos + node.nodeSize
+      };
+    }
+  });
+  return firstLinkRange;
+};
+export var normalizeSelectionToLinkRangeForUrlAppearance = function normalizeSelectionToLinkRangeForUrlAppearance(_ref7) {
+  var editorView = _ref7.editorView,
+    targetPos = _ref7.targetPos;
+  if (targetPos !== undefined || getActiveLinkMark(editorView.state)) {
+    return;
+  }
+  var firstLinkRange = getFirstLinkRangeInSelection(editorView);
+  if (!firstLinkRange) {
+    return;
+  }
+  var linkRangeSelectionTr = editorView.state.tr.setSelection(TextSelection.create(editorView.state.doc, firstLinkRange.from, firstLinkRange.to));
+  editorView.dispatch(linkRangeSelectionTr);
+};
+var PasteDisplayAsMenuHorizontalView = function PasteDisplayAsMenuHorizontalView(_ref8) {
+  var _smartCardContext$val, _getCardAtPasteRange$, _getCardAtPasteRange, _smartCardContext$val2;
+  var api = _ref8.api,
+    allowBlockCards = _ref8.allowBlockCards,
+    allowEmbeds = _ref8.allowEmbeds;
+  var intl = useIntl();
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  var toolbarDropdownMenu = useToolbarDropdownMenu();
+  var smartCardContext = useSmartCardContext();
+  var frameRef = useRef(null);
+  var isApplyingRef = useRef(false);
+  var apiWithPasteOptionsToolbar = api;
+  var pasteRange = useSharedPluginStateWithSelector(apiWithPasteOptionsToolbar, ['pasteOptionsToolbarPlugin'], function (states) {
+    var pluginState = states.pasteOptionsToolbarPluginState;
+    return pluginState ? {
+      pasteEndPos: pluginState.pasteEndPos,
+      pasteStartPos: pluginState.pasteStartPos
+    } : undefined;
+  });
+  // Subscribe to card state so the menu re-renders when resolved card metadata updates.
+  useSharedPluginStateWithSelector(api, ['card'], function (states) {
+    return states.cardState;
+  });
+  var pastedLinkUrlFromSlice = getSingleSmartLinkUrlFromSlice(getCurrentPastedSlice(api));
+  var pastedLinkUrlFromCard = editorView && pasteRange ? getCardUrlAtPasteRange({
+    editorView: editorView,
+    pasteStartPos: pasteRange.pasteStartPos,
+    pasteEndPos: pasteRange.pasteEndPos
+  }) : undefined;
+  var pastedLinkUrl = pastedLinkUrlFromSlice !== null && pastedLinkUrlFromSlice !== void 0 ? pastedLinkUrlFromSlice : pastedLinkUrlFromCard;
+  var pastedLinkUrlState = pastedLinkUrl ? (_smartCardContext$val = smartCardContext.value) === null || _smartCardContext$val === void 0 || (_smartCardContext$val = _smartCardContext$val.store) === null || _smartCardContext$val === void 0 || (_smartCardContext$val = _smartCardContext$val.getState()) === null || _smartCardContext$val === void 0 ? void 0 : _smartCardContext$val[pastedLinkUrl] : undefined;
+  var hasResolvedSmartLinkData = Boolean(pastedLinkUrlState === null || pastedLinkUrlState === void 0 ? void 0 : pastedLinkUrlState.details);
+  var currentAppearance = editorView && pasteRange ? (_getCardAtPasteRange$ = (_getCardAtPasteRange = getCardAtPasteRange(editorView.state, pasteRange.pasteStartPos, pasteRange.pasteEndPos)) === null || _getCardAtPasteRange === void 0 ? void 0 : _getCardAtPasteRange.appearance) !== null && _getCardAtPasteRange$ !== void 0 ? _getCardAtPasteRange$ : 'url' : undefined;
+  var handleClick = useCallback(function (appearance) {
+    return function () {
+      if (!editorView || !pasteRange || !pastedLinkUrl || !currentAppearance || isApplyingRef.current) {
+        return;
+      }
+      isApplyingRef.current = true;
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      var pasteStartPos = pasteRange.pasteStartPos,
+        pasteEndPos = pasteRange.pasteEndPos;
+      var cardAtPasteRange = getCardAtPasteRange(state, pasteStartPos, pasteEndPos);
+      if (appearance === 'url') {
+        if (cardAtPasteRange) {
+          var _state$doc$nodeAt, _api$analytics;
+          changeSelectedCardToLink(pastedLinkUrl, pastedLinkUrl, true, (_state$doc$nodeAt = state.doc.nodeAt(cardAtPasteRange.pos)) !== null && _state$doc$nodeAt !== void 0 ? _state$doc$nodeAt : undefined, cardAtPasteRange.pos, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(state, dispatch, editorView);
+        }
+        toolbarDropdownMenu === null || toolbarDropdownMenu === void 0 || toolbarDropdownMenu.closeMenu(null);
+        isApplyingRef.current = false;
+        return;
+      }
+      var targetPos = cardAtPasteRange === null || cardAtPasteRange === void 0 ? void 0 : cardAtPasteRange.pos;
+      if (targetPos !== undefined && targetPos < pasteStartPos) {
+        isApplyingRef.current = false;
+        return;
+      }
+      var didApplySelection = setAppearanceSelection({
+        editorView: editorView,
+        pasteStartPos: pasteStartPos,
+        pasteEndPos: pasteEndPos,
+        targetPos: targetPos
+      });
+      if (!didApplySelection) {
+        toolbarDropdownMenu === null || toolbarDropdownMenu === void 0 || toolbarDropdownMenu.closeMenu(null);
+        isApplyingRef.current = false;
+        return;
+      }
+      normalizeSelectionToLinkRangeForUrlAppearance({
+        editorView: editorView,
+        targetPos: targetPos
+      });
+      frameRef.current = requestAnimationFrame(function () {
+        var _api$analytics2;
+        frameRef.current = null;
+        setSelectedCardAppearance(appearance, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)(editorView.state, editorView.dispatch, editorView);
+        toolbarDropdownMenu === null || toolbarDropdownMenu === void 0 || toolbarDropdownMenu.closeMenu(null);
+        isApplyingRef.current = false;
+      });
+    };
+  }, [api, currentAppearance, editorView, pasteRange, pastedLinkUrl, toolbarDropdownMenu]);
+  useEffect(function () {
+    return function () {
+      if (frameRef.current !== null) {
+        cancelAnimationFrame(frameRef.current);
+      }
+      isApplyingRef.current = false;
+    };
+  }, []);
+  if (!editorView || !pasteRange || !pastedLinkUrl || !currentAppearance) {
+    return null;
+  }
+  var preview = allowEmbeds && pastedLinkUrl && ((_smartCardContext$val2 = smartCardContext.value) === null || _smartCardContext$val2 === void 0 ? void 0 : _smartCardContext$val2.extractors.getPreview(pastedLinkUrl, 'web'));
+  var blockCardNodeType = editorView.state.schema.nodes.blockCard;
+  var embedCardNodeType = editorView.state.schema.nodes.embedCard;
+  var isBlockSupportedFromAppearanceContext = allowBlockCards && blockCardNodeType && isSupportedInParent(editorView.state, Fragment.from(blockCardNodeType.createChecked({})), currentAppearance === 'url' || currentAppearance === 'inline' ? undefined : currentAppearance);
+  var isEmbedSupportedFromAppearanceContext = allowEmbeds && preview && embedCardNodeType && isSupportedInParent(editorView.state, Fragment.from(embedCardNodeType.createChecked({})), currentAppearance === 'url' || currentAppearance === 'inline' ? undefined : currentAppearance);
+  var isSmartLinkConvertible = hasResolvedSmartLinkData;
+  var isBlockSupportedFromSelection = allowBlockCards && blockCardNodeType && isSupportedInParent(editorView.state, Fragment.from(blockCardNodeType.createChecked({})), undefined);
+  var isEmbedSupportedFromSelection = allowEmbeds && preview && embedCardNodeType && isSupportedInParent(editorView.state, Fragment.from(embedCardNodeType.createChecked({})), undefined);
+  var isBlockSupported = Boolean(isBlockSupportedFromAppearanceContext || isBlockSupportedFromSelection);
+  var isEmbedSupported = Boolean(isEmbedSupportedFromAppearanceContext || isEmbedSupportedFromSelection);
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.appearanceBox,
+    gap: "space.050"
+  }, /*#__PURE__*/React.createElement(AppearanceOptionIconButton, {
+    appearance: "url",
+    currentAppearance: currentAppearance,
+    isDisabled: false,
+    label: intl.formatMessage(appearancePropsMap.url.title),
+    Icon: MinusIcon,
+    onClick: handleClick('url')
+  }), /*#__PURE__*/React.createElement(InlineAppearanceIconButton, {
+    currentAppearance: currentAppearance,
+    isDisabled: !isSmartLinkConvertible,
+    label: intl.formatMessage(appearancePropsMap.inline.title),
+    onClick: handleClick('inline')
+  }), /*#__PURE__*/React.createElement(BlockAppearanceIconButton, {
+    currentAppearance: currentAppearance,
+    isDisabled: !isSmartLinkConvertible || !isBlockSupported,
+    label: intl.formatMessage(appearancePropsMap.block.title),
+    onClick: handleClick('block')
+  }), /*#__PURE__*/React.createElement(EmbedAppearanceIconButton, {
+    currentAppearance: currentAppearance,
+    isDisabled: !isEmbedSupported,
+    label: intl.formatMessage(appearancePropsMap.embed.title),
+    onClick: handleClick('embed')
+  }));
+};
+var PasteDisplayAsMenuSection = function PasteDisplayAsMenuSection(_ref9) {
+  var api = _ref9.api,
+    allowBlockCards = _ref9.allowBlockCards,
+    allowEmbeds = _ref9.allowEmbeds;
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    title: intl.formatMessage({
+      defaultMessage: 'Display as',
+      description: 'Section title for Smart Link display options in the paste actions menu.',
+      id: 'fabric.editor.pasteDisplayAsMenu.displayAs'
+    })
+  }, /*#__PURE__*/React.createElement(PasteDisplayAsMenuHorizontalView, {
+    api: api,
+    allowBlockCards: allowBlockCards,
+    allowEmbeds: allowEmbeds
+  }));
+};
+export var getPasteDisplayAsMenuComponents = function getPasteDisplayAsMenuComponents(_ref0) {
+  var api = _ref0.api,
+    allowBlockCards = _ref0.allowBlockCards,
+    allowEmbeds = _ref0.allowEmbeds,
+    getEditorView = _ref0.getEditorView;
+  return [{
+    type: 'menu-section',
+    key: SMART_LINK_DISPLAY_AS_PASTE_MENU_SECTION_KEY,
+    parents: [{
+      type: PASTE_MENU.type,
+      key: PASTE_MENU.key,
+      rank: 60
+    }],
+    isHidden: function isHidden() {
+      var _apiWithPasteOptionsT;
+      var apiWithPasteOptionsToolbar = api;
+      var pasteRange = apiWithPasteOptionsToolbar === null || apiWithPasteOptionsToolbar === void 0 || (_apiWithPasteOptionsT = apiWithPasteOptionsToolbar.pasteOptionsToolbarPlugin) === null || _apiWithPasteOptionsT === void 0 ? void 0 : _apiWithPasteOptionsT.sharedState.currentState();
+      var editorView = getEditorView();
+      if (!editorView || !pasteRange) {
+        return true;
+      }
+      var pastedSlice = getCurrentPastedSlice(api);
+      var urlFromSlice = getSingleSmartLinkUrlFromSlice(pastedSlice);
+      var urlFromCard = getCardUrlAtPasteRange({
+        editorView: editorView,
+        pasteStartPos: pasteRange.pasteStartPos,
+        pasteEndPos: pasteRange.pasteEndPos
+      });
+      return !urlFromSlice && !urlFromCard;
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(PasteDisplayAsMenuSection, {
+        api: api,
+        allowBlockCards: allowBlockCards,
+        allowEmbeds: allowEmbeds
+      });
+    }
+  }];
+};