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

MediaEditing plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.mediaEditingPlugin = void 0;
var _react = _interopRequireDefault(require("react"));
var _hooks = require("@atlaskit/editor-common/hooks");
var _commands = require("./pm-plugins/commands");
var _main = require("./pm-plugins/main");
var _ModalWrapper = require("./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 = (0, _hooks.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.default.createElement(_ModalWrapper.RenderImageEditor, {
    mediaClientConfig: uploadMediaClientConfig,
    onClose: handleOnClose,
    selectedNodeAttrs: imageEditorSelectedMedia,
    editorView: editorView
  });
};
var mediaEditingPlugin = exports.mediaEditingPlugin = function mediaEditingPlugin(_ref2) {
  var api = _ref2.api;
  return {
    name: 'mediaEditing',
    getSharedState: function getSharedState(editorState) {
      if (!editorState) {
        return null;
      }
      return _main.mediaEditingPluginKey.getState(editorState) || null;
    },
    commands: {
      showImageEditor: _commands.showImageEditor,
      hideImageEditor: _commands.hideImageEditor
    },
    pmPlugins: function pmPlugins() {
      return [{
        name: 'mediaEditingPlugin',
        plugin: _main.createPlugin
      }];
    },
    contentComponent: function contentComponent(_ref3) {
      var editorView = _ref3.editorView;
      if (!editorView) {
        return null;
      }
      return /*#__PURE__*/_react.default.createElement(ImageEditorFunctionalComponent, {
        api: api,
        editorView: editorView
      });
    }
  };
};