@atlaskit/editor-plugin-card/dist/es2019/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';
const WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
const 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
  };
};
const 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;
  const {
    useAlternativePreloader,
    node,
    view,
    getPos,
    actionOptions,
    allowEmbeds,
    allowBlockCards,
    enableInlineUpgradeFeatures,
    pluginInjectionApi,
    onClickCallback,
    isPageSSRed,
    provider,
    CompetitorPrompt,
    intl,
    smartCardContext
  } = props;
  const {
    mode,
    resolvedInlineSmartLinks
  } = 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);
  const url = node.attrs.url;
  const CompetitorPromptComponent = CompetitorPrompt && url ? /*#__PURE__*/React.createElement(CompetitorPrompt, {
    sourceUrl: url,
    linkType: "inline"
  }) : null;
  useEffect(() => {
    if (expValEquals('platform_editor_smartlink_local_cache', 'isEnabled', true)) {
      // Refresh cache in the background
      provider === null || provider === void 0 ? void 0 : provider.then(providerInstance => {
        var _refreshCache, _ref;
        (_refreshCache = (_ref = providerInstance).refreshCache) === null || _refreshCache === void 0 ? void 0 : _refreshCache.call(_ref, props.node);
      });
    }
  }, [provider, props.node]);
  const linkPosition = useMemo(() => {
    if (!getPos || typeof getPos === 'boolean') {
      return undefined;
    }
    const pos = getPos();
    return typeof pos === 'number' ? pos : undefined;
  }, [getPos]);
  const isChangeboardTarget = linkPosition !== undefined && (resolvedInlineSmartLinks === null || resolvedInlineSmartLinks === void 0 ? void 0 : (_resolvedInlineSmartL = resolvedInlineSmartLinks[0]) === null || _resolvedInlineSmartL === void 0 ? void 0 : _resolvedInlineSmartL.pos) === linkPosition;
  const 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 const inlineCardNodeView = ({
  inlineCardViewProducer
}) => (node, view, getPos, decorations) => {
  return inlineCardViewProducer(node, view, getPos, decorations);
};