@atlaskit/editor-plugin-media/dist/es2019/nodeviews/mediaGroup.js

Media plugin for @atlaskit/editor-core

import React from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { WithProviders } from '@atlaskit/editor-common/provider-factory';
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { useMediaProvider } from '../ui/hooks/useMediaProvider';
import { MediaGroupNext } from './mediaGroupNext';
const selector = states => {
  var _states$editorDisable, _states$editorViewMod;
  return {
    editorDisabled: (_states$editorDisable = states.editorDisabledState) === null || _states$editorDisable === void 0 ? void 0 : _states$editorDisable.editorDisabled,
    editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
  };
};
function MediaGroupNodeViewInternal({
  renderFn,
  pluginInjectionApi
}) {
  const {
    editorDisabled,
    editorViewMode
  } = useSharedPluginStateWithSelector(pluginInjectionApi, ['editorDisabled', 'editorViewMode'], selector);
  const mediaProvider = useMediaProvider(pluginInjectionApi);
  return renderFn({
    editorDisabled,
    editorViewMode,
    mediaProvider
  });
}
class MediaGroupNodeView extends ReactNodeView {
  render(props, forwardRef) {
    const {
      providerFactory,
      mediaOptions,
      pluginInjectionApi
    } = props;
    const getPos = this.getPos;
    return /*#__PURE__*/React.createElement(WithProviders
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    , {
      providers: ['contextIdentifierProvider'],
      providerFactory: providerFactory
      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
      ,
      renderNode: ({
        contextIdentifierProvider
      }) => {
        const renderFn = ({
          mediaProvider: mediaProviderFromState,
          editorDisabled,
          editorViewMode
        }) => {
          const mediaProvider = mediaProviderFromState ? Promise.resolve(mediaProviderFromState) : undefined;
          if (!mediaProvider && !expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
            return null;
          }
          return /*#__PURE__*/React.createElement(MediaGroupNext, {
            node: this.node,
            getPos: getPos,
            view: this.view,
            forwardRef: forwardRef,
            disabled: editorDisabled,
            allowLazyLoading: mediaOptions.allowLazyLoading,
            mediaProvider: mediaProvider,
            contextIdentifierProvider: contextIdentifierProvider,
            isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
            anchorPos: this.view.state.selection.$anchor.pos,
            headPos: this.view.state.selection.$head.pos,
            mediaOptions: mediaOptions,
            editorViewMode: editorViewMode === 'view'
          });
        };
        return /*#__PURE__*/React.createElement(MediaGroupNodeViewInternal, {
          renderFn: renderFn,
          pluginInjectionApi: pluginInjectionApi
        });
      }
    });
  }
}
export const ReactMediaGroupNode = (portalProviderAPI, eventDispatcher, providerFactory, mediaOptions = {}, pluginInjectionApi) => (node, view, getPos) => {
  return new MediaGroupNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
    providerFactory,
    mediaOptions,
    pluginInjectionApi
  }).init();
};