@atlaskit/editor-core 150.0.0 → 151.0.0

package/dist/cjs/plugins/hyperlink/utils.js

@@ -5,52 +5,25 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLinkMatch = getLinkMatch;
 exports.normalizeUrl = normalizeUrl;
 exports.linkifyContent = linkifyContent;
 exports.getLinkDomain = getLinkDomain;
 exports.isFromCurrentDomain = isFromCurrentDomain;
-exports.linkifyMatch = exports.LinkMatcher = exports.LINK_REGEXP = void 0;
+exports.LinkMatcher = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _linkifyIt = _interopRequireDefault(require("linkify-it"));
-
 var _slice = require("../../utils/slice");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var LINK_REGEXP = /(https?|ftp):\/\/[^\s]+/;
-exports.LINK_REGEXP = LINK_REGEXP;
-var linkify = (0, _linkifyIt.default)();
-linkify.add('sourcetree:', 'http:');
-var tlds = 'biz|com|edu|gov|net|org|pro|web|xxx|aero|asia|coop|info|museum|name|shop|рф'.split('|');
-var tlds2Char = 'a[cdefgilmnoqrtuwxz]|b[abdefghijmnorstvwyz]|c[acdfghiklmnoruvwxyz]|d[ejkmoz]|e[cegrstu]|f[ijkmor]|g[abdefghilmnpqrstuwy]|h[kmnrtu]|i[delmnoqrst]|j[emop]|k[eghimnprwyz]|l[abcikrstuvy]|m[acdeghklmnopqrtuvwxyz]|n[acefgilopruz]|om|p[aefghkmnrtw]|qa|r[eosuw]|s[abcdegijklmnrtuvxyz]|t[cdfghjklmnortvwz]|u[agksyz]|v[aceginu]|w[fs]|y[et]|z[amw]';
-tlds.push(tlds2Char);
-linkify.tlds(tlds, false);
-
-function getLinkMatch(str) {
-  if (!str) {
-    return null;
-  }
-
-  var match = linkifyMatch(str);
-
-  if (!match.length) {
-    match = linkify.match(str);
-  }
-
-  return match && match[0];
-}
 /**
  * Instance of class LinkMatcher are used in autoformatting in place of Regex.
  * Hence it has been made similar to regex with an exec method.
  * Extending it directly from class Regex was introducing some issues, thus that has been avoided.
  */
