@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

package/dist/esm/nodeviews/mediaGroup.js

@@ -0,0 +1,369 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 from 'react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { isNodeSelectedOrInRange, SelectedState, setNodeSelection } from '@atlaskit/editor-common/utils';
+import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { Filmstrip } from '@atlaskit/media-filmstrip';
+import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
+import { MediaNodeUpdater } from './mediaNodeUpdater';
+import { messages } from './messages';
+var isMediaGroupSelectedFromProps = function isMediaGroupSelectedFromProps(props) {
+  /**
+   *  ED-19831
+   *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch
+   *  directly to confluence since this bug is now in production.
+   */
+  var pos;
+  try {
+    pos = props.getPos ? props.getPos() : undefined;
+  } catch (e) {
+    pos = undefined;
+  }
+  if (typeof pos !== 'number') {
+    return false;
+  }
+  return isNodeSelectedOrInRange(props.anchorPos, props.headPos, pos, props.node.nodeSize);
+};
+var hasSelectionChanged = function hasSelectionChanged(oldProps, newProps) {
+  if (isMediaGroupSelectedFromProps(oldProps) !== isMediaGroupSelectedFromProps(newProps)) {
+    return true;
+  }
+  if (isMediaGroupSelectedFromProps(newProps) === SelectedState.selectedInside) {
+    return oldProps.anchorPos !== newProps.anchorPos;
+  }
+  return false;
+};
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var MediaGroup = /*#__PURE__*/function (_React$Component) {
+  _inherits(MediaGroup, _React$Component);
+  var _super = _createSuper(MediaGroup);
+  function MediaGroup(_props) {
+    var _this;
+    _classCallCheck(this, MediaGroup);
+    _this = _super.call(this, _props);
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      viewMediaClientConfig: undefined
+    });
+    _defineProperty(_assertThisInitialized(_this), "updateNodeAttrs", function (props, node, getPos) {
+      var view = props.view,
+        mediaProvider = props.mediaProvider,
+        contextIdentifierProvider = props.contextIdentifierProvider;
+      var mediaNodeUpdater = new MediaNodeUpdater({
+        view: view,
+        mediaProvider: mediaProvider,
+        contextIdentifierProvider: contextIdentifierProvider,
+        node: node,
+        isMediaSingle: false
+      });
+      mediaNodeUpdater.updateNodeAttrs(getPos);
+    });
+    _defineProperty(_assertThisInitialized(_this), "setMediaItems", function (props) {
+      var _this$mediaPluginStat;
+      var updatedAttrs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var node = props.node;
+      var oldMediaNodes = _this.mediaNodes;
+      _this.mediaNodes = [];
+      node.forEach(function (item, childOffset) {
+        var getPos = function getPos() {
+          var pos = props.getPos();
+          if (typeof pos !== 'number') {
+            // That may seems weird, but the previous type wasn't match with the real ProseMirror code. And a lot of Media API was built expecting a number
+            // Because the original code would return NaN on runtime
+            // We are just make it explict now.
+            // We may run a deep investagation on Media code to figure out a better fix. But, for now, we want to keep the current behavior.
+            // TODO: ED-13910 prosemirror-bump leftovers
+            return NaN;
+          }
+          return pos + childOffset + 1;
+        };
+        _this.mediaNodes.push(item);
+        if (updatedAttrs) {
+          _this.updateNodeAttrs(props, item, getPos);
+        }
+      });
+      (_this$mediaPluginStat = _this.mediaPluginState) === null || _this$mediaPluginStat === void 0 || _this$mediaPluginStat.handleMediaGroupUpdate(oldMediaNodes, _this.mediaNodes);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getIdentifier", function (item) {
+      if (item.attrs.type === 'external') {
+        return {
+          mediaItemType: 'external-image',
+          dataURI: item.attrs.url
+        };
+      }
+      return {
+        id: item.attrs.id,
+        mediaItemType: 'file',
+        collectionName: item.attrs.collection
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "isNodeSelected", function (nodePos) {
+      var selected = isMediaGroupSelectedFromProps(_this.props);
+      if (selected === SelectedState.selectedInRange) {
+        return true;
+      }
+      if (selected === SelectedState.selectedInside && _this.props.anchorPos === nodePos) {
+        return true;
+      }
+      return false;
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderChildNodes", function () {
+      var viewMediaClientConfig = _this.state.viewMediaClientConfig;
+      var _this$props = _this.props,
+        getPos = _this$props.getPos,
+        allowLazyLoading = _this$props.allowLazyLoading,
+        disabled = _this$props.disabled,
+        mediaOptions = _this$props.mediaOptions;
+      var items = _this.mediaNodes.map(function (item, idx) {
+        // We declared this to get a fresh position every time
+        var getNodePos = function getNodePos() {
+          var pos = getPos();
+          if (typeof pos !== 'number') {
+            // That may seems weird, but the previous type wasn't match with the real ProseMirror code. And a lot of Media API was built expecting a number
+            // Because the original code would return NaN on runtime
+            // We are just make it explict now.
+            // We may run a deep investagation on Media code to figure out a better fix. But, for now, we want to keep the current behavior.
+            // TODO: ED-13910 prosemirror-bump leftovers
+            return NaN;
+          }
+          return pos + 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 || !_this.mediaPluginState ? function () {} : _this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
+                icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {
+                  label: _this.props.intl.formatMessage(messages.mediaGroupDeleteLabel)
+                })
+              }]
+            };
+          }
+        };
+        return _objectSpread({
+          identifier: _this.getIdentifier(item),
+          isLazy: allowLazyLoading,
+          selected: _this.isNodeSelected(getNodePos()),
+          onClick: function onClick() {
+            setNodeSelection(_this.props.view, getNodePos());
+          }
+        }, mediaInlineOptions(getMediaFeatureFlag('mediaInline', mediaOptions.featureFlags)));
+      });
+      return /*#__PURE__*/React.createElement(Filmstrip, {
+        items: items,
+        mediaClientConfig: viewMediaClientConfig,
+        featureFlags: mediaOptions.featureFlags
+      });
+    });
+    _this.mediaNodes = [];
+    _this.mediaPluginState = mediaStateKey.getState(_props.view.state);
+    _this.setMediaItems(_props);
+    _this.state = {
+      viewMediaClientConfig: undefined
+    };
+    return _this;
+  }
+  _createClass(MediaGroup, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      this.updateMediaClientConfig();
+      this.mediaNodes.forEach( /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(node) {
+          var _this2$props, view, mediaProvider, contextIdentifierProvider, mediaNodeUpdater, getPos, contextId, hasDifferentContextId;
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!(node.attrs.type === 'external')) {
+                  _context.next = 2;
+                  break;
+                }
+                return _context.abrupt("return");
+              case 2:
+                _this2$props = _this2.props, view = _this2$props.view, mediaProvider = _this2$props.mediaProvider, contextIdentifierProvider = _this2$props.contextIdentifierProvider;
+                mediaNodeUpdater = new MediaNodeUpdater({
+                  view: view,
+                  mediaProvider: mediaProvider,
+                  contextIdentifierProvider: contextIdentifierProvider,
+                  node: node,
+                  isMediaSingle: false
+                });
+                getPos = function getPos() {
+                  var pos = _this2.props.getPos();
+                  if (typeof pos !== 'number') {
+                    // That may seems weird, but the previous type wasn't match with the real ProseMirror code. And a lot of Media API was built expecting a number
+                    // Because the original code would return NaN on runtime
+                    // We are just make it explict now.
+                    // We may run a deep investagation on Media code to figure out a better fix. But, for now, we want to keep the current behavior.
+                    // TODO: ED-13910 prosemirror-bump leftovers
+                    return NaN;
+                  }
+                  return pos + 1;
+                };
+                contextId = mediaNodeUpdater.getNodeContextId();
+                if (contextId) {
+                  _context.next = 9;
+                  break;
+                }
+                _context.next = 9;
+                return mediaNodeUpdater.updateNodeContextId(getPos);
+              case 9:
+                _context.next = 11;
+                return mediaNodeUpdater.hasDifferentContextId();
+              case 11:
+                hasDifferentContextId = _context.sent;
+                if (!hasDifferentContextId) {
+                  _context.next = 15;
+                  break;
+                }
+                _context.next = 15;
+                return mediaNodeUpdater.copyNodeFromPos(getPos, {
+                  traceId: node.attrs.__mediaTraceId
+                });
+              case 15:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function (_x) {
+          return _ref.apply(this, arguments);
+        };
+      }());
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$mediaPluginStat2;
+      (_this$mediaPluginStat2 = this.mediaPluginState) === null || _this$mediaPluginStat2 === void 0 || _this$mediaPluginStat2.handleMediaGroupUpdate(this.mediaNodes, []);
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(props) {
+      this.updateMediaClientConfig();
+      this.setMediaItems(props, props.isCopyPasteEnabled || props.isCopyPasteEnabled === undefined);
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
+      var _this$mediaPluginStat3;
+      if (hasSelectionChanged(this.props, nextProps) || this.props.node !== nextProps.node || this.state.viewMediaClientConfig !== ((_this$mediaPluginStat3 = this.mediaPluginState) === null || _this$mediaPluginStat3 === void 0 ? void 0 : _this$mediaPluginStat3.mediaClientConfig)) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "updateMediaClientConfig",
+    value: function updateMediaClientConfig() {
+      var viewMediaClientConfig = this.state.viewMediaClientConfig;
+      var _ref2 = this.mediaPluginState || {},
+        mediaClientConfig = _ref2.mediaClientConfig;
+      if (!viewMediaClientConfig && mediaClientConfig) {
+        this.setState({
+          viewMediaClientConfig: mediaClientConfig
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.renderChildNodes();
+    }
+  }]);
+  return MediaGroup;
+}(React.Component);
+_defineProperty(MediaGroup, "displayName", 'MediaGroup');
+var IntlMediaGroup = injectIntl(MediaGroup);
+export default IntlMediaGroup;
+function MediaGroupNodeViewInternal(_ref3) {
+  var renderFn = _ref3.renderFn,
+    pluginInjectionApi = _ref3.pluginInjectionApi;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorDisabled']),
+    editorDisabledPlugin = _useSharedPluginState.editorDisabledState;
+  return renderFn({
+    editorDisabledPlugin: editorDisabledPlugin
+  });
+}
+var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
+  _inherits(MediaGroupNodeView, _ReactNodeView);
+  var _super2 = _createSuper(MediaGroupNodeView);
+  function MediaGroupNodeView() {
+    _classCallCheck(this, MediaGroupNodeView);
+    return _super2.apply(this, arguments);
+  }
+  _createClass(MediaGroupNodeView, [{
+    key: "render",
+    value: function render(props, forwardRef) {
+      var _this3 = this;
+      var providerFactory = props.providerFactory,
+        mediaOptions = props.mediaOptions,
+        pluginInjectionApi = props.pluginInjectionApi;
+      var getPos = this.getPos;
+      return /*#__PURE__*/React.createElement(WithProviders, {
+        providers: ['mediaProvider', 'contextIdentifierProvider'],
+        providerFactory: providerFactory,
+        renderNode: function renderNode(_ref4) {
+          var mediaProvider = _ref4.mediaProvider,
+            contextIdentifierProvider = _ref4.contextIdentifierProvider;
+          var renderFn = function renderFn(_ref5) {
+            var editorDisabledPlugin = _ref5.editorDisabledPlugin;
+            if (!mediaProvider) {
+              return null;
+            }
+            return /*#__PURE__*/React.createElement(IntlMediaGroup, {
+              node: _this3.node,
+              getPos: getPos,
+              view: _this3.view,
+              forwardRef: forwardRef,
+              disabled: (editorDisabledPlugin || {}).editorDisabled,
+              allowLazyLoading: mediaOptions.allowLazyLoading,
+              mediaProvider: mediaProvider,
+              contextIdentifierProvider: contextIdentifierProvider,
+              isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
+              anchorPos: _this3.view.state.selection.$anchor.pos,
+              headPos: _this3.view.state.selection.$head.pos,
+              mediaOptions: mediaOptions
+            });
+          };
+          return /*#__PURE__*/React.createElement(MediaGroupNodeViewInternal, {
+            renderFn: renderFn,
+            pluginInjectionApi: pluginInjectionApi
+          });
+        }
+      });
+    }
+  }]);
+  return MediaGroupNodeView;
+}(ReactNodeView);
+export var ReactMediaGroupNode = function ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory) {
+  var mediaOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var pluginInjectionApi = arguments.length > 4 ? arguments[4] : undefined;
+  return function (node, view, getPos) {
+    var hasIntlContext = true;
+    return new MediaGroupNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
+      providerFactory: providerFactory,
+      mediaOptions: mediaOptions,
+      pluginInjectionApi: pluginInjectionApi
+    }, undefined, undefined, undefined, hasIntlContext).init();
+  };
+};

