Added line numbers
mellobacon committed
Oct 6, 2022 at 03:05 UTC
5399784b28e3345f289939fb8e5f23cdaf6fa1d8
3 files changed
+45
-7
src/components/Content/Editor/CodeMirrorEditor.svelte
+40
-7
@@ -5,6 +5,7 @@
5
import { indentWithTab } from "@codemirror/commands";
6
import { EditorState, Compartment } from "@codemirror/state";
7
import { default_theme } from "./scripts/DefaultTheme";
8
+ import { line_column } from "./scripts/Editor";
9
10
export let hidden = false;
11
let editorElement;
@@ -17,6 +18,25 @@
18
effects: lang.reconfigure(mode)
19
})
20
}
21
+ export async function focus() {
22
+ await tick();
23
+ await tick();
24
+ editorView.focus();
25
+ getLineInfo();
26
+ }
27
+ function getLineInfo() {
28
+ let linenumber = editorView.state.doc.lineAt(editorView.state.selection.main.head).number;
29
+ let colnumber = editorView.state.selection.ranges[0].head - editorView.state.doc.lineAt(editorView.state.selection.main.head).from
30
+ line_column.set({line: linenumber.toString(), col: (colnumber + 1).toString()})
31
+ }
32
+ async function updateDom() {
33
+ await tick();
34
+ let filecontent = "";
35
+ for (let text of editorView.state.doc) {
36
+ filecontent += `${text} `;
37
+ }
38
+ dispatch("input", filecontent);
39
+ }
40
let dispatch = createEventDispatcher();
41
42
onMount(() => {
@@ -29,14 +49,27 @@
49
});
50
});
51
</script>
32
-<div class="editor" class:hidden bind:this={editorElement} on:input={async (e) => {
33
- await tick();
34
- let filecontent = "";
35
- for (let text of editorView.state.doc) {
36
- filecontent += `${text} `;
52
+<div class="editor" class:hidden bind:this={editorElement}
53
+on:input={async (e) => {
54
+ await updateDom();
55
+ getLineInfo();
56
+}}
57
+on:keydown={async (e) => {
58
+ let key = e.code;
59
+ switch(key) {
60
+ case "Backspace": case "Enter":
61
+ await updateDom();
62
+ getLineInfo();
63
+ break;
64
+ case "ArrowRight": case "ArrowLeft": case "ArrowDown": case "ArrowUp":
65
+ getLineInfo();
66
+ break;
67
}
38
- dispatch("input", filecontent);
39
-}} />
68
+}}
69
+on:mousedown = {(e) => {
70
+ getLineInfo();
71
+}}
72
+ />
73
74
<style>
75
.editor {
src/components/Content/Editor/scripts/Editor.ts
+3
@@ -1,5 +1,8 @@
1
import langlist from "../../../../scripts/languages/languages.json";
2
import { languages } from "@codemirror/language-data";
3
+import { writable } from 'svelte/store';
4
+
5
+export let line_column = writable({line: "-", col: "-"});
6
7
let keys = Object.keys(langlist);
8
export function getLang(ext: string) {
src/components/Footer/Footer.svelte
+2
@@ -1,5 +1,6 @@
1
<script lang="ts">
2
import { hidden, tabinfo } from "../Content/Editor/scripts/Tabs";
3
+ import { line_column } from "../Content/Editor/scripts/Editor";
4
</script>
5
6
<div id="footer">
@@ -10,6 +11,7 @@
11
</div>
12
{#if !$hidden}
13
<div id="codeinfo">
14
+ <span>Line {$line_column.line}, Col {$line_column.col}</span>
15
<span>{$tabinfo}</span>
16
</div>
17
{/if}