@atlaskit/editor-plugin-card 16.10.2 → 16.11.0

package/dist/es2019/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/es2019/ui/PasteDisplayAsMenu.js

@@ -0,0 +1,366 @@
+/* PasteDisplayAsMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./PasteDisplayAsMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import { cx } from '@atlaskit/css';
+import { appearancePropsMap } from '@atlaskit/editor-common/card';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { getActiveLinkMark } from '@atlaskit/editor-common/link';
+import { PASTE_MENU, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { isSupportedInParent } from '@atlaskit/editor-common/utils';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { ToolbarDropdownItemSection, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
+import MinusIcon from '@atlaskit/icon/core/minus';
+import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
+import SmartLinkEmbedIcon from '@atlaskit/icon/core/smart-link-embed';
+import SmartLinkInlineIcon from '@atlaskit/icon/core/smart-link-inline';
+import { useSmartCardContext } from '@atlaskit/link-provider';
+import { Box, Flex, Pressable } from '@atlaskit/primitives/compiled';
+import { changeSelectedCardToLink, setSelectedCardAppearance } from '../pm-plugins/doc';
+import { getSingleSmartLinkUrlFromSlice } from './currentPastedSmartLink';
+import { getCardAtPasteRange } from './pasteDisplayAsUtils';
+export const 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.
+
+const 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"
+};
+const AppearanceOptionIconButton = ({
+  appearance,
+  currentAppearance,
+  isDisabled,
+  label,
+  Icon,
+  onClick
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.iconWrapper
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    xcss: cx(styles.iconButton, isDisabled && styles.iconButtonDisabled, !isDisabled && currentAppearance === appearance && styles.iconButtonSelected),
+    "aria-label": label,
+    "aria-pressed": currentAppearance === appearance,
+    isDisabled: isDisabled,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    label: label
+  })));
+};
+const InlineAppearanceIconButton = ({
+  currentAppearance,
+  isDisabled,
+  label,
+  onClick
+}) => /*#__PURE__*/React.createElement(AppearanceOptionIconButton, {
+  appearance: "inline",
+  currentAppearance: currentAppearance,
+  isDisabled: isDisabled,
+  label: label,
+  Icon: SmartLinkInlineIcon,
+  onClick: onClick
+});
+const BlockAppearanceIconButton = ({
+  currentAppearance,
+  isDisabled,
+  label,
+  onClick
+}) => /*#__PURE__*/React.createElement(AppearanceOptionIconButton, {
+  appearance: "block",
+  currentAppearance: currentAppearance,
+  isDisabled: isDisabled,
+  label: label,
+  Icon: SmartLinkCardIcon,
+  onClick: onClick
+});
+const EmbedAppearanceIconButton = ({
+  currentAppearance,
+  isDisabled,
+  label,
+  onClick
+}) => /*#__PURE__*/React.createElement(AppearanceOptionIconButton, {
+  appearance: "embed",
+  currentAppearance: currentAppearance,
+  isDisabled: isDisabled,
+  label: label,
+  Icon: SmartLinkEmbedIcon,
+  onClick: onClick
+});
+const getCurrentPastedSlice = api => {
+  var _apiWithPaste$paste, _pasteState$lastConte;
+  const apiWithPaste = api;
+  const pasteState = apiWithPaste === null || apiWithPaste === void 0 ? void 0 : (_apiWithPaste$paste = apiWithPaste.paste) === null || _apiWithPaste$paste === void 0 ? void 0 : _apiWithPaste$paste.sharedState.currentState();
+  const slice = pasteState === null || pasteState === void 0 ? void 0 : (_pasteState$lastConte = pasteState.lastContentPasted) === null || _pasteState$lastConte === void 0 ? void 0 : _pasteState$lastConte.pastedSlice;
+  return slice;
+};
+const getCardUrlAtPasteRange = ({
+  editorView,
+  pasteStartPos,
+  pasteEndPos
+}) => {
+  var _editorView$state$doc, _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;
+  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;
+};
+export const setAppearanceSelection = ({
+  editorView,
+  pasteStartPos,
+  pasteEndPos,
+  targetPos
+}) => {
+  const {
+    state,
+    dispatch
+  } = editorView;
+  const maxPos = state.doc.content.size;
+  const clampedStart = Math.max(0, Math.min(pasteStartPos, maxPos));
+  const clampedEnd = Math.max(0, Math.min(pasteEndPos, maxPos));
+  const from = Math.min(clampedStart, clampedEnd);
+  const to = Math.max(clampedStart, clampedEnd);
+  const isTargetPosInBounds = targetPos !== undefined && targetPos >= 0 && targetPos <= state.doc.content.size;
+  try {
+    const nextSelection = isTargetPosInBounds && targetPos !== undefined ? NodeSelection.create(state.doc, targetPos) : TextSelection.create(state.doc, from, to);
+    const tr = state.tr.setSelection(nextSelection);
+    dispatch(tr);
+    return true;
+  } catch {
+    return false;
+  }
+};
+export const getFirstLinkRangeInSelection = editorView => {
+  const {
+    state
+  } = editorView;
+  const linkMarkType = state.schema.marks.link;
+  if (!linkMarkType) {
+    return;
+  }
+  let firstLinkRange;
+  state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos) => {
+    if (firstLinkRange || !node.isText) {
+      return;
+    }
+    if (linkMarkType.isInSet(node.marks)) {
+      firstLinkRange = {
+        from: pos,
+        to: pos + node.nodeSize
+      };
+    }
+  });
+  return firstLinkRange;
+};
+export const normalizeSelectionToLinkRangeForUrlAppearance = ({
+  editorView,
+  targetPos
+}) => {
+  if (targetPos !== undefined || getActiveLinkMark(editorView.state)) {
+    return;
+  }
+  const firstLinkRange = getFirstLinkRangeInSelection(editorView);
+  if (!firstLinkRange) {
+    return;
+  }
+  const linkRangeSelectionTr = editorView.state.tr.setSelection(TextSelection.create(editorView.state.doc, firstLinkRange.from, firstLinkRange.to));
+  editorView.dispatch(linkRangeSelectionTr);
+};
+const PasteDisplayAsMenuHorizontalView = ({
+  api,
+  allowBlockCards,
+  allowEmbeds
+}) => {
+  var _smartCardContext$val, _smartCardContext$val2, _smartCardContext$val3, _getCardAtPasteRange$, _getCardAtPasteRange, _smartCardContext$val4;
+  const intl = useIntl();
+  const {
+    editorView
+  } = useEditorToolbar();
+  const toolbarDropdownMenu = useToolbarDropdownMenu();
+  const smartCardContext = useSmartCardContext();
+  const frameRef = useRef(null);
+  const isApplyingRef = useRef(false);
+  const apiWithPasteOptionsToolbar = api;
+  const pasteRange = useSharedPluginStateWithSelector(apiWithPasteOptionsToolbar, ['pasteOptionsToolbarPlugin'], states => {
+    const pluginState = states.pasteOptionsToolbarPluginState;
+    return pluginState ? {
+      pasteEndPos: pluginState.pasteEndPos,
+      pasteStartPos: pluginState.pasteStartPos
+    } : undefined;
+  });
+  // Subscribe to card state so the menu re-renders when resolved card metadata updates.
+  useSharedPluginStateWithSelector(api, ['card'], states => {
+    return states.cardState;
+  });
+  const pastedLinkUrlFromSlice = getSingleSmartLinkUrlFromSlice(getCurrentPastedSlice(api));
+  const pastedLinkUrlFromCard = editorView && pasteRange ? getCardUrlAtPasteRange({
+    editorView,
+    pasteStartPos: pasteRange.pasteStartPos,
+    pasteEndPos: pasteRange.pasteEndPos
+  }) : undefined;
+  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 handleClick = useCallback(appearance => () => {
+    if (!editorView || !pasteRange || !pastedLinkUrl || !currentAppearance || isApplyingRef.current) {
+      return;
+    }
+    isApplyingRef.current = true;
+    const {
+      state,
+      dispatch
+    } = editorView;
+    const {
+      pasteStartPos,
+      pasteEndPos
+    } = pasteRange;
+    const cardAtPasteRange = getCardAtPasteRange(state, pasteStartPos, pasteEndPos);
+    if (appearance === 'url') {
+      if (cardAtPasteRange) {
+        var _state$doc$nodeAt, _api$analytics;
+        changeSelectedCardToLink(pastedLinkUrl, pastedLinkUrl, true, (_state$doc$nodeAt = state.doc.nodeAt(cardAtPasteRange.pos)) !== null && _state$doc$nodeAt !== void 0 ? _state$doc$nodeAt : undefined, cardAtPasteRange.pos, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.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;
+    if (targetPos !== undefined && targetPos < pasteStartPos) {
+      isApplyingRef.current = false;
+      return;
+    }
+    const didApplySelection = setAppearanceSelection({
+      editorView,
+      pasteStartPos,
+      pasteEndPos,
+      targetPos
+    });
+    if (!didApplySelection) {
+      toolbarDropdownMenu === null || toolbarDropdownMenu === void 0 ? void 0 : toolbarDropdownMenu.closeMenu(null);
+      isApplyingRef.current = false;
+      return;
+    }
+    normalizeSelectionToLinkRangeForUrlAppearance({
+      editorView,
+      targetPos
+    });
+    frameRef.current = requestAnimationFrame(() => {
+      var _api$analytics2;
+      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);
+      toolbarDropdownMenu === null || toolbarDropdownMenu === void 0 ? void 0 : toolbarDropdownMenu.closeMenu(null);
+      isApplyingRef.current = false;
+    });
+  }, [api, currentAppearance, editorView, pasteRange, pastedLinkUrl, toolbarDropdownMenu]);
+  useEffect(() => {
+    return () => {
+      if (frameRef.current !== null) {
+        cancelAnimationFrame(frameRef.current);
+      }
+      isApplyingRef.current = false;
+    };
+  }, []);
+  if (!editorView || !pasteRange || !pastedLinkUrl || !currentAppearance) {
+    return null;
+  }
+  const preview = allowEmbeds && pastedLinkUrl && ((_smartCardContext$val4 = smartCardContext.value) === null || _smartCardContext$val4 === void 0 ? void 0 : _smartCardContext$val4.extractors.getPreview(pastedLinkUrl, 'web'));
+  const blockCardNodeType = editorView.state.schema.nodes.blockCard;
+  const embedCardNodeType = editorView.state.schema.nodes.embedCard;
+  const isBlockSupportedFromAppearanceContext = allowBlockCards && blockCardNodeType && isSupportedInParent(editorView.state, Fragment.from(blockCardNodeType.createChecked({})), currentAppearance === 'url' || currentAppearance === 'inline' ? undefined : currentAppearance);
+  const isEmbedSupportedFromAppearanceContext = allowEmbeds && preview && embedCardNodeType && isSupportedInParent(editorView.state, Fragment.from(embedCardNodeType.createChecked({})), currentAppearance === 'url' || currentAppearance === 'inline' ? undefined : currentAppearance);
+  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);
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.appearanceBox,
+    gap: "space.050"
+  }, /*#__PURE__*/React.createElement(AppearanceOptionIconButton, {
+    appearance: "url",
+    currentAppearance: currentAppearance,
+    isDisabled: false,
+    label: intl.formatMessage(appearancePropsMap.url.title),
+    Icon: MinusIcon,
+    onClick: handleClick('url')
+  }), /*#__PURE__*/React.createElement(InlineAppearanceIconButton, {
+    currentAppearance: currentAppearance,
+    isDisabled: !isSmartLinkConvertible,
+    label: intl.formatMessage(appearancePropsMap.inline.title),
+    onClick: handleClick('inline')
+  }), /*#__PURE__*/React.createElement(BlockAppearanceIconButton, {
+    currentAppearance: currentAppearance,
+    isDisabled: !isSmartLinkConvertible || !isBlockSupported,
+    label: intl.formatMessage(appearancePropsMap.block.title),
+    onClick: handleClick('block')
+  }), /*#__PURE__*/React.createElement(EmbedAppearanceIconButton, {
+    currentAppearance: currentAppearance,
+    isDisabled: !isEmbedSupported,
+    label: intl.formatMessage(appearancePropsMap.embed.title),
+    onClick: handleClick('embed')
+  }));
+};
+const PasteDisplayAsMenuSection = ({
+  api,
+  allowBlockCards,
+  allowEmbeds
+}) => {
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+    title: intl.formatMessage({
+      defaultMessage: 'Display as',
+      description: 'Section title for Smart Link display options in the paste actions menu.',
+      id: 'fabric.editor.pasteDisplayAsMenu.displayAs'
+    })
+  }, /*#__PURE__*/React.createElement(PasteDisplayAsMenuHorizontalView, {
+    api: api,
+    allowBlockCards: allowBlockCards,
+    allowEmbeds: allowEmbeds
+  }));
+};
+export const getPasteDisplayAsMenuComponents = ({
+  api,
+  allowBlockCards,
+  allowEmbeds,
+  getEditorView
+}) => [{
+  type: 'menu-section',
+  key: SMART_LINK_DISPLAY_AS_PASTE_MENU_SECTION_KEY,
+  parents: [{
+    type: PASTE_MENU.type,
+    key: PASTE_MENU.key,
+    rank: 60
+  }],
+  isHidden: () => {
+    var _apiWithPasteOptionsT;
+    const apiWithPasteOptionsToolbar = api;
+    const pasteRange = apiWithPasteOptionsToolbar === null || apiWithPasteOptionsToolbar === void 0 ? void 0 : (_apiWithPasteOptionsT = apiWithPasteOptionsToolbar.pasteOptionsToolbarPlugin) === null || _apiWithPasteOptionsT === void 0 ? void 0 : _apiWithPasteOptionsT.sharedState.currentState();
+    const editorView = getEditorView();
+    if (!editorView || !pasteRange) {
+      return true;
+    }
+    const pastedSlice = getCurrentPastedSlice(api);
+    const urlFromSlice = getSingleSmartLinkUrlFromSlice(pastedSlice);
+    const urlFromCard = getCardUrlAtPasteRange({
+      editorView,
+      pasteStartPos: pasteRange.pasteStartPos,
+      pasteEndPos: pasteRange.pasteEndPos
+    });
+    return !urlFromSlice && !urlFromCard;
+  },
+  component: () => /*#__PURE__*/React.createElement(PasteDisplayAsMenuSection, {
+    api: api,
+    allowBlockCards: allowBlockCards,
+    allowEmbeds: allowEmbeds
+  })
+}];

