@atlaskit/editor-plugin-media 0.2.0 → 0.3.0

package/dist/cjs/nodeviews/mediaNodeView/index.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactMediaNode = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
+var _mediaClient = require("@atlaskit/media-client");
+var _mediaCommon = require("../../utils/media-common");
+var _media = _interopRequireDefault(require("./media"));
+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 MediaNodeWithProviders = function MediaNodeWithProviders(_ref) {
+  var pluginInjectionApi = _ref.pluginInjectionApi,
+    innerComponent = _ref.innerComponent;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  return innerComponent({
+    width: widthState
+  });
+};
+function isMediaDecorationSpec(decoration) {
+  return decoration.spec.type !== undefined && decoration.spec.selected !== undefined;
+}
+var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
+  (0, _inherits2.default)(MediaNodeView, _SelectionBasedNodeVi);
+  var _super = _createSuper(MediaNodeView);
+  function MediaNodeView() {
+    var _this;
+    (0, _classCallCheck2.default)(this, MediaNodeView);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isSelected", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMediaNodeWithState", function (mediaProvider, contextIdentifierProvider) {
+      return function (_ref2) {
+        var editorWidth = _ref2.width;
+        var getPos = _this.getPos;
+        var mediaOptions = _this.reactComponentProps.mediaOptions;
+        var attrs = _this.getAttrs();
+        var url = attrs.type === 'external' ? attrs.url : '';
+        var width = attrs.width,
+          height = attrs.height;
+        if (_this.isMediaBlobUrl()) {
+          var urlAttrs = (0, _mediaClient.getAttrsFromUrl)(url);
+          if (urlAttrs) {
+            var urlWidth = urlAttrs.width,
+              urlHeight = urlAttrs.height;
+            width = width || urlWidth;
+            height = height || urlHeight;
+          }
+        }
+        width = width || _mediaSingle.DEFAULT_IMAGE_WIDTH;
+        height = height || _mediaSingle.DEFAULT_IMAGE_HEIGHT;
+        var maxDimensions = {
+          width: "".concat(editorWidth.width, "px"),
+          height: "".concat(height / width * editorWidth.width, "px")
+        };
+        var originalDimensions = {
+          width: width,
+          height: height
+        };
+        return /*#__PURE__*/_react.default.createElement(_media.default, {
+          view: _this.view,
+          node: _this.node,
+          getPos: getPos,
+          selected: _this.nodeInsideSelection(),
+          originalDimensions: originalDimensions,
+          maxDimensions: maxDimensions,
+          url: url,
+          mediaProvider: mediaProvider,
+          contextIdentifierProvider: contextIdentifierProvider,
+          mediaOptions: mediaOptions
+        });
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMediaNodeWithProviders", function (_ref3) {
+      var mediaProvider = _ref3.mediaProvider,
+        contextIdentifierProvider = _ref3.contextIdentifierProvider;
+      var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
+      return /*#__PURE__*/_react.default.createElement(MediaNodeWithProviders, {
+        pluginInjectionApi: pluginInjectionApi,
+        innerComponent: _this.renderMediaNodeWithState(mediaProvider, contextIdentifierProvider)
+      });
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(MediaNodeView, [{
+    key: "createDomRef",
+    value: function createDomRef() {
+      var domRef = document.createElement('div');
+      if (this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
+        // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
+        // see also: https://github.com/ProseMirror/prosemirror/issues/884
+        domRef.contentEditable = 'true';
+      }
+      return domRef;
+    }
+  }, {
+    key: "viewShouldUpdate",
+    value: function viewShouldUpdate(nextNode, decorations) {
+      var hasMediaNodeSelectedDecoration = decorations.some(function (decoration) {
+        return isMediaDecorationSpec(decoration) && decoration.spec.type === 'media' && decoration.spec.selected;
+      });
+      if (this.isSelected !== hasMediaNodeSelectedDecoration) {
+        this.isSelected = hasMediaNodeSelectedDecoration;
+        return true;
+      }
+      if (this.node.attrs !== nextNode.attrs) {
+        return true;
+      }
+      return (0, _get2.default)((0, _getPrototypeOf2.default)(MediaNodeView.prototype), "viewShouldUpdate", this).call(this, nextNode, decorations);
+    }
+  }, {
+    key: "stopEvent",
+    value: function stopEvent(event) {
+      // Don't trap right click events on media node
+      if (['mousedown', 'contextmenu'].indexOf(event.type) !== -1) {
+        var mouseEvent = event;
+        if (mouseEvent.button === 2) {
+          return true;
+        }
+      }
+      return false;
+    }
+  }, {
+    key: "getAttrs",
+    value: function getAttrs() {
+      var attrs = this.node.attrs;
+      return attrs;
+    }
+  }, {
+    key: "isMediaBlobUrl",
+    value: function isMediaBlobUrl() {
+      var attrs = this.getAttrs();
+      return (0, _mediaCommon.isMediaBlobUrlFromAttrs)(attrs);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var providerFactory = this.reactComponentProps.providerFactory;
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+        providers: ['mediaProvider', 'contextIdentifierProvider'],
+        providerFactory: providerFactory,
+        renderNode: this.renderMediaNodeWithProviders
+      });
+    }
+  }]);
+  return MediaNodeView;
+}(_selectionBasedNodeView.SelectionBasedNodeView);
+var ReactMediaNode = exports.ReactMediaNode = function ReactMediaNode(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 MediaNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
+      eventDispatcher: eventDispatcher,
+      providerFactory: providerFactory,
+      mediaOptions: mediaOptions,
+      pluginInjectionApi: pluginInjectionApi
+    }, undefined, undefined, undefined, hasIntlContext).init();
+  };
+};

