@atlaskit/editor-plugin-media 0.2.0 → 0.3.0

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

@@ -0,0 +1,170 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+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 _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 React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
+import { getAttrsFromUrl } from '@atlaskit/media-client';
+import { isMediaBlobUrlFromAttrs } from '../../utils/media-common';
+import MediaNode from './media';
+var MediaNodeWithProviders = function MediaNodeWithProviders(_ref) {
+  var pluginInjectionApi = _ref.pluginInjectionApi,
+    innerComponent = _ref.innerComponent;
+  var _useSharedPluginState = 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) {
+  _inherits(MediaNodeView, _SelectionBasedNodeVi);
+  var _super = _createSuper(MediaNodeView);
+  function MediaNodeView() {
+    var _this;
+    _classCallCheck(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));
+    _defineProperty(_assertThisInitialized(_this), "isSelected", false);
+    _defineProperty(_assertThisInitialized(_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 = getAttrsFromUrl(url);
+          if (urlAttrs) {
+            var urlWidth = urlAttrs.width,
+              urlHeight = urlAttrs.height;
+            width = width || urlWidth;
+            height = height || urlHeight;
+          }
+        }
+        width = width || DEFAULT_IMAGE_WIDTH;
+        height = height || 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.createElement(MediaNode, {
+          view: _this.view,
+          node: _this.node,
+          getPos: getPos,
+          selected: _this.nodeInsideSelection(),
+          originalDimensions: originalDimensions,
+          maxDimensions: maxDimensions,
+          url: url,
+          mediaProvider: mediaProvider,
+          contextIdentifierProvider: contextIdentifierProvider,
+          mediaOptions: mediaOptions
+        });
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderMediaNodeWithProviders", function (_ref3) {
+      var mediaProvider = _ref3.mediaProvider,
+        contextIdentifierProvider = _ref3.contextIdentifierProvider;
+      var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
+      return /*#__PURE__*/React.createElement(MediaNodeWithProviders, {
+        pluginInjectionApi: pluginInjectionApi,
+        innerComponent: _this.renderMediaNodeWithState(mediaProvider, contextIdentifierProvider)
+      });
+    });
+    return _this;
+  }
+  _createClass(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 _get(_getPrototypeOf(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 isMediaBlobUrlFromAttrs(attrs);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var providerFactory = this.reactComponentProps.providerFactory;
+      return /*#__PURE__*/React.createElement(WithProviders, {
+        providers: ['mediaProvider', 'contextIdentifierProvider'],
+        providerFactory: providerFactory,
+        renderNode: this.renderMediaNodeWithProviders
+      });
+    }
+  }]);
+  return MediaNodeView;
+}(SelectionBasedNodeView);
+export var 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/esm/nodeviews/mediaNodeView/media.js

@@ -0,0 +1,233 @@
+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 _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, { Component } from 'react';
+import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/editor-common/utils';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { Card, CardLoading } from '@atlaskit/media-card';
+import { stateKey as mediaStateKey } from '../../pm-plugins/plugin-key';
+import { MediaCardWrapper } from '../styles';
+
+// This is being used by DropPlaceholder now
+export var MEDIA_HEIGHT = 125;
+export var FILE_WIDTH = 156;
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export var MediaNode = /*#__PURE__*/function (_Component) {
+  _inherits(MediaNode, _Component);
+  var _super = _createSuper(MediaNode);
+  function MediaNode(_props) {
+    var _this;
+    _classCallCheck(this, MediaNode);
+    _this = _super.call(this, _props);
+    _defineProperty(_assertThisInitialized(_this), "state", {});
+    _defineProperty(_assertThisInitialized(_this), "setViewMediaClientConfig", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var mediaProvider, viewMediaClientConfig;
+      return _regeneratorRuntime.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);
+    })));
+    _defineProperty(_assertThisInitialized(_this), "selectMediaSingleFromCard", function (_ref2) {
+      var event = _ref2.event;
+      _this.selectMediaSingle(event);
+    });
+    _defineProperty(_assertThisInitialized(_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) {
+          return;
+        }
+        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 {
+        setNodeSelection(_this.props.view, propPos - 1);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onFullscreenChange", function (fullscreen) {
+      var _this$mediaPluginStat;
+      (_this$mediaPluginStat = _this.mediaPluginState) === null || _this$mediaPluginStat === void 0 || _this$mediaPluginStat.updateAndDispatch({
+        isFullscreen: fullscreen
+      });
+    });
+    _defineProperty(_assertThisInitialized(_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 = mediaStateKey.getState(view.state);
+    return _this;
+  }
+  _createClass(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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var contextIdentifierProvider;
+        return _regeneratorRuntime.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.createElement(MediaCardWrapper, {
+          dimensions: originalDimensions
+        }, /*#__PURE__*/React.createElement(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.createElement(MediaCardWrapper, {
+        dimensions: originalDimensions,
+        onContextMenu: this.selectMediaSingle,
+        borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
+        selected: selected
+      }, /*#__PURE__*/React.createElement(AnalyticsContext, {
+        data: _defineProperty({}, MEDIA_CONTEXT, {
+          border: !!borderMark
+        })
+      }, /*#__PURE__*/React.createElement(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;
+}(Component);
+export default withImageLoader(MediaNode);