@atlaskit/editor-plugin-media-editing/dist/es2019/mediaEditingPlugin.js

MediaEditing plugin for @atlaskit/editor-core

import React from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { showImageEditor, hideImageEditor } from './pm-plugins/commands';
import { createPlugin, mediaEditingPluginKey } from './pm-plugins/main';
import { RenderImageEditor } from './ui/ImageEditor/ModalWrapper';
const imageEditorStateSelector = states => {
  var _states$mediaEditingS, _states$mediaEditingS2, _states$mediaState;
  return {
    isImageEditorVisible: (_states$mediaEditingS = states.mediaEditingState) === null || _states$mediaEditingS === void 0 ? void 0 : _states$mediaEditingS.isImageEditorVisible,
    imageEditorSelectedMedia: (_states$mediaEditingS2 = states.mediaEditingState) === null || _states$mediaEditingS2 === void 0 ? void 0 : _states$mediaEditingS2.imageEditorSelectedMedia,
    uploadMediaClientConfig: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.uploadMediaClientConfig
  };
};
const ImageEditorFunctionalComponent = ({
  api,
  editorView
}) => {
  const {
    isImageEditorVisible,
    imageEditorSelectedMedia,
    uploadMediaClientConfig
  } = useSharedPluginStateWithSelector(api, ['mediaEditing', 'media'], imageEditorStateSelector);
  if (!isImageEditorVisible || !imageEditorSelectedMedia || !uploadMediaClientConfig) {
    return null;
  }
  const handleOnClose = () => {
    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.mediaEditing.commands.hideImageEditor);
  };
  return /*#__PURE__*/React.createElement(RenderImageEditor, {
    mediaClientConfig: uploadMediaClientConfig,
    onClose: handleOnClose,
    selectedNodeAttrs: imageEditorSelectedMedia,
    editorView: editorView
  });
};
export const mediaEditingPlugin = ({
  api
}) => ({
  name: 'mediaEditing',
  getSharedState(editorState) {
    if (!editorState) {
      return null;
    }
    return mediaEditingPluginKey.getState(editorState) || null;
  },
  commands: {
    showImageEditor,
    hideImageEditor
  },
  pmPlugins() {
    return [{
      name: 'mediaEditingPlugin',
      plugin: createPlugin
    }];
  },
  contentComponent({
    editorView
  }) {
    if (!editorView) {
      return null;
    }
    return /*#__PURE__*/React.createElement(ImageEditorFunctionalComponent, {
      api: api,
      editorView: editorView
    });
  }
});