@atlaskit/editor-core 150.0.3 → 151.1.2

package/dist/cjs/plugins/media/nodeviews/mediaInline.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactMediaInlineNode = exports.MediaInlineNodeView = exports.MediaInline = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _nodeviews = require("../../../nodeviews/");
+
+var _mediaCard = require("@atlaskit/media-card");
+
+var _editorCommon = require("@atlaskit/editor-common");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var MediaInline = function MediaInline(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      viewMediaClientConfig = _useState2[0],
+      setViewMediaClientConfig = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    updateViewMediaClientConfig(props);
+  }, [props]);
+
+  var updateViewMediaClientConfig = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(props) {
+      var mediaProvider, _viewMediaClientConfig;
+
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return props.mediaProvider;
+
+            case 2:
+              mediaProvider = _context.sent;
+
+              if (mediaProvider) {
+                _viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
+                setViewMediaClientConfig(_viewMediaClientConfig);
+              }
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function updateViewMediaClientConfig(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var _props$node$attrs = props.node.attrs,
+      id = _props$node$attrs.id,
+      collection = _props$node$attrs.collection;
+  var identifier = {
+    id: id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
+    identifier: identifier,
+    mediaClientConfig: viewMediaClientConfig
+  });
+};
+
+exports.MediaInline = MediaInline;
+
+var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
+  (0, _inherits2.default)(MediaInlineNodeView, _ReactNodeView);
+
+  var _super = _createSuper(MediaInlineNodeView);
+
+  function MediaInlineNodeView() {
+    (0, _classCallCheck2.default)(this, MediaInlineNodeView);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(MediaInlineNodeView, [{
+    key: "createDomRef",
+    value: function createDomRef() {
+      var domRef = document.createElement('span');
+      domRef.contentEditable = 'false';
+      return domRef;
+    }
+  }, {
+    key: "getContentDOM",
+    value: function getContentDOM() {
+      var dom = document.createElement('span');
+      return {
+        dom: dom
+      };
+    }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation() {
+      return true;
+    }
+  }, {
+    key: "viewShouldUpdate",
+    value: function viewShouldUpdate(nextNode) {
+      if (this.node.attrs !== nextNode.attrs) {
+        return true;
+      }
+
+      return false;
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      var _this = this;
+
+      var providerFactory = props.providerFactory;
+      return /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
+        providers: ['mediaProvider'],
+        providerFactory: providerFactory,
+        renderNode: function renderNode(_ref2) {
+          var mediaProvider = _ref2.mediaProvider;
+
+          if (!mediaProvider) {
+            return null;
+          }
+
+          return /*#__PURE__*/_react.default.createElement(MediaInline, {
+            identifier: _this.node.attrs.id,
+            mediaProvider: mediaProvider,
+            node: _this.node
+          });
+        }
+      });
+    }
+  }]);
+  return MediaInlineNodeView;
+}(_nodeviews.ReactNodeView);
+
+exports.MediaInlineNodeView = MediaInlineNodeView;
+
+var ReactMediaInlineNode = function ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory) {
+  return function (node, view, getPos) {
+    return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
+      providerFactory: providerFactory
+    }).init();
+  };
+};
+
+exports.ReactMediaInlineNode = ReactMediaInlineNode;

package/dist/cjs/plugins/media/pm-plugins/main.js

@@ -59,6 +59,8 @@ var _types = require("../../analytics/types");
 
 var _isImage = require("../utils/is-image");
 
+var _document = require("../../../utils/document");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -100,7 +102,7 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "pendingTask", Promise.resolve(null));
     (0, _defineProperty2.default)(this, "destroyed", false);
     (0, _defineProperty2.default)(this, "removeOnCloseListener", function () {});
