@atlaskit/editor-core 150.0.3 → 151.0.0

package/dist/es2019/plugins/extension/toolbar.js

@@ -41,30 +41,35 @@ const isLayoutSupported = (state, selectedExtNode) => {
   return !!((selectedExtNode.node.type === bodiedExtension || selectedExtNode.node.type === extension && !hasParentNodeOfType([bodiedExtension, table, expand].filter(Boolean))(selection)) && !hasParentNodeOfType([layoutSection])(selection));
 };
 
-const breakoutOptions = (state, formatMessage, extensionState, breakoutEnabled) => {
-  const nodeWithPos = getSelectedExtension(state, true);
-  const {
-    layout
-  } = extensionState;
-  return nodeWithPos && breakoutEnabled && isLayoutSupported(state, nodeWithPos) ? [{
-    type: 'button',
-    icon: CenterIcon,
-    onClick: updateExtensionLayout('default'),
-    selected: layout === 'default',
-    title: formatMessage(commonMessages.layoutFixedWidth)
-  }, {
-    type: 'button',
-    icon: WideIcon,
-    onClick: updateExtensionLayout('wide'),
-    selected: layout === 'wide',
-    title: formatMessage(commonMessages.layoutWide)
-  }, {
-    type: 'button',
-    icon: FullWidthIcon,
-    onClick: updateExtensionLayout('full-width'),
-    selected: layout === 'full-width',
-    title: formatMessage(commonMessages.layoutFullWidth)
-  }] : [];
+const breakoutOptions = (state, formatMessage, breakoutEnabled) => {
+  const nodeWithPos = getSelectedExtension(state, true); // we should only return breakout options when breakouts are enabled and the node supports them
+
+  if (nodeWithPos && breakoutEnabled && isLayoutSupported(state, nodeWithPos)) {
+    const {
+      layout
+    } = nodeWithPos.node.attrs;
+    return [{
+      type: 'button',
+      icon: CenterIcon,
+      onClick: updateExtensionLayout('default'),
+      selected: layout === 'default',
+      title: formatMessage(commonMessages.layoutFixedWidth)
+    }, {
+      type: 'button',
+      icon: WideIcon,
+      onClick: updateExtensionLayout('wide'),
+      selected: layout === 'wide',
+      title: formatMessage(commonMessages.layoutWide)
+    }, {
+      type: 'button',
+      icon: FullWidthIcon,
+      onClick: updateExtensionLayout('full-width'),
+      selected: layout === 'full-width',
+      title: formatMessage(commonMessages.layoutFullWidth)
+    }];
+  }
+
+  return [];
 };
 
 const editButton = (formatMessage, extensionState) => {
@@ -99,7 +104,7 @@ export const getToolbarConfig = (breakoutEnabled = true) => (state, intl) => {
   if (extensionState && !extensionState.showContextPanel && extensionState.element) {
     const nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension];
     const editButtonArray = editButton(formatMessage, extensionState);
-    const breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled);
+    const breakoutButtonArray = breakoutOptions(state, formatMessage, breakoutEnabled);
     return {
       title: 'Extension floating controls',
       getDomRef: () => extensionState.element.parentElement || undefined,

package/dist/es2019/plugins/feature-flags-context/feature-flags-from-props.js

@@ -1,13 +1,15 @@
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
-
+import { browser } from '@atlaskit/editor-common';
 /**
  * Transforms EditorProps to an FeatureFlags object,
  * which is used by both current and archv3 editors.
  */
+
 export function createFeatureFlagsFromProps(props) {
-  var _props$allowTextColor, _props$performanceTra, _props$performanceTra2, _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$allowTables, _props$featureFlags4, _props$featureFlags5, _props$allowTables2, _props$featureFlags6, _props$featureFlags7, _props$allowTables3, _props$featureFlags8, _props$featureFlags9, _props$allowTables4, _props$featureFlags10, _props$featureFlags11, _props$allowTables5, _props$allowExtension, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25;
+  var _props$allowTextColor, _props$performanceTra, _props$performanceTra2, _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$allowTables, _props$featureFlags4, _props$featureFlags5, _props$allowTables2, _props$featureFlags6, _props$featureFlags7, _props$allowTables3, _props$featureFlags8, _props$featureFlags9, _props$allowTables4, _props$featureFlags10, _props$featureFlags11, _props$allowTables5, _props$allowExtension, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27;
 
-  return { ...normalizeFeatureFlags(props.featureFlags),
+  const normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
+  return { ...normalizedFeatureFlags,
     newInsertionBehaviour: props.allowNewInsertionBehaviour,
     interactiveExpand: typeof props.allowExpand === 'boolean' ? props.allowExpand : Boolean(props.allowExpand && props.allowExpand.allowInteractiveExpand !== false),
     placeholderBracketHint: !!props.placeholderBracketHint,
@@ -32,6 +34,8 @@ export function createFeatureFlagsFromProps(props) {
     errorBoundaryDocStructure: Boolean(typeof ((_props$featureFlags18 = props.featureFlags) === null || _props$featureFlags18 === void 0 ? void 0 : _props$featureFlags18.useErrorBoundaryDocStructure) === 'boolean' ? !!((_props$featureFlags19 = props.featureFlags) !== null && _props$featureFlags19 !== void 0 && _props$featureFlags19.useErrorBoundaryDocStructure) : false),
     synchronyErrorDocStructure: Boolean(typeof ((_props$featureFlags20 = props.featureFlags) === null || _props$featureFlags20 === void 0 ? void 0 : _props$featureFlags20.synchronyErrorDocStructure) === 'boolean' ? !!((_props$featureFlags21 = props.featureFlags) !== null && _props$featureFlags21 !== void 0 && _props$featureFlags21.synchronyErrorDocStructure) : false),
     enableViewUpdateSubscription: Boolean(typeof ((_props$featureFlags22 = props.featureFlags) === null || _props$featureFlags22 === void 0 ? void 0 : _props$featureFlags22.enableViewUpdateSubscription) === 'boolean' ? !!((_props$featureFlags23 = props.featureFlags) !== null && _props$featureFlags23 !== void 0 && _props$featureFlags23.enableViewUpdateSubscription) : false),
-    collabAvatarScroll: Boolean(typeof ((_props$featureFlags24 = props.featureFlags) === null || _props$featureFlags24 === void 0 ? void 0 : _props$featureFlags24.collabAvatarScroll) === 'boolean' ? !!((_props$featureFlags25 = props.featureFlags) !== null && _props$featureFlags25 !== void 0 && _props$featureFlags25.collabAvatarScroll) : false)
+    collabAvatarScroll: Boolean(typeof ((_props$featureFlags24 = props.featureFlags) === null || _props$featureFlags24 === void 0 ? void 0 : _props$featureFlags24.collabAvatarScroll) === 'boolean' ? !!((_props$featureFlags25 = props.featureFlags) !== null && _props$featureFlags25 !== void 0 && _props$featureFlags25.collabAvatarScroll) : false),
+    ufo: Boolean(typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26.ufo) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27.ufo) : false),
+    codeBlockSyntaxHighlighting: Boolean(typeof normalizedFeatureFlags.codeBlockSyntaxHighlighting === 'boolean' ? !!normalizedFeatureFlags.codeBlockSyntaxHighlighting && !browser.safari : false)
   };
 }

package/dist/es2019/plugins/find-replace/ui/Find.js

@@ -71,12 +71,17 @@ class Find extends React.Component {
       }
     });
 
-    _defineProperty(this, "handleFindChange", event => this.skipWhileComposing(() => {
+    _defineProperty(this, "handleFindChange", event => {
       this.updateFindValue(event.target.value);
-    }));
+    });
 
     _defineProperty(this, "updateFindValue", value => {
-      this.props.onFind(value);
+      this.setState({
+        localFindText: value
+      });
+      this.skipWhileComposing(() => {
+        this.props.onFind(value);
+      });
     });
 
     _defineProperty(this, "handleFindKeyDown", event => this.skipWhileComposing(() => {
@@ -153,7 +158,13 @@ class Find extends React.Component {
     });
     this.closeIcon = /*#__PURE__*/React.createElement(EditorCloseIcon, {
       label: this.closeFindReplaceDialog
-    });
+    }); // We locally manage the value of the input inside this component in order to support compositions.
+    // This requires some additional work inside componentDidUpdate to ensure we support changes that
+    // occur to this value which do not originate from this component.
+
+    this.state = {
+      localFindText: this.props.findText || ''
+    };
   }
 
   componentDidMount() {
@@ -162,7 +173,17 @@ class Find extends React.Component {
   }
 
   componentDidUpdate() {
-    this.focusFindTextfield();
+    this.focusFindTextfield(); // If the external prop findText changes and we aren't in a composition we should update to the
+    // use the external prop value.
+    //
+    // An example of where this may happen is when a find occurs through the user selecting some text
+    // and pressing Mod-f.
+
+    if (!this.isComposing && this.props.findText !== this.state.localFindText) {
+      this.setState({
+        localFindText: this.props.findText || ''
+      });
+    }
   }
 
   render() {
@@ -183,7 +204,7 @@ class Find extends React.Component {
       name: "find",
       appearance: "none",
       placeholder: this.find,
-      value: findText,
+      value: this.state.localFindText,
       ref: this.findTextfieldRef,
       autoComplete: "off",
       onChange: this.handleFindChange,

package/dist/es2019/plugins/hyperlink/pm-plugins/keymap.js

@@ -1,6 +1,6 @@
 import { keymap } from 'prosemirror-keymap';
+import { getLinkMatch } from '@atlaskit/adf-schema';
 import * as keymaps from '../../../keymaps';
-import { getLinkMatch } from '../utils';
 import { stateKey } from '../pm-plugins/main';
 import { showLinkToolbar, hideLinkToolbar } from '../commands';
 import { queueCards } from '../../card/pm-plugins/actions';

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -83,7 +83,8 @@ const mapActivityProviderResultToLinkSearchItemData = ({
   container,
   iconUrl,
   url,
-  lastViewedDate: viewedTimestamp ? new Date(viewedTimestamp) : undefined
+  lastViewedDate: viewedTimestamp ? new Date(viewedTimestamp) : undefined,
+  prefetch: true
 });
 
 const mapSearchProviderResultToLinkSearchItemData = ({
@@ -99,7 +100,8 @@ const mapSearchProviderResultToLinkSearchItemData = ({
   name: title,
   url,
   lastUpdatedDate: updatedTimestamp ? new Date(updatedTimestamp) : undefined,
-  icon: contentType && mapContentTypeToIcon[contentType] || defaultIcon
+  icon: contentType && mapContentTypeToIcon[contentType] || defaultIcon,
+  prefetch: false
 });
 
 export class HyperlinkLinkAddToolbar extends PureComponent {
@@ -344,7 +346,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       }
 
       if (interaction === 'click' || this.isUrlPopulatedWithSelectedItem()) {
-        var _pluginState$searchSe3;
+        var _pluginState$searchSe3, _selectedItem$prefetc;
 
         /**
          * When it's a mouse click even or the selectedItem.url matches displayUrl, we think
@@ -361,7 +363,8 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
             trigger: interaction,
             resultCount: items.length,
             selectedResultId: selectedItem.objectId,
-            selectedRelativePosition: selectedIndex
+            selectedRelativePosition: selectedIndex,
+            prefetch: (_selectedItem$prefetc = selectedItem.prefetch) !== null && _selectedItem$prefetc !== void 0 ? _selectedItem$prefetc : false
           },
           eventType: EVENT_TYPE.UI
         });

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

@@ -1,26 +1,5 @@
-import LinkifyIt from 'linkify-it';
 import { mapSlice } from '../../utils/slice';
-import { isSafeUrl } from '@atlaskit/adf-schema';
-export const LINK_REGEXP = /(https?|ftp):\/\/[^\s]+/;
-const linkify = LinkifyIt();
-linkify.add('sourcetree:', 'http:');
-const tlds = 'biz|com|edu|gov|net|org|pro|web|xxx|aero|asia|coop|info|museum|name|shop|рф'.split('|');
-const 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);
-export function getLinkMatch(str) {
-  if (!str) {
-    return null;
-  }
-
-  let match = linkifyMatch(str);
-
-  if (!match.length) {
-    match = linkify.match(str);
-  }
-
-  return match && match[0];
-}
+import { isSafeUrl, linkify, normalizeUrl as normaliseLinkHref } from '@atlaskit/adf-schema';
 /**
  * Instance of class LinkMatcher are used in autoformatting in place of Regex.
  * Hence it has been made similar to regex with an exec method.
@@ -81,8 +60,7 @@ export function normalizeUrl(url) {
     return url;
   }
 
-  const match = getLinkMatch(url);
-  return match && match.url || '';
+  return normaliseLinkHref(url);
 }
 export function linkifyContent(schema) {
   return slice => mapSlice(slice, (node, parent) => {
@@ -148,38 +126,4 @@ function findLinkMatches(text) {
   }
 
   return matches;
-}
-
-export const linkifyMatch = text => {
-  const matches = [];
-
-  if (!LINK_REGEXP.test(text)) {
-    return matches;
-  }
-
-  let startpos = 0;
-  let substr;
-
-  while (substr = text.substr(startpos)) {
-    const link = (substr.match(LINK_REGEXP) || [''])[0];
-
-    if (link) {
-      const index = substr.search(LINK_REGEXP);
-      const start = index >= 0 ? index + startpos : index;
-      const end = start + link.length;
-      matches.push({
-        index: start,
-        lastIndex: end,
-        raw: link,
-        url: link,
-        text: link,
-        schema: ''
-      });
-      startpos += end;
-    } else {
-      break;
-    }
-  }
-
-  return matches;
-};
+}

package/dist/es2019/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';
 
 const mediaPlugin = options => ({
@@ -30,6 +31,7 @@ const mediaPlugin = options => ({
     const {
       allowMediaGroup = true,
       allowMediaSingle = false,
+      allowMediaInline = false,
       featureFlags
     } = options || {};
     const captions = getMediaFeatureFlag('captions', featureFlags);
@@ -43,6 +45,9 @@ const mediaPlugin = options => ({
     }, {
       name: 'media',
       node: media
+    }, {
+      name: 'mediaInline',
+      node: mediaInline
     }].filter(node => {
       if (node.name === 'mediaGroup') {
         return allowMediaGroup;
@@ -52,6 +57,10 @@ const mediaPlugin = options => ({
         return allowMediaSingle;
       }
 
+      if (node.name === 'mediaInline') {
+        return allowMediaInline;
+      }
+
       return true;
     });
   },
@@ -73,7 +82,8 @@ const 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,
         uploadErrorHandler: options && options.uploadErrorHandler,
@@ -197,8 +207,7 @@ const mediaPlugin = options => ({
       action(insert, state) {
         const pluginState = pluginKey.getState(state);
         pluginState.showMediaPicker();
-        const 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/es2019/plugins/media/nodeviews/mediaGroup.js

@@ -111,6 +111,21 @@ export default class MediaGroup extends React.Component {
         // We declared this to get a fresh position every time
         const getNodePos = () => {
           return getPos() + idx + 1;
+        }; // Media Inline creates a floating toolbar with the same options, excludes these options if enabled
+
+
+        const mediaInlineOptions = (allowMediaInline = false) => {
+          if (!allowMediaInline) {
+            return {
+              shouldEnableDownloadButton: mediaOptions.enableDownloadButton,
+              actions: [{
+                handler: disabled ? () => {} : this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
+                icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {
+                  label: "delete"
+                })
+              }]
+            };
+          }
         };
 
         return {
@@ -120,13 +135,7 @@ export default class MediaGroup extends React.Component {
           onClick: () => {
             setNodeSelection(this.props.view, getNodePos());
           },
-          shouldEnableDownloadButton: mediaOptions.enableDownloadButton,
-          actions: [{
-            handler: disabled ? () => {} : this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
-            icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {
-              label: "delete"
-            })
-          }]
+          ...mediaInlineOptions(mediaOptions.allowMediaInline)
         };
       });
       return /*#__PURE__*/React.createElement(Filmstrip, {

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

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import { ReactNodeView } from '../../../nodeviews/';
+import { MediaInlineCard } from '@atlaskit/media-card';
+import { WithProviders } from '@atlaskit/editor-common';
+export const MediaInline = props => {
+  const [viewMediaClientConfig, setViewMediaClientConfig] = useState({});
+  useEffect(() => {
+    updateViewMediaClientConfig(props);
+  }, [props]);
+
+  const updateViewMediaClientConfig = async props => {
+    const mediaProvider = await props.mediaProvider;
+
+    if (mediaProvider) {
+      const viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
+      setViewMediaClientConfig(viewMediaClientConfig);
+    }
+  };
+
+  const {
+    id,
+    collection
+  } = props.node.attrs;
+  const identifier = {
+    id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/React.createElement(MediaInlineCard, {
+    identifier: identifier,
+    mediaClientConfig: viewMediaClientConfig
+  });
+};
+export class MediaInlineNodeView extends ReactNodeView {
+  createDomRef() {
+    const domRef = document.createElement('span');
+    domRef.contentEditable = 'false';
+    return domRef;
+  }
+
+  getContentDOM() {
+    const dom = document.createElement('span');
+    return {
+      dom
+    };
+  }
+
+  ignoreMutation() {
+    return true;
+  }
+
+  viewShouldUpdate(nextNode) {
+    if (this.node.attrs !== nextNode.attrs) {
+      return true;
+    }
+
+    return false;
+  }
+
+  render(props) {
+    const {
+      providerFactory
+    } = props;
+    return /*#__PURE__*/React.createElement(WithProviders, {
+      providers: ['mediaProvider'],
+      providerFactory: providerFactory,
+      renderNode: ({
+        mediaProvider
+      }) => {
+        if (!mediaProvider) {
+          return null;
+        }
+
+        return /*#__PURE__*/React.createElement(MediaInline, {
+          identifier: this.node.attrs.id,
+          mediaProvider: mediaProvider,
+          node: this.node
+        });
+      }
+    });
+  }
+
+}
+export const ReactMediaInlineNode = (portalProviderAPI, eventDispatcher, providerFactory) => (node, view, getPos) => {
+  return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
+    providerFactory
+  }).init();
+};

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

@@ -9,14 +9,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';
 
 const createDropPlaceholder = allowDropLine => {
@@ -60,7 +61,7 @@ export class MediaPluginStateImplementation {
 
     _defineProperty(this, "removeOnCloseListener", () => {});
 
-    _defineProperty(this, "onPopupToogleCallback", () => {});
+    _defineProperty(this, "onPopupToggleCallback", () => {});
 
     _defineProperty(this, "pickers", []);
 
@@ -151,12 +152,13 @@ export class MediaPluginStateImplementation {
       var _this$mediaOptions;
 
       const {
+        mediaInline,
         mediaSingle,
         media
       } = this.view.state.schema.nodes;
 
       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;
@@ -165,6 +167,11 @@ export class MediaPluginStateImplementation {
     _defineProperty(this, "hasUserAuthProvider", () => !!this.uploadMediaClientConfig && !!this.uploadMediaClientConfig.userAuthProvider);
 
     _defineProperty(this, "insertFile", (mediaState, onMediaStateChanged, pickerType) => {
+      var _this$mediaOptions2;
+
+      const {
+        state
+      } = this.view;
       const mediaStateWithContext = { ...mediaState,
         contextId: this.contextIdentifierProvider ? this.contextIdentifierProvider.objectId : undefined
       };
@@ -185,8 +192,10 @@ export class MediaPluginStateImplementation {
         });
       }
 
-      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
@@ -234,7 +243,7 @@ export class MediaPluginStateImplementation {
     _defineProperty(this, "splitMediaGroup", () => splitMediaGroup(this.view));
 
     _defineProperty(this, "onPopupPickerClose", () => {
-      this.onPopupToogleCallback(false);
+      this.onPopupToggleCallback(false);
     });
 
     _defineProperty(this, "shouldUseMediaPickerPopup", () => {
@@ -255,15 +264,15 @@ export class MediaPluginStateImplementation {
       }
 
       this.popupPicker.show();
-      this.onPopupToogleCallback(true);
+      this.onPopupToggleCallback(true);
     });
 
     _defineProperty(this, "setBrowseFn", browseFn => {
       this.openMediaPickerBrowser = browseFn;
     });
 
-    _defineProperty(this, "onPopupToggle", onPopupToogleCallback => {
-      this.onPopupToogleCallback = onPopupToogleCallback;
+    _defineProperty(this, "onPopupToggle", onPopupToggleCallback => {
+      this.onPopupToggleCallback = onPopupToggleCallback;
     });
 
     _defineProperty(this, "waitForPendingTasks", (timeout, lastTask) => {
@@ -482,7 +491,7 @@ export class MediaPluginStateImplementation {
   }
 
   getDomElement(domAtPos) {
-    var _this$mediaOptions2;
+    var _this$mediaOptions3;
 
     const {
       selection
@@ -496,7 +505,7 @@ export class MediaPluginStateImplementation {
       return;
     }
 
-    const position = (_this$mediaOptions2 = this.mediaOptions) !== null && _this$mediaOptions2 !== void 0 && _this$mediaOptions2.allowMediaInline ? selection.from + 1 : selection.from;
+    const position = (_this$mediaOptions3 = this.mediaOptions) !== null && _this$mediaOptions3 !== void 0 && _this$mediaOptions3.allowMediaInline ? selection.from + 1 : selection.from;
     const node = findDomRefAtPos(position, domAtPos);
 
     if (node) {