@atlaskit/editor-plugin-card 16.10.2 → 16.11.0

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/cjs/ui/useFetchDatasourceDataInfo.js

@@ -28,17 +28,17 @@ var useFetchDatasourceDataInfo = exports.useFetchDatasourceDataInfo = function u
   (0, _react.useEffect)(function () {
     var fetchDatasource = /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var datasourceDataRequest, _yield$getDatasourceD, meta;
-        return _regenerator.default.wrap(function _callee$(_context) {
+        var datasourceDataRequest, _yield$getDatasourceD, meta, _t;
+        return _regenerator.default.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
               if (!(!datasourceId || !parameters || !visibleColumnKeys)) {
-                _context.next = 3;
+                _context.next = 1;
                 break;
               }
               return _context.abrupt("return");
-            case 3:
+            case 1:
               datasourceDataRequest = {
                 parameters: parameters,
                 pageSize: _linkClientExtension.DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE,
@@ -46,25 +46,25 @@ var useFetchDatasourceDataInfo = exports.useFetchDatasourceDataInfo = function u
                 fields: visibleColumnKeys,
                 includeSchema: true
               };
-              _context.next = 6;
+              _context.next = 2;
               return getDatasourceData(datasourceId, datasourceDataRequest, false);
-            case 6:
+            case 2:
               _yield$getDatasourceD = _context.sent;
               meta = _yield$getDatasourceD.meta;
               setExtensionKey(meta.extensionKey);
-              _context.next = 15;
+              _context.next = 4;
               break;
-            case 11:
-              _context.prev = 11;
-              _context.t0 = _context["catch"](0);
+            case 3:
+              _context.prev = 3;
+              _t = _context["catch"](0);
               // eslint-disable-next-line no-console
-              console.error(_context.t0);
+              console.error(_t);
               setExtensionKey(undefined);
-            case 15:
+            case 4:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[0, 11]]);
+        }, _callee, null, [[0, 3]]);
       }));
       return function fetchDatasource() {
         return _ref2.apply(this, arguments);

package/dist/cjs/ui/useFetchDatasourceInfo.js

@@ -40,44 +40,44 @@ var useFetchDatasourceInfo = exports.useFetchDatasourceInfo = function useFetchD
   (0, _react.useEffect)(function () {
     var fetchDatasource = /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var _cardContext$connecti, _datasources$, _datasources$2, response, datasources;
-        return _regenerator.default.wrap(function _callee$(_context) {
+        var _cardContext$connecti, _datasources$, _datasources$2, response, datasources, _t;
+        return _regenerator.default.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
               if (!(!url || !cardContext)) {
-                _context.next = 4;
+                _context.next = 1;
                 break;
               }
               // Don't block rendering of modal of somehow we don't get these two args --> just open with empty params
               setReady(true);
               return _context.abrupt("return");
-            case 4:
-              _context.next = 6;
+            case 1:
+              _context.next = 2;
               return cardContext === null || cardContext === void 0 || (_cardContext$connecti = cardContext.connections) === null || _cardContext$connecti === void 0 || (_cardContext$connecti = _cardContext$connecti.client) === null || _cardContext$connecti === void 0 ? void 0 : _cardContext$connecti.fetchData(url);
-            case 6:
+            case 2:
               response = _context.sent;
               datasources = response && response.datasources || [];
               setExtensionKey(response === null || response === void 0 ? void 0 : response.meta.key);
               setDatasourceId((_datasources$ = datasources[0]) === null || _datasources$ === void 0 ? void 0 : _datasources$.id);
               setParameters((_datasources$2 = datasources[0]) === null || _datasources$2 === void 0 ? void 0 : _datasources$2.parameters);
               setReady(true);
-              _context.next = 20;
+              _context.next = 4;
               break;
-            case 14:
-              _context.prev = 14;
-              _context.t0 = _context["catch"](0);
+            case 3:
+              _context.prev = 3;
+              _t = _context["catch"](0);
               setDatasourceId(undefined);
               setParameters(undefined);
               setExtensionKey(undefined);
               // If fetch somehow errors, still set ready as true so we don't block the rendering of the modal.
               // It will just open with empty params.
               setReady(true);
-            case 20:
+            case 4:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[0, 14]]);
+        }, _callee, null, [[0, 3]]);
       }));
       return function fetchDatasource() {
         return _ref2.apply(this, arguments);

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);