-    (0, _defineProperty2.default)(this, "onPopupToogleCallback", function () {});
+    (0, _defineProperty2.default)(this, "onPopupToggleCallback", function () {});
     (0, _defineProperty2.default)(this, "pickers", []);
     (0, _defineProperty2.default)(this, "pickerPromises", []);
     (0, _defineProperty2.default)(this, "onContextIdentifierProvider", /*#__PURE__*/function () {
@@ -259,11 +261,12 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
 
       var type = _ref3.type;
       var _this$view$state$sche = _this.view.state.schema.nodes,
+          mediaInline = _this$view$state$sche.mediaInline,
           mediaSingle = _this$view$state$sche.mediaSingle,
           media = _this$view$state$sche.media;
 
       if ((_this$mediaOptions = _this.mediaOptions) !== null && _this$mediaOptions !== void 0 && _this$mediaOptions.allowMediaInline) {
-        return type === mediaSingle || type === media;
+        return type === mediaSingle || type === media || type === mediaInline;
       }
 
       return type === mediaSingle;
@@ -272,6 +275,10 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
       return !!_this.uploadMediaClientConfig && !!_this.uploadMediaClientConfig.userAuthProvider;
     });
     (0, _defineProperty2.default)(this, "insertFile", function (mediaState, onMediaStateChanged, pickerType) {
+      var _this$mediaOptions2;
+
+      var state = _this.view.state;
+
       var mediaStateWithContext = _objectSpread(_objectSpread({}, mediaState), {}, {
         contextId: _this.contextIdentifierProvider ? _this.contextIdentifierProvider.objectId : undefined
       });
@@ -293,8 +300,10 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
         });
       }
 
