@atlaskit/editor-core 150.0.3 → 151.1.2

package/dist/esm/plugins/media/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { media, mediaGroup, mediaSingle, mediaSingleWithCaption } from '@atlaskit/adf-schema';
+import { media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaInline } from '@atlaskit/adf-schema';
 import { stateKey as pluginKey, createPlugin } from './pm-plugins/main';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { createPlugin as createMediaEditorPlugin } from './pm-plugins/media-editor';
@@ -21,6 +21,7 @@ import MediaEditor from './ui/MediaEditor';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { ReactMediaNode } from './nodeviews/mediaNodeView';
+import { ReactMediaInlineNode } from './nodeviews/mediaInline';
 export { insertMediaSingleNode } from './utils/media-single';
 
 var mediaPlugin = function mediaPlugin(options) {
@@ -32,6 +33,8 @@ var mediaPlugin = function mediaPlugin(options) {
           allowMediaGroup = _ref$allowMediaGroup === void 0 ? true : _ref$allowMediaGroup,
           _ref$allowMediaSingle = _ref.allowMediaSingle,
           allowMediaSingle = _ref$allowMediaSingle === void 0 ? false : _ref$allowMediaSingle,
+          _ref$allowMediaInline = _ref.allowMediaInline,
+          allowMediaInline = _ref$allowMediaInline === void 0 ? false : _ref$allowMediaInline,
           featureFlags = _ref.featureFlags;
 
       var captions = getMediaFeatureFlag('captions', featureFlags);
@@ -45,6 +48,9 @@ var mediaPlugin = function mediaPlugin(options) {
       }, {
         name: 'media',
         node: media
+      }, {
+        name: 'mediaInline',
+        node: mediaInline
       }].filter(function (node) {
         if (node.name === 'mediaGroup') {
           return allowMediaGroup;
@@ -54,6 +60,10 @@ var mediaPlugin = function mediaPlugin(options) {
           return allowMediaSingle;
         }
 
+        if (node.name === 'mediaInline') {
+          return allowMediaInline;
+        }
+
         return true;
       });
     },
@@ -74,7 +84,8 @@ var mediaPlugin = function mediaPlugin(options) {
             nodeViews: {
               mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options),
               mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent, options),
-              media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options)
+              media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options),
+              mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory)
             },
             errorReporter: errorReporter,
             uploadErrorHandler: options && options.uploadErrorHandler,
