@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
376 lines (369 loc) • 18.7 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { Component } from 'react';
import { bind } from 'bind-event-listener';
import memoizeOne from 'memoize-one';
import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
import { AnalyticsContext } from '@atlaskit/analytics-next';
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/editor-common/utils';
import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
import { Card, CardLoading } from '@atlaskit/media-card';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { stateKey as mediaStateKey } from '../../pm-plugins/plugin-key';
import { MediaCardWrapper } from '../styles';
// This is being used by DropPlaceholder now
export const MEDIA_HEIGHT = 125;
export const FILE_WIDTH = 156;
// eslint-disable-next-line @repo/internal/react/no-class-components
export class MediaNode extends Component {
constructor(_props) {
super(_props);
_defineProperty(this, "state", {});
_defineProperty(this, "videoControlsWrapperRef", /*#__PURE__*/React.createRef());
_defineProperty(this, "unbindKeyDown", null);
_defineProperty(this, "getDataConsumerMark", () => fg('cc-maui-add-mark-for-remix-generated-images') ? this.props.node.marks.find(m => m.type.name === 'dataConsumer') : undefined);
_defineProperty(this, "setViewMediaClientConfig", async () => {
// mediaProvider is Promise<MediaProvider>, so await it first to get the actual provider
const mediaProvider = await this.props.mediaProvider;
if (mediaProvider) {
const viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
const viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig;
// Only update state if new configs are available and different from current state
if (viewMediaClientConfig && this.state.viewMediaClientConfig !== viewMediaClientConfig || viewAndUploadMediaClientConfig && this.state.viewAndUploadMediaClientConfig !== viewAndUploadMediaClientConfig) {
this.setState({
viewMediaClientConfig,
viewAndUploadMediaClientConfig
});
}
}
});
_defineProperty(this, "selectMediaSingleFromCard", ({
event
}) => {
var _this$props$pluginInj;
this.selectMediaSingle(event);
// In edit mode (node content wrapper has contenteditable set to true), link redirection is disabled by default
// We need to call "stopPropagation" here in order to prevent in editor view mode, the browser from navigating to
// another URL if the media node is wrapped in a link mark.
if (this.props.isViewOnly && areToolbarFlagsEnabled(Boolean((_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : _this$props$pluginInj.toolbar))) {
event.preventDefault();
}
});
_defineProperty(this, "selectMediaSingle", event => {
const propPos = this.props.getPos();
if (typeof propPos !== 'number') {
return;
}
// NOTE: This does not prevent the link navigation in the editor view mode, .preventDefault is needed (see selectMediaSingleFromCard)
// Hence it should be removed
// 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.
if (editorExperiment('platform_editor_controls', 'control')) {
event.stopPropagation();
}
const {
state
} = this.props.view;
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(this, "getMediaSettings", memoizeOne((viewAndUploadMediaClientConfig, isViewOnly) => {
return {
canUpdateVideoCaptions: fg('platform_media_video_captions') ? fg('platform_editor_video_caption_commit') ? !!viewAndUploadMediaClientConfig && !isViewOnly : !!viewAndUploadMediaClientConfig : false
};
}));
_defineProperty(this, "onPreviewRender", fileId => {
if (expValEquals('aifc_page_create_with_rovo_include_infographics', 'isEnabled', true)) {
var _this$props$pluginInj2, _this$props$pluginInj3;
(_this$props$pluginInj2 = this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.core) === null || _this$props$pluginInj3 === void 0 ? void 0 : _this$props$pluginInj3.actions.execute(({
tr
}) => tr.setMeta(mediaStateKey, {
type: 'PREVIEW_RENDERED',
fileId
}));
}
});
_defineProperty(this, "onError", reason => {
var _this$props$api;
const nestedUnder = this.getNestedUnder();
(_this$props$api = this.props.api) === null || _this$props$api === void 0 ? void 0 : _this$props$api.media.actions.handleMediaNodeRenderError(this.props.node, reason, nestedUnder);
});
/**
* This function checks if the media node is nested under a certain nodes, and if so,
* returns the name of the parent node type. This is used for providing more context in media render errors.
* @returns
*/
_defineProperty(this, "getNestedUnder", () => {
const pos = this.props.getPos();
if (typeof pos !== 'number') {
return undefined;
}
const {
doc,
schema
} = this.props.view.state;
const {
bodiedSyncBlock
} = schema.nodes;
if (!bodiedSyncBlock) {
return undefined;
}
const resolvedPos = doc.resolve(pos);
const bodiedSyncBlockNode = findParentNodeClosestToPos(resolvedPos, currentNode => currentNode.type === bodiedSyncBlock);
return bodiedSyncBlockNode === null || bodiedSyncBlockNode === void 0 ? void 0 : bodiedSyncBlockNode.node.type.name;
});
_defineProperty(this, "onFullscreenChange", fullscreen => {
var _this$mediaPluginStat;
(_this$mediaPluginStat = this.mediaPluginState) === null || _this$mediaPluginStat === void 0 ? void 0 : _this$mediaPluginStat.updateAndDispatch({
isFullscreen: fullscreen
});
});
_defineProperty(this, "handleNewNode", props => {
var _this$mediaPluginStat2;
const {
node
} = props;
(_this$mediaPluginStat2 = this.mediaPluginState) === null || _this$mediaPluginStat2 === void 0 ? void 0 : _this$mediaPluginStat2.handleMediaNodeMount(node, () => this.props.getPos());
});
const {
view,
syncProvider
} = this.props;
this.mediaPluginState = mediaStateKey.getState(view.state);
// Initialize state from syncProvider (available on both server and client for SSR)
if (syncProvider) {
this.state = {
viewMediaClientConfig: syncProvider.viewMediaClientConfig,
viewAndUploadMediaClientConfig: syncProvider.viewAndUploadMediaClientConfig
};
}
}
shouldComponentUpdate(nextProps, nextState) {
const hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
const hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
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.isAIGenerating !== nextProps.isAIGenerating || this.props.isCwrAIGenerating !== nextProps.isCwrAIGenerating || 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.isViewOnly !== nextProps.isViewOnly || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
return true;
}
return false;
}
async componentDidMount() {
var _dataConsumerMark$att;
this.handleNewNode(this.props);
const {
node,
pluginInjectionApi
} = this.props;
const dataConsumerMark = this.getDataConsumerMark();
const infographicType = dataConsumerMark === null || dataConsumerMark === void 0 ? void 0 : (_dataConsumerMark$att = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att === void 0 ? void 0 : _dataConsumerMark$att[0];
if (infographicType) {
var _pluginInjectionApi$a;
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.fireAnalyticsEvent({
action: ACTION.RENDERED,
actionSubject: ACTION_SUBJECT.MEDIA,
actionSubjectId: node.attrs.id,
eventType: EVENT_TYPE.TRACK,
attributes: {
infographicType,
pageMode: 'edit',
mediaId: node.attrs.id
}
});
}
const {
contextIdentifierProvider
} = this.props;
this.setState({
contextIdentifierProvider: await contextIdentifierProvider
});
await this.setViewMediaClientConfig();
}
componentWillUnmount() {
var _this$mediaPluginStat3;
const {
node
} = this.props;
(_this$mediaPluginStat3 = this.mediaPluginState) === null || _this$mediaPluginStat3 === void 0 ? void 0 : _this$mediaPluginStat3.handleMediaNodeUnmount(node);
if (this.unbindKeyDown && typeof this.unbindKeyDown === 'function') {
this.unbindKeyDown();
}
}
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 ? void 0 : _this$mediaPluginStat4.handleMediaNodeUnmount(prevProps.node);
this.handleNewNode(this.props);
}
(_this$mediaPluginStat5 = this.mediaPluginState) === null || _this$mediaPluginStat5 === void 0 ? void 0 : _this$mediaPluginStat5.updateElement();
this.setViewMediaClientConfig();
// this.videoControlsWrapperRef is null on componentDidMount. We need to wait until it has value
if (this.videoControlsWrapperRef && this.videoControlsWrapperRef.current) {
var _this$mediaPluginStat6;
if (!((_this$mediaPluginStat6 = this.mediaPluginState) !== null && _this$mediaPluginStat6 !== void 0 && _this$mediaPluginStat6.videoControlsWrapperRef)) {
var _this$mediaPluginStat7;
this.bindKeydown();
(_this$mediaPluginStat7 = this.mediaPluginState) === null || _this$mediaPluginStat7 === void 0 ? void 0 : _this$mediaPluginStat7.updateAndDispatch({
videoControlsWrapperRef: this.videoControlsWrapperRef.current
});
}
}
}
bindKeydown() {
var _this$videoControlsWr3;
const onKeydown = event => {
if (event.key === 'Tab') {
var _this$videoControlsWr, _this$videoControlsWr2;
// Add focus trap for controls panel
let firstElement;
let lastElement;
const focusableElements = (_this$videoControlsWr = this.videoControlsWrapperRef) === null || _this$videoControlsWr === void 0 ? void 0 : (_this$videoControlsWr2 = _this$videoControlsWr.current) === null || _this$videoControlsWr2 === void 0 ? void 0 : _this$videoControlsWr2.querySelectorAll('button, input, [tabindex]:not([tabindex="-1"])');
if (focusableElements && focusableElements.length) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
firstElement = focusableElements[0];
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
lastElement = focusableElements[focusableElements.length - 1];
if (event.shiftKey && document.activeElement === firstElement) {
event.preventDefault();
lastElement.focus();
} else if (!event.shiftKey && document.activeElement === lastElement) {
var _firstElement;
event.preventDefault();
(_firstElement = firstElement) === null || _firstElement === void 0 ? void 0 : _firstElement.focus();
}
}
}
};
if ((_this$videoControlsWr3 = this.videoControlsWrapperRef) !== null && _this$videoControlsWr3 !== void 0 && _this$videoControlsWr3.current) {
this.unbindKeyDown = bind(this.videoControlsWrapperRef.current, {
type: 'keydown',
listener: onKeydown,
options: {
capture: true,
passive: false
}
});
}
}
render() {
var _dataConsumerMark$att2;
const {
node,
selected,
originalDimensions,
isLoading,
maxDimensions,
mediaOptions
} = this.props;
const borderMark = node.marks.find(m => m.type.name === 'border');
const dataConsumerMark = this.getDataConsumerMark();
const {
viewMediaClientConfig,
viewAndUploadMediaClientConfig,
contextIdentifierProvider
} = this.state;
const {
id,
type,
collection,
url,
alt
} = node.attrs;
// Check if we have any media client config available (syncProvider, state, or upload config)
const hasNoMediaClientConfig = !viewMediaClientConfig && (fg('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
return /*#__PURE__*/React.createElement(MediaCardWrapper, {
dimensions: originalDimensions,
borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
selected: selected
}, /*#__PURE__*/React.createElement(CardLoading, {
interactionName: "editor-media-card-loading"
}));
}
const contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
const identifier = type === 'external' ? {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
dataURI: url,
name: url,
mediaItemType: 'external-image'
} : {
id,
mediaItemType: 'file',
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
collectionName: collection
};
const resolvedViewAndUploadMediaClientConfig = fg('platform_media_video_captions') ? viewAndUploadMediaClientConfig : undefined;
// 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
const mediaClientConfig = resolvedViewAndUploadMediaClientConfig || viewMediaClientConfig || {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
authProvider: () => ({})
};
const ssr = process.env.REACT_SSR ? 'server' : 'client';
// CWR (create-with-Rovo) infographics get a distinct loading treatment so the
// generic media type icon isn't shown while the image streams in. Gated on the
// existing infographics experiment.
const isCWR = !!this.props.isCwrAIGenerating && expValEquals('aifc_page_create_with_rovo_include_infographics', 'isEnabled', true);
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
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
data: {
[MEDIA_CONTEXT]: {
border: !!borderMark,
// Only defined for remix-generated media (i.e. media nodes with a dataConsumer mark).
// Format: "remix:{type}:{subtype}" e.g. "remix:infographic:corporate-doodle"
remixSource: dataConsumerMark === null || dataConsumerMark === void 0 ? void 0 : (_dataConsumerMark$att2 = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att2 === void 0 ? void 0 : _dataConsumerMark$att2[0]
}
}
}, /*#__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,
videoControlsWrapperRef: this.videoControlsWrapperRef,
ssr: ssr,
mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig, this.props.isViewOnly),
isAIGenerating: !!this.props.isAIGenerating,
isCWR: isCWR,
onPreviewRender: this.onPreviewRender,
fallbackMediaNameFetcher: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.fallbackMediaNameFetcher,
onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
})));
}
}
const _default_1 = withImageLoader(MediaNode);
export default _default_1;