1 import {tags} from '@lezer/highlight';
2 import {HighlightStyle, syntaxHighlighting} from '@codemirror/language';
3 import {EditorView} from '@codemirror/view';
4 import {oneDarkHighlightStyle, oneDarkTheme} from '@codemirror/theme-one-dark';
6 const defaultLightHighlightStyle = HighlightStyle.define([
13 textDecoration: 'underline',
17 textDecoration: 'underline',
29 tag: tags.strikethrough,
30 textDecoration: 'line-through',
37 tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName],
41 tag: [tags.literal, tags.inserted],
45 tag: [tags.string, tags.deleted],
49 tag: [tags.regexp, tags.escape, tags.special(tags.string)],
53 tag: tags.definition(tags.variableName),
57 tag: tags.local(tags.variableName),
61 tag: [tags.typeName, tags.namespace],
69 tag: [tags.special(tags.variableName), tags.macroName],
73 tag: tags.definition(tags.propertyName),
77 tag: tags.compareOperator,
90 const defaultThemeSpec = {
92 backgroundColor: '#FFF',
104 * Get the theme extension to use for editor view instance.
105 * @returns {Extension[]}
107 export function getTheme(viewParentEl) {
108 const darkMode = document.documentElement.classList.contains('dark-mode');
109 let viewTheme = darkMode ? oneDarkTheme : EditorView.theme(defaultThemeSpec);
110 let highlightStyle = darkMode ? oneDarkHighlightStyle : defaultLightHighlightStyle;
113 darkModeActive: darkMode,
114 registerViewTheme(builder) {
115 const spec = builder();
117 viewTheme = EditorView.theme(spec);
120 registerHighlightStyle(builder) {
121 const tagStyles = builder(tags) || [];
122 if (tagStyles.length) {
123 highlightStyle = HighlightStyle.define(tagStyles);
128 window.$events.emitPublic(viewParentEl, 'library-cm6::configure-theme', eventData);
130 return [viewTheme, syntaxHighlighting(highlightStyle)];