@atlaskit/editor-plugin-media/dist/cjs/nodeviews/styles.js

Media plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MediaSingleNodeSelector = exports.MediaCardWrapper = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _ui = require("@atlaskit/editor-common/ui");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports

var MediaSingleNodeSelector = exports.MediaSingleNodeSelector = 'media-single-node';
var absoluteDivStyles = (0, _react2.css)({
  position: 'absolute',
  width: '100%',
  height: '100%'
});
var forcedDimensionsStyles = (0, _react2.css)({
  width: '100%',
  position: 'relative'
});
var pointerCursorStyle = (0, _react2.css)({
  cursor: 'pointer'
});
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;
  // [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 = (0, _platformFeatureFlags.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 (0, _react2.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
    }
  }, (0, _react2.jsx)("div", {
    css: forcedDimensionsStyles,
    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: absoluteDivStyles
  }, children)));
};