package/dist/cjs/nodeviews/mediaNodeView/media.js

@@ -0,0 +1,242 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MediaNode = exports.MEDIA_HEIGHT = exports.FILE_WIDTH = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _utils = require("@atlaskit/editor-common/utils");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _mediaCard = require("@atlaskit/media-card");
+var _pluginKey = require("../../pm-plugins/plugin-key");
+var _styles = require("../styles");
+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; } }
+// This is being used by DropPlaceholder now
+var MEDIA_HEIGHT = exports.MEDIA_HEIGHT = 125;
+var FILE_WIDTH = exports.FILE_WIDTH = 156;
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(MediaNode, _Component);
+  var _super = _createSuper(MediaNode);
+  function MediaNode(_props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, MediaNode);
+    _this = _super.call(this, _props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setViewMediaClientConfig", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var mediaProvider, viewMediaClientConfig;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return _this.props.mediaProvider;
+          case 2:
+            mediaProvider = _context.sent;
+            if (mediaProvider) {
+              viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
+              _this.setState({
+                viewMediaClientConfig: viewMediaClientConfig
+              });
+            }
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectMediaSingleFromCard", function (_ref2) {
+      var event = _ref2.event;
+      _this.selectMediaSingle(event);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectMediaSingle", function (event) {
+      var propPos = _this.props.getPos();
+      if (typeof propPos !== 'number') {
+        return;
+      }
+
+      // We need to call "stopPropagation" here in order to prevent the browser from navigating to
+      // another URL if the media node is wrapped in a link mark.
+      event.stopPropagation();
+      var state = _this.props.view.state;
+      if (event.shiftKey) {
+        // don't select text if there is current selection in a table (as this would override selected cells)
+        if (state.selection instanceof _cellSelection.CellSelection) {
+          return;
+        }
+        (0, _utils.setTextSelection)(_this.props.view, state.selection.from < propPos ? state.selection.from : propPos - 1,
+        // + 3 needed for offset of the media inside mediaSingle and cursor to make whole mediaSingle selected
+        state.selection.to > propPos ? state.selection.to : propPos + 2);
+      } else {
+        (0, _utils.setNodeSelection)(_this.props.view, propPos - 1);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFullscreenChange", function (fullscreen) {
+      var _this$mediaPluginStat;
+      (_this$mediaPluginStat = _this.mediaPluginState) === null || _this$mediaPluginStat === void 0 || _this$mediaPluginStat.updateAndDispatch({
+        isFullscreen: fullscreen
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleNewNode", function (props) {
+      var _this$mediaPluginStat2;
+      var node = props.node;
+      (_this$mediaPluginStat2 = _this.mediaPluginState) === null || _this$mediaPluginStat2 === void 0 || _this$mediaPluginStat2.handleMediaNodeMount(node, function () {
+        return _this.props.getPos();
+      });
+    });
+    var view = _this.props.view;
+    _this.mediaPluginState = _pluginKey.stateKey.getState(view.state);
+    return _this;
+  }
+  (0, _createClass2.default)(MediaNode, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      var hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
+      if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || hasNewViewMediaClientConfig) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "componentDidMount",
+    value: function () {
+      var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var contextIdentifierProvider;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              this.handleNewNode(this.props);
+              contextIdentifierProvider = this.props.contextIdentifierProvider;
+              _context2.t0 = this;
+              _context2.next = 5;
+              return contextIdentifierProvider;
+            case 5:
+              _context2.t1 = _context2.sent;
+              _context2.t2 = {
+                contextIdentifierProvider: _context2.t1
+              };
+              _context2.t0.setState.call(_context2.t0, _context2.t2);
+              _context2.next = 10;
+              return this.setViewMediaClientConfig();
+            case 10:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function componentDidMount() {
+        return _componentDidMount.apply(this, arguments);
+      }
+      return componentDidMount;
+    }()
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$mediaPluginStat3;
+      var node = this.props.node;
+      (_this$mediaPluginStat3 = this.mediaPluginState) === null || _this$mediaPluginStat3 === void 0 || _this$mediaPluginStat3.handleMediaNodeUnmount(node);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$mediaPluginStat5;
+      if (prevProps.node.attrs.id !== this.props.node.attrs.id) {
+        var _this$mediaPluginStat4;
+        (_this$mediaPluginStat4 = this.mediaPluginState) === null || _this$mediaPluginStat4 === void 0 || _this$mediaPluginStat4.handleMediaNodeUnmount(prevProps.node);
+        this.handleNewNode(this.props);
+      }
+      (_this$mediaPluginStat5 = this.mediaPluginState) === null || _this$mediaPluginStat5 === void 0 || _this$mediaPluginStat5.updateElement();
+      this.setViewMediaClientConfig();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        node = _this$props.node,
+        selected = _this$props.selected,
+        originalDimensions = _this$props.originalDimensions,
+        isLoading = _this$props.isLoading,
+        maxDimensions = _this$props.maxDimensions,
+        mediaOptions = _this$props.mediaOptions;
+      var borderMark = node.marks.find(function (m) {
+        return m.type.name === 'border';
+      });
+      var _this$state = this.state,
+        viewMediaClientConfig = _this$state.viewMediaClientConfig,
+        contextIdentifierProvider = _this$state.contextIdentifierProvider;
+      var _node$attrs = node.attrs,
+        id = _node$attrs.id,
+        type = _node$attrs.type,
+        collection = _node$attrs.collection,
+        url = _node$attrs.url,
+        alt = _node$attrs.alt;
+      if (isLoading || type !== 'external' && !viewMediaClientConfig) {
+        return /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
+          dimensions: originalDimensions
+        }, /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, null));
+      }
+      var contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
+      var identifier = type === 'external' ? {
+        dataURI: url,
+        name: url,
+        mediaItemType: 'external-image'
+      } : {
+        id: id,
+        mediaItemType: 'file',
+        collectionName: collection
+      };
+
+      // mediaClientConfig is not needed for "external" case. So we have to cheat here.
+      // there is a possibility mediaClientConfig will be part of a identifier,
+      // so this might be not an issue
+      var mediaClientConfig = viewMediaClientConfig || {
+        authProvider: function authProvider() {
+          return {};
+        }
+      };
+      return /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
+        dimensions: originalDimensions,
+        onContextMenu: this.selectMediaSingle,
+        borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
+        selected: selected
+      }, /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+        data: (0, _defineProperty2.default)({}, _analyticsNamespacedContext.MEDIA_CONTEXT, {
+          border: !!borderMark
+        })
+      }, /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
+        mediaClientConfig: mediaClientConfig,
+        resizeMode: "stretchy-fit",
+        dimensions: maxDimensions,
+        originalDimensions: originalDimensions,
+        identifier: identifier,
+        selectable: true,
+        selected: selected,
+        disableOverlay: true,
+        onFullscreenChange: this.onFullscreenChange,
+        onClick: this.selectMediaSingleFromCard,
+        useInlinePlayer: mediaOptions && mediaOptions.allowLazyLoading,
+        isLazy: mediaOptions && mediaOptions.allowLazyLoading,
+        featureFlags: mediaOptions && mediaOptions.featureFlags,
+        contextId: contextId,
+        alt: alt
+      })));
+    }
+  }]);
+  return MediaNode;
+}(_react.Component);
+var _default = exports.default = (0, _utils.withImageLoader)(MediaNode);