@atlaskit/editor-core 188.3.0 → 188.4.0

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

@@ -1,170 +0,0 @@
-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/plugins/media/nodeviews/mediaNodeView/media.js

@@ -1,233 +0,0 @@
-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 { withImageLoader } from '@atlaskit/editor-common/utils';
-import { setNodeSelection, setTextSelection } 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;
-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);