package/dist/es2019/ui/currentPastedSmartLink.js

@@ -0,0 +1,46 @@
+const getUrlFromTextLinkNode = node => {
+  var _node$marks$0$attrs;
+  if (!node.isText || node.marks.length !== 1 || node.marks[0].type.name !== 'link') {
+    return undefined;
+  }
+  const 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;
+};
+const getUrlFromInlineCardNode = node => {
+  var _node$attrs;
+  if (node.type.name !== 'inlineCard') {
+    return undefined;
+  }
+  const url = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url;
+  return typeof url === 'string' ? url : undefined;
+};
+const significantChildren = fragment => {
+  const children = [];
+  fragment.forEach(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;
+};
+export const getSingleSmartLinkUrlFromSlice = slice => {
+  var _getUrlFromTextLinkNo, _getUrlFromTextLinkNo2;
+  if (!slice || slice.content.childCount !== 1) {
+    return undefined;
+  }
+  const topNode = slice.content.child(0);
+  const topNodeUrl = (_getUrlFromTextLinkNo = getUrlFromTextLinkNode(topNode)) !== null && _getUrlFromTextLinkNo !== void 0 ? _getUrlFromTextLinkNo : getUrlFromInlineCardNode(topNode);
+  if (topNodeUrl) {
+    return topNodeUrl;
+  }
+  if (topNode.type.name !== 'paragraph') {
+    return undefined;
+  }
+  const 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/es2019/ui/pasteDisplayAsUtils.js

@@ -0,0 +1,24 @@
+export const DISPLAY_AS_OPTIONS = ['url', 'inline', 'block', 'embed'];
+export const getCardAtPasteRange = (state, pasteStartPos, pasteEndPos) => {
+  let result;
+  const docContentSize = state.doc.content.size;
+  const clampedStart = Math.max(0, Math.min(pasteStartPos, docContentSize));
+  const clampedEnd = Math.max(0, Math.min(pasteEndPos, docContentSize));
+  const from = Math.min(clampedStart, clampedEnd);
+  const to = Math.max(clampedStart, clampedEnd);
+  try {
+    state.doc.nodesBetween(from, to, (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
+        };
+        return false;
+      }
+      return true;
+    });
+  } catch {
+    return;
+  }
+  return result;
+};

