@atlaskit/editor-plugin-card 16.10.3 → 16.11.1

package/dist/esm/ui/PasteDisplayAsMenu.js

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

package/dist/esm/ui/currentPastedSmartLink.js

@@ -0,0 +1,46 @@
+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;
+};
+export var 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/esm/ui/pasteDisplayAsUtils.js

@@ -0,0 +1,24 @@
+export var DISPLAY_AS_OPTIONS = ['url', 'inline', 'block', 'embed'];
+export var 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/types/cardPluginType.d.ts

@@ -15,6 +15,7 @@ import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-too
 import type { GridPlugin } from '@atlaskit/editor-plugin-grid';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
+import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { CardPluginOptions, CardPluginState } from './types';
 type DummyAnnotationPlugin = NextEditorPlugin<'annotation', {
@@ -36,7 +37,8 @@ export type CardPluginDependencies = [
     OptionalPlugin<DummyAnnotationPlugin>,
     OptionalPlugin<ConnectivityPlugin>,
     OptionalPlugin<BasePlugin>,
-    OptionalPlugin<ToolbarPlugin>
+    OptionalPlugin<ToolbarPlugin>,
+    OptionalPlugin<UiControlRegistryPlugin>
 ];
 export type CardPlugin = NextEditorPlugin<'card', {
     actions: CardPluginActions;

package/dist/types/types/index.d.ts

@@ -122,6 +122,7 @@ export type CardPluginOptions = CardOptions & {
     disableFloatingToolbar?: boolean;
     editorAppearance?: EditorAppearance;
     embedCardTransformers?: EmbedCardTransformers;
+    enablePasteDisplayAsMenu?: boolean;
     fullWidthMode?: boolean;
     isPageSSRed?: boolean;
     linkPicker?: LinkPickerOptions;

package/dist/types/ui/PasteDisplayAsMenu.d.ts

@@ -0,0 +1,25 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
+import type { CardPlugin } from '../cardPluginType';
+export declare const SMART_LINK_DISPLAY_AS_PASTE_MENU_SECTION_KEY = "smart-link-display-as-paste-menu-section";
+export declare const setAppearanceSelection: ({ editorView, pasteStartPos, pasteEndPos, targetPos, }: {
+    editorView: EditorView;
+    pasteEndPos: number;
+    pasteStartPos: number;
+    targetPos: number | undefined;
+}) => boolean;
+export declare const getFirstLinkRangeInSelection: (editorView: EditorView) => {
+    from: number;
+    to: number;
+} | undefined;
+export declare const normalizeSelectionToLinkRangeForUrlAppearance: ({ editorView, targetPos, }: {
+    editorView: EditorView;
+    targetPos: number | undefined;
+}) => void;
+export declare const getPasteDisplayAsMenuComponents: ({ api, allowBlockCards, allowEmbeds, getEditorView, }: {
+    allowBlockCards: boolean;
+    allowEmbeds?: boolean;
+    api: ExtractInjectionAPI<CardPlugin> | undefined;
+    getEditorView: () => EditorView | undefined;
+}) => RegisterComponent[];

package/dist/types/ui/currentPastedSmartLink.d.ts

@@ -0,0 +1,2 @@
+import type { Slice } from '@atlaskit/editor-prosemirror/model';
+export declare const getSingleSmartLinkUrlFromSlice: (slice: Slice | undefined) => string | undefined;

package/dist/types/ui/pasteDisplayAsUtils.d.ts

@@ -0,0 +1,7 @@
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const DISPLAY_AS_OPTIONS: readonly ["url", "inline", "block", "embed"];
+export type DisplayAsOption = (typeof DISPLAY_AS_OPTIONS)[number];
+export declare const getCardAtPasteRange: (state: EditorState, pasteStartPos: number, pasteEndPos: number) => {
+    appearance: Exclude<DisplayAsOption, "url">;
+    pos: number;
+} | undefined;

package/dist/types-ts4.5/cardPluginType.d.ts

@@ -15,6 +15,7 @@ import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-too
 import type { GridPlugin } from '@atlaskit/editor-plugin-grid';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
+import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { CardPluginOptions, CardPluginState } from './types';
 type DummyAnnotationPlugin = NextEditorPlugin<'annotation', {
@@ -36,7 +37,8 @@ export type CardPluginDependencies = [
     OptionalPlugin<DummyAnnotationPlugin>,
     OptionalPlugin<ConnectivityPlugin>,
     OptionalPlugin<BasePlugin>,
-    OptionalPlugin<ToolbarPlugin>
+    OptionalPlugin<ToolbarPlugin>,
+    OptionalPlugin<UiControlRegistryPlugin>
 ];
 export type CardPlugin = NextEditorPlugin<'card', {
     actions: CardPluginActions;

package/dist/types-ts4.5/types/index.d.ts

@@ -122,6 +122,7 @@ export type CardPluginOptions = CardOptions & {
     disableFloatingToolbar?: boolean;
     editorAppearance?: EditorAppearance;
     embedCardTransformers?: EmbedCardTransformers;
+    enablePasteDisplayAsMenu?: boolean;
     fullWidthMode?: boolean;
     isPageSSRed?: boolean;
     linkPicker?: LinkPickerOptions;

package/dist/types-ts4.5/ui/PasteDisplayAsMenu.d.ts

@@ -0,0 +1,25 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { RegisterComponent } from '@atlaskit/editor-ui-control-model';
+import type { CardPlugin } from '../cardPluginType';
+export declare const SMART_LINK_DISPLAY_AS_PASTE_MENU_SECTION_KEY = "smart-link-display-as-paste-menu-section";
+export declare const setAppearanceSelection: ({ editorView, pasteStartPos, pasteEndPos, targetPos, }: {
+    editorView: EditorView;
+    pasteEndPos: number;
+    pasteStartPos: number;
+    targetPos: number | undefined;
+}) => boolean;
+export declare const getFirstLinkRangeInSelection: (editorView: EditorView) => {
+    from: number;
+    to: number;
+} | undefined;
+export declare const normalizeSelectionToLinkRangeForUrlAppearance: ({ editorView, targetPos, }: {
+    editorView: EditorView;
+    targetPos: number | undefined;
+}) => void;
+export declare const getPasteDisplayAsMenuComponents: ({ api, allowBlockCards, allowEmbeds, getEditorView, }: {
+    allowBlockCards: boolean;
+    allowEmbeds?: boolean;
+    api: ExtractInjectionAPI<CardPlugin> | undefined;
+    getEditorView: () => EditorView | undefined;
+}) => RegisterComponent[];

package/dist/types-ts4.5/ui/currentPastedSmartLink.d.ts

@@ -0,0 +1,2 @@
+import type { Slice } from '@atlaskit/editor-prosemirror/model';
+export declare const getSingleSmartLinkUrlFromSlice: (slice: Slice | undefined) => string | undefined;

package/dist/types-ts4.5/ui/pasteDisplayAsUtils.d.ts

@@ -0,0 +1,12 @@
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const DISPLAY_AS_OPTIONS: readonly [
+    "url",
+    "inline",
+    "block",
+    "embed"
+];
+export type DisplayAsOption = (typeof DISPLAY_AS_OPTIONS)[number];
+export declare const getCardAtPasteRange: (state: EditorState, pasteStartPos: number, pasteEndPos: number) => {
+    appearance: Exclude<DisplayAsOption, "url">;
+    pos: number;
+} | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "16.10.3",
+	"version": "16.11.1",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,6 +31,8 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^52.15.0",
 		"@atlaskit/analytics-next": "^11.2.0",
+		"@atlaskit/button": "^23.11.0",
+		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/custom-steps": "^0.17.0",
 		"@atlaskit/editor-card-provider": "^6.8.0",
 		"@atlaskit/editor-plugin-analytics": "^10.1.0",
@@ -43,16 +45,18 @@
 		"@atlaskit/editor-plugin-floating-toolbar": "^12.2.0",
 		"@atlaskit/editor-plugin-grid": "^10.2.0",
 		"@atlaskit/editor-plugin-toolbar": "^7.3.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^4.1.0",
 		"@atlaskit/editor-plugin-width": "^11.1.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.11.0",
 		"@atlaskit/editor-smart-link-draggable": "^0.5.0",
+		"@atlaskit/editor-toolbar": "^1.9.0",
 		"@atlaskit/frontend-utilities": "^3.3.0",
 		"@atlaskit/icon": "^35.3.0",
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/link-analytics": "^11.1.0",
 		"@atlaskit/link-client-extension": "^6.1.0",
-		"@atlaskit/link-datasource": "^5.4.0",
+		"@atlaskit/link-datasource": "^5.5.0",
 		"@atlaskit/link-extractors": "^2.7.0",
 		"@atlaskit/linking-common": "^9.12.0",
 		"@atlaskit/linking-types": "^14.4.0",
@@ -61,8 +65,8 @@
 		"@atlaskit/platform-feature-flags-react": "^0.5.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
-		"@atlaskit/smart-card": "^44.16.0",
-		"@atlaskit/tmp-editor-statsig": "^85.0.0",
+		"@atlaskit/smart-card": "^44.20.0",
+		"@atlaskit/tmp-editor-statsig": "^87.0.0",
 		"@atlaskit/tokens": "^13.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -72,7 +76,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.50.0",
+		"@atlaskit/editor-common": "^114.55.0",
 		"@atlaskit/link-provider": "^4.4.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"