Added some highlighting support
mellobacon committed
Oct 5, 2022 at 18:47 UTC
2a85a9302e698dee82f13fd3272efb3f52405344
3 files changed
+28
-4
src/components/Content/Editor/CodeMirrorEditor.svelte
+8
-2
@@ -3,20 +3,26 @@
3
import { basicSetup } from "codemirror";
4
import { EditorView, keymap } from "@codemirror/view";
5
import { indentWithTab } from "@codemirror/commands";
6
- import { EditorState } from "@codemirror/state";
6
+ import { EditorState, Compartment } from "@codemirror/state";
7
import { default_theme } from "./scripts/DefaultTheme";
8
9
export let hidden = false;
10
let editorElement;
11
let editorView: EditorView;
12
export let content = "";
13
+ export let lang = new Compartment();
14
15
+ export function setLanguageMode(mode) {
16
+ editorView.dispatch({
17
+ effects: lang.reconfigure(mode)
18
+ })
19
+ }
20
let dispatch = createEventDispatcher();
21
22
onMount(() => {
23
editorView = new EditorView({
24
state: EditorState.create({
19
- extensions: [basicSetup, default_theme, keymap.of([indentWithTab])],
25
+ extensions: [basicSetup, default_theme, keymap.of([indentWithTab]), lang.of([])],
26
doc: content
27
}),
28
parent: editorElement,
src/components/Content/Editor/scripts/Editor.ts
+12
@@ -1,4 +1,5 @@
1
import langlist from "../../../../scripts/languages/languages.json";
2
+import { languages } from "@codemirror/language-data";
3
4
let keys = Object.keys(langlist);
5
export function getLang(ext: string) {
@@ -9,3 +10,14 @@ export function getLang(ext: string) {
10
}
11
}
12
}
13
+
14
+export async function getLangMode(language: string) {
15
+ // TODO: So apparently not every language is supported in CodeMirror. I need to find a way to support that
16
+ let mode = languages.find(l => l.name === language);
17
+ if (mode) {
18
+ return await mode.load();
19
+ }
20
+ else {
21
+ return [];
22
+ }
23
+}
\ No newline at end of file
src/components/Content/Editor/scripts/Tabs.ts
+8
-2
@@ -2,7 +2,7 @@ import { writeFile, writeTextFile } from '@tauri-apps/api/fs';
2
import { writable } from 'svelte/store';
3
import { loadFile } from '../../../FileTree/scripts/TreeData';
4
import CodeMirrorEditor from '../CodeMirrorEditor.svelte';
5
-import { getLang } from './Editor';
5
+import { getLang, getLangMode } from './Editor';
6
export let tabs = writable([]);
7
export let tabinfo = writable("");
8
export let hidden = writable(true);
@@ -40,7 +40,12 @@ class Tab {
40
console.log(`${this.label} saved`)
41
}, 1000)
42
})
43
- }
43
+ }
44
+
45
+ async setLanguage(lang) {
46
+ let mode = await getLangMode(lang);
47
+ this.editor.setLanguageMode(mode);
48
+ }
49
}
50
51
let id = 0;
@@ -54,6 +59,7 @@ export async function addTab(f: string) {
59
let file = await loadFile(f);
60
let editor = new CodeMirrorEditor({ target: document.getElementById("tabview"), props: { content: file.content } });
61
let tab = new Tab(id, file, editor);
62
+ await tab.setLanguage(tab.language);
63
64
tablist = [...tablist, tab];
65
if (tablist.length > 0) {