@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
194 lines (193 loc) • 9.47 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
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";
var _excluded = ["width", "height"];
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 { 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 { updateCurrentMediaNodeAttrs } from '../../commands/helpers';
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), "onExternalImageLoaded", function (dimensions) {
var getPos = _this.getPos;
var _this$getAttrs = _this.getAttrs(),
width = _this$getAttrs.width,
height = _this$getAttrs.height,
rest = _objectWithoutProperties(_this$getAttrs, _excluded);
if (!width || !height) {
updateCurrentMediaNodeAttrs(_objectSpread(_objectSpread({}, rest), {}, {
width: width || dimensions.width,
height: height || dimensions.height
}), {
node: _this.node,
getPos: getPos
})(_this.view.state, _this.view.dispatch);
}
});
_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;
// mediaSingle defines the max dimensions, so we don't need to constrain twice.
var maxDimensions = {
width: "100%",
height: "100%"
};
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,
onExternalImageLoaded: _this.onExternalImageLoaded
});
};
});
_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();
};
};