UNPKG

@atlaskit/editor-plugin-card

Version:

Card plugin for @atlaskit/editor-core

431 lines (426 loc) 23 kB
/* PasteDisplayAsMenu.tsx generated by @compiled/babel-plugin v0.40.0 */ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator"; import "./PasteDisplayAsMenu.compiled.css"; import { ax, ix } from "@compiled/react/runtime"; import _regeneratorRuntime from "@babel/runtime/regenerator"; 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, ToolbarTooltip, 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/context'; import { Box, Flex, Pressable } from '@atlaskit/primitives/compiled'; import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure'; import { changeSelectedCardToLink, setSelectedCardAppearance } from '../pm-plugins/doc'; import { getSingleSmartLinkUrlFromSlice } from './currentPastedSmartLink'; import { getCardAtPasteRange } from './pasteDisplayAsUtils'; export var SMART_LINK_DISPLAY_AS_PASTE_MENU_SECTION_KEY = 'smart-link-display-as-paste-menu-section'; // Subset of `PasteMenuRuleFactories` we structurally consume here — kept local // to avoid importing the toolbar package (see cycle note below). // `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`). The `api` shape is augmented locally instead. var styles = { appearanceBox: "_2rko1qi0 _bfhkhfxm _19pku2gc _2hwxu2gc _otyru2gc _18u0u2gc _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66", iconWrapper: "_1e0c11p5 _yv0ehkll _1bsb1osq", 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(ToolbarTooltip, { content: label, position: "bottom" }, /*#__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'], // @ts-ignore TS7006 - isolated Fast Typecheck can't infer the selector states generic 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. // @ts-ignore TS7006 - isolated Fast Typecheck can't infer the selector states generic 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 () { var _state$doc$nodeAt2, _targetNodeAttrs$url, _targetNodeAttrs$data; 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; var targetNodeAttrs = targetPos === undefined ? undefined : (_state$doc$nodeAt2 = state.doc.nodeAt(targetPos)) === null || _state$doc$nodeAt2 === void 0 ? void 0 : _state$doc$nodeAt2.attrs; var targetNodeUrl = (_targetNodeAttrs$url = targetNodeAttrs === null || targetNodeAttrs === void 0 ? void 0 : targetNodeAttrs.url) !== null && _targetNodeAttrs$url !== void 0 ? _targetNodeAttrs$url : targetNodeAttrs === null || targetNodeAttrs === void 0 || (_targetNodeAttrs$data = targetNodeAttrs.data) === null || _targetNodeAttrs$data === void 0 ? void 0 : _targetNodeAttrs$data.url; var isRecoveredAdjacentPastedCard = expValEqualsNoExposure('confluence_editor_paste_3p_link_actions_menu', 'isEnabled', true) && targetPos === pasteStartPos - 1 && pasteStartPos === pasteEndPos && targetNodeUrl === pastedLinkUrl; if (targetPos !== undefined && targetPos < pasteStartPos && !isRecoveredAdjacentPastedCard) { 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, smartCardClientRef = _ref0.smartCardClientRef; var smartlinkAsyncHidden = /*#__PURE__*/function () { var _ref1 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(context) { var pastedUrl, isEnabled, smartCardClient, _response$meta, response, _t; return _regeneratorRuntime.wrap(function (_context) { while (1) switch (_context.prev = _context.next) { case 0: pastedUrl = context.pastedUrl; if (pastedUrl) { _context.next = 1; break; } return _context.abrupt("return", false); case 1: isEnabled = expValEqualsNoExposure('confluence_editor_paste_3p_link_actions_menu', 'isEnabled', true); smartCardClient = smartCardClientRef === null || smartCardClientRef === void 0 ? void 0 : smartCardClientRef.current; if (!(!isEnabled || !smartCardClient)) { _context.next = 2; break; } return _context.abrupt("return", true); case 2: _context.prev = 2; _context.next = 3; return smartCardClient.fetchData(pastedUrl); case 3: response = _context.sent; return _context.abrupt("return", ((_response$meta = response.meta) === null || _response$meta === void 0 ? void 0 : _response$meta.access) !== 'granted'); case 4: _context.prev = 4; _t = _context["catch"](2); return _context.abrupt("return", true); case 5: case "end": return _context.stop(); } }, _callee, null, [[2, 4]]); })); return function smartlinkAsyncHidden(_x) { return _ref1.apply(this, arguments); }; }(); return [{ type: 'menu-section', key: SMART_LINK_DISPLAY_AS_PASTE_MENU_SECTION_KEY, parents: [{ type: PASTE_MENU.type, key: PASTE_MENU.key, rank: 60 }], isAsyncHidden: smartlinkAsyncHidden, isHidden: function isHidden() { var _apiWithPasteOptionsT, _apiWithPasteOptionsT2; if (!expValEqualsNoExposure('confluence_editor_paste_3p_link_actions_menu', 'isEnabled', true)) { return true; } 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; } // Slice-shape check — delegated to the toolbar plugin's shared // `notSingleLinkRule` via the structural cast (see note above). var rules = apiWithPasteOptionsToolbar === null || apiWithPasteOptionsToolbar === void 0 || (_apiWithPasteOptionsT2 = apiWithPasteOptionsToolbar.pasteOptionsToolbarPlugin) === null || _apiWithPasteOptionsT2 === void 0 ? void 0 : _apiWithPasteOptionsT2.actions.getPasteMenuRules(); if (!rules || rules.notSingleLinkRule()) { return true; } var urlFromSlice = getSingleSmartLinkUrlFromSlice(getCurrentPastedSlice(api)); if (urlFromSlice) { return false; } // Fallback: plain-text URL paste that the card plugin already resolved into a card node in the doc. var urlFromCard = getCardUrlAtPasteRange({ editorView: editorView, pasteStartPos: pasteRange.pasteStartPos, pasteEndPos: pasteRange.pasteEndPos }); return !urlFromCard; }, component: function component() { return /*#__PURE__*/React.createElement(PasteDisplayAsMenuSection, { api: api, allowBlockCards: allowBlockCards, allowEmbeds: allowEmbeds }); } }]; };