feat: added line/column number detection to the status bar
mellbacon committed
May 19, 2023 at 20:57 UTC
6cb857e28afd3bafa09b54b0710b734c25392040
2 files changed
+21
-2
src/lib/Editor.svelte
+19
-1
@@ -62,6 +62,23 @@
62
await tick();
63
await tick();
64
editorView.focus();
65
+ updateLineInfo();
66
+ }
67
+ function updateLineInfo() {
68
+ let lineNumber = editorView.state.doc.lineAt(editorView.state.selection.main.head).number;
69
+ let columnNumber = editorView.state.selection.ranges[0].head - editorView.state.doc.lineAt(editorView.state.selection.main.head).from;
70
+ line_info.set({line: lineNumber.toString(), column: (columnNumber + 1).toString()})
71
+ }
72
+
73
+ async function handleKeyDown(e) {
74
+ let key = e.code;
75
+ switch(key) {
76
+ case "Backspace": case "Enter":
77
+ await updateContent();
78
+ updateLineInfo();
79
+ case "ArrowRight": case "ArrowLeft": case "ArrowDown": case "ArrowUp":
80
+ updateLineInfo();
81
+ }
82
}
83
</script>
84
<script lang="ts" context="module">
@@ -71,13 +88,14 @@
88
"fileType": "",
89
"readonly": false,
90
});
91
+ export const line_info = writable({line: "-", column: "-"});
92
93
export function updateFile(fileinfo) {
94
file_info.set(fileinfo);
95
}
96
</script>
97
80
-<div bind:this={ref} class="editor" class:hidden on:input={updateContent}></div>
98
+<div bind:this={ref} class="editor" class:hidden on:input={updateContent} on:mousedown={updateLineInfo} on:keydown={handleKeyDown}></div>
99
100
<style lang="scss">
101
.editor {
src/lib/Statusbar.svelte
+2
-1
@@ -1,5 +1,6 @@
1
<script lang="ts">
2
import { isfile } from "./EditorTabList.svelte";
3
+ import { line_info } from "./Editor.svelte";
4
</script>
5
6
<div id="statusbar">
@@ -12,7 +13,7 @@
13
</div>
14
{#if $isfile}
15
<div class="editor-info">
15
- <span title="Ln: -, Col: -">- : -</span>
16
+ <span title="Ln: {$line_info.line}, Col: {$line_info.column}">{$line_info.line} : {$line_info.column}</span>
17
<div class="divider"></div>
18
<span>UTF-8</span>
19
<div class="divider"></div>