Updated cm6 theme handling to allow extension via API
Uses our custom event system, uses methods that take callables so that internal dependancies can be passed.
This commit is contained in:
parent
9874a53206
commit
74b76ecdb9
4 changed files with 25 additions and 15 deletions
|
@ -49,6 +49,7 @@ function highlightElem(elem) {
|
|||
extensions: viewer(),
|
||||
});
|
||||
setMode(ev, langName, content);
|
||||
window.cm = ev;
|
||||
|
||||
elem.remove();
|
||||
|
||||
|
@ -81,6 +82,7 @@ function addCopyIcon(editorView) {
|
|||
* @returns {*|string}
|
||||
*/
|
||||
function getTheme() {
|
||||
// TODO - Remove
|
||||
const darkMode = document.documentElement.classList.contains('dark-mode');
|
||||
return window.codeTheme || (darkMode ? 'darcula' : 'default');
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
import {EditorView, keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor,
|
||||
import {EditorView, keymap, drawSelection, highlightActiveLine, dropCursor,
|
||||
rectangularSelection, lineNumbers, highlightActiveLineGutter} from "@codemirror/view"
|
||||
import {syntaxHighlighting, bracketMatching} from "@codemirror/language"
|
||||
import {defaultKeymap, history, historyKeymap} from "@codemirror/commands"
|
||||
|
@ -11,17 +11,14 @@ export function viewer() {
|
|||
return [
|
||||
lineNumbers(),
|
||||
highlightActiveLineGutter(),
|
||||
highlightSpecialChars(),
|
||||
history(),
|
||||
drawSelection(),
|
||||
dropCursor(),
|
||||
syntaxHighlighting(defaultLight, {fallback: true}),
|
||||
// syntaxHighlighting(defaultLight, {fallback: false}),
|
||||
bracketMatching(),
|
||||
rectangularSelection(),
|
||||
highlightActiveLine(),
|
||||
keymap.of([
|
||||
...defaultKeymap,
|
||||
...historyKeymap,
|
||||
]),
|
||||
EditorState.readOnly.of(true),
|
||||
];
|
||||
|
@ -31,7 +28,6 @@ export function editor(language) {
|
|||
return [
|
||||
lineNumbers(),
|
||||
highlightActiveLineGutter(),
|
||||
highlightSpecialChars(),
|
||||
history(),
|
||||
drawSelection(),
|
||||
dropCursor(),
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
import {getLanguageExtension} from "./languages"
|
||||
import {HighlightStyle, syntaxHighlighting} from "@codemirror/language";
|
||||
import {Compartment} from "@codemirror/state"
|
||||
import {EditorView} from "@codemirror/view"
|
||||
import {oneDark} from "@codemirror/theme-one-dark"
|
||||
import {oneDarkTheme, oneDarkHighlightStyle} from "@codemirror/theme-one-dark"
|
||||
import {tags} from "@lezer/highlight"
|
||||
|
||||
const viewLangCompartments = new WeakMap();
|
||||
|
||||
|
@ -25,19 +27,33 @@ export function createView(config) {
|
|||
|
||||
/**
|
||||
* Get the theme extension to use for editor view instance.
|
||||
* @returns {Extension}
|
||||
* @returns {Extension[]}
|
||||
*/
|
||||
function getTheme(viewParentEl) {
|
||||
const darkMode = document.documentElement.classList.contains('dark-mode');
|
||||
let viewTheme = darkMode ? oneDarkTheme : [];
|
||||
let highlightStyle = darkMode ? oneDarkHighlightStyle : null;
|
||||
|
||||
const eventData = {
|
||||
darkMode: darkMode,
|
||||
theme: null,
|
||||
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 eventData.theme || (darkMode ? oneDark : []);
|
||||
return [viewTheme, highlightStyle ? syntaxHighlighting(highlightStyle) : []];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -412,10 +412,6 @@ span.CodeMirror-selectedtext { background: none; }
|
|||
/**
|
||||
* Custom BookStack overrides
|
||||
*/
|
||||
.cm-editor {
|
||||
@include lightDark(background-color, #FFF, #000);
|
||||
}
|
||||
|
||||
// TODO - All below are old
|
||||
.CodeMirror, .CodeMirror pre {
|
||||
font-size: 12px;
|
||||
|
|
Loading…
Reference in a new issue