@@ -203,8 +214,7 @@ var mediaPlugin = function mediaPlugin(options) {
           action: function action(insert, state) {
             var pluginState = pluginKey.getState(state);
             pluginState.showMediaPicker();
-            var tr = insert('');
-            return addAnalytics(state, tr, {
+            return addAnalytics(state, insert(''), {
               action: ACTION.OPENED,
               actionSubject: ACTION_SUBJECT.PICKER,
               actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,

package/dist/esm/plugins/media/nodeviews/mediaGroup.js

@@ -8,6 +8,10 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
+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) { _defineProperty(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; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
@@ -130,23 +134,33 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
         // We declared this to get a fresh position every time
         var getNodePos = function getNodePos() {
           return getPos() + idx + 1;
+        }; // Media Inline creates a floating toolbar with the same options, excludes these options if enabled
+
+
+        var mediaInlineOptions = function mediaInlineOptions() {
+          var allowMediaInline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+          if (!allowMediaInline) {
+            return {
+              shouldEnableDownloadButton: mediaOptions.enableDownloadButton,
+              actions: [{
+                handler: disabled ? function () {} : _this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
+                icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {
+                  label: "delete"
+                })
+              }]
+            };
+          }
         };
 
-        return {
+        return _objectSpread({
           identifier: _this.getIdentifier(item),
           isLazy: allowLazyLoading,
           selected: _this.isNodeSelected(getNodePos()),
           onClick: function onClick() {
             setNodeSelection(_this.props.view, getNodePos());
-          },
-          shouldEnableDownloadButton: mediaOptions.enableDownloadButton,
-          actions: [{
-            handler: disabled ? function () {} : _this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
-            icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {
-              label: "delete"
-            })
-          }]
-        };
+          }
+        }, mediaInlineOptions(mediaOptions.allowMediaInline));
       });
 
       return /*#__PURE__*/React.createElement(Filmstrip, {

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

@@ -0,0 +1,147 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+import React, { useEffect, useState } from 'react';
+import { ReactNodeView } from '../../../nodeviews/';
+import { MediaInlineCard } from '@atlaskit/media-card';
+import { WithProviders } from '@atlaskit/editor-common';
+export var MediaInline = function MediaInline(props) {
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      viewMediaClientConfig = _useState2[0],
+      setViewMediaClientConfig = _useState2[1];
+
+  useEffect(function () {
+    updateViewMediaClientConfig(props);
+  }, [props]);
+
+  var updateViewMediaClientConfig = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(props) {
+      var mediaProvider, _viewMediaClientConfig;
+
+      return _regeneratorRuntime.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.createElement(MediaInlineCard, {
+    identifier: identifier,
+    mediaClientConfig: viewMediaClientConfig
+  });
+};
+export var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
+  _inherits(MediaInlineNodeView, _ReactNodeView);
+
+  var _super = _createSuper(MediaInlineNodeView);
+
+  function MediaInlineNodeView() {
+    _classCallCheck(this, MediaInlineNodeView);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(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.createElement(WithProviders, {
+        providers: ['mediaProvider'],
+        providerFactory: providerFactory,
+        renderNode: function renderNode(_ref2) {
+          var mediaProvider = _ref2.mediaProvider;
+
+          if (!mediaProvider) {
+            return null;
+          }
+
+          return /*#__PURE__*/React.createElement(MediaInline, {
+            identifier: _this.node.attrs.id,
+            mediaProvider: mediaProvider,
+            node: _this.node
+          });
+        }
+      });
+    }
+  }]);
+
+  return MediaInlineNodeView;
+}(ReactNodeView);
+export var ReactMediaInlineNode = function ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory) {
+  return function (node, view, getPos) {
+    return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
+      providerFactory: providerFactory
+    }).init();
+  };
+};

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

@@ -18,14 +18,15 @@ import assert from 'assert';
 import { findDomRefAtPos, isNodeSelection } from 'prosemirror-utils';
 import { insertMediaSingleNode, isMediaSingle } from '../utils/media-single';
 import DropPlaceholder from '../ui/Media/DropPlaceholder';
-import { insertMediaGroupNode } from '../utils/media-files';
-import { removeMediaNode, splitMediaGroup } from '../utils/media-common';
+import { insertMediaGroupNode, insertMediaInlineNode, canInsertMediaInline } from '../utils/media-files';
+import { isInsidePotentialEmptyParagraph, removeMediaNode, splitMediaGroup } from '../utils/media-common';
 import * as helpers from '../commands/helpers';
 import { updateMediaNodeAttrs } from '../commands/helpers';
 import { stateKey } from './plugin-key';
 import PickerFacade from '../picker-facade';
 import { INPUT_METHOD } from '../../analytics/types';
 import { isImage } from '../utils/is-image';
+import { isInEmptyLine } from '../../../utils/document';
 export { stateKey } from './plugin-key';
 
 var createDropPlaceholder = function createDropPlaceholder(allowDropLine) {
@@ -73,7 +74,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
 
     _defineProperty(this, "removeOnCloseListener", function () {});
 
-    _defineProperty(this, "onPopupToogleCallback", function () {});
+    _defineProperty(this, "onPopupToggleCallback", function () {});
 
     _defineProperty(this, "pickers", []);
 
@@ -238,11 +239,12 @@ export 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;
@@ -253,6 +255,10 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     });
 
     _defineProperty(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
       });
@@ -274,8 +280,10 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
         });
       }
 
