feat: added file language detection to statusbar
mellbacon committed
May 20, 2023 at 13:15 UTC
15cf4f5b41089edbe7adcba2975bd8afc31cff13
4 files changed
+33
-12
src/lib/Editor.svelte
+27
-9
@@ -14,9 +14,16 @@
14
let editorView: EditorView;
15
export let hidden = false;
16
export let content = "";
17
+ const file_info = writable({
18
+ "filename": "",
19
+ "path": "",
20
+ "fileType": "",
21
+ "language": "",
22
+ "readonly": false,
23
+ });
24
25
export function updateFileInfo(file) {
19
- updateFile(file);
26
+ file_info.set(file);
27
}
28
export function getFileInfo() {
29
return $file_info;
@@ -24,6 +31,9 @@
31
export function getFileContent() {
32
return content;
33
}
34
+ export function getLang(ext) {
35
+ return getLangFromExt(ext);
36
+ }
37
38
onMount(() => {
39
editorView = new EditorView({
@@ -63,6 +73,7 @@
73
await tick();
74
editorView.focus();
75
updateLineInfo();
76
+ language.set($file_info.language);
77
}
78
function updateLineInfo() {
79
let lineNumber = editorView.state.doc.lineAt(editorView.state.selection.main.head).number;
@@ -82,16 +93,23 @@
93
}
94
</script>
95
<script lang="ts" context="module">
85
- export const file_info = writable({
86
- "filename": "",
87
- "path": "",
88
- "fileType": "",
89
- "readonly": false,
90
- });
96
+ import { languages as cmLangs } from "@codemirror/language-data";
97
+
98
export const line_info = writable({line: "-", column: "-"});
99
+ export const language = writable("Unknown");
100
93
- export function updateFile(fileinfo) {
94
- file_info.set(fileinfo);
101
+ export function getLangFromExt(ext: string) {
102
+ if (ext === "txt") {
103
+ return "Plain Text";
104
+ }
105
+
106
+ let cmlang = cmLangs.find(l => l.extensions.includes(ext));
107
+ if (cmlang) {
108
+ return cmlang.name;
109
+ }
110
+ else {
111
+ return "Unknown";
112
+ }
113
}
114
</script>
115
src/lib/File.ts
+3
-1
@@ -20,10 +20,12 @@ export async function saveFile(saveAs = false) {
20
}
21
// write changes to the file
22
fs.writeFile(tab.path, tab.content.getFileContent());
23
+ const fileType = await path.extname(tab.path);
24
tab.content.updateFileInfo({
25
"filename": tab.label,
26
"path": tab.path,
26
- "fileType": await path.extname(tab.path),
27
+ "fileType": fileType,
28
+ "language": tab.content.getLang(fileType),
29
"readonly": false,
30
});
31
tab.setActive(tab.id);
src/lib/Statusbar.svelte
+2
-2
@@ -1,6 +1,6 @@
1
<script lang="ts">
2
import { isfile } from "./EditorTabList.svelte";
3
- import { line_info } from "./Editor.svelte";
3
+ import { line_info, language } from "./Editor.svelte";
4
</script>
5
6
<div id="statusbar">
@@ -17,7 +17,7 @@
17
<div class="divider"></div>
18
<span>UTF-8</span>
19
<div class="divider"></div>
20
- <span>Unknown</span>
20
+ <span>{$language}</span>
21
</div>
22
{/if}
23
</div>
src/lib/Tab/Tab.ts
+1
@@ -89,6 +89,7 @@ export class Tab {
89
"filename": tab.label,
90
"path": tab.path,
91
"fileType": fileType,
92
+ "language": content.getLang(fileType),
93
"readonly": false,
94
});
95
this.tablist = [...this.tablist, tab];