@atlaskit/editor-common/dist/cjs/media-inline/styles.js

A package that contains common classes and components for editor and renderer

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.wrapperStyle = exports.selectedStyle = exports.mediaInlineImageStyles = exports.borderStyle = exports.INLINE_IMAGE_WRAPPER_CLASS_NAME = exports.INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = exports.INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = exports.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("@emotion/react");
var _constants = require("./constants");
var _templateObject, _templateObject2;
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var INLINE_IMAGE_WRAPPER_CLASS_NAME = exports.INLINE_IMAGE_WRAPPER_CLASS_NAME = 'media-inline-image-wrapper';
var INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = exports.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = '--editor-media-inline-image-aspect-ratio';
var INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = exports.INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = '--editor-media-inline-image-border-size';
var INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = exports.INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = '--editor-media-inline-image-border-color';

// We implemented such selectors to ensure specificity:
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Nested and dynamic css calls are violations, needs manual remediation
var inlineImageHeight = function inlineImageHeight(height) {
  var margin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t/* Editor style */\n\t> .mediaInlineView-content-wrap > .", ",\n  > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .", ",\n  /* Renderer style */\n  > .", ",\n  > :is(a, span[data-mark-type='border']) .", " {\n\t\theight: ", "px;\n\t\ttransform: translateY(", "px);\n\t}\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, height, margin);
};

/**
 * Shifting the mediaInline image component (renders image) to align nicely with
 * mediaInline (renders text) is a bit of a testing ground. This numbers represent
 * shift in top and bottom and size adjustments to make up for lack of 1to1 size
 * mapping
 */
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766, Nested and dynamic css calls are violations, needs manual remediation
var mediaInlineImageStyles = exports.mediaInlineImageStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t/* p, h3, and action items */\n\t.", " {\n\t\theight: ", "px;\n\t\ttransform: translateY(-2px);\n\t}\n\n\th1 {\n\t\t", "\n\t}\n\n\th2 {\n\t\t", "\n\t}\n\n\th3 {\n\t\t", "\n\t}\n\n\th4 {\n\t\t", "\n\t}\n\n\th5 {\n\t\t", "\n\t}\n\n\th6 {\n\t\t", "\n\t}\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, _constants.referenceHeights['p'], inlineImageHeight(_constants.referenceHeights['h1'], -3), inlineImageHeight(_constants.referenceHeights['h2'], -3), inlineImageHeight(_constants.referenceHeights['h3'], -2), inlineImageHeight(_constants.referenceHeights['h4'], -2), inlineImageHeight(_constants.referenceHeights['h5'], -2), inlineImageHeight(_constants.referenceHeights['h6'], -2));

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var wrapperStyle = exports.wrapperStyle = (0, _react.css)({
  display: 'inline-flex',
  cursor: 'pointer',
  justifyContent: 'center',
  alignItems: 'center',
  verticalAlign: 'middle',
  overflow: 'hidden',
  borderRadius: "var(--ds-radius-small, 3px)",
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  aspectRatio: "var(".concat(INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, ", ").concat(_constants.DEFAULT_INLINE_IMAGE_ASPECT_RATIO, ")"),
  maxWidth: '100%'
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var selectedStyle = exports.selectedStyle = (0, _react.css)({
  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #1868DB)"),
  outline: 'none'
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var borderStyle = exports.borderStyle = (0, _react.css)({
  borderColor: "var(".concat(INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, ")"),
  borderStyle: 'solid',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  borderRadius: "calc(var(".concat(INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, ", ").concat(_constants.DEFAULT_INLINE_IMAGE_BORDER_SIZE, ") * 2px)"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  borderWidth: "calc(var(".concat(INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, ", ").concat(_constants.DEFAULT_INLINE_IMAGE_BORDER_SIZE, ") * 1px)"),
  boxSizing: "border-box"
});