mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-06-10 13:43:38 +08:00
CM6: Aligned styling with existing, improved theme handling
This commit is contained in:
@ -1,9 +1,6 @@
|
||||
import {getLanguageExtension} from "./languages"
|
||||
import {HighlightStyle, syntaxHighlighting} from "@codemirror/language";
|
||||
import {Compartment} from "@codemirror/state"
|
||||
import {EditorView} from "@codemirror/view"
|
||||
import {oneDarkTheme, oneDarkHighlightStyle} from "@codemirror/theme-one-dark"
|
||||
import {tags} from "@lezer/highlight"
|
||||
import {Compartment} from "@codemirror/state";
|
||||
import {EditorView} from "@codemirror/view";
|
||||
import {getLanguageExtension} from "./languages";
|
||||
|
||||
const viewLangCompartments = new WeakMap();
|
||||
|
||||
@ -16,7 +13,6 @@ const viewLangCompartments = new WeakMap();
|
||||
export function createView(config) {
|
||||
const langCompartment = new Compartment();
|
||||
config.extensions.push(langCompartment.of([]));
|
||||
config.extensions.push(getTheme(config.parent));
|
||||
|
||||
const ev = new EditorView(config);
|
||||
|
||||
@ -25,37 +21,6 @@ export function createView(config) {
|
||||
return ev;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the theme extension to use for editor view instance.
|
||||
* @returns {Extension[]}
|
||||
*/
|
||||
function getTheme(viewParentEl) {
|
||||
const darkMode = document.documentElement.classList.contains('dark-mode');
|
||||
let viewTheme = darkMode ? oneDarkTheme : [];
|
||||
let highlightStyle = darkMode ? oneDarkHighlightStyle : null;
|
||||
|
||||
const eventData = {
|
||||
darkModeActive: darkMode,
|
||||
registerViewTheme(builder) {
|
||||
const spec = builder();
|
||||
if (spec) {
|
||||
viewTheme = EditorView.theme(spec);
|
||||
}
|
||||
},
|
||||
registerHighlightStyle(builder) {
|
||||
const tagStyles = builder(tags) || [];
|
||||
console.log('called', tagStyles);
|
||||
if (tagStyles.length) {
|
||||
highlightStyle = HighlightStyle.define(tagStyles);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.$events.emitPublic(viewParentEl, 'library-cm6::configure-theme', eventData);
|
||||
|
||||
return [viewTheme, highlightStyle ? syntaxHighlighting(highlightStyle) : []];
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the language mode of an EditorView.
|
||||
*
|
||||
@ -69,5 +34,5 @@ export async function updateViewLanguage(ev, modeSuggestion, content) {
|
||||
|
||||
ev.dispatch({
|
||||
effects: compartment.reconfigure(language ? language : [])
|
||||
})
|
||||
});
|
||||
}
|
Reference in New Issue
Block a user