@atlaskit/editor-plugin-card 18.3.1 → 18.4.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-card
 
+## 18.4.0
+
+### Minor Changes
+
+- [`448792b5143ac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/448792b5143ac) -
+  Show the correct Display as option for a pasted link. A 1P link that resolves to an embed is
+  inserted as a native embed, which the paste menu now reports as an embed and can switch to a link,
+  inline card or card. The pasted link's URL is also used to pick the card the menu describes, so a
+  neighbouring card is no longer reported as the one that was pasted.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 18.3.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.3.1
 
 ### Patch Changes

package/dist/cjs/ui/PasteDisplayAsMenu.js

@@ -31,6 +31,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _doc = require("../pm-plugins/doc");
 var _currentPastedSmartLink = require("./currentPastedSmartLink");
+var _nativeEmbedNode = require("./nativeEmbedNode");
 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 _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); 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';
@@ -123,12 +124,22 @@ var getCurrentPastedSlice = function getCurrentPastedSlice(api) {
   return slice;
 };
 var getCardUrlAtPasteRange = function getCardUrlAtPasteRange(_ref5) {
-  var _editorView$state$doc, _maybeAttrs$url, _maybeAttrs$data;
+  var _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;
+  if (!cardAtPasteRange) {
+    return undefined;
+  }
+  var node = editorView.state.doc.nodeAt(cardAtPasteRange.pos);
+  if (!node) {
+    return undefined;
+  }
+  if (cardAtPasteRange.isNativeEmbed) {
+    return (0, _nativeEmbedNode.getNativeEmbedUrl)(node);
+  }
+  var maybeAttrs = node.attrs;
   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;
 };
@@ -188,7 +199,7 @@ var normalizeSelectionToLinkRangeForUrlAppearance = exports.normalizeSelectionTo
   editorView.dispatch(linkRangeSelectionTr);
 };
 var PasteDisplayAsMenuHorizontalView = function PasteDisplayAsMenuHorizontalView(_ref8) {
-  var _smartCardContext$val, _getCardAtPasteRange$, _getCardAtPasteRange, _smartCardContext$val2;
+  var _smartCardContext$val, _cardAtPasteRange$app, _smartCardContext$val2;
   var api = _ref8.api,
     allowBlockCards = _ref8.allowBlockCards,
     allowEmbeds = _ref8.allowEmbeds;
@@ -223,7 +234,11 @@ var PasteDisplayAsMenuHorizontalView = function PasteDisplayAsMenuHorizontalView
   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 cardAtPasteRange = editorView && pasteRange ? (0, _pasteDisplayAsUtils.getCardAtPasteRange)(editorView.state, pasteRange.pasteStartPos, pasteRange.pasteEndPos, pastedLinkUrl) : undefined;
+  var currentAppearance = editorView && pasteRange ? (_cardAtPasteRange$app = cardAtPasteRange === null || cardAtPasteRange === void 0 ? void 0 : cardAtPasteRange.appearance) !== null && _cardAtPasteRange$app !== void 0 ? _cardAtPasteRange$app : 'url' : undefined;
+  // A 1P link that resolves to an embed is inserted as a native embed, not an embedCard.
+  // It displays as an embed, but the card commands cannot change its appearance.
+  var isNativeEmbedPaste = Boolean(cardAtPasteRange === null || cardAtPasteRange === void 0 ? void 0 : cardAtPasteRange.isNativeEmbed);
   var handleClick = (0, _react.useCallback)(function (appearance) {
     return function () {
       var _state$doc$nodeAt2, _targetNodeAttrs$url, _targetNodeAttrs$data;
@@ -235,17 +250,35 @@ var PasteDisplayAsMenuHorizontalView = function PasteDisplayAsMenuHorizontalView
         dispatch = editorView.dispatch;
       var pasteStartPos = pasteRange.pasteStartPos,
         pasteEndPos = pasteRange.pasteEndPos;
-      var cardAtPasteRange = (0, _pasteDisplayAsUtils.getCardAtPasteRange)(state, pasteStartPos, pasteEndPos);
+      var cardAtRange = (0, _pasteDisplayAsUtils.getCardAtPasteRange)(state, pasteStartPos, pasteEndPos, pastedLinkUrl);
+      if (cardAtRange !== null && cardAtRange !== void 0 && cardAtRange.isNativeEmbed) {
+        var nativeEmbedNode = state.doc.nodeAt(cardAtRange.pos);
+        // 'embed' is what a native embed already displays as, so there is nothing to apply.
+        if (nativeEmbedNode && appearance !== 'embed') {
+          var _api$analytics;
+          (0, _nativeEmbedNode.changeNativeEmbedAppearance)({
+            editorView: editorView,
+            pos: cardAtRange.pos,
+            node: nativeEmbedNode,
+            appearance: appearance,
+            url: pastedLinkUrl,
+            editorAnalyticsApi: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
+          });
+        }
+        toolbarDropdownMenu === null || toolbarDropdownMenu === void 0 || toolbarDropdownMenu.closeMenu(null);
+        isApplyingRef.current = false;
+        return;
+      }
       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);
+        if (cardAtRange) {
+          var _state$doc$nodeAt, _api$analytics2;
+          (0, _doc.changeSelectedCardToLink)(pastedLinkUrl, pastedLinkUrl, true, (_state$doc$nodeAt = state.doc.nodeAt(cardAtRange.pos)) !== null && _state$doc$nodeAt !== void 0 ? _state$doc$nodeAt : undefined, cardAtRange.pos, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.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;
+      var targetPos = cardAtRange === null || cardAtRange === void 0 ? void 0 : cardAtRange.pos;
       var targetNodeAttrs = targetPos === undefined ? undefined : (_state$doc$nodeAt2 = state.doc.nodeAt(targetPos)) === null || _state$doc$nodeAt2 === void 0 ? void 0 : _state$doc$nodeAt2.attrs;
       var targetNodeUrl = (_targetNodeAttrs$url = targetNodeAttrs === null || targetNodeAttrs === void 0 ? void 0 : targetNodeAttrs.url) !== null && _targetNodeAttrs$url !== void 0 ? _targetNodeAttrs$url : targetNodeAttrs === null || targetNodeAttrs === void 0 || (_targetNodeAttrs$data = targetNodeAttrs.data) === null || _targetNodeAttrs$data === void 0 ? void 0 : _targetNodeAttrs$data.url;
       var isRecoveredAdjacentPastedCard = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('confluence_editor_paste_3p_link_actions_menu', 'isEnabled', true) && targetPos === pasteStartPos - 1 && pasteStartPos === pasteEndPos && targetNodeUrl === pastedLinkUrl;
@@ -269,9 +302,9 @@ var PasteDisplayAsMenuHorizontalView = function PasteDisplayAsMenuHorizontalView
         targetPos: targetPos
       });
       frameRef.current = requestAnimationFrame(function () {
-        var _api$analytics2;
+        var _api$analytics3;
         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);
+        (0, _doc.setSelectedCardAppearance)(appearance, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)(editorView.state, editorView.dispatch, editorView);
         toolbarDropdownMenu === null || toolbarDropdownMenu === void 0 || toolbarDropdownMenu.closeMenu(null);
         isApplyingRef.current = false;
       });
@@ -296,26 +329,39 @@ var PasteDisplayAsMenuHorizontalView = function PasteDisplayAsMenuHorizontalView
   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);
+  // A native embed is replaced in place, so support depends on what its own position
+  // accepts rather than on the current selection or on an embed preview being available.
+  var nativeEmbedPos = isNativeEmbedPaste ? cardAtPasteRange === null || cardAtPasteRange === void 0 ? void 0 : cardAtPasteRange.pos : undefined;
+  var isSupportedForNativeEmbed = function isSupportedForNativeEmbed(appearance) {
+    return nativeEmbedPos !== undefined && (0, _nativeEmbedNode.isNativeEmbedAppearanceSupported)({
+      editorView: editorView,
+      pos: nativeEmbedPos,
+      appearance: appearance
+    });
+  };
+  var isInlineSupported = isNativeEmbedPaste ? isSupportedForNativeEmbed('inline') : true;
+  var isBlockSupported = isNativeEmbedPaste ? allowBlockCards && isSupportedForNativeEmbed('block') : Boolean(isBlockSupportedFromAppearanceContext || isBlockSupportedFromSelection);
+  var isEmbedSupported =
+  // Whatever was pasted already displays this way, so the option must stay selectable.
+  currentAppearance === 'embed' || 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,
+    isDisabled: isNativeEmbedPaste && !isSupportedForNativeEmbed('url'),
     label: intl.formatMessage(_card.appearancePropsMap.url.title),
     Icon: _minus.default,
     onClick: handleClick('url')
   }), /*#__PURE__*/_react.default.createElement(InlineAppearanceIconButton, {
     currentAppearance: currentAppearance,
-    isDisabled: !isSmartLinkConvertible,
+    isDisabled: isNativeEmbedPaste ? !isInlineSupported : !isSmartLinkConvertible,
     label: intl.formatMessage(_card.appearancePropsMap.inline.title),
     onClick: handleClick('inline')
   }), /*#__PURE__*/_react.default.createElement(BlockAppearanceIconButton, {
     currentAppearance: currentAppearance,
-    isDisabled: !isSmartLinkConvertible || !isBlockSupported,
+    isDisabled: !isBlockSupported || !isNativeEmbedPaste && !isSmartLinkConvertible,
     label: intl.formatMessage(_card.appearancePropsMap.block.title),
     onClick: handleClick('block')
   }), /*#__PURE__*/_react.default.createElement(EmbedAppearanceIconButton, {

package/dist/cjs/ui/nativeEmbedNode.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNativeEmbedNode = exports.isNativeEmbedAppearanceSupported = exports.getNativeEmbedUrl = exports.changeNativeEmbedAppearance = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _url = require("@atlaskit/adf-schema/url");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _extensions = require("@atlaskit/editor-common/extensions");
+/**
+ * A native embed is an `extension` node that `editor-plugin-native-embeds` builds from
+ * embedCard ADF (via the `embedCardNodeTransformer` registered on the card plugin).
+ * A 1P link that resolves to an embed appearance — a whiteboard, page, slide or
+ * database — therefore lands in the document as one of these rather than as an
+ * `embedCard`, so card node types alone are not enough to describe what was pasted.
+ *
+ * `editor-plugin-native-embeds` owns the equivalent predicate, but the card plugin
+ * cannot depend on it: that would close the cycle
+ * editor-plugin-card -> editor-plugin-native-embeds -> editor-plugin-card.
+ */
+var isNativeEmbedNode = exports.isNativeEmbedNode = function isNativeEmbedNode(node) {
+  var _node$attrs, _node$attrs2;
+  return (node === null || node === void 0 ? void 0 : node.type.name) === 'extension' && ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.extensionType) === _extensions.NATIVE_EMBED_EXTENSION_TYPE && typeof ((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.extensionKey) === 'string' && node.attrs.extensionKey.includes(_extensions.NATIVE_EMBED_EXTENSION_KEY);
+};
+
+/**
+ * Reads the embedded URL from a native embed node. The URL is stored in
+ * `parameters.macroParams`, where values may be wrapped (`{ value }`) or bare, and is
+ * mirrored in `parameters.macroMetadata` so it survives a revert to a card.
+ */
+var getNativeEmbedUrl = exports.getNativeEmbedUrl = function getNativeEmbedUrl(node) {
+  var _node$attrs3, _parameters$macroPara, _ref, _parameters$macroMeta;
+  var parameters = (_node$attrs3 = node.attrs) === null || _node$attrs3 === void 0 ? void 0 : _node$attrs3.parameters;
+  var macroParamUrl = parameters === null || parameters === void 0 || (_parameters$macroPara = parameters.macroParams) === null || _parameters$macroPara === void 0 ? void 0 : _parameters$macroPara.url;
+  var url = (_ref = macroParamUrl && (0, _typeof2.default)(macroParamUrl) === 'object' && 'value' in macroParamUrl ? macroParamUrl.value : macroParamUrl) !== null && _ref !== void 0 ? _ref : parameters === null || parameters === void 0 || (_parameters$macroMeta = parameters.macroMetadata) === null || _parameters$macroMeta === void 0 ? void 0 : _parameters$macroMeta.url;
+  return typeof url === 'string' ? url : undefined;
+};
+var canReplaceNodeWith = function canReplaceNodeWith(view, pos, nodeType) {
+  if (!nodeType) {
+    return false;
+  }
+  try {
+    var $pos = view.state.doc.resolve(pos);
+    var index = $pos.index();
+    return $pos.parent.canReplaceWith(index, index + 1, nodeType);
+  } catch (_unused) {
+    return false;
+  }
+};
+
+/**
+ * Whether a native embed at `pos` can be replaced by the given appearance. `url` and
+ * `inline` both become a paragraph, `block` becomes a blockCard.
+ */
+var isNativeEmbedAppearanceSupported = exports.isNativeEmbedAppearanceSupported = function isNativeEmbedAppearanceSupported(_ref2) {
+  var editorView = _ref2.editorView,
+    pos = _ref2.pos,
+    appearance = _ref2.appearance;
+  var _editorView$state$sch = editorView.state.schema.nodes,
+    paragraph = _editorView$state$sch.paragraph,
+    inlineCard = _editorView$state$sch.inlineCard,
+    blockCard = _editorView$state$sch.blockCard;
+  if (appearance === 'block') {
+    return canReplaceNodeWith(editorView, pos, blockCard);
+  }
+  if (appearance === 'inline' && !inlineCard) {
+    return false;
+  }
+  if (appearance === 'url' && !editorView.state.schema.marks.link) {
+    return false;
+  }
+  return canReplaceNodeWith(editorView, pos, paragraph);
+};
+
+/**
+ * Replaces a native embed with a link, an inline card or a block card. Mirrors
+ * `setNativeEmbedAppearance` in `editor-plugin-native-embeds`, which cannot be reused
+ * here because of the package cycle described on `isNativeEmbedNode`.
+ */
+var changeNativeEmbedAppearance = exports.changeNativeEmbedAppearance = function changeNativeEmbedAppearance(_ref3) {
+  var editorView = _ref3.editorView,
+    pos = _ref3.pos,
+    node = _ref3.node,
+    appearance = _ref3.appearance,
+    url = _ref3.url,
+    editorAnalyticsApi = _ref3.editorAnalyticsApi;
+  var state = editorView.state,
+    dispatch = editorView.dispatch;
+  var _state$schema$nodes = state.schema.nodes,
+    paragraph = _state$schema$nodes.paragraph,
+    inlineCard = _state$schema$nodes.inlineCard,
+    blockCard = _state$schema$nodes.blockCard;
+  var link = state.schema.marks.link;
+  if (!(0, _url.isSafeUrl)(url)) {
+    return false;
+  }
+  var content;
+  if (appearance === 'url' && link && paragraph) {
+    content = paragraph.create(null, state.schema.text(url, [link.create({
+      href: url
+    })]));
+  } else if (appearance === 'inline' && inlineCard && paragraph) {
+    content = paragraph.create(null, inlineCard.create({
+      url: url
+    }));
+  } else if (appearance === 'block' && blockCard) {
+    content = blockCard.create({
+      url: url
+    });
+  }
+  if (!content) {
+    return false;
+  }
+  try {
+    var tr = state.tr.replaceWith(pos, pos + node.nodeSize, content).scrollIntoView();
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent({
+      action: _analytics.ACTION.CHANGED_TYPE,
+      actionSubject: _analytics.ACTION_SUBJECT.NATIVE_EMBED,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      attributes: {
+        newType: appearance,
+        previousType: 'nativeEmbed'
+      }
+    })(tr);
+    dispatch(tr);
+    return true;
+  } catch (_unused2) {
+    return false;
+  }
+};

package/dist/cjs/ui/pasteDisplayAsUtils.js

@@ -1,45 +1,108 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getCardAtPasteRange = exports.DISPLAY_AS_OPTIONS = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _nativeEmbedNode = require("./nativeEmbedNode");
 var DISPLAY_AS_OPTIONS = exports.DISPLAY_AS_OPTIONS = ['url', 'inline', 'block', 'embed'];
-var getCardAtPasteRange = exports.getCardAtPasteRange = function getCardAtPasteRange(state, pasteStartPos, pasteEndPos) {
-  var result;
+var cardAtPos = function cardAtPos(node, pos) {
+  switch (node === null || node === void 0 ? void 0 : node.type.name) {
+    case 'inlineCard':
+      return {
+        appearance: 'inline',
+        pos: pos
+      };
+    case 'blockCard':
+      return {
+        appearance: 'block',
+        pos: pos
+      };
+    case 'embedCard':
+      return {
+        appearance: 'embed',
+        pos: pos
+      };
+    default:
+      return (0, _nativeEmbedNode.isNativeEmbedNode)(node) ? {
+        appearance: 'embed',
+        isNativeEmbed: true,
+        pos: pos
+      } : undefined;
+  }
+};
+var getNodeUrl = function getNodeUrl(node) {
+  var _attrs$url, _attrs$data;
+  if ((0, _nativeEmbedNode.isNativeEmbedNode)(node)) {
+    return (0, _nativeEmbedNode.getNativeEmbedUrl)(node);
+  }
+  var attrs = node.attrs;
+  var url = (_attrs$url = attrs === null || attrs === void 0 ? void 0 : attrs.url) !== null && _attrs$url !== void 0 ? _attrs$url : attrs === null || attrs === void 0 || (_attrs$data = attrs.data) === null || _attrs$data === void 0 ? void 0 : _attrs$data.url;
+  return typeof url === 'string' ? url : undefined;
+};
+/**
+ * Finds the card that a paste produced.
+ *
+ * The paste range is recorded when the paste happens and then mapped through every later
+ * transaction, so by the time the link has resolved into a card the range can point just
+ * past that card. `pastedUrl` resolves the ambiguity: when it is known, a candidate
+ * holding that URL wins over one that merely sits in the range, which stops a pre-existing
+ * neighbouring card from being reported as the pasted one.
+ */
+var getCardAtPasteRange = exports.getCardAtPasteRange = function getCardAtPasteRange(state, pasteStartPos, pasteEndPos, pastedUrl) {
   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 {
-    if (from === to) {
-      for (var _i = 0, _arr = [from - 1, from]; _i < _arr.length; _i++) {
-        var pos = _arr[_i];
-        if (pos < 0 || pos >= docContentSize) {
-          continue;
-        }
-        var node = state.doc.nodeAt(pos);
-        if ((node === null || node === void 0 ? void 0 : node.type.name) === 'inlineCard' || (node === null || node === void 0 ? void 0 : node.type.name) === 'blockCard' || (node === null || node === void 0 ? void 0 : node.type.name) === 'embedCard') {
-          return {
-            appearance: node.type.name === 'inlineCard' ? 'inline' : node.type.name === 'blockCard' ? 'block' : 'embed',
-            pos: pos
-          };
-        }
+    var _inRange;
+    var candidateAt = function candidateAt(pos) {
+      if (pos < 0 || pos >= docContentSize) {
+        return undefined;
       }
-    }
+      var node = state.doc.nodeAt(pos);
+      var card = cardAtPos(node, pos);
+      return node && card ? {
+        card: card,
+        url: getNodeUrl(node)
+      } : undefined;
+    };
+    var adjacent = [candidateAt(from - 1), candidateAt(from)].filter(function (candidate) {
+      return Boolean(candidate);
+    });
+    var inRange = [];
     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
-        };
+      var card = cardAtPos(node, pos);
+      if (card) {
+        inRange.push({
+          card: card,
+          url: getNodeUrl(node)
+        });
         return false;
       }
       return true;
     });
+    if (pastedUrl) {
+      var match = [].concat((0, _toConsumableArray2.default)(adjacent), inRange).find(function (candidate) {
+        return candidate.url === pastedUrl;
+      });
+      if (match) {
+        return match.card;
+      }
+    }
+    if (from === to) {
+      var _adjacent = (0, _slicedToArray2.default)(adjacent, 1),
+        firstAdjacent = _adjacent[0];
+      if (firstAdjacent) {
+        return firstAdjacent.card;
+      }
+    }
+    return (_inRange = inRange[inRange.length - 1]) === null || _inRange === void 0 ? void 0 : _inRange.card;
   } catch (_unused) {
-    return;
+    return undefined;
   }
-  return result;
 };

package/dist/es2019/ui/PasteDisplayAsMenu.js

@@ -21,6 +21,7 @@ import { Box, Flex, Pressable } from '@atlaskit/primitives/compiled';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { changeSelectedCardToLink, setSelectedCardAppearance } from '../pm-plugins/doc';
 import { getSingleSmartLinkUrlFromSlice } from './currentPastedSmartLink';
+import { changeNativeEmbedAppearance, getNativeEmbedUrl, isNativeEmbedAppearanceSupported } from './nativeEmbedNode';
 import { getCardAtPasteRange } from './pasteDisplayAsUtils';
 export const SMART_LINK_DISPLAY_AS_PASTE_MENU_SECTION_KEY = 'smart-link-display-as-paste-menu-section';
 
@@ -114,9 +115,19 @@ const getCardUrlAtPasteRange = ({
   pasteStartPos,
   pasteEndPos
 }) => {
-  var _editorView$state$doc, _maybeAttrs$url, _maybeAttrs$data;
+  var _maybeAttrs$url, _maybeAttrs$data;
   const cardAtPasteRange = getCardAtPasteRange(editorView.state, pasteStartPos, pasteEndPos);
-  const maybeAttrs = cardAtPasteRange ? (_editorView$state$doc = editorView.state.doc.nodeAt(cardAtPasteRange.pos)) === null || _editorView$state$doc === void 0 ? void 0 : _editorView$state$doc.attrs : undefined;
+  if (!cardAtPasteRange) {
+    return undefined;
+  }
+  const node = editorView.state.doc.nodeAt(cardAtPasteRange.pos);
+  if (!node) {
+    return undefined;
+  }
+  if (cardAtPasteRange.isNativeEmbed) {
+    return getNativeEmbedUrl(node);
+  }
+  const maybeAttrs = node.attrs;
   const maybeUrl = (_maybeAttrs$url = maybeAttrs === null || maybeAttrs === void 0 ? void 0 : maybeAttrs.url) !== null && _maybeAttrs$url !== void 0 ? _maybeAttrs$url : maybeAttrs === null || maybeAttrs === void 0 ? void 0 : (_maybeAttrs$data = maybeAttrs.data) === null || _maybeAttrs$data === void 0 ? void 0 : _maybeAttrs$data.url;
   return typeof maybeUrl === 'string' ? maybeUrl : undefined;
 };
@@ -186,7 +197,7 @@ const PasteDisplayAsMenuHorizontalView = ({
   allowBlockCards,
   allowEmbeds
 }) => {
-  var _smartCardContext$val, _smartCardContext$val2, _smartCardContext$val3, _getCardAtPasteRange$, _getCardAtPasteRange, _smartCardContext$val4;
+  var _smartCardContext$val, _smartCardContext$val2, _smartCardContext$val3, _cardAtPasteRange$app, _smartCardContext$val4;
   const intl = useIntl();
   const {
     editorView
@@ -219,7 +230,11 @@ const PasteDisplayAsMenuHorizontalView = ({
   const pastedLinkUrl = pastedLinkUrlFromSlice !== null && pastedLinkUrlFromSlice !== void 0 ? pastedLinkUrlFromSlice : pastedLinkUrlFromCard;
   const pastedLinkUrlState = pastedLinkUrl ? (_smartCardContext$val = smartCardContext.value) === null || _smartCardContext$val === void 0 ? void 0 : (_smartCardContext$val2 = _smartCardContext$val.store) === null || _smartCardContext$val2 === void 0 ? void 0 : (_smartCardContext$val3 = _smartCardContext$val2.getState()) === null || _smartCardContext$val3 === void 0 ? void 0 : _smartCardContext$val3[pastedLinkUrl] : undefined;
   const hasResolvedSmartLinkData = Boolean(pastedLinkUrlState === null || pastedLinkUrlState === void 0 ? void 0 : pastedLinkUrlState.details);
-  const 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;
+  const cardAtPasteRange = editorView && pasteRange ? getCardAtPasteRange(editorView.state, pasteRange.pasteStartPos, pasteRange.pasteEndPos, pastedLinkUrl) : undefined;
+  const currentAppearance = editorView && pasteRange ? (_cardAtPasteRange$app = cardAtPasteRange === null || cardAtPasteRange === void 0 ? void 0 : cardAtPasteRange.appearance) !== null && _cardAtPasteRange$app !== void 0 ? _cardAtPasteRange$app : 'url' : undefined;
+  // A 1P link that resolves to an embed is inserted as a native embed, not an embedCard.
+  // It displays as an embed, but the card commands cannot change its appearance.
+  const isNativeEmbedPaste = Boolean(cardAtPasteRange === null || cardAtPasteRange === void 0 ? void 0 : cardAtPasteRange.isNativeEmbed);
   const handleClick = useCallback(appearance => () => {
     var _state$doc$nodeAt2, _targetNodeAttrs$url, _targetNodeAttrs$data;
     if (!editorView || !pasteRange || !pastedLinkUrl || !currentAppearance || isApplyingRef.current) {
@@ -234,17 +249,35 @@ const PasteDisplayAsMenuHorizontalView = ({
       pasteStartPos,
       pasteEndPos
     } = pasteRange;
-    const cardAtPasteRange = getCardAtPasteRange(state, pasteStartPos, pasteEndPos);
+    const cardAtRange = getCardAtPasteRange(state, pasteStartPos, pasteEndPos, pastedLinkUrl);
+    if (cardAtRange !== null && cardAtRange !== void 0 && cardAtRange.isNativeEmbed) {
+      const nativeEmbedNode = state.doc.nodeAt(cardAtRange.pos);
+      // 'embed' is what a native embed already displays as, so there is nothing to apply.
+      if (nativeEmbedNode && appearance !== 'embed') {
+        var _api$analytics;
+        changeNativeEmbedAppearance({
+          editorView,
+          pos: cardAtRange.pos,
+          node: nativeEmbedNode,
+          appearance,
+          url: pastedLinkUrl,
+          editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
+        });
+      }
+      toolbarDropdownMenu === null || toolbarDropdownMenu === void 0 ? void 0 : toolbarDropdownMenu.closeMenu(null);
+      isApplyingRef.current = false;
+      return;
+    }
     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 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(state, dispatch, editorView);
+      if (cardAtRange) {
+        var _state$doc$nodeAt, _api$analytics2;
+        changeSelectedCardToLink(pastedLinkUrl, pastedLinkUrl, true, (_state$doc$nodeAt = state.doc.nodeAt(cardAtRange.pos)) !== null && _state$doc$nodeAt !== void 0 ? _state$doc$nodeAt : undefined, cardAtRange.pos, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)(state, dispatch, editorView);
       }
       toolbarDropdownMenu === null || toolbarDropdownMenu === void 0 ? void 0 : toolbarDropdownMenu.closeMenu(null);
       isApplyingRef.current = false;
       return;
     }
-    const targetPos = cardAtPasteRange === null || cardAtPasteRange === void 0 ? void 0 : cardAtPasteRange.pos;
+    const targetPos = cardAtRange === null || cardAtRange === void 0 ? void 0 : cardAtRange.pos;
     const targetNodeAttrs = targetPos === undefined ? undefined : (_state$doc$nodeAt2 = state.doc.nodeAt(targetPos)) === null || _state$doc$nodeAt2 === void 0 ? void 0 : _state$doc$nodeAt2.attrs;
     const targetNodeUrl = (_targetNodeAttrs$url = targetNodeAttrs === null || targetNodeAttrs === void 0 ? void 0 : targetNodeAttrs.url) !== null && _targetNodeAttrs$url !== void 0 ? _targetNodeAttrs$url : targetNodeAttrs === null || targetNodeAttrs === void 0 ? void 0 : (_targetNodeAttrs$data = targetNodeAttrs.data) === null || _targetNodeAttrs$data === void 0 ? void 0 : _targetNodeAttrs$data.url;
     const isRecoveredAdjacentPastedCard = expValEqualsNoExposure('confluence_editor_paste_3p_link_actions_menu', 'isEnabled', true) && targetPos === pasteStartPos - 1 && pasteStartPos === pasteEndPos && targetNodeUrl === pastedLinkUrl;
@@ -268,9 +301,9 @@ const PasteDisplayAsMenuHorizontalView = ({
       targetPos
     });
     frameRef.current = requestAnimationFrame(() => {
-      var _api$analytics2;
+      var _api$analytics3;
       frameRef.current = null;
-      setSelectedCardAppearance(appearance, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)(editorView.state, editorView.dispatch, editorView);
+      setSelectedCardAppearance(appearance, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)(editorView.state, editorView.dispatch, editorView);
       toolbarDropdownMenu === null || toolbarDropdownMenu === void 0 ? void 0 : toolbarDropdownMenu.closeMenu(null);
       isApplyingRef.current = false;
     });
@@ -294,26 +327,37 @@ const PasteDisplayAsMenuHorizontalView = ({
   const isSmartLinkConvertible = hasResolvedSmartLinkData;
   const isBlockSupportedFromSelection = allowBlockCards && blockCardNodeType && isSupportedInParent(editorView.state, Fragment.from(blockCardNodeType.createChecked({})), undefined);
   const isEmbedSupportedFromSelection = allowEmbeds && preview && embedCardNodeType && isSupportedInParent(editorView.state, Fragment.from(embedCardNodeType.createChecked({})), undefined);
-  const isBlockSupported = Boolean(isBlockSupportedFromAppearanceContext || isBlockSupportedFromSelection);
-  const isEmbedSupported = Boolean(isEmbedSupportedFromAppearanceContext || isEmbedSupportedFromSelection);
+  // A native embed is replaced in place, so support depends on what its own position
+  // accepts rather than on the current selection or on an embed preview being available.
+  const nativeEmbedPos = isNativeEmbedPaste ? cardAtPasteRange === null || cardAtPasteRange === void 0 ? void 0 : cardAtPasteRange.pos : undefined;
+  const isSupportedForNativeEmbed = appearance => nativeEmbedPos !== undefined && isNativeEmbedAppearanceSupported({
+    editorView,
+    pos: nativeEmbedPos,
+    appearance
+  });
+  const isInlineSupported = isNativeEmbedPaste ? isSupportedForNativeEmbed('inline') : true;
+  const isBlockSupported = isNativeEmbedPaste ? allowBlockCards && isSupportedForNativeEmbed('block') : Boolean(isBlockSupportedFromAppearanceContext || isBlockSupportedFromSelection);
+  const isEmbedSupported =
+  // Whatever was pasted already displays this way, so the option must stay selectable.
+  currentAppearance === 'embed' || Boolean(isEmbedSupportedFromAppearanceContext || isEmbedSupportedFromSelection);
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: styles.appearanceBox,
     gap: "space.050"
   }, /*#__PURE__*/React.createElement(AppearanceOptionIconButton, {
     appearance: "url",
     currentAppearance: currentAppearance,
-    isDisabled: false,
+    isDisabled: isNativeEmbedPaste && !isSupportedForNativeEmbed('url'),
     label: intl.formatMessage(appearancePropsMap.url.title),
     Icon: MinusIcon,
     onClick: handleClick('url')
   }), /*#__PURE__*/React.createElement(InlineAppearanceIconButton, {
     currentAppearance: currentAppearance,
-    isDisabled: !isSmartLinkConvertible,
+    isDisabled: isNativeEmbedPaste ? !isInlineSupported : !isSmartLinkConvertible,
     label: intl.formatMessage(appearancePropsMap.inline.title),
     onClick: handleClick('inline')
   }), /*#__PURE__*/React.createElement(BlockAppearanceIconButton, {
     currentAppearance: currentAppearance,
-    isDisabled: !isSmartLinkConvertible || !isBlockSupported,
+    isDisabled: !isBlockSupported || !isNativeEmbedPaste && !isSmartLinkConvertible,
     label: intl.formatMessage(appearancePropsMap.block.title),
     onClick: handleClick('block')
   }), /*#__PURE__*/React.createElement(EmbedAppearanceIconButton, {