github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-12 23:03:34 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

CM6: Aligned styling with existing, improved theme handling

Browse Source
This commit is contained in:
Dan Brown
2023-04-16 16:05:16 +01:00
parent 74b76ecdb9
commit 74b4751a1c
11 changed files with 186 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
resources/js/code/views.js
View File

@ -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 : [])
})
});
}