@atlaskit/editor-plugin-card 16.10.3 → 16.11.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-card
 
+## 16.11.0
+
+### Minor Changes
+
+- [`d2be5b45b39b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d2be5b45b39b0) -
+  Add Smart Link-aware paste actions for the paste actions menu V2 experiment.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.10.3
 
 ### Patch Changes

package/dist/cjs/cardPlugin.js

@@ -15,6 +15,7 @@ var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _utils = require("@atlaskit/editor-common/utils");
 var _linkDatasource = require("@atlaskit/link-datasource");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
 var _blockCard = require("./nodeviews/toDOM-fixes/blockCard");
 var _embedCard = require("./nodeviews/toDOM-fixes/embedCard");
 var _inlineCard = require("./nodeviews/toDOM-fixes/inlineCard");
@@ -29,6 +30,7 @@ var _ModalWithState = _interopRequireDefault(require("./ui/DatasourceModal/Modal
 var _EditorLinkingPlatformAnalytics = require("./ui/EditorLinkingPlatformAnalytics");
 var _EditorSmartCardEvents = require("./ui/EditorSmartCardEvents");
 var _LayoutButton = _interopRequireDefault(require("./ui/LayoutButton"));
+var _PasteDisplayAsMenu = require("./ui/PasteDisplayAsMenu");
 var _toolbar = require("./ui/toolbar");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // Ignored via go/ees005
@@ -41,6 +43,20 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
   var previousCardProvider;
   var cardPluginEvents = (0, _createEventsQueue.createEventsQueue)();
   var instanceEmbedCardTransformers = options.embedCardTransformers;
+  var editorViewForPasteMenu;
+  var pasteMenuVariant = (0, _expVal.expValNoExposure)('platform_editor_paste_actions_menu_v2', 'variant', 'control');
+  var shouldRegisterPasteDisplayAsMenu = options.enablePasteDisplayAsMenu && ['hasSpellingAndGrammar', 'hasAltAiActions'].includes(pasteMenuVariant);
+  if (shouldRegisterPasteDisplayAsMenu) {
+    var _api$uiControlRegistr, _options$allowBlockCa;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _PasteDisplayAsMenu.getPasteDisplayAsMenuComponents)({
+      api: api,
+      allowBlockCards: options.onlyInlineCards ? false : (_options$allowBlockCa = options.allowBlockCards) !== null && _options$allowBlockCa !== void 0 ? _options$allowBlockCa : true,
+      allowEmbeds: options.onlyInlineCards ? false : options.allowEmbeds,
+      getEditorView: function getEditorView() {
+        return editorViewForPasteMenu;
+      }
+    }));
+  }
   api === null || api === void 0 || (_api$base = api.base) === null || _api$base === void 0 || _api$base.actions.registerMarks(function (_ref2) {
     var tr = _ref2.tr,
       node = _ref2.node,
@@ -86,10 +102,10 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
       return nodes;
     },
     pmPlugins: function pmPlugins() {
-      var _options$allowBlockCa, _options$allowResizin, _options$useAlternati, _options$allowWrappin, _options$allowAlignme, _options$allowDatasou, _options$showUpgradeD;
+      var _options$allowBlockCa2, _options$allowResizin, _options$useAlternati, _options$allowWrappin, _options$allowAlignme, _options$allowDatasou, _options$showUpgradeD;
       // onlyInlineCards forces block/embed off regardless of caller-passed flags,
       // keeping the schema gate (in nodes()) and the runtime gate in sync.
-      var allowBlockCards = options.onlyInlineCards ? false : (_options$allowBlockCa = options.allowBlockCards) !== null && _options$allowBlockCa !== void 0 ? _options$allowBlockCa : true;
+      var allowBlockCards = options.onlyInlineCards ? false : (_options$allowBlockCa2 = options.allowBlockCards) !== null && _options$allowBlockCa2 !== void 0 ? _options$allowBlockCa2 : true;
       var allowEmbeds = options.onlyInlineCards ? false : options.allowEmbeds;
       var allowResizing = (_options$allowResizin = options.allowResizing) !== null && _options$allowResizin !== void 0 ? _options$allowResizin : true;
       var useAlternativePreloader = (_options$useAlternati = options.useAlternativePreloader) !== null && _options$useAlternati !== void 0 ? _options$useAlternati : true;
@@ -129,6 +145,7 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
       if (!editorView) {
         return null;
       }
+      editorViewForPasteMenu = editorView;
       var breakoutEnabled = options.editorAppearance === 'full-page';
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_EditorSmartCardEvents.EditorSmartCardEvents, {
         editorView: editorView

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

@@ -383,7 +383,7 @@ var changeSelectedCardToLink = exports.changeSelectedCardToLink = function chang
   return function (state, dispatch) {
     var selectedNode = state.selection instanceof _state.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);
@@ -411,7 +411,7 @@ var changeSelectedCardToLink = exports.changeSelectedCardToLink = function chang
 var changeSelectedCardToLinkFallback = exports.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/cjs/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/cjs/ui/PasteDisplayAsMenu.js

@@ -0,0 +1,368 @@
+/* PasteDisplayAsMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setAppearanceSelection = exports.normalizeSelectionToLinkRangeForUrlAppearance = exports.getPasteDisplayAsMenuComponents = exports.getFirstLinkRangeInSelection = exports.SMART_LINK_DISPLAY_AS_PASTE_MENU_SECTION_KEY = void 0;
+require("./PasteDisplayAsMenu.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _css = require("@atlaskit/css");
+var _card = require("@atlaskit/editor-common/card");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _link = require("@atlaskit/editor-common/link");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-common/utils");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _minus = _interopRequireDefault(require("@atlaskit/icon/core/minus"));
+var _smartLinkCard = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-card"));
+var _smartLinkEmbed = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-embed"));
+var _smartLinkInline = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-inline"));
+var _linkProvider = require("@atlaskit/link-provider");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _doc = require("../pm-plugins/doc");
+var _currentPastedSmartLink = require("./currentPastedSmartLink");
+var _pasteDisplayAsUtils = require("./pasteDisplayAsUtils");
+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); }
+var SMART_LINK_DISPLAY_AS_PASTE_MENU_SECTION_KEY = exports.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.default.createElement(_compiled.Box, {
+    xcss: styles.iconWrapper
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
+    xcss: (0, _css.cx)(styles.iconButton, isDisabled && styles.iconButtonDisabled, !isDisabled && currentAppearance === appearance && styles.iconButtonSelected),
+    "aria-label": label,
+    "aria-pressed": currentAppearance === appearance,
+    isDisabled: isDisabled,
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.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.default.createElement(AppearanceOptionIconButton, {
+    appearance: "inline",
+    currentAppearance: currentAppearance,
+    isDisabled: isDisabled,
+    label: label,
+    Icon: _smartLinkInline.default,
+    onClick: onClick
+  });
+};
+var BlockAppearanceIconButton = function BlockAppearanceIconButton(_ref3) {
+  var currentAppearance = _ref3.currentAppearance,
+    isDisabled = _ref3.isDisabled,
+    label = _ref3.label,
+    onClick = _ref3.onClick;
+  return /*#__PURE__*/_react.default.createElement(AppearanceOptionIconButton, {
+    appearance: "block",
+    currentAppearance: currentAppearance,
+    isDisabled: isDisabled,
+    label: label,
+    Icon: _smartLinkCard.default,
+    onClick: onClick
+  });
+};
+var EmbedAppearanceIconButton = function EmbedAppearanceIconButton(_ref4) {
+  var currentAppearance = _ref4.currentAppearance,
+    isDisabled = _ref4.isDisabled,
+    label = _ref4.label,
+    onClick = _ref4.onClick;
+  return /*#__PURE__*/_react.default.createElement(AppearanceOptionIconButton, {
+    appearance: "embed",
+    currentAppearance: currentAppearance,
+    isDisabled: isDisabled,
+    label: label,
+    Icon: _smartLinkEmbed.default,
+    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 = (0, _pasteDisplayAsUtils.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;
+};
+var setAppearanceSelection = exports.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 ? _state.NodeSelection.create(state.doc, targetPos) : _state.TextSelection.create(state.doc, from, to);
+    var tr = state.tr.setSelection(nextSelection);
+    dispatch(tr);
+    return true;
+  } catch (_unused) {
+    return false;
+  }
+};
+var getFirstLinkRangeInSelection = exports.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;
+};
+var normalizeSelectionToLinkRangeForUrlAppearance = exports.normalizeSelectionToLinkRangeForUrlAppearance = function normalizeSelectionToLinkRangeForUrlAppearance(_ref7) {
+  var editorView = _ref7.editorView,
+    targetPos = _ref7.targetPos;
+  if (targetPos !== undefined || (0, _link.getActiveLinkMark)(editorView.state)) {
+    return;
+  }
+  var firstLinkRange = getFirstLinkRangeInSelection(editorView);
+  if (!firstLinkRange) {
+    return;
+  }
+  var linkRangeSelectionTr = editorView.state.tr.setSelection(_state.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 = (0, _reactIntl.useIntl)();
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var toolbarDropdownMenu = (0, _editorToolbar.useToolbarDropdownMenu)();
+  var smartCardContext = (0, _linkProvider.useSmartCardContext)();
+  var frameRef = (0, _react.useRef)(null);
+  var isApplyingRef = (0, _react.useRef)(false);
+  var apiWithPasteOptionsToolbar = api;
+  var pasteRange = (0, _hooks.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.
+  (0, _hooks.useSharedPluginStateWithSelector)(api, ['card'], function (states) {
+    return states.cardState;
+  });
+  var pastedLinkUrlFromSlice = (0, _currentPastedSmartLink.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 = (0, _pasteDisplayAsUtils.getCardAtPasteRange)(editorView.state, pasteRange.pasteStartPos, pasteRange.pasteEndPos)) === null || _getCardAtPasteRange === void 0 ? void 0 : _getCardAtPasteRange.appearance) !== null && _getCardAtPasteRange$ !== void 0 ? _getCardAtPasteRange$ : 'url' : undefined;
+  var handleClick = (0, _react.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 = (0, _pasteDisplayAsUtils.getCardAtPasteRange)(state, pasteStartPos, pasteEndPos);
+      if (appearance === 'url') {
+        if (cardAtPasteRange) {
+          var _state$doc$nodeAt, _api$analytics;
+          (0, _doc.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;
+        (0, _doc.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]);
+  (0, _react.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 && (0, _utils.isSupportedInParent)(editorView.state, _model.Fragment.from(blockCardNodeType.createChecked({})), currentAppearance === 'url' || currentAppearance === 'inline' ? undefined : currentAppearance);
+  var isEmbedSupportedFromAppearanceContext = allowEmbeds && preview && embedCardNodeType && (0, _utils.isSupportedInParent)(editorView.state, _model.Fragment.from(embedCardNodeType.createChecked({})), currentAppearance === 'url' || currentAppearance === 'inline' ? undefined : currentAppearance);
+  var isSmartLinkConvertible = hasResolvedSmartLinkData;
+  var isBlockSupportedFromSelection = allowBlockCards && blockCardNodeType && (0, _utils.isSupportedInParent)(editorView.state, _model.Fragment.from(blockCardNodeType.createChecked({})), undefined);
+  var isEmbedSupportedFromSelection = allowEmbeds && preview && embedCardNodeType && (0, _utils.isSupportedInParent)(editorView.state, _model.Fragment.from(embedCardNodeType.createChecked({})), undefined);
+  var isBlockSupported = Boolean(isBlockSupportedFromAppearanceContext || isBlockSupportedFromSelection);
+  var isEmbedSupported = Boolean(isEmbedSupportedFromAppearanceContext || isEmbedSupportedFromSelection);
+  return /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    xcss: styles.appearanceBox,
+    gap: "space.050"
+  }, /*#__PURE__*/_react.default.createElement(AppearanceOptionIconButton, {
+    appearance: "url",
+    currentAppearance: currentAppearance,
+    isDisabled: false,
+    label: intl.formatMessage(_card.appearancePropsMap.url.title),
+    Icon: _minus.default,
+    onClick: handleClick('url')
+  }), /*#__PURE__*/_react.default.createElement(InlineAppearanceIconButton, {
+    currentAppearance: currentAppearance,
+    isDisabled: !isSmartLinkConvertible,
+    label: intl.formatMessage(_card.appearancePropsMap.inline.title),
+    onClick: handleClick('inline')
+  }), /*#__PURE__*/_react.default.createElement(BlockAppearanceIconButton, {
+    currentAppearance: currentAppearance,
+    isDisabled: !isSmartLinkConvertible || !isBlockSupported,
+    label: intl.formatMessage(_card.appearancePropsMap.block.title),
+    onClick: handleClick('block')
+  }), /*#__PURE__*/_react.default.createElement(EmbedAppearanceIconButton, {
+    currentAppearance: currentAppearance,
+    isDisabled: !isEmbedSupported,
+    label: intl.formatMessage(_card.appearancePropsMap.embed.title),
+    onClick: handleClick('embed')
+  }));
+};
+var PasteDisplayAsMenuSection = function PasteDisplayAsMenuSection(_ref9) {
+  var api = _ref9.api,
+    allowBlockCards = _ref9.allowBlockCards,
+    allowEmbeds = _ref9.allowEmbeds;
+  var intl = (0, _reactIntl.useIntl)();
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.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.default.createElement(PasteDisplayAsMenuHorizontalView, {
+    api: api,
+    allowBlockCards: allowBlockCards,
+    allowEmbeds: allowEmbeds
+  }));
+};
+var getPasteDisplayAsMenuComponents = exports.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: _toolbar.PASTE_MENU.type,
+      key: _toolbar.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 = (0, _currentPastedSmartLink.getSingleSmartLinkUrlFromSlice)(pastedSlice);
+      var urlFromCard = getCardUrlAtPasteRange({
+        editorView: editorView,
+        pasteStartPos: pasteRange.pasteStartPos,
+        pasteEndPos: pasteRange.pasteEndPos
+      });
+      return !urlFromSlice && !urlFromCard;
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(PasteDisplayAsMenuSection, {
+        api: api,
+        allowBlockCards: allowBlockCards,
+        allowEmbeds: allowEmbeds
+      });
+    }
+  }];
+};

package/dist/cjs/ui/currentPastedSmartLink.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSingleSmartLinkUrlFromSlice = void 0;
+var getUrlFromTextLinkNode = function getUrlFromTextLinkNode(node) {
+  var _node$marks$0$attrs;
+  if (!node.isText || node.marks.length !== 1 || node.marks[0].type.name !== 'link') {
+    return undefined;
+  }
+  var href = (_node$marks$0$attrs = node.marks[0].attrs) === null || _node$marks$0$attrs === void 0 ? void 0 : _node$marks$0$attrs.href;
+  return typeof href === 'string' && node.text === href ? href : undefined;
+};
+var getUrlFromInlineCardNode = function getUrlFromInlineCardNode(node) {
+  var _node$attrs;
+  if (node.type.name !== 'inlineCard') {
+    return undefined;
+  }
+  var url = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url;
+  return typeof url === 'string' ? url : undefined;
+};
+var significantChildren = function significantChildren(fragment) {
+  var children = [];
+  fragment.forEach(function (child) {
+    var _child$text;
+    if (child.isText && ((_child$text = child.text) === null || _child$text === void 0 ? void 0 : _child$text.trim()) === '') {
+      return;
+    }
+    children.push(child);
+  });
+  return children;
+};
+var getSingleSmartLinkUrlFromSlice = exports.getSingleSmartLinkUrlFromSlice = function getSingleSmartLinkUrlFromSlice(slice) {
+  var _getUrlFromTextLinkNo, _getUrlFromTextLinkNo2;
+  if (!slice || slice.content.childCount !== 1) {
+    return undefined;
+  }
+  var topNode = slice.content.child(0);
+  var topNodeUrl = (_getUrlFromTextLinkNo = getUrlFromTextLinkNode(topNode)) !== null && _getUrlFromTextLinkNo !== void 0 ? _getUrlFromTextLinkNo : getUrlFromInlineCardNode(topNode);
+  if (topNodeUrl) {
+    return topNodeUrl;
+  }
+  if (topNode.type.name !== 'paragraph') {
+    return undefined;
+  }
+  var children = significantChildren(topNode.content);
+  if (children.length !== 1) {
+    return undefined;
+  }
+  return (_getUrlFromTextLinkNo2 = getUrlFromTextLinkNode(children[0])) !== null && _getUrlFromTextLinkNo2 !== void 0 ? _getUrlFromTextLinkNo2 : getUrlFromInlineCardNode(children[0]);
+};

package/dist/cjs/ui/pasteDisplayAsUtils.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCardAtPasteRange = exports.DISPLAY_AS_OPTIONS = void 0;
+var DISPLAY_AS_OPTIONS = exports.DISPLAY_AS_OPTIONS = ['url', 'inline', 'block', 'embed'];
+var getCardAtPasteRange = exports.getCardAtPasteRange = function getCardAtPasteRange(state, pasteStartPos, pasteEndPos) {
+  var result;
+  var docContentSize = state.doc.content.size;
+  var clampedStart = Math.max(0, Math.min(pasteStartPos, docContentSize));
+  var clampedEnd = Math.max(0, Math.min(pasteEndPos, docContentSize));
+  var from = Math.min(clampedStart, clampedEnd);
+  var to = Math.max(clampedStart, clampedEnd);
+  try {
+    state.doc.nodesBetween(from, to, function (node, pos) {
+      if (node.type.name === 'inlineCard' || node.type.name === 'blockCard' || node.type.name === 'embedCard') {
+        result = {
+          appearance: node.type.name === 'inlineCard' ? 'inline' : node.type.name === 'blockCard' ? 'block' : 'embed',
+          pos: pos
+        };
+        return false;
+      }
+      return true;
+    });
+  } catch (_unused) {
+    return;
+  }
+  return result;
+};

package/dist/es2019/cardPlugin.js

@@ -4,6 +4,7 @@ import { IconDatasourceAssetsObjects, IconDatasourceConfluenceSearch, IconDataso
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, CONFLUENCE_SEARCH_DATASOURCE_ID } from '@atlaskit/link-datasource';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValNoExposure } from '@atlaskit/tmp-editor-statsig/expVal';
 import { blockCardSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/blockCard';
 import { embedCardSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/embedCard';
 import { inlineCardSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/inlineCard';
@@ -20,6 +21,7 @@ import { EditorSmartCardEvents } from './ui/EditorSmartCardEvents';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import LayoutButton from './ui/LayoutButton';
+import { getPasteDisplayAsMenuComponents } from './ui/PasteDisplayAsMenu';
 import { floatingToolbar, getEndingToolbarItems, getStartingToolbarItems } from './ui/toolbar';
 export const cardPlugin = ({
   config: options = {},
@@ -29,6 +31,18 @@ export const cardPlugin = ({
   let previousCardProvider;
   const cardPluginEvents = createEventsQueue();
   let instanceEmbedCardTransformers = options.embedCardTransformers;
+  let editorViewForPasteMenu;
+  const pasteMenuVariant = expValNoExposure('platform_editor_paste_actions_menu_v2', 'variant', 'control');
+  const shouldRegisterPasteDisplayAsMenu = options.enablePasteDisplayAsMenu && ['hasSpellingAndGrammar', 'hasAltAiActions'].includes(pasteMenuVariant);
+  if (shouldRegisterPasteDisplayAsMenu) {
+    var _api$uiControlRegistr, _options$allowBlockCa;
+    api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getPasteDisplayAsMenuComponents({
+      api,
+      allowBlockCards: options.onlyInlineCards ? false : (_options$allowBlockCa = options.allowBlockCards) !== null && _options$allowBlockCa !== void 0 ? _options$allowBlockCa : true,
+      allowEmbeds: options.onlyInlineCards ? false : options.allowEmbeds,
+      getEditorView: () => editorViewForPasteMenu
+    }));
+  }
   api === null || api === void 0 ? void 0 : (_api$base = api.base) === null || _api$base === void 0 ? void 0 : _api$base.actions.registerMarks(({
     tr,
     node,
@@ -81,10 +95,10 @@ export const cardPlugin = ({
       return nodes;
     },
     pmPlugins() {
-      var _options$allowBlockCa, _options$allowResizin, _options$useAlternati, _options$allowWrappin, _options$allowAlignme, _options$allowDatasou, _options$showUpgradeD;
+      var _options$allowBlockCa2, _options$allowResizin, _options$useAlternati, _options$allowWrappin, _options$allowAlignme, _options$allowDatasou, _options$showUpgradeD;
       // onlyInlineCards forces block/embed off regardless of caller-passed flags,
       // keeping the schema gate (in nodes()) and the runtime gate in sync.
-      const allowBlockCards = options.onlyInlineCards ? false : (_options$allowBlockCa = options.allowBlockCards) !== null && _options$allowBlockCa !== void 0 ? _options$allowBlockCa : true;
+      const allowBlockCards = options.onlyInlineCards ? false : (_options$allowBlockCa2 = options.allowBlockCards) !== null && _options$allowBlockCa2 !== void 0 ? _options$allowBlockCa2 : true;
       const allowEmbeds = options.onlyInlineCards ? false : options.allowEmbeds;
       const allowResizing = (_options$allowResizin = options.allowResizing) !== null && _options$allowResizin !== void 0 ? _options$allowResizin : true;
       const useAlternativePreloader = (_options$useAlternati = options.useAlternativePreloader) !== null && _options$useAlternati !== void 0 ? _options$useAlternati : true;
@@ -127,6 +141,7 @@ export const cardPlugin = ({
       if (!editorView) {
         return null;
       }
+      editorViewForPasteMenu = editorView;
       const breakoutEnabled = options.editorAppearance === 'full-page';
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorSmartCardEvents, {
         editorView: editorView

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

@@ -351,7 +351,7 @@ export const convertHyperlinkToSmartCard = (state, source, appearance, normalize
 export const changeSelectedCardToLink = (text, href, sendAnalytics, node, pos, editorAnalyticsApi) => (state, dispatch) => {
   const selectedNode = state.selection instanceof NodeSelection ? state.selection.node : undefined;
   let tr;
-  if (node && pos) {
+  if (node && pos !== undefined) {
     tr = cardNodeToLinkWithTransaction(state, text, href, node, pos);
   } else {
     tr = cardToLinkWithTransaction(state, text, href);
@@ -377,7 +377,7 @@ export const changeSelectedCardToLink = (text, href, sendAnalytics, node, pos, e
 };
 export const changeSelectedCardToLinkFallback = (text, href, sendAnalytics, node, pos, editorAnalyticsApi) => (state, dispatch) => {
   let tr;
-  if (node && pos) {
+  if (node && pos !== undefined) {
     tr = cardNodeToLinkWithTransaction(state, text, href, node, pos);
   } else {
     tr = cardToLinkWithTransaction(state, text, href);