-      if (isMediaSingle(_this.view.state.schema, mediaStateWithContext.fileMimeType)) {
+      if (isMediaSingle(state.schema, mediaStateWithContext.fileMimeType)) {
         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 && !isInEmptyLine(state) && !isInsidePotentialEmptyParagraph(state) && canInsertMediaInline(state)) {
+        insertMediaInlineNode(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
       } else {
         insertMediaGroupNode(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType));
       } // do events when media state changes
@@ -328,7 +336,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "onPopupPickerClose", function () {
-      _this.onPopupToogleCallback(false);
+      _this.onPopupToggleCallback(false);
     });
 
     _defineProperty(this, "shouldUseMediaPickerPopup", function () {
@@ -350,15 +358,15 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
 
       _this.popupPicker.show();
 
-      _this.onPopupToogleCallback(true);
+      _this.onPopupToggleCallback(true);
     });
 
     _defineProperty(this, "setBrowseFn", function (browseFn) {
       _this.openMediaPickerBrowser = browseFn;
     });
 
-    _defineProperty(this, "onPopupToggle", function (onPopupToogleCallback) {
-      _this.onPopupToogleCallback = onPopupToogleCallback;
+    _defineProperty(this, "onPopupToggle", function (onPopupToggleCallback) {
+      _this.onPopupToggleCallback = onPopupToggleCallback;
     });
 
     _defineProperty(this, "waitForPendingTasks", function (timeout, lastTask) {
@@ -582,7 +590,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
   }, {
     key: "getDomElement",
     value: function getDomElement(domAtPos) {
-      var _this$mediaOptions2;
+      var _this$mediaOptions3;
 
       var selection = this.view.state.selection;
 
@@ -594,7 +602,7 @@ export 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 = findDomRefAtPos(position, domAtPos);
 
       if (node) {

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

@@ -6,7 +6,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { _defineProperty(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; }
 
 import React from 'react';
-import { findParentNodeOfType, removeSelectedNode } from 'prosemirror-utils';
+import { NodeSelection } from 'prosemirror-state';
+import { findParentNodeOfType, removeSelectedNode, safeInsert } from 'prosemirror-utils';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -25,7 +26,8 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE } f
 import { messages } from '@atlaskit/media-ui';
 import { messages as cardMessages } from '../../card/messages';
 import { FilePreviewItem } from './filePreviewItem';
-import { downloadMedia } from './utils';
+import { downloadMedia, removeMediaGroupNode } from './utils';
+import { Fragment } from 'prosemirror-model';
 
 var remove = function remove(state, dispatch) {
   if (dispatch) {
@@ -35,13 +37,42 @@ 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 = 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 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 = Fragment.from([mediaInlineNode, space]);
+  var node = paragraph.createChecked({}, content);
+  var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
+  var tr = removeMediaGroupNode(state);
+  tr = safeInsert(node, nodePos, true)(tr);
+
+  if (dispatch) {
+    dispatch(tr);
+  }
 
-  mediaPluginState.handleMediaNodeRemoval(undefined, getPos);
   return true;
 };
 
@@ -53,9 +84,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     options: [{
       title: intl.formatMessage(cardMessages.inline),
       selected: false,
-      onClick: function onClick() {
-        return true;
-      },
+      onClick: changeMediaCardToInline,
       testId: 'inline-appearance'
     }, {
       title: intl.formatMessage(messages.displayThumbnail),
@@ -99,9 +128,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     onFocus: hoverDecoration(mediaGroup, true),
     onBlur: hoverDecoration(mediaGroup, false),
     title: intl.formatMessage(commonMessages.remove),
-    onClick: function onClick(state) {
-      return removeMediaCard(state, mediaPluginState);
-    },
+    onClick: handleRemoveMediaGroup,
     testId: 'media-toolbar-remove-button'
   }];
   return items;
@@ -206,10 +233,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
 
 export 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,
@@ -222,7 +250,7 @@ export 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/esm/plugins/media/toolbar/utils.js

@@ -1,6 +1,7 @@
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import { getMediaClient } from '@atlaskit/media-client';
+import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode } from 'prosemirror-utils';
 export var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
   var selectedNode = mediaPluginState.selectedMediaContainerNode();
 
@@ -57,4 +58,17 @@ export var downloadMedia = /*#__PURE__*/function () {
   return function downloadMedia(_x) {
     return _ref.apply(this, arguments);
   };
-}();
+}();
+export var removeMediaGroupNode = function removeMediaGroupNode(state) {
+  var mediaGroup = state.schema.nodes.mediaGroup;
+  var mediaGroupParent = 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 = removeParentNodeOfType(mediaGroup)(tr);
+  } else {
+    tr = removeSelectedNode(tr);
+  }
+
+  return tr;
+};

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

@@ -1,10 +1,14 @@
 import { Fragment } from 'prosemirror-model';
 import { setNodeSelection, setTextSelection, insideTableCell, isInListItem, findFarthestParentNode, isInLayoutColumn } from '../../../utils';
 import { posOfPrecedingMediaGroup, posOfMediaGroupNearby, posOfParentMediaGroup, isSelectionNonMediaBlockNode, isInsidePotentialEmptyParagraph, copyOptionalAttrsFromMediaState } from './media-common';
-import { safeInsert, hasParentNode } from 'prosemirror-utils';
+import { canInsert, safeInsert, hasParentNode } from 'prosemirror-utils';
 import { atTheBeginningOfBlock, atTheEndOfBlock, atTheEndOfDoc, endPositionOfParent, startPositionOfParent } from '../../../utils/prosemirror/position';
 import { isSupportedInParent } from '../../../utils/nodes';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, addAnalytics } from '../../analytics';
+export var canInsertMediaInline = function canInsertMediaInline(state) {
+  var node = state.schema.nodes.mediaInline.create({});
+  return canInsert(state.selection.$to, Fragment.from(node));
+};
 
 var getInsertMediaGroupAnalytics = function getInsertMediaGroupAnalytics(mediaState, inputMethod) {
   var media = '';
@@ -27,6 +31,21 @@ var getInsertMediaGroupAnalytics = function getInsertMediaGroupAnalytics(mediaSt
     eventType: EVENT_TYPE.TRACK
   };
 };
+
+var getInsertMediaInlineAnalytics = function getInsertMediaInlineAnalytics(mediaState, inputMethod) {
+  var media = mediaState.fileMimeType || 'unknown';
+  return {
+    action: ACTION.INSERTED,
+    actionSubject: ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: ACTION_SUBJECT_ID.MEDIA,
+    attributes: {
+      type: ACTION_SUBJECT_ID.MEDIA_INLINE,
+      inputMethod: inputMethod,
+      fileExtension: media
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+};
 /**
  * Check if current editor selections is a media group or not.
  * @param state Editor state
@@ -51,6 +70,46 @@ function shouldAppendParagraph(state, node) {
   var wasMediaNode = node && node.type === media;
   return (insideTableCell(state) || isInListItem(state) || isInLayoutColumn(state) || atTheEndOfDoc(state) && (!posOfPrecedingMediaGroup(state) || 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
+ */
+
+
+export 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 = 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);
+  }
+
+  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.
@@ -59,7 +118,6 @@ function shouldAppendParagraph(state, node) {
  * @param collection Collection for the media to be added
  */
 
-
 export var insertMediaGroupNode = function insertMediaGroupNode(view, mediaStates, collection, inputMethod) {
   var state = view.state,
       dispatch = view.dispatch;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { panel, customPanel, PanelType } from '@atlaskit/adf-schema';
+import { customPanel, PanelType } from '@atlaskit/adf-schema';
 import { createPlugin } from './pm-plugins/main';
 import { getToolbarConfig } from './toolbar';
 import keymap from './pm-plugins/keymaps';
@@ -37,8 +37,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 ? customPanel : panel;
+      var panelNode = customPanel(!!options.UNSAFE_allowCustomPanel);
       return [{
         name: 'panel',
         node: panelNode
@@ -131,7 +130,7 @@ var panelPlugin = function panelPlugin() {
           }
         }];
 
-        if (options.UNSAFE_allowCustomPanel) {
+        if (options.UNSAFE_allowCustomPanelEdit && options.UNSAFE_allowCustomPanel) {
           quickInsertOptions.push({
             id: 'custompanel',
             title: formatMessage(messages.customPanel),

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

@@ -0,0 +1,38 @@
+import { defineMessages } from 'react-intl';
+export var messages = 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.'
+  }
+});