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

A package contains Atlassian editor core functionality

import _defineProperty from "@babel/runtime/helpers/defineProperty";
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
import { css } from '@emotion/react';
import { defaultEmojiHeight, EmojiSharedCssClassName, defaultDenseEmojiHeight, scaledEmojiHeightH1, scaledEmojiHeightH2, scaledEmojiHeightH3, scaledEmojiHeightH4, denseEmojiHeightH1, denseEmojiHeightH2, denseEmojiHeightH3, denseEmojiHeightH4 } from '@atlaskit/editor-common/emoji';
import { akEditorFullPageDefaultFontSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
import { blanketSelectionStyles, boxShadowSelectionStyles, dangerBackgroundStyles, dangerBorderStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
var emojiSelectionStyles = css({
  borderRadius: "var(--ds-radius-xsmall, 2px)"
});

// Emoji node view styles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var emojiStyles = css(_defineProperty(_defineProperty(_defineProperty({}, ".ProseMirror .".concat(EmojiSharedCssClassName.EMOJI_CONTAINER), {
  display: 'inline-block'
}), ".ProseMirror :is(.".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(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(defaultEmojiHeight, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  maxHeight: "".concat(defaultEmojiHeight, "px"),
  cursor: 'pointer',
  verticalAlign: 'middle',
  userSelect: 'all'
}), ".ProseMirror .".concat(akEditorSelectedNodeClassName), _defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE), [emojiSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
blanketSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
boxShadowSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
hideNativeBrowserTextSelectionStyles])));

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var scaledEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".ProseMirror .".concat(EmojiSharedCssClassName.EMOJI_CONTAINER), {
  display: 'inline-block'
}), ".ProseMirror :is(.".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(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(defaultEmojiHeight, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  minHeight: "".concat(defaultEmojiHeight, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  minWidth: "".concat(defaultEmojiHeight, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  maxHeight: "".concat(scaledEmojiHeightH1, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  maxWidth: "".concat(scaledEmojiHeightH1, "px"),
  cursor: 'pointer',
  verticalAlign: 'middle',
  userSelect: 'all'
}), ".ProseMirror .".concat(akEditorSelectedNodeClassName), _defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE), [emojiSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
blanketSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
boxShadowSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
hideNativeBrowserTextSelectionStyles])), ".ProseMirror h1 :is(.".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  height: "".concat(scaledEmojiHeightH1, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  width: "".concat(scaledEmojiHeightH1, "px")
}), ".ProseMirror h2 :is(.".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  height: "".concat(scaledEmojiHeightH2, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  width: "".concat(scaledEmojiHeightH2, "px")
}), ".ProseMirror h3 :is(.".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  height: "".concat(scaledEmojiHeightH3, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  width: "".concat(scaledEmojiHeightH3, "px")
}), ".ProseMirror h4 :is(.".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  height: "".concat(scaledEmojiHeightH4, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  width: "".concat(scaledEmojiHeightH4, "px")
}), ".ProseMirror :is(h5, h6, p) .".concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  height: "".concat(defaultEmojiHeight, "px"),
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
  width: "".concat(defaultEmojiHeight, "px")
}));
export var getScaledDenseEmojiStyles = function getScaledDenseEmojiStyles(baseFontSize) {
  var _css3;
  if (!baseFontSize || baseFontSize === akEditorFullPageDefaultFontSize) {
    return css({});
  }
  return css((_css3 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css3, ".ProseMirror :is(.".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: defaultDenseEmojiHeight,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: defaultDenseEmojiHeight,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    minHeight: defaultDenseEmojiHeight,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    minWidth: defaultDenseEmojiHeight,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    maxHeight: "".concat(denseEmojiHeightH1, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    maxWidth: "".concat(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(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(denseEmojiHeightH1, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(denseEmojiHeightH1, "px")
  }), ".ProseMirror h2 :is(.".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(denseEmojiHeightH2, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(denseEmojiHeightH2, "px")
  }), ".ProseMirror h3 :is(.".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(denseEmojiHeightH3, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(denseEmojiHeightH3, "px")
  }), ".ProseMirror h4 :is(.".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(denseEmojiHeightH4, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(denseEmojiHeightH4, "px")
  }), ".ProseMirror h1 .".concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(denseEmojiHeightH1, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(denseEmojiHeightH1, "px")
  }), ".ProseMirror h2 .".concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(denseEmojiHeightH2, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(denseEmojiHeightH2, "px")
  }), ".ProseMirror h3 .".concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(denseEmojiHeightH3, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(denseEmojiHeightH3, "px")
  }), ".ProseMirror h4 .".concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(denseEmojiHeightH4, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(denseEmojiHeightH4, "px")
  }), _defineProperty(_css3, ".ProseMirror :is(h5, h6, p) .".concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    height: "".concat(defaultDenseEmojiHeight, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(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.
 */
export var getDenseEmojiStyles = function getDenseEmojiStyles(baseFontSize) {
  if (!baseFontSize || baseFontSize === akEditorFullPageDefaultFontSize) {
    return 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 = defaultEmojiHeight * baseFontSize / akEditorFullPageDefaultFontSize;
  return css(_defineProperty(_defineProperty({}, ".ProseMirror :is(.".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(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
export var emojiDangerStyles = css(_defineProperty({}, ".ProseMirror .".concat(akEditorSelectedNodeClassName, ".danger"), _defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE), [
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
[dangerBorderStyles, dangerBackgroundStyles]])));