@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
46 lines (45 loc) • 2.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.figureWrapper = exports.MediaSingleNodeSelector = exports.MediaInlineNodeSelector = exports.MediaCardWrapper = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _ui = require("@atlaskit/editor-common/ui");
var _templateObject, _templateObject2, _templateObject3;
/** @jsx jsx */
var MediaInlineNodeSelector = exports.MediaInlineNodeSelector = 'media-inline-node';
var MediaSingleNodeSelector = exports.MediaSingleNodeSelector = 'media-single-node';
var figureWrapper = exports.figureWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n margin: 0;\n"])));
var absoluteDiv = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 100%;\n height: 100%;\n"])));
var forcedDimensions = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n position: relative;\n"])));
var MediaCardWrapper = exports.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 (0, _react2.jsx)("div", {
"data-testid": "media-card-wrapper",
style: {
borderColor: "var(--custom-palette-color)",
borderWidth: "".concat(calculatedBorderWidth, "px"),
borderStyle: 'solid',
borderRadius: "".concat(calculatedBorderWidth * 2, "px")
}
}, (0, _react2.jsx)("div", {
css: forcedDimensions,
style: {
paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
},
onContextMenuCapture: onContextMenu
}, borderWidth > 0 && (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
borderColor: "var(--custom-palette-color)"
}), (0, _react2.jsx)("div", {
css: absoluteDiv
}, children)));
};