@atlaskit/editor-plugin-card/dist/esm/nodeviews/inlineCard.js

Card plugin for @atlaskit/editor-core

import _extends from "@babel/runtime/helpers/extends";
import React, { useEffect, useMemo } from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { UnsupportedInline } from '@atlaskit/editor-common/ui';
import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
import { getAwarenessProps } from '../pm-plugins/utils';
import { SmartCardSSRReactContextsProvider } from '../ui/SmartCardSSRReactContextsProvider';
import { Card } from './genericCard';
import { InlineCardWithAwareness } from './inlineCardWithAwareness';
var WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
var selectorWithCard = function selectorWithCard(states) {
  var _states$editorViewMod, _states$cardState;
  return {
    mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode,
    resolvedInlineSmartLinks: (_states$cardState = states.cardState) === null || _states$cardState === void 0 ? void 0 : _states$cardState.resolvedInlineSmartLinks
  };
};
var selectorWithoutCard = function selectorWithoutCard(states) {
  var _states$editorViewMod2;
  return {
    mode: (_states$editorViewMod2 = states.editorViewModeState) === null || _states$editorViewMod2 === void 0 ? void 0 : _states$editorViewMod2.mode,
    resolvedInlineSmartLinks: undefined
  };
};

/**
 * Inline card node view component that renders a Smart Link inline card within the editor.
 *
 * @param props
 * @example
 */
export function InlineCardNodeView(props) {
  var _resolvedInlineSmartL;
  var useAlternativePreloader = props.useAlternativePreloader,
    node = props.node,
    view = props.view,
    getPos = props.getPos,
    actionOptions = props.actionOptions,
    allowEmbeds = props.allowEmbeds,
    allowBlockCards = props.allowBlockCards,
    enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
    pluginInjectionApi = props.pluginInjectionApi,
    onClickCallback = props.onClickCallback,
    isPageSSRed = props.isPageSSRed,
    provider = props.provider,
    CompetitorPrompt = props.CompetitorPrompt,
    intl = props.intl,
    smartCardContext = props.smartCardContext;
  var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, expVal('cc_dnd_smart_link_changeboard_platform_css', 'isEnabled', false) && fg('cc_drag_and_drop_smart_link_from_content_to_tree') ? ['editorViewMode', 'card'] : ['editorViewMode'], expVal('cc_dnd_smart_link_changeboard_platform_css', 'isEnabled', false) && fg('cc_drag_and_drop_smart_link_from_content_to_tree') ? selectorWithCard : selectorWithoutCard),
    mode = _useSharedPluginState.mode,
    resolvedInlineSmartLinks = _useSharedPluginState.resolvedInlineSmartLinks;
  var url = node.attrs.url;
  var CompetitorPromptComponent = CompetitorPrompt && url ? /*#__PURE__*/React.createElement(CompetitorPrompt, {
    sourceUrl: url,
    linkType: "inline"
  }) : null;
  useEffect(function () {
    if (expValEquals('platform_editor_smartlink_local_cache', 'isEnabled', true)) {
      // Refresh cache in the background
      provider === null || provider === void 0 || provider.then(function (providerInstance) {
        var _refreshCache, _ref;
        (_refreshCache = (_ref = providerInstance).refreshCache) === null || _refreshCache === void 0 || _refreshCache.call(_ref, props.node);
      });
    }
  }, [provider, props.node]);
  var linkPosition = useMemo(function () {
    if (!getPos || typeof getPos === 'boolean') {
      return undefined;
    }
    var pos = getPos();
    return typeof pos === 'number' ? pos : undefined;
  }, [getPos]);
  var isChangeboardTarget = linkPosition !== undefined && (resolvedInlineSmartLinks === null || resolvedInlineSmartLinks === void 0 || (_resolvedInlineSmartL = resolvedInlineSmartLinks[0]) === null || _resolvedInlineSmartL === void 0 ? void 0 : _resolvedInlineSmartL.pos) === linkPosition;
  var inlineCardContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, _extends({
    node: node,
    view: view,
    getPos: getPos,
    actionOptions: actionOptions,
    useAlternativePreloader: useAlternativePreloader,
    pluginInjectionApi: pluginInjectionApi,
    onClickCallback: onClickCallback,
    isPageSSRed: isPageSSRed,
    provider: provider,
    appearance: "inline"
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
  }, enableInlineUpgradeFeatures && getAwarenessProps(view.state, getPos, allowEmbeds, allowBlockCards, mode === 'view'))), CompetitorPromptComponent);
  return /*#__PURE__*/React.createElement(SmartCardSSRReactContextsProvider, {
    intl: intl,
    smartCardContext: smartCardContext
  }, /*#__PURE__*/React.createElement(SmartLinkDraggable, {
    url: url,
    appearance: SMART_LINK_APPEARANCE.INLINE,
    source: SMART_LINK_DRAG_TYPES.EDITOR,
    isChangeboardTarget: isChangeboardTarget
  }, inlineCardContent));
}
export var inlineCardNodeView = function inlineCardNodeView(_ref2) {
  var inlineCardViewProducer = _ref2.inlineCardViewProducer;
  return function (node, view, getPos, decorations) {
    return inlineCardViewProducer(node, view, getPos, decorations);
  };
};