@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
46 lines • 1.28 kB
JavaScript
/** @jsx jsx */
import React from 'react';
import { css, jsx } from '@emotion/react';
import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
export const MediaInlineNodeSelector = 'media-inline-node';
export const MediaSingleNodeSelector = 'media-single-node';
export const figureWrapper = css`
margin: 0;
`;
const absoluteDiv = css`
position: absolute;
width: 100%;
height: 100%;
`;
const forcedDimensions = css`
width: 100%;
position: relative;
`;
export const MediaCardWrapper = ({
dimensions,
children,
selected,
borderWidth = 0,
onContextMenu
}) => {
const calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
return jsx("div", {
"data-testid": "media-card-wrapper",
style: {
borderColor: `var(--custom-palette-color)`,
borderWidth: `${calculatedBorderWidth}px`,
borderStyle: 'solid',
borderRadius: `${calculatedBorderWidth * 2}px`
}
}, jsx("div", {
css: forcedDimensions,
style: {
paddingBottom: `${dimensions.height / dimensions.width * 100}%`
},
onContextMenuCapture: onContextMenu
}, borderWidth > 0 && jsx(MediaBorderGapFiller, {
borderColor: `var(--custom-palette-color)`
}), jsx("div", {
css: absoluteDiv
}, children)));
};