@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
62 lines (60 loc) • 2.47 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
import { fg } from '@atlaskit/platform-feature-flags';
export var MediaSingleNodeSelector = 'media-single-node';
var absoluteDivStyles = css({
position: 'absolute',
width: '100%',
height: '100%'
});
var forcedDimensionsStyles = css({
width: '100%',
position: 'relative'
});
var pointerCursorStyle = css({
cursor: 'pointer'
});
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;
// [FEATURE FLAG: platform_editor_media_border_radius_fix]
// Fixes border radius calculation to properly fit image with 8px radius
// To clean up: keep only flag-on behavior (calculatedBorderWidth + 8)
var borderRadius = fg('platform_editor_media_border_radius_fix') ? "".concat(calculatedBorderWidth + 8, "px") : "".concat(calculatedBorderWidth * 2, "px"); // OLD BEHAVIOR (to be removed when flag is cleaned up)
return jsx("div", {
"data-testid": "media-card-wrapper"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "media-card-wrapper",
css: pointerCursorStyle,
style: {
borderColor: "var(--custom-palette-color)",
borderWidth: "".concat(calculatedBorderWidth, "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
borderStyle: 'solid',
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
borderRadius: borderRadius
}
}, jsx("div", {
css: forcedDimensionsStyles,
style: {
paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
},
onContextMenuCapture: onContextMenu
}, borderWidth > 0 && jsx(MediaBorderGapFiller, {
borderColor: "var(--custom-palette-color)"
}), jsx("div", {
css: absoluteDivStyles
}, children)));
};