@atlaskit/editor-plugin-media-editing/dist/esm/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';
var imageEditorStateSelector = function 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
  };
};
var ImageEditorFunctionalComponent = function ImageEditorFunctionalComponent(_ref) {
  var api = _ref.api,
    editorView = _ref.editorView;
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['mediaEditing', 'media'], imageEditorStateSelector),
    isImageEditorVisible = _useSharedPluginState.isImageEditorVisible,
    imageEditorSelectedMedia = _useSharedPluginState.imageEditorSelectedMedia,
    uploadMediaClientConfig = _useSharedPluginState.uploadMediaClientConfig;
  if (!isImageEditorVisible || !imageEditorSelectedMedia || !uploadMediaClientConfig) {
    return null;
  }
  var handleOnClose = function handleOnClose() {
    api === null || api === 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 var mediaEditingPlugin = function mediaEditingPlugin(_ref2) {
  var api = _ref2.api;
  return {
    name: 'mediaEditing',
    getSharedState: function getSharedState(editorState) {
      if (!editorState) {
        return null;
      }
      return mediaEditingPluginKey.getState(editorState) || null;
    },
    commands: {
      showImageEditor: showImageEditor,
      hideImageEditor: hideImageEditor
    },
    pmPlugins: function pmPlugins() {
      return [{
        name: 'mediaEditingPlugin',
        plugin: createPlugin
      }];
    },
    contentComponent: function contentComponent(_ref3) {
      var editorView = _ref3.editorView;
      if (!editorView) {
        return null;
      }
      return /*#__PURE__*/React.createElement(ImageEditorFunctionalComponent, {
        api: api,
        editorView: editorView
      });
    }
  };
};