-      if ((0, _mediaSingle.isMediaSingle)(_this.view.state.schema, mediaStateWithContext.fileMimeType)) {
+      if ((0, _mediaSingle.isMediaSingle)(state.schema, mediaStateWithContext.fileMimeType)) {
         (0, _mediaSingle.insertMediaSingleNode)(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert);
+      } else if ((_this$mediaOptions2 = _this.mediaOptions) !== null && _this$mediaOptions2 !== void 0 && _this$mediaOptions2.allowMediaInline && !(0, _document.isInEmptyLine)(state) && !(0, _mediaCommon.isInsidePotentialEmptyParagraph)(state) && (0, _mediaFiles.canInsertMediaInline)(state)) {
+        (0, _mediaFiles.insertMediaInlineNode)(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
       } else {
         (0, _mediaFiles.insertMediaGroupNode)(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType));
       } // do events when media state changes
@@ -344,7 +353,7 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
       return (0, _mediaCommon.splitMediaGroup)(_this.view);
     });
     (0, _defineProperty2.default)(this, "onPopupPickerClose", function () {
-      _this.onPopupToogleCallback(false);
+      _this.onPopupToggleCallback(false);
     });
     (0, _defineProperty2.default)(this, "shouldUseMediaPickerPopup", function () {
       if (!_this.mediaOptions || _this.mediaOptions && _this.mediaOptions.useMediaPickerPopup === undefined) {
@@ -364,13 +373,13 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
 
       _this.popupPicker.show();
 
-      _this.onPopupToogleCallback(true);
+      _this.onPopupToggleCallback(true);
     });
     (0, _defineProperty2.default)(this, "setBrowseFn", function (browseFn) {
       _this.openMediaPickerBrowser = browseFn;
     });
-    (0, _defineProperty2.default)(this, "onPopupToggle", function (onPopupToogleCallback) {
-      _this.onPopupToogleCallback = onPopupToogleCallback;
+    (0, _defineProperty2.default)(this, "onPopupToggle", function (onPopupToggleCallback) {
+      _this.onPopupToggleCallback = onPopupToggleCallback;
     });
     (0, _defineProperty2.default)(this, "waitForPendingTasks", function (timeout, lastTask) {
       if (lastTask && _this.pendingTask === lastTask) {
@@ -578,7 +587,7 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
   }, {
     key: "getDomElement",
     value: function getDomElement(domAtPos) {
-      var _this$mediaOptions2;
+      var _this$mediaOptions3;
 
       var selection = this.view.state.selection;
 
@@ -590,7 +599,7 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
         return;
       }
 
-      var position = (_this$mediaOptions2 = this.mediaOptions) !== null && _this$mediaOptions2 !== void 0 && _this$mediaOptions2.allowMediaInline ? selection.from + 1 : selection.from;
+      var position = (_this$mediaOptions3 = this.mediaOptions) !== null && _this$mediaOptions3 !== void 0 && _this$mediaOptions3.allowMediaInline ? selection.from + 1 : selection.from;
       var node = (0, _prosemirrorUtils.findDomRefAtPos)(position, domAtPos);
 
       if (node) {

package/dist/cjs/plugins/media/toolbar/index.js

@@ -13,6 +13,8 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _react = _interopRequireDefault(require("react"));
 
+var _prosemirrorState = require("prosemirror-state");
+
 var _prosemirrorUtils = require("prosemirror-utils");
 
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
@@ -53,6 +55,8 @@ var _filePreviewItem = require("./filePreviewItem");
 
 var _utils = require("./utils");
 
+var _prosemirrorModel = require("prosemirror-model");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -65,13 +69,44 @@ var remove = function remove(state, dispatch) {
   return true;
 };
 
-var removeMediaCard = function removeMediaCard(state, mediaPluginState) {
-  var getPos = function getPos() {
-    var mediaOffset = state.selection.$from.parentOffset + 1;
-    return mediaOffset;
-  };
+var handleRemoveMediaGroup = function handleRemoveMediaGroup(state, dispatch) {
+  var tr = (0, _utils.removeMediaGroupNode)(state);
+
+  if (dispatch) {
+    dispatch(tr);
+  }
+
+  return true;
+};
+
+var changeMediaCardToInline = function changeMediaCardToInline(state, dispatch) {
+  var _state$schema$nodes = state.schema.nodes,
+      media = _state$schema$nodes.media,
+      mediaInline = _state$schema$nodes.mediaInline,
+      paragraph = _state$schema$nodes.paragraph;
+  var selectedNode = state.selection instanceof _prosemirrorState.NodeSelection && state.selection.node;
+
+  if (!selectedNode || !selectedNode.type === media) {
+    return false;
+  }
+
+  var mediaInlineNode = mediaInline.create({
+    id: selectedNode.attrs.id,
+    collection: selectedNode.attrs.collection
+  });
+  var space = state.schema.text(' ');
+
+  var content = _prosemirrorModel.Fragment.from([mediaInlineNode, space]);
+
+  var node = paragraph.createChecked({}, content);
+  var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
+  var tr = (0, _utils.removeMediaGroupNode)(state);
+  tr = (0, _prosemirrorUtils.safeInsert)(node, nodePos, true)(tr);
+
+  if (dispatch) {
+    dispatch(tr);
+  }
 
-  mediaPluginState.handleMediaNodeRemoval(undefined, getPos);
   return true;
 };
 
@@ -83,9 +118,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     options: [{
       title: intl.formatMessage(_messages2.messages.inline),
       selected: false,
-      onClick: function onClick() {
-        return true;
-      },
+      onClick: changeMediaCardToInline,
       testId: 'inline-appearance'
     }, {
       title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
@@ -129,9 +162,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     onFocus: (0, _decoration.hoverDecoration)(mediaGroup, true),
     onBlur: (0, _decoration.hoverDecoration)(mediaGroup, false),
     title: intl.formatMessage(_messages.default.remove),
-    onClick: function onClick(state) {
-      return removeMediaCard(state, mediaPluginState);
-    },
+    onClick: handleRemoveMediaGroup,
     testId: 'media-toolbar-remove-button'
   }];
   return items;
@@ -236,10 +267,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
 
 var floatingToolbar = function floatingToolbar(state, intl) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var _state$schema$nodes = state.schema.nodes,
-      media = _state$schema$nodes.media,
-      mediaSingle = _state$schema$nodes.mediaSingle,
-      mediaGroup = _state$schema$nodes.mediaGroup;
+  var _state$schema$nodes2 = state.schema.nodes,
+      media = _state$schema$nodes2.media,
+      mediaInline = _state$schema$nodes2.mediaInline,
+      mediaSingle = _state$schema$nodes2.mediaSingle,
+      mediaGroup = _state$schema$nodes2.mediaGroup;
   var altTextValidator = options.altTextValidator,
       allowLinking = options.allowLinking,
       allowAltTextOnImages = options.allowAltTextOnImages,
@@ -254,7 +286,7 @@ var floatingToolbar = function floatingToolbar(state, intl) {
     return;
   }
 
-  var nodeType = allowMediaInline ? [mediaSingle, media] : [mediaSingle];
+  var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
   var baseToolbar = {
     title: 'Media floating controls',
     nodeType: nodeType,

package/dist/cjs/plugins/media/toolbar/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.downloadMedia = exports.getSelectedMediaContainerNodeAttrs = void 0;
+exports.removeMediaGroupNode = exports.downloadMedia = exports.getSelectedMediaContainerNodeAttrs = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -13,6 +13,8 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _mediaClient = require("@atlaskit/media-client");
 
+var _prosemirrorUtils = require("prosemirror-utils");
+
 var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
   var selectedNode = mediaPluginState.selectedMediaContainerNode();
 
@@ -74,4 +76,20 @@ var downloadMedia = /*#__PURE__*/function () {
   };
 }();
 
-exports.downloadMedia = downloadMedia;
+exports.downloadMedia = downloadMedia;
+
+var removeMediaGroupNode = function removeMediaGroupNode(state) {
+  var mediaGroup = state.schema.nodes.mediaGroup;
+  var mediaGroupParent = (0, _prosemirrorUtils.findParentNodeOfType)(mediaGroup)(state.selection);
+  var tr = state.tr; // If it is the last media group in filmstrip, remove the entire filmstrip
+
+  if (mediaGroupParent && mediaGroupParent.node.childCount === 1) {
+    tr = (0, _prosemirrorUtils.removeParentNodeOfType)(mediaGroup)(tr);
+  } else {
+    tr = (0, _prosemirrorUtils.removeSelectedNode)(tr);
+  }
+
+  return tr;
+};
+
+exports.removeMediaGroupNode = removeMediaGroupNode;

package/dist/cjs/plugins/media/utils/media-files.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPosInList = exports.insertMediaGroupNode = void 0;
+exports.getPosInList = exports.insertMediaGroupNode = exports.insertMediaInlineNode = exports.canInsertMediaInline = void 0;
 
 var _prosemirrorModel = require("prosemirror-model");
 
@@ -19,6 +19,13 @@ var _nodes = require("../../../utils/nodes");
 
 var _analytics = require("../../analytics");
 
+var canInsertMediaInline = function canInsertMediaInline(state) {
+  var node = state.schema.nodes.mediaInline.create({});
+  return (0, _prosemirrorUtils.canInsert)(state.selection.$to, _prosemirrorModel.Fragment.from(node));
+};
+
+exports.canInsertMediaInline = canInsertMediaInline;
+
 var getInsertMediaGroupAnalytics = function getInsertMediaGroupAnalytics(mediaState, inputMethod) {
   var media = '';
 
@@ -40,6 +47,21 @@ var getInsertMediaGroupAnalytics = function getInsertMediaGroupAnalytics(mediaSt
     eventType: _analytics.EVENT_TYPE.TRACK
   };
 };
+
+var getInsertMediaInlineAnalytics = function getInsertMediaInlineAnalytics(mediaState, inputMethod) {
+  var media = mediaState.fileMimeType || 'unknown';
+  return {
+    action: _analytics.ACTION.INSERTED,
+    actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.MEDIA,
+    attributes: {
+      type: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE,
+      inputMethod: inputMethod,
+      fileExtension: media
+    },
+    eventType: _analytics.EVENT_TYPE.TRACK
+  };
+};
 /**
  * Check if current editor selections is a media group or not.
  * @param state Editor state
@@ -64,6 +86,48 @@ function shouldAppendParagraph(state, node) {
   var wasMediaNode = node && node.type === media;
   return ((0, _utils.insideTableCell)(state) || (0, _utils.isInListItem)(state) || (0, _utils.isInLayoutColumn)(state) || (0, _position.atTheEndOfDoc)(state) && (!(0, _mediaCommon.posOfPrecedingMediaGroup)(state) || (0, _mediaCommon.isSelectionNonMediaBlockNode)(state))) && !wasMediaNode;
 }
+/**
+ * Create a new media inline to insert the new media.
+ * @param view Editor view
+ * @param mediaState Media file to be added to the editor
+ * @param collection Collection for the media to be added
+ */
+
+
+var insertMediaInlineNode = function insertMediaInlineNode(view, mediaState, collection, inputMethod) {
+  var state = view.state,
+      dispatch = view.dispatch;
+  var schema = state.schema,
+      tr = state.tr;
+  var mediaInline = schema.nodes.mediaInline; // Do nothing if no media found
+
+  if (!mediaInline || !mediaState || collection === undefined) {
+    return false;
+  }
+
+  var id = mediaState.id;
+  var mediaInlineNode = mediaInline.create({
+    id: id,
+    collection: collection
+  });
+  var space = state.schema.text(' ');
+  var pos = state.selection.$to.pos;
+
+  var content = _prosemirrorModel.Fragment.from([mediaInlineNode, space]); // Delete the selection if a selection is made
+
+
+  var deleteRange = findDeleteRange(state);
+
+  if (!deleteRange) {
+    tr.insert(pos, content);
+  } else {
+    tr.insert(pos, content).deleteRange(deleteRange.start, deleteRange.end);
+  }
+
+  (0, _analytics.addAnalytics)(state, tr, getInsertMediaInlineAnalytics(mediaState, inputMethod));
+  dispatch(tr);
+  return true;
+};
 /**
  * Insert a media into an existing media group
  * or create a new media group to insert the new media.
@@ -73,6 +137,8 @@ function shouldAppendParagraph(state, node) {
  */
 
 
+exports.insertMediaInlineNode = insertMediaInlineNode;
+
 var insertMediaGroupNode = function insertMediaGroupNode(view, mediaStates, collection, inputMethod) {
   var state = view.state,
       dispatch = view.dispatch;

package/dist/cjs/plugins/panel/index.js

@@ -55,8 +55,7 @@ var panelPlugin = function panelPlugin() {
   return {
     name: 'panel',
     nodes: function nodes() {
-      //TODO: ED-10445 remove this check after emoji panels moved to full schema
-      var panelNode = options.UNSAFE_allowCustomPanel ? _adfSchema.customPanel : _adfSchema.panel;
+      var panelNode = (0, _adfSchema.customPanel)(!!options.UNSAFE_allowCustomPanel);
       return [{
         name: 'panel',
         node: panelNode
@@ -149,7 +148,7 @@ var panelPlugin = function panelPlugin() {
           }
         }];
 
-        if (options.UNSAFE_allowCustomPanel) {
+        if (options.UNSAFE_allowCustomPanelEdit && options.UNSAFE_allowCustomPanel) {
           quickInsertOptions.push({
             id: 'custompanel',
             title: formatMessage(_messages.messages.customPanel),

package/dist/cjs/plugins/panel/message.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+
+var _reactIntl = require("react-intl");
+
+var messages = (0, _reactIntl.defineMessages)({
+  info: {
+    id: 'fabric.editor.info',
+    defaultMessage: 'Info',
+    description: 'Panels provide a way to highlight text. The info panel has a blue background.'
+  },
+  note: {
+    id: 'fabric.editor.note',
+    defaultMessage: 'Note',
+    description: 'Panels provide a way to highlight text. The note panel has a purple background.'
+  },
+  success: {
+    id: 'fabric.editor.success',
+    defaultMessage: 'Success',
+    description: 'Panels provide a way to highlight text. The success panel has a green background.'
+  },
+  warning: {
+    id: 'fabric.editor.warning',
+    defaultMessage: 'Warning',
+    description: 'Panels provide a way to highlight text. The warning panel has a yellow background.'
+  },
+  error: {
+    id: 'fabric.editor.error',
+    defaultMessage: 'Error',
+    description: 'Panels provide a way to highlight text. The error panel has a red background.'
+  },
+  emoji: {
+    id: 'fabric.editor.panel.emoji',
+    defaultMessage: 'Add emoji',
+    description: 'Select the panel icon'
+  },
+  backgroundColor: {
+    id: 'fabric.editor.panel.backgroundColor',
+    defaultMessage: 'Background color',
+    description: 'Select the panel background color.'
+  }
+});
+exports.messages = messages;