@atlaskit/editor-plugin-code-block-advanced/dist/cjs/ui/syntaxHighlightingTheme.js

CodeBlockAdvanced plugin for @atlaskit/editor-core

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.languageStyling = exports.highlightStyle = void 0;
var _language = require("@codemirror/language");
var _highlight = require("@lezer/highlight");
// Based on `platform/packages/design-system/code/src/internal/theme/styles.tsx`
var highlightStyle = exports.highlightStyle = _language.HighlightStyle.define([{
  tag: _highlight.tags.meta,
  color: "var(--ds-text, #292A2E)"
}, {
  tag: _highlight.tags.link,
  textDecoration: 'underline'
}, {
  tag: _highlight.tags.heading,
  textDecoration: 'underline',
  // Custom syntax styling to match existing styling
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  fontWeight: "var(--ds-font-weight-bold, 653)"
}, {
  tag: _highlight.tags.emphasis,
  fontStyle: 'italic'
}, {
  tag: _highlight.tags.strong,
  // Custom syntax styling to match existing styling
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  fontWeight: "var(--ds-font-weight-bold, 653)"
}, {
  tag: _highlight.tags.strikethrough,
  textDecoration: 'line-through'
}, {
  tag: _highlight.tags.keyword,
  color: "var(--ds-text-accent-blue, #1558BC)",
  // Custom syntax styling to match existing styling
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  fontWeight: "var(--ds-font-weight-bold, 653)"
}, {
  tag: [_highlight.tags.atom, _highlight.tags.bool, _highlight.tags.url, _highlight.tags.contentSeparator, _highlight.tags.labelName],
  color: "var(--ds-text-accent-blue, #1558BC)"
}, {
  tag: [_highlight.tags.literal],
  color: "var(--ds-text-accent-blue, #1558BC)"
}, {
  tag: _highlight.tags.inserted,
  color: "var(--ds-text-accent-green, #216E4E)"
}, {
  tag: [_highlight.tags.string],
  color: "var(--ds-text-accent-green, #216E4E)"
}, {
  tag: [_highlight.tags.deleted],
  color: "var(--ds-text-accent-red, #AE2E24)"
}, {
  tag: [_highlight.tags.special(_highlight.tags.string)],
  color: "var(--ds-text-accent-green, #216E4E)"
}, {
  tag: [_highlight.tags.regexp, _highlight.tags.escape],
  color: "var(--ds-text-accent-teal, #206A83)"
}, {
  tag: _highlight.tags.definition(_highlight.tags.variableName),
  color: "var(--ds-text, #292A2E)"
}, {
  tag: _highlight.tags.local(_highlight.tags.variableName),
  color: "var(--ds-text, #292A2E)"
}, {
  tag: [_highlight.tags.typeName, _highlight.tags.namespace],
  color: "var(--ds-text-accent-blue, #1558BC)"
}, {
  tag: _highlight.tags.className,
  color: "var(--ds-text-accent-purple, #803FA5)"
}, {
  tag: [_highlight.tags.special(_highlight.tags.variableName), _highlight.tags.macroName],
  color: "var(--ds-text, #292A2E)"
}, {
  tag: _highlight.tags.definition(_highlight.tags.propertyName),
  color: "var(--ds-text, #292A2E)"
}, {
  tag: _highlight.tags.comment,
  color: "var(--ds-text-subtlest, #6B6E76)",
  fontStyle: 'italic'
}, {
  tag: _highlight.tags.invalid,
  color: "var(--ds-text, #292A2E)"
}]);

/**
 * Prismjs (renderer) and codemirror (editor) tokenise slightly differently,
 * Occasionally we may want to override tokens for certain languages to
 * get closer to renderer.
 *
 * Note the way that codemirror works - these styles get added on top of the styling above
 * (and override existing tags).
 *
 * @param language Codemirror language to scope the changes to a specific language
 * @returns Highlight style which can be used with the syntax highlighting extension
 */
var languageStyling = exports.languageStyling = function languageStyling(language) {
  switch (language.name) {
    case 'yaml':
      return _language.HighlightStyle.define([{
        tag: _highlight.tags.definition(_highlight.tags.propertyName),
        color: "var(--ds-text-accent-green, #216E4E)",
        fontWeight: "var(--ds-font-weight-bold, 653)"
      }], {
        scope: language
      });
  }
};