package/dist/esm/nodeviews/mediaInline.js

@@ -0,0 +1,278 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _get from "@babel/runtime/helpers/get";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 _regeneratorRuntime from "@babel/runtime/regenerator";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { useEffect, useState } from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
+import { MediaInlineCard } from '@atlaskit/media-card';
+import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
+import { MediaNodeUpdater } from './mediaNodeUpdater';
+import { MediaInlineNodeSelector } from './styles';
+export var createMediaNodeUpdater = function createMediaNodeUpdater(props) {
+  var node = props.node;
+  return new MediaNodeUpdater(_objectSpread(_objectSpread({}, props), {}, {
+    isMediaSingle: true,
+    node: node ? node : props.node,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    contextIdentifierProvider: props.contextIdentifierProvider
+  }));
+};
+
+/**
+ * Handles updating the media inline node attributes
+ * but also handling copy-paste for cross-editor of the same instance
+ * using the contextid
+ *
+ */
+export var updateMediaNodeAttributes = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(props, mediaNodeUpdater) {
+    var addPendingTask, node, contextId, hasDifferentContextId, copyNode;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          addPendingTask = props.mediaPluginState.addPendingTask;
+          node = props.node;
+          if (node) {
+            _context.next = 4;
+            break;
+          }
+          return _context.abrupt("return");
+        case 4:
+          contextId = mediaNodeUpdater.getNodeContextId();
+          if (contextId) {
+            _context.next = 8;
+            break;
+          }
+          _context.next = 8;
+          return mediaNodeUpdater.updateContextId();
+        case 8:
+          _context.next = 10;
+          return mediaNodeUpdater.hasDifferentContextId();
+        case 10:
+          hasDifferentContextId = _context.sent;
+          if (!hasDifferentContextId) {
+            _context.next = 22;
+            break;
+          }
+          _context.prev = 12;
+          copyNode = mediaNodeUpdater.copyNode({
+            traceId: node.attrs.__mediaTraceId
+          });
+          addPendingTask(copyNode);
+          _context.next = 17;
+          return copyNode;
+        case 17:
+          _context.next = 22;
+          break;
+        case 19:
+          _context.prev = 19;
+          _context.t0 = _context["catch"](12);
+          return _context.abrupt("return");
+        case 22:
+          _context.next = 24;
+          return mediaNodeUpdater.updateMediaSingleFileAttrs();
+        case 24:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[12, 19]]);
+  }));
+  return function updateMediaNodeAttributes(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+export var handleNewNode = function handleNewNode(props) {
+  var node = props.node,
+    mediaPluginState = props.mediaPluginState,
+    getPos = props.getPos;
+  mediaPluginState.handleMediaNodeMount(node, function () {
+    return getPos();
+  });
+};
+export var MediaInline = function MediaInline(props) {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    viewMediaClientConfig = _useState2[0],
+    setViewMediaClientConfig = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isContextIdUnsync = _useState4[0],
+    setIsContextIdUnsync = _useState4[1];
+  useEffect(function () {
+    var mediaNodeUpdater = createMediaNodeUpdater(props);
+    mediaNodeUpdater.hasDifferentContextId().then(setIsContextIdUnsync);
+    handleNewNode(props);
+    updateMediaNodeAttributes(props, mediaNodeUpdater);
+    updateViewMediaClientConfig(props);
+    return function () {
+      var mediaPluginState = props.mediaPluginState;
+      mediaPluginState.handleMediaNodeUnmount(props.node);
+    };
+  }, [props]);
+  var updateViewMediaClientConfig = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(props) {
+      var mediaProvider, _viewMediaClientConfig;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return props.mediaProvider;
+          case 2:
+            mediaProvider = _context2.sent;
+            if (mediaProvider) {
+              _viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
+              setViewMediaClientConfig(_viewMediaClientConfig);
+            }
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function updateViewMediaClientConfig(_x3) {
+      return _ref2.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
+  };
+
+  /*
+   * Show the loading view if
+   * 1. The media provider is not ready
+   * 2. Context Id is not synced
+   * to prevent calling the media API (in mounting of `MediaInlineCard`)
+   * before the prerequisites meet
+   */
+  if (!viewMediaClientConfig || isContextIdUnsync) {
+    return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
+      message: "",
+      isSelected: false
+    });
+  }
+  return /*#__PURE__*/React.createElement(MediaInlineCard, {
+    isSelected: props.isSelected,
+    identifier: identifier,
+    mediaClientConfig: viewMediaClientConfig
+  });
+};
+var MediaInlineSharedState = function MediaInlineSharedState(_ref3) {
+  var identifier = _ref3.identifier,
+    mediaProvider = _ref3.mediaProvider,
+    node = _ref3.node,
+    isSelected = _ref3.isSelected,
+    getPos = _ref3.getPos,
+    contextIdentifierProvider = _ref3.contextIdentifierProvider,
+    api = _ref3.api,
+    view = _ref3.view;
+  var _useSharedPluginState = useSharedPluginState(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  if (!mediaState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(MediaInline, {
+    identifier: identifier,
+    mediaProvider: mediaProvider,
+    mediaPluginState: mediaState,
+    node: node,
+    isSelected: isSelected,
+    view: view,
+    getPos: getPos,
+    contextIdentifierProvider: contextIdentifierProvider
+  });
+};
+export var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
+  _inherits(MediaInlineNodeView, _SelectionBasedNodeVi);
+  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');
+      dom.classList.add(MediaInlineNodeSelector);
+      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 _get(_getPrototypeOf(MediaInlineNodeView.prototype), "viewShouldUpdate", this).call(this, nextNode);
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      var _this = this;
+      var providerFactory = props.providerFactory,
+        api = props.api;
+      var view = this.view;
+      var getPos = this.getPos;
+      return /*#__PURE__*/React.createElement(WithProviders, {
+        providers: ['mediaProvider', 'contextIdentifierProvider'],
+        providerFactory: providerFactory,
+        renderNode: function renderNode(_ref4) {
+          var mediaProvider = _ref4.mediaProvider,
+            contextIdentifierProvider = _ref4.contextIdentifierProvider;
+          if (!mediaProvider) {
+            return null;
+          }
+          return /*#__PURE__*/React.createElement(MediaInlineSharedState, {
+            identifier: _this.node.attrs.id,
+            mediaProvider: mediaProvider,
+            node: _this.node,
+            isSelected: _this.nodeInsideSelection(),
+            view: view,
+            getPos: getPos,
+            contextIdentifierProvider: contextIdentifierProvider,
+            api: api
+          });
+        }
+      });
+    }
+  }]);
+  return MediaInlineNodeView;
+}(SelectionBasedNodeView);
+export var ReactMediaInlineNode = function ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) {
+  return function (node, view, getPos) {
+    return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
+      providerFactory: providerFactory,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      api: api
+    }).init();
+  };
+};