@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
341 lines (336 loc) • 16.3 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ReactMediaNode = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _bindEventListener = require("bind-event-listener");
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 _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _mediaClient = require("@atlaskit/media-client");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _aiGeneratingDecoration = require("../../pm-plugins/ai-generating-decoration");
var _helpers = require("../../pm-plugins/commands/helpers");
var _mediaCommon = require("../../pm-plugins/utils/media-common");
var _media = _interopRequireDefault(require("./media"));
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) { (0, _defineProperty2.default)(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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; } // Ignored via go/ees005
// eslint-disable-next-line import/no-named-as-default
var selector = function selector(states) {
var _states$mediaState;
return {
mediaProvider: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.mediaProvider
};
};
var MediaNodeWithProviders = function MediaNodeWithProviders(_ref) {
var pluginInjectionApi = _ref.pluginInjectionApi,
innerComponent = _ref.innerComponent;
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['media'], selector),
mediaProvider = _useSharedPluginState.mediaProvider;
var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.interactionState');
return innerComponent({
mediaProvider: mediaProvider ? Promise.resolve(mediaProvider) : undefined,
interactionState: interactionState
});
};
function isMediaDecorationSpec(decoration) {
return decoration.spec.type !== undefined && decoration.spec.selected !== undefined;
}
var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
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 = _callSuper(this, MediaNodeView, [].concat(args));
(0, _defineProperty2.default)(_this, "isSelected", false);
(0, _defineProperty2.default)(_this, "isAIGenerating", false);
(0, _defineProperty2.default)(_this, "hasBeenResized", false);
(0, _defineProperty2.default)(_this, "hasResizedListener", function () {
if (!_this.hasBeenResized) {
_this.hasBeenResized = true;
_this.update(_this.node, _this.decorations);
}
});
(0, _defineProperty2.default)(_this, "onExternalImageLoaded", function (dimensions) {
var getPos = _this.getPos;
var _this$getAttrs = _this.getAttrs(),
width = _this$getAttrs.width,
height = _this$getAttrs.height,
rest = (0, _objectWithoutProperties2.default)(_this$getAttrs, _excluded);
if (!width || !height) {
(0, _helpers.updateCurrentMediaNodeAttrs)(_objectSpread(_objectSpread({}, rest), {}, {
width: width || dimensions.width,
height: height || dimensions.height
}), {
node: _this.node,
getPos: getPos
}, true)(_this.view.state, _this.view.dispatch);
}
});
(0, _defineProperty2.default)(_this, "getMaxCardDimensions", function () {
var flexibleDimensions = {
width: '100%',
height: '100%'
};
if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
var pos = _this.getPos();
if (typeof pos !== 'number') {
return flexibleDimensions;
}
if (_this.hasBeenResized) {
return flexibleDimensions;
}
var mediaSingleNodeParent = _this.getMediaSingleNode(_this.getPos);
// If media parent not found, return default
if (!mediaSingleNodeParent) {
return flexibleDimensions;
}
if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
if (_this.hasPxWidthType(mediaSingleNodeParent)) {
return {
width: "".concat(mediaSingleNodeParent.attrs.width, "px"),
height: '100%'
};
}
return flexibleDimensions;
}
// Compute normal dimensions
var maxWidth = _this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
return {
width: "".concat(maxWidth, "px"),
height: '100%'
};
}
return flexibleDimensions;
});
(0, _defineProperty2.default)(_this, "getMediaProviderToUse", function (mediaOptions, mediaProvider) {
if (mediaProvider) {
return mediaProvider;
}
if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
return mediaOptions.provider;
}
return mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
});
(0, _defineProperty2.default)(_this, "renderMediaNodeWithState", function (contextIdentifierProvider) {
return function (_ref2) {
var _this$reactComponentP;
var mediaProvider = _ref2.mediaProvider,
interactionState = _ref2.interactionState;
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 pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
// mediaSingle defines the max dimensions, so we don't need to constrain twice.
var maxDimensions = _this.getMaxCardDimensions();
var originalDimensions = {
width: width,
height: height
};
var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
return /*#__PURE__*/_react.default.createElement(_media.default, {
api: pluginInjectionApi,
view: _this.view,
node: _this.node,
getPos: getPos,
selected: isSelectedAndInteracted,
originalDimensions: originalDimensions,
maxDimensions: maxDimensions,
url: url,
mediaProvider: _this.getMediaProviderToUse(mediaOptions, mediaProvider),
syncProvider: mediaOptions.syncProvider,
contextIdentifierProvider: contextIdentifierProvider,
mediaOptions: mediaOptions,
onExternalImageLoaded: _this.onExternalImageLoaded,
isViewOnly: ((_this$reactComponentP = _this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.sharedState.currentState()) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.mode) === 'view',
pluginInjectionApi: _this.reactComponentProps.pluginInjectionApi,
isAIGenerating: _this.isAIGenerating
});
};
});
(0, _defineProperty2.default)(_this, "renderMediaNodeWithProviders", function (_ref3) {
var contextIdentifierProvider = _ref3.contextIdentifierProvider;
var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
return /*#__PURE__*/_react.default.createElement(MediaNodeWithProviders, {
pluginInjectionApi: pluginInjectionApi,
innerComponent: _this.renderMediaNodeWithState(contextIdentifierProvider)
});
});
return _this;
}
(0, _inherits2.default)(MediaNodeView, _SelectionBasedNodeVi);
return (0, _createClass2.default)(MediaNodeView, [{
key: "getMediaSingleNode",
value: function getMediaSingleNode(getPos) {
var pos = getPos();
if (typeof pos !== 'number') {
return null;
}
var $pos = this.view.state.doc.resolve(pos);
// The parent of the media node should be mediaSingle
if ($pos.parent && $pos.parent.type.name === 'mediaSingle') {
return $pos.parent;
}
return null;
}
}, {
key: "getMaxWidthFromMediaSingleNode",
value: function getMaxWidthFromMediaSingleNode(mediaSingleNode) {
var _mediaSingleNode$attr = mediaSingleNode.attrs,
widthAttr = _mediaSingleNode$attr.width,
widthTypeAttr = _mediaSingleNode$attr.widthType,
layoutAttr = _mediaSingleNode$attr.layout;
// for extended mediaSingle nodes with width and widthType attributes ( default behaviour )
if (widthAttr && widthTypeAttr === 'pixel') {
return widthAttr;
}
// for legacy mediaSingle nodes without widthType attribute
switch (layoutAttr) {
case 'full-width':
return _editorSharedStyles.akEditorFullWidthLayoutWidth;
case 'wide':
return _editorSharedStyles.akEditorCalculatedWideLayoutWidth;
default:
return _editorSharedStyles.akEditorDefaultLayoutWidth;
}
}
}, {
key: "hasPxWidthType",
value: function hasPxWidthType(mediaSingleNode) {
var _mediaSingleNode$attr2 = mediaSingleNode.attrs,
widthAttr = _mediaSingleNode$attr2.width,
widthTypeAttr = _mediaSingleNode$attr2.widthType;
// for extended mediaSingle nodes with width and widthType attributes ( default behaviour )
if (widthAttr && widthTypeAttr === 'pixel') {
return true;
}
return false;
}
}, {
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';
}
if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
this.resizeListenerBinding = (0, _bindEventListener.bind)(domRef, {
type: 'resized',
listener: this.hasResizedListener
});
}
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;
}
var aiGenerating = (0, _aiGeneratingDecoration.hasAIGeneratingDecoration)(decorations);
if (this.isAIGenerating !== aiGenerating) {
this.isAIGenerating = aiGenerating;
return true;
}
if (this.node.attrs !== nextNode.attrs) {
return true;
}
return _superPropGet(MediaNodeView, "viewShouldUpdate", this, 3)([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
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
providers: ['contextIdentifierProvider'],
providerFactory: providerFactory,
renderNode: this.renderMediaNodeWithProviders
});
}
}, {
key: "destroy",
value: function destroy() {
if (this.resizeListenerBinding) {
this.resizeListenerBinding();
}
_superPropGet(MediaNodeView, "destroy", this, 3)([]);
}
}]);
}(_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) {
return new MediaNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
eventDispatcher: eventDispatcher,
providerFactory: providerFactory,
mediaOptions: mediaOptions,
pluginInjectionApi: pluginInjectionApi
}).init();
};
};