package/dist/esm/cardPlugin.js

@@ -10,6 +10,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';
@@ -26,6 +27,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 var cardPlugin = function cardPlugin(_ref) {
   var _api$base, _options$lpLinkPicker;
@@ -35,6 +37,20 @@ export var cardPlugin = function cardPlugin(_ref) {
   var previousCardProvider;
   var cardPluginEvents = createEventsQueue();
   var instanceEmbedCardTransformers = options.embedCardTransformers;
+  var editorViewForPasteMenu;
+  var pasteMenuVariant = 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(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,
@@ -80,10 +96,10 @@ export var 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;
@@ -123,6 +139,7 @@ export var cardPlugin = function cardPlugin(_ref) {
       if (!editorView) {
         return null;
       }
+      editorViewForPasteMenu = editorView;
       var breakoutEnabled = options.editorAppearance === 'full-page';
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorSmartCardEvents, {
         editorView: editorView
@@ -158,25 +175,25 @@ export var cardPlugin = function cardPlugin(_ref) {
         var _setProvider2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(providerPromise) {
           var _api$core$actions$exe;
           var provider;
-          return _regeneratorRuntime.wrap(function _callee$(_context) {
+          return _regeneratorRuntime.wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                _context.next = 2;
+                _context.next = 1;
                 return providerPromise;
-              case 2:
+              case 1:
                 provider = _context.sent;
                 if (!(previousCardProvider === provider || (options === null || options === void 0 ? void 0 : options.provider) === providerPromise)) {
-                  _context.next = 5;
+                  _context.next = 2;
                   break;
                 }
                 return _context.abrupt("return", false);
-              case 5:
+              case 2:
                 previousCardProvider = provider;
                 return _context.abrupt("return", (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(function (_ref6) {
                   var tr = _ref6.tr;
                   return _setProvider(provider)(tr);
                 })) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false);
-              case 7:
+              case 3:
               case "end":
                 return _context.stop();
             }
@@ -195,20 +212,20 @@ export var cardPlugin = function cardPlugin(_ref) {
       },
       resolveShortLinkUrl: function () {
         var _resolveShortLinkUrl = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(url) {
-          var provider, clientHolder, client, response, data, urlField, _linkObj$Id, linkObj, id;
-          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          var provider, clientHolder, client, response, data, urlField, _linkObj$Id, linkObj, id, _t;
+          return _regeneratorRuntime.wrap(function (_context2) {
             while (1) switch (_context2.prev = _context2.next) {
               case 0:
                 if (options.provider) {
-                  _context2.next = 2;
+                  _context2.next = 1;
                   break;
                 }
                 return _context2.abrupt("return", undefined);
-              case 2:
-                _context2.prev = 2;
-                _context2.next = 5;
+              case 1:
+                _context2.prev = 1;
+                _context2.next = 2;
                 return options.provider;
-              case 5:
+              case 2:
                 provider = _context2.sent;
                 // EditorCardProvider holds a CardClient instance internally. We access it
                 // directly to call fetchData, which gives us the raw ORS JSON-LD response
@@ -218,14 +235,14 @@ export var cardPlugin = function cardPlugin(_ref) {
                 clientHolder = provider;
                 client = clientHolder.cardClient;
                 if (client) {
-                  _context2.next = 10;
+                  _context2.next = 3;
                   break;
                 }
                 return _context2.abrupt("return", undefined);
-              case 10:
-                _context2.next = 12;
+              case 3:
+                _context2.next = 4;
                 return client.fetchData(url);
-              case 12:
+              case 4:
                 response = _context2.sent;
                 // ORS returns a JsonLd.Response whose data union includes BaseData,
                 // BaseCollectionData, and BaseCollectionPage. We only care about the
@@ -233,43 +250,43 @@ export var cardPlugin = function cardPlugin(_ref) {
                 // to a minimal shape rather than accessing through the full union type.
                 data = response === null || response === void 0 ? void 0 : response.data;
                 if (data) {
-                  _context2.next = 16;
+                  _context2.next = 5;
                   break;
                 }
                 return _context2.abrupt("return", undefined);
-              case 16:
+              case 5:
                 urlField = data.url; // Property<string | Link> can be a string, a Link object, or an array.
                 // Short-link responses always return a plain string URL.
                 if (!(typeof urlField === 'string' && urlField !== url)) {
-                  _context2.next = 19;
+                  _context2.next = 6;
                   break;
                 }
                 return _context2.abrupt("return", urlField);
-              case 19:
+              case 6:
                 if (!(urlField && _typeof(urlField) === 'object' && !Array.isArray(urlField))) {
-                  _context2.next = 24;
+                  _context2.next = 7;
                   break;
                 }
                 linkObj = urlField;
                 id = (_linkObj$Id = linkObj['@id']) !== null && _linkObj$Id !== void 0 ? _linkObj$Id : linkObj['href'];
                 if (!(typeof id === 'string' && id !== url)) {
-                  _context2.next = 24;
+                  _context2.next = 7;
                   break;
                 }
                 return _context2.abrupt("return", id);
-              case 24:
-                _context2.next = 28;
+              case 7:
+                _context2.next = 9;
                 break;
-              case 26:
-                _context2.prev = 26;
-                _context2.t0 = _context2["catch"](2);
-              case 28:
+              case 8:
+                _context2.prev = 8;
+                _t = _context2["catch"](1);
+              case 9:
                 return _context2.abrupt("return", undefined);
-              case 29:
+              case 10:
               case "end":
                 return _context2.stop();
             }
-          }, _callee2, null, [[2, 26]]);
+          }, _callee2, null, [[1, 8]]);
         }));
         function resolveShortLinkUrl(_x2) {
           return _resolveShortLinkUrl.apply(this, arguments);