Added dark theme handling
This commit is contained in:
parent
4757ed9453
commit
9fd7a6abed
3 changed files with 45 additions and 2 deletions
23
package-lock.json
generated
23
package-lock.json
generated
|
@ -21,6 +21,7 @@
|
|||
"@codemirror/language": "^6.2.1",
|
||||
"@codemirror/legacy-modes": "^6.1.0",
|
||||
"@codemirror/state": "^6.1.0",
|
||||
"@codemirror/theme-one-dark": "^6.0.0",
|
||||
"@codemirror/view": "^6.1.2",
|
||||
"clipboard": "^2.0.11",
|
||||
"codemirror": "^6.0.1",
|
||||
|
@ -246,6 +247,17 @@
|
|||
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.0.tgz",
|
||||
"integrity": "sha512-qbUr94DZTe6/V1VS7LDLz11rM/1t/nJxR1El4I6UaxDEdc0aZZvq6JCLJWiRmUf95NRAnDH6fhXn+PWp9wGCIg=="
|
||||
},
|
||||
"node_modules/@codemirror/theme-one-dark": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.0.0.tgz",
|
||||
"integrity": "sha512-jTCfi1I8QT++3m21Ui6sU8qwu3F/hLv161KLxfvkV1cYWSBwyUanmQFs89ChobQjBHi2x7s2k71wF9WYvE8fdw==",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.0.0",
|
||||
"@lezer/highlight": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/view": {
|
||||
"version": "6.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.1.2.tgz",
|
||||
|
@ -2477,6 +2489,17 @@
|
|||
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.0.tgz",
|
||||
"integrity": "sha512-qbUr94DZTe6/V1VS7LDLz11rM/1t/nJxR1El4I6UaxDEdc0aZZvq6JCLJWiRmUf95NRAnDH6fhXn+PWp9wGCIg=="
|
||||
},
|
||||
"@codemirror/theme-one-dark": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.0.0.tgz",
|
||||
"integrity": "sha512-jTCfi1I8QT++3m21Ui6sU8qwu3F/hLv161KLxfvkV1cYWSBwyUanmQFs89ChobQjBHi2x7s2k71wF9WYvE8fdw==",
|
||||
"requires": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.0.0",
|
||||
"@lezer/highlight": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/view": {
|
||||
"version": "6.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.1.2.tgz",
|
||||
|
|
|
@ -39,6 +39,7 @@
|
|||
"@codemirror/language": "^6.2.1",
|
||||
"@codemirror/legacy-modes": "^6.1.0",
|
||||
"@codemirror/state": "^6.1.0",
|
||||
"@codemirror/theme-one-dark": "^6.0.0",
|
||||
"@codemirror/view": "^6.1.2",
|
||||
"clipboard": "^2.0.11",
|
||||
"codemirror": "^6.0.1",
|
||||
|
|
|
@ -1,18 +1,20 @@
|
|||
import {getLanguageExtension} from "./languages";
|
||||
import {getLanguageExtension} from "./languages"
|
||||
import {Compartment} from "@codemirror/state"
|
||||
import {EditorView} from "@codemirror/view"
|
||||
import {oneDark} from "@codemirror/theme-one-dark"
|
||||
|
||||
const viewLangCompartments = new WeakMap();
|
||||
|
||||
/**
|
||||
* Create a new editor view.
|
||||
*
|
||||
* @param {Object} config
|
||||
* @param {{parent: Element, doc: String, extensions: Array}} config
|
||||
* @returns {EditorView}
|
||||
*/
|
||||
export function createView(config) {
|
||||
const langCompartment = new Compartment();
|
||||
config.extensions.push(langCompartment.of([]));
|
||||
config.extensions.push(getTheme(config.parent));
|
||||
|
||||
const ev = new EditorView(config);
|
||||
|
||||
|
@ -21,6 +23,23 @@ export function createView(config) {
|
|||
return ev;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ge the theme extension to use for editor view instance.
|
||||
* @returns {Extension}
|
||||
*/
|
||||
function getTheme(viewParentEl) {
|
||||
const darkMode = document.documentElement.classList.contains('dark-mode');
|
||||
|
||||
const eventData = {
|
||||
darkMode: darkMode,
|
||||
theme: null,
|
||||
};
|
||||
|
||||
window.$events.emitPublic(viewParentEl, 'library-cm6::configure-theme', eventData);
|
||||
|
||||
return eventData.theme || (darkMode ? oneDark : []);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the language mode of an EditorView.
|
||||
*
|
||||
|
|
Loading…
Reference in a new issue