@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
39 lines • 1.85 kB
JavaScript
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject, _templateObject2, _templateObject3;
/** @jsx jsx */
import React from 'react';
import { css, jsx } from '@emotion/react';
import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
export var MediaInlineNodeSelector = 'media-inline-node';
export var MediaSingleNodeSelector = 'media-single-node';
export var figureWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin: 0;\n"])));
var absoluteDiv = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n width: 100%;\n height: 100%;\n"])));
var forcedDimensions = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 100%;\n position: relative;\n"])));
export var MediaCardWrapper = function MediaCardWrapper(_ref) {
var dimensions = _ref.dimensions,
children = _ref.children,
selected = _ref.selected,
_ref$borderWidth = _ref.borderWidth,
borderWidth = _ref$borderWidth === void 0 ? 0 : _ref$borderWidth,
onContextMenu = _ref.onContextMenu;
var calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
return jsx("div", {
"data-testid": "media-card-wrapper",
style: {
borderColor: "var(--custom-palette-color)",
borderWidth: "".concat(calculatedBorderWidth, "px"),
borderStyle: 'solid',
borderRadius: "".concat(calculatedBorderWidth * 2, "px")
}
}, jsx("div", {
css: forcedDimensions,
style: {
paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
},
onContextMenuCapture: onContextMenu
}, borderWidth > 0 && jsx(MediaBorderGapFiller, {
borderColor: "var(--custom-palette-color)"
}), jsx("div", {
css: absoluteDiv
}, children)));
};