@atlaskit/editor-core/dist/cjs/ui/EditorContentContainer/styles/emoji.js

A package contains Atlassian editor core functionality

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.scaledEmojiStyles = exports.getScaledDenseEmojiStyles = exports.getDenseEmojiStyles = exports.emojiStyles = exports.emojiDangerStyles = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _emoji = require("@atlaskit/editor-common/emoji");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _selectionStyles = require("./selectionStyles");
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */

var emojiSelectionStyles = (0, _react.css)({
  borderRadius: "var(--ds-radius-xsmall, 2px)"
});

// Emoji node view styles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var emojiStyles = exports.emojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".ProseMirror .".concat(_emoji.EmojiSharedCssClassName.EMOJI_CONTAINER), {
  display: 'inline-block'
}), ".ProseMirror :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
  background: 'no-repeat transparent',
  display: 'inline-block',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  height: "".concat(_emoji.defaultEmojiHeight, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  maxHeight: "".concat(_emoji.defaultEmojiHeight, "px"),
  cursor: 'pointer',
  verticalAlign: 'middle',
  userSelect: 'all'
}), ".ProseMirror .".concat(_editorSharedStyles.akEditorSelectedNodeClassName), (0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), [emojiSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.blanketSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.boxShadowSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.hideNativeBrowserTextSelectionStyles])));

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var scaledEmojiStyles = exports.scaledEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".ProseMirror .".concat(_emoji.EmojiSharedCssClassName.EMOJI_CONTAINER), {
  display: 'inline-block'
}), ".ProseMirror :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
  background: 'no-repeat transparent',
  display: 'inline-block',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  height: "".concat(_emoji.defaultEmojiHeight, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  minHeight: "".concat(_emoji.defaultEmojiHeight, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  minWidth: "".concat(_emoji.defaultEmojiHeight, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  maxHeight: "".concat(_emoji.scaledEmojiHeightH1, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  maxWidth: "".concat(_emoji.scaledEmojiHeightH1, "px"),
  cursor: 'pointer',
  verticalAlign: 'middle',
  userSelect: 'all'
}), ".ProseMirror .".concat(_editorSharedStyles.akEditorSelectedNodeClassName), (0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), [emojiSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.blanketSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.boxShadowSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.hideNativeBrowserTextSelectionStyles])), ".ProseMirror h1 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  height: "".concat(_emoji.scaledEmojiHeightH1, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  width: "".concat(_emoji.scaledEmojiHeightH1, "px")
}), ".ProseMirror h2 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  height: "".concat(_emoji.scaledEmojiHeightH2, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  width: "".concat(_emoji.scaledEmojiHeightH2, "px")
}), ".ProseMirror h3 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  height: "".concat(_emoji.scaledEmojiHeightH3, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  width: "".concat(_emoji.scaledEmojiHeightH3, "px")
}), ".ProseMirror h4 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  height: "".concat(_emoji.scaledEmojiHeightH4, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  width: "".concat(_emoji.scaledEmojiHeightH4, "px")
}), ".ProseMirror :is(h5, h6, p) .".concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  height: "".concat(_emoji.defaultEmojiHeight, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  width: "".concat(_emoji.defaultEmojiHeight, "px")
}));
var getScaledDenseEmojiStyles = exports.getScaledDenseEmojiStyles = function getScaledDenseEmojiStyles(baseFontSize) {
  var _css3;
  if (!baseFontSize || baseFontSize === _editorSharedStyles.akEditorFullPageDefaultFontSize) {
    return (0, _react.css)({});
  }
  return (0, _react.css)((_css3 = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css3, ".ProseMirror :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: _emoji.defaultDenseEmojiHeight,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: _emoji.defaultDenseEmojiHeight,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    minHeight: _emoji.defaultDenseEmojiHeight,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    minWidth: _emoji.defaultDenseEmojiHeight,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    maxHeight: "".concat(_emoji.denseEmojiHeightH1, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    maxWidth: "".concat(_emoji.denseEmojiHeightH1, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    img: {
      width: '100%',
      height: '100%',
      objectFit: 'contain'
    }
  }), '.ProseMirror .ak-editor-panel .ak-editor-panel__icon', {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
    height: "var(--ds-space-250, 20px)",
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
    width: "var(--ds-space-250, 20px)"
  }), ".ProseMirror h1 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(_emoji.denseEmojiHeightH1, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(_emoji.denseEmojiHeightH1, "px")
  }), ".ProseMirror h2 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(_emoji.denseEmojiHeightH2, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(_emoji.denseEmojiHeightH2, "px")
  }), ".ProseMirror h3 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(_emoji.denseEmojiHeightH3, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(_emoji.denseEmojiHeightH3, "px")
  }), ".ProseMirror h4 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(_emoji.denseEmojiHeightH4, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(_emoji.denseEmojiHeightH4, "px")
  }), ".ProseMirror h1 .".concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(_emoji.denseEmojiHeightH1, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(_emoji.denseEmojiHeightH1, "px")
  }), ".ProseMirror h2 .".concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(_emoji.denseEmojiHeightH2, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(_emoji.denseEmojiHeightH2, "px")
  }), ".ProseMirror h3 .".concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(_emoji.denseEmojiHeightH3, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(_emoji.denseEmojiHeightH3, "px")
  }), ".ProseMirror h4 .".concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(_emoji.denseEmojiHeightH4, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(_emoji.denseEmojiHeightH4, "px")
  }), (0, _defineProperty2.default)(_css3, ".ProseMirror :is(h5, h6, p) .".concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(_emoji.defaultDenseEmojiHeight, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(_emoji.defaultDenseEmojiHeight, "px")
  })));
};

/**
 * Gets dynamic emoji styles that scale emoji size based on the base font size.
 * This allows emojis to scale proportionally when the base font size changes.
 * @param baseFontSize - The base font size in pixels (e.g., 16 for default, 13 for dense mode)
 * @returns SerializedStyles with emoji size overrides if baseFontSize is provided and different from default.
 */
var getDenseEmojiStyles = exports.getDenseEmojiStyles = function getDenseEmojiStyles(baseFontSize) {
  if (!baseFontSize || baseFontSize === _editorSharedStyles.akEditorFullPageDefaultFontSize) {
    return (0, _react.css)({});
  }

  // Calculate emoji size based on base font size
  // Default: 20px emoji at 16px base font
  // Scaled: 20px * (baseFontSize/16)
  // E.g., dense mode (13px base): 20px * (13/16) = 16.25px
  var emojiSize = _emoji.defaultEmojiHeight * baseFontSize / _editorSharedStyles.akEditorFullPageDefaultFontSize;
  return (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".ProseMirror :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
    width: emojiSize,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
    height: emojiSize,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
    maxHeight: emojiSize,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    img: {
      width: '100%',
      height: '100%',
      objectFit: 'contain'
    }
  }), '.ProseMirror .ak-editor-panel .ak-editor-panel__icon', {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
    height: "var(--ds-space-250, 20px)",
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
    width: "var(--ds-space-250, 20px)"
  }));
};

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var emojiDangerStyles = exports.emojiDangerStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror .".concat(_editorSharedStyles.akEditorSelectedNodeClassName, ".danger"), (0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), [
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
[_selectionStyles.dangerBorderStyles, _selectionStyles.dangerBackgroundStyles]])));