feat: added settings for changing edtor tab size and line height
mellbacon committed
Feb 3, 2024 at 23:13 UTC
5dd12e07513f08b867d9f57a2e9ba9f117a47ad0
4 files changed
+51
-3
src-tauri/src/main.rs
+5
@@ -319,6 +319,8 @@ fn load_settings(app: &mut App) {
319
"nucleus.theme": "Dark",
320
"editor.fontSize": 14,
321
"editor.fontFamily": "monospace",
322
+ "editor.lineHeight": 1.3,
323
+ "editor.tabSize": 4,
324
"editor.autosave": false,
325
"nucleus.showKeybinds": false,
326
"nucleus.useExternalTerminal": true,
@@ -336,6 +338,9 @@ fn load_settings(app: &mut App) {
338
let appdata_local = tauri::api::path::app_local_data_dir(&app.config()).unwrap();
339
let settings_path = appdata_local.join("default_settings.json");
340
341
+ #[cfg(debug_assertions)]
342
+ fs::write(&settings_path, default_settings.to_string()).unwrap();
343
+
344
if !settings_path.try_exists().unwrap() {
345
fs::write(&settings_path, default_settings.to_string()).unwrap();
346
info!(
src/config/config.ts
+7
-1
@@ -4,7 +4,7 @@ import { getKeybinds } from "./commands";
4
import { fs, invoke, path } from "@tauri-apps/api";
5
import { loadTheme } from "./themehandler";
6
import { Store } from "tauri-plugin-store-api";
7
-import { setEditorFontFamily, setEditorFontSize } from "../lib/Editor.svelte";
7
+import { setEditorFontFamily, setEditorFontSize, setEditorLineHeight, setEditorTabSize } from "../lib/Editor.svelte";
8
import { watch } from "tauri-plugin-fs-watch-api";
9
import { info } from "tauri-plugin-log-api";
10
import { setTerminalState } from "../lib/Statusbar.svelte";
@@ -93,6 +93,12 @@ export async function loadDefaultSettings() {
93
appSettings.onKeyChange("editor.fontFamily", (value: string) => {
94
setEditorFontFamily(value);
95
})
96
+ appSettings.onKeyChange("editor.lineHeight", (value: string) => {
97
+ setEditorLineHeight(value);
98
+ })
99
+ appSettings.onKeyChange("editor.tabSize", (value: number) => {
100
+ setEditorTabSize(value);
101
+ })
102
appSettings.onKeyChange("nucleus.theme", (value: string) => {
103
loadTheme(value);
104
})
src/lib/Editor.svelte
+25
-1
@@ -25,6 +25,7 @@
25
"readonly": false,
26
});
27
const lang = new Compartment();
28
+ const tabSize = new Compartment();
29
30
export function updateFileInfo(file) {
31
file_info.set(file);
@@ -67,6 +68,12 @@
68
export function getView() {
69
return editorView;
70
}
71
+ export function setTabSize(size) {
72
+ console.log(size)
73
+ editorView.dispatch({
74
+ effects: tabSize.reconfigure(EditorState.tabSize.of(size))
75
+ })
76
+ }
77
78
onMount(async () => {
79
editorView = new EditorView({
@@ -97,7 +104,8 @@
104
if (update.state.selection.ranges.some(r => !r.empty)) {
105
updateLineInfo();
106
}
100
- })
107
+ }),
108
+ tabSize.of(EditorState.tabSize.of(4))
109
],
110
doc: content
111
})
@@ -105,6 +113,7 @@
113
editorView.contentDOM.classList.add("mousetrap");
114
setEditorFontSize(await appSettings.get("editor.fontSize"));
115
setEditorFontFamily(await appSettings.get("editor.fontFamily"));
116
+ setEditorLineHeight(await appSettings.get("editor.lineHeight"));
117
});
118
119
let _ = null;
@@ -153,6 +162,8 @@
162
</script>
163
<script lang="ts" context="module">
164
import { languages as cmLangs } from "@codemirror/language-data";
165
+ import { tabs } from "./EditorTabList.svelte";
166
+ import { get } from "svelte/store";
167
168
export const line_info = writable({line: "-", column: "-"});
169
export const language = writable("Unknown");
@@ -176,6 +187,19 @@
187
(editorContainer as HTMLElement).style.setProperty("font-family", family, "important")
188
}
189
}
190
+ export function setEditorLineHeight(height: string) {
191
+ const editors = document.querySelectorAll(".cm-scroller");
192
+ for (const editorContainer of editors) {
193
+ (editorContainer as HTMLElement).style.setProperty("line-height", height, "important")
194
+ }
195
+ }
196
+ export function setEditorTabSize(size) {
197
+ for (const tab of get(tabs)) {
198
+ if (tab.isfile) {
199
+ tab.content.setTabSize(size);
200
+ }
201
+ }
202
+ }
203
</script>
204
205
<div bind:this={ref} class="editor" class:hidden on:mousedown={updateLineInfo} on:keydown={handleKeyDown}></div>
src/lib/Settings.svelte
+14
-1
@@ -11,6 +11,8 @@
11
12
let editorFontSize;
13
let editorFontFamily;
14
+ let editorLineHeight;
15
+ let editorTabSize;
16
let nucleusTheme;
17
let editorAutosave;
18
let externalTerminal;
@@ -18,6 +20,8 @@
20
onMount(async () => {
21
editorFontSize = await appSettings.get("editor.fontSize");
22
editorFontFamily = await appSettings.get("editor.fontFamily");
23
+ editorLineHeight = await appSettings.get("editor.lineHeight");
24
+ editorTabSize = await appSettings.get("editor.tabSize");
25
editorAutosave = await appSettings.get("editor.autosave");
26
nucleusTheme = await appSettings.get("nucleus.theme");
27
externalTerminal = await appSettings.get("nucleus.useExternalTerminal");
@@ -40,6 +44,14 @@
44
await appSettings.set("editor.fontFamily", e.detail.value);
45
await appSettings.save();
46
}
47
+ async function handleEditorLineHeight(e) {
48
+ await appSettings.set("editor.lineHeight", e.detail.value);
49
+ await appSettings.save();
50
+ }
51
+ async function handleEditorTabSize(e) {
52
+ await appSettings.set("editor.tabSize", e.detail.value);
53
+ await appSettings.save();
54
+ }
55
async function handleTerminal(e) {
56
await appSettings.set("nucleus.useExternalTerminal", e.detail.selection.name);
57
await appSettings.save();
@@ -70,7 +82,6 @@
82
await appSettings.save();
83
84
}
73
-
85
</script>
86
87
<div class="settings-container" class:hidden>
@@ -103,6 +114,8 @@
114
<Select label="Autosave" items={[{id: 0, name: "false"}, {id: 1, name: "true"}]} selected={editorAutosave} on:select={handleAutosaveSelect}></Select>
115
<Input _class="settings-input" placeholder="default: 14" value={editorFontSize} extra_small label="Font Size" on:d_input={handleEditorFontSize} />
116
<Input _class="settings-input" placeholder="monospace" value={editorFontFamily} medium label="Font Family" on:d_input={handleEditorFontFamily} />
117
+ <Input _class="settings-input" placeholder="default: 1.3" value={editorLineHeight} medium label="Line Height" on:d_input={handleEditorLineHeight} />
118
+ <Input _class="settings-input" placeholder="default: 4" value={editorTabSize} medium label="Tab Size" on:d_input={handleEditorTabSize} />
119
</div>
120
</div>
121
<div class="settings-category">