-
-
 var LinkMatcher = /*#__PURE__*/function () {
   function LinkMatcher() {
     (0, _classCallCheck2.default)(this, LinkMatcher);
@@ -75,7 +48,7 @@ var LinkMatcher = /*#__PURE__*/function () {
               return null;
             }
 
-            var links = linkify.match(lastStringBeforeSpace);
+            var links = _adfSchema.linkify.match(lastStringBeforeSpace);
 
             if (!links || links.length === 0) {
               return null;
@@ -122,8 +95,7 @@ function normalizeUrl(url) {
     return url;
   }
 
-  var match = getLinkMatch(url);
-  return match && match.url || '';
+  return (0, _adfSchema.normalizeUrl)(url);
 }
 
 function linkifyContent(schema) {
@@ -180,7 +152,8 @@ function isFromCurrentDomain(url) {
 
 function findLinkMatches(text) {
   var matches = [];
-  var linkMatches = text && linkify.match(text);
+
+  var linkMatches = text && _adfSchema.linkify.match(text);
 
   if (linkMatches && linkMatches.length > 0) {
     linkMatches.forEach(function (match) {
@@ -194,40 +167,4 @@ function findLinkMatches(text) {
   }
 
   return matches;
-}
-
-var linkifyMatch = function linkifyMatch(text) {
-  var matches = [];
-
-  if (!LINK_REGEXP.test(text)) {
-    return matches;
-  }
-
-  var startpos = 0;
-  var substr;
-
-  while (substr = text.substr(startpos)) {
-    var link = (substr.match(LINK_REGEXP) || [''])[0];
-
-    if (link) {
-      var index = substr.search(LINK_REGEXP);
-      var start = index >= 0 ? index + startpos : index;
-      var end = start + link.length;
-      matches.push({
-        index: start,
-        lastIndex: end,
-        raw: link,
-        url: link,
-        text: link,
-        schema: ''
-      });
-      startpos += end;
-    } else {
-      break;
-    }
-  }
-
-  return matches;
-};
-
-exports.linkifyMatch = linkifyMatch;
+}

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

@@ -59,6 +59,8 @@ var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
 
 var _mediaNodeView = require("./nodeviews/mediaNodeView");
 
+var _mediaInline = require("./nodeviews/mediaInline");
+
 var _mediaSingle2 = require("./utils/media-single");
 
 var mediaPlugin = function mediaPlugin(options) {
@@ -70,6 +72,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 = (0, _mediaCommon.getMediaFeatureFlag)('captions', featureFlags);
@@ -83,6 +87,9 @@ var mediaPlugin = function mediaPlugin(options) {
       }, {
         name: 'media',
         node: _adfSchema.media
+      }, {
+        name: 'mediaInline',
+        node: _adfSchema.mediaInline
       }].filter(function (node) {
         if (node.name === 'mediaGroup') {
           return allowMediaGroup;
@@ -92,6 +99,10 @@ var mediaPlugin = function mediaPlugin(options) {
           return allowMediaSingle;
         }
 
+        if (node.name === 'mediaInline') {
+          return allowMediaInline;
+        }
+
         return true;
       });
     },
@@ -112,7 +123,8 @@ var mediaPlugin = function mediaPlugin(options) {
             nodeViews: {
               mediaGroup: (0, _mediaGroup.ReactMediaGroupNode)(portalProviderAPI, eventDispatcher, providerFactory, options),
               mediaSingle: (0, _mediaSingle.ReactMediaSingleNode)(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent, options),
-              media: (0, _mediaNodeView.ReactMediaNode)(portalProviderAPI, eventDispatcher, providerFactory, options)
+              media: (0, _mediaNodeView.ReactMediaNode)(portalProviderAPI, eventDispatcher, providerFactory, options),
+              mediaInline: (0, _mediaInline.ReactMediaInlineNode)(portalProviderAPI, eventDispatcher, providerFactory)
             },
             errorReporter: errorReporter,
             uploadErrorHandler: options && options.uploadErrorHandler,
@@ -242,8 +254,7 @@ var mediaPlugin = function mediaPlugin(options) {
             var pluginState = _main.stateKey.getState(state);
 
             pluginState.showMediaPicker();
-            var tr = insert('');
-            return (0, _analytics.addAnalytics)(state, tr, {
+            return (0, _analytics.addAnalytics)(state, insert(''), {
               action: _analytics.ACTION.OPENED,
               actionSubject: _analytics.ACTION_SUBJECT.PICKER,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_CLOUD,

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

@@ -49,6 +49,10 @@ var _pluginKey = require("../pm-plugins/plugin-key");
 
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
 
+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; }
+
 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; } }
@@ -151,23 +155,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.default.createElement(_close.default, {
+                  label: "delete"
+                })
+              }]
+            };
+          }
         };
 
-        return {
+        return _objectSpread({
           identifier: _this.getIdentifier(item),
           isLazy: allowLazyLoading,
           selected: _this.isNodeSelected(getNodePos()),
           onClick: function onClick() {
             (0, _utils.setNodeSelection)(_this.props.view, getNodePos());
-          },
-          shouldEnableDownloadButton: mediaOptions.enableDownloadButton,
-          actions: [{
-            handler: disabled ? function () {} : _this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
-            icon: /*#__PURE__*/_react.default.createElement(_close.default, {
-              label: "delete"
-            })
-          }]
-        };
+          }
+        }, mediaInlineOptions(mediaOptions.allowMediaInline));
       });
 
       return /*#__PURE__*/_react.default.createElement(_mediaFilmstrip.Filmstrip, {

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;