@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
57 lines (56 loc) • 2.25 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React, { Fragment, useEffect, useState } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { isVideo } from '../../pm-plugins/utils/is-type';
import { getSelectedNearestMediaContainerNodeAttrsFunction } from '../../ui/toolbar/utils';
import { RenderMediaViewer } from './PortalWrapper';
const interactiveStyles = css({
cursor: 'pointer'
});
const mediaViewerContainerTestID = 'media-viewer-container-test';
export const MediaViewerContainer = ({
mediaNode,
selectedMediaContainerNode,
mediaClientConfig,
isEditorViewMode = false,
isSelected = true,
isInline = false,
mediaViewerExtensions,
children
}) => {
var _mediaNode$firstChild;
const [showViewer, setShowMediaViewer] = useState(false);
useEffect(() => {
setShowMediaViewer(isSelected);
}, [isSelected]);
const selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrsFunction(selectedMediaContainerNode);
const showMediaViewer = () => {
setShowMediaViewer(true);
};
const closeMediaViewer = () => {
setShowMediaViewer(false);
};
const isVideoMedia = isVideo((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
const shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia && editorExperiment('platform_editor_controls', 'control');
return jsx(Fragment, null, isEditorViewMode ? jsx(Fragment, null, isInline ? jsx("span", {
onClick: showMediaViewer,
css: interactiveStyles,
"data-testid": mediaViewerContainerTestID,
role: "none"
}, children) : jsx("div", {
onClick: showMediaViewer,
css: interactiveStyles,
"data-testid": mediaViewerContainerTestID,
role: "none"
}, children), shouldShowViewer && jsx(RenderMediaViewer, {
selectedNodeAttrs: selectedNodeAttrs,
mediaClientConfig: mediaClientConfig,
onClose: closeMediaViewer,
extensions: mediaViewerExtensions
})) : children);
};