feat: added editor qol changes
code folding, bracket matching, auto indent, indentation markers
mellbacon committed
Feb 6, 2024 at 18:59 UTC
17af77b856291bed3da98c4618ee4a766d4222fc
7 files changed
+85
-9
package.json
+1
@@ -13,6 +13,7 @@
13
},
14
"dependencies": {
15
"@codemirror/language-data": "^6.3.1",
16
+ "@replit/codemirror-indentation-markers": "^6.5.0",
17
"@tauri-apps/api": "^1.4.0",
18
"codemirror": "^6.0.1",
19
"mousetrap": "^1.6.5",
src/config/extensions/default_themes/themes/default_dark.json
+3
-2
@@ -89,11 +89,12 @@
89
"editor.tabHoverBackground": "2b2b2b",
90
"editor.tabHoverForeground": "#ffffff",
91
"editor.tabSaveStateColor": "#ffffff",
92
- "editor.gutterForeground": "#898989",
93
- "editor.gutterActiveForeground": "#ffffff",
92
+ "editor.gutterForeground": "#5c5c5c",
93
+ "editor.gutterActiveForeground": "#f3f3f3",
94
"editor.gutterActiveBackground": "#212121",
95
"editor.activeLineBackground": "#212121",
96
"editor.activeLineBorder": "",
97
+ "editor.activeIndentLineColor": "#a5a5a5",
98
99
"filetree.treeNodeBackground": "",
100
"filetree.treeNodeForeground": "#808080",
src/config/extensions/default_themes/themes/default_light.json
+1
-1
@@ -88,12 +88,12 @@
88
"editor.tabHoverBackground": "#e9e9e9",
89
"editor.tabHoverForeground": "#212121",
90
"editor.tabSaveStateColor": "#000000",
91
-
91
"editor.gutterForeground": "#6E6E6E",
92
"editor.gutterActiveForeground": "#000000",
93
"editor.gutterActiveBackground": "#7e7e7e2b",
94
"editor.activeLineBackground": "#7e7e7e2b",
95
"editor.activeLineBorder": "",
96
+ "editor.activeIndentLineColor": "#000000",
97
98
"filetree.treeNodeBackground": "",
99
"filetree.treeNodeForeground": "#3D3D3D",
src/config/themehandler.ts
+6
-1
@@ -2,17 +2,21 @@ import { homeDir, join } from "@tauri-apps/api/path";
2
import { themes } from "./extensionhandler";
3
import { info } from "tauri-plugin-log-api";
4
import { exists, readDir } from "@tauri-apps/api/fs";
5
-import { get } from "svelte/store";
5
+import { get, writable } from "svelte/store";
6
import { termTheme, updateTermTheme } from "../lib/Terminal.svelte";
7
+import { setColorScheme } from "../lib/Editor.svelte";
8
9
export function getThemes() {
10
return get(themes);
11
}
12
13
const stylesheet = document.styleSheets[0].cssRules[0] as CSSStyleRule;
14
+export const is_dark_theme = writable(true)
15
export async function loadTheme(name: string) {
16
let theme = get(themes).find(n => n.name === name);
17
info(`Loading theme: ${name}...`, {file: "themehandler.ts", line: 16});
18
+ is_dark_theme.set(theme.scheme === "dark");
19
+
20
21
// load base theme
22
let json = await import(`./extensions/default_themes/themes/default_${theme.scheme}.json`);
@@ -24,6 +28,7 @@ export async function loadTheme(name: string) {
28
//const custom_themes = await readDir(path);
29
//}
30
31
+ setColorScheme();
32
termTheme.set({
33
"black": getThemeProperty("terminal-black"),
34
"red": getThemeProperty("terminal-red"),
src/lib/Editor.svelte
+68
-4
@@ -8,8 +8,13 @@
8
import { writable } from "svelte/store";
9
import { saveFile, updateSaveState } from "./File";
10
import { appSettings } from "../config/config";
11
- import { oneDark } from "../config/syntaxhighlighting/dark";
11
+ import { color, oneDark } from "../config/syntaxhighlighting/dark";
12
import { warn } from "tauri-plugin-log-api";
13
+ import { foldGutter, bracketMatching, indentUnit } from "@codemirror/language";
14
+ import { closeBrackets } from "@codemirror/autocomplete";
15
+ import { indentationMarkers } from '@replit/codemirror-indentation-markers';
16
+ import { getThemeProperty, is_dark_theme } from "../config/themehandler";
17
+
18
19
let ref;
20
let editorView: EditorView;
@@ -26,6 +31,8 @@
31
});
32
const lang = new Compartment();
33
const tabSize = new Compartment();
34
+ const indentSize = new Compartment();
35
+ const colorScheme = new Compartment();
36
37
export function updateFileInfo(file) {
38
file_info.set(file);
@@ -69,10 +76,20 @@
76
return editorView;
77
}
78
export function setTabSize(size) {
72
- console.log(size)
79
editorView.dispatch({
80
effects: tabSize.reconfigure(EditorState.tabSize.of(size))
81
})
82
+ setIndentSize(size)
83
+ }
84
+ function setIndentSize(size) {
85
+ editorView.dispatch({
86
+ effects: indentSize.reconfigure(indentUnit.of(" ".repeat(size)))
87
+ })
88
+ }
89
+ export function setScheme(scheme) {
90
+ editorView.dispatch({
91
+ effects: colorScheme.reconfigure(EditorView.darkTheme.of(scheme))
92
+ })
93
}
94
95
onMount(async () => {
@@ -81,6 +98,9 @@
98
state: EditorState.create({
99
extensions: [
100
lineNumbers(),
101
+ foldGutter({openText:"▼", closedText: "►"}),
102
+ bracketMatching(),
103
+ closeBrackets(),
104
highlightActiveLineGutter(),
105
//highlightSpecialChars(), // disabled as an attempt to hide bom for now
106
highlightActiveLine(),
@@ -89,11 +109,22 @@
109
drawSelection(),
110
crosshairCursor(),
111
rectangularSelection(),
112
+ indentUnit.of(" "),
113
+ indentationMarkers({
114
+ thickness: 1,
115
+ colors: {
116
+ dark: getThemeProperty("editor-gutterForeground"),
117
+ activeDark: getThemeProperty("editor-activeIndentLineColor"),
118
+ light: getThemeProperty("editor-gutterForeground"),
119
+ activeLight: getThemeProperty("editor-activeIndentLineColor")
120
+ }
121
+ }),
122
keymap.of([indentWithTab]),
123
lang.of([]),
124
EditorState.allowMultipleSelections.of(true),
125
//syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
126
oneDark,
127
+ colorScheme.of(EditorView.darkTheme.of($is_dark_theme)),
128
keymap.of([
129
...defaultKeymap
130
]),
@@ -114,6 +145,7 @@
145
setEditorFontSize(await appSettings.get("editor.fontSize"));
146
setEditorFontFamily(await appSettings.get("editor.fontFamily"));
147
setEditorLineHeight(await appSettings.get("editor.lineHeight"));
148
+
149
});
150
151
let _ = null;
@@ -200,6 +232,13 @@
232
}
233
}
234
}
235
+ export function setColorScheme() {
236
+ for (const tab of get(tabs)) {
237
+ if (tab.isfile) {
238
+ tab.content.setScheme(get(is_dark_theme))
239
+ }
240
+ }
241
+ }
242
</script>
243
244
<div bind:this={ref} class="editor" class:hidden on:mousedown={updateLineInfo} on:keydown={handleKeyDown}></div>
@@ -237,8 +276,33 @@
276
padding: 0 10px 200px 0 !important;
277
text-wrap: wrap !important;
278
}
240
- :global(.cm-lineNumbers), :global(.cm-gutterElement) {
241
- min-width: 50px !important;
279
+ :global(.cm-lineNumbers) {
280
+ min-width: 60px !important;
281
+ &:hover {
282
+ ~:global(.cm-foldGutter) {
283
+ opacity: 100;
284
+ pointer-events: all;
285
+ }
286
+ }
287
+ }
288
+ :global(.cm-gutterElement) {
289
text-align: center !important;
290
}
291
+ :global(.cm-foldGutter) {
292
+ position: absolute;
293
+ left: 49px;
294
+ pointer-events: none;
295
+ opacity: 0;
296
+ transition: 0.4s;
297
+ &:hover {
298
+ opacity: 100;
299
+ pointer-events: all;
300
+ }
301
+ }
302
+ :global(.cm-indent-markers)::before {
303
+ z-index: 0 !important;
304
+ }
305
+ :global(.cm-line) {
306
+ padding: 0 2px 0 1px !important;
307
+ }
308
</style>
\ No newline at end of file
src/theme.scss
+1
-1
@@ -256,7 +256,7 @@ button:focus {
256
}
257
.cm-gutters {
258
background-color: var(--editor-background) !important;
259
- color: var(--editor-gutter-foreground);
259
+ color: var(--editor-gutterForeground) !important;
260
border: none !important;
261
}
262
.cm-activeLineGutter {
yarn.lock
+5
@@ -589,6 +589,11 @@
589
"@nodelib/fs.scandir" "2.1.5"
590
fastq "^1.6.0"
591
592
+"@replit/codemirror-indentation-markers@^6.5.0":
593
+ version "6.5.0"
594
+ resolved "https://registry.yarnpkg.com/@replit/codemirror-indentation-markers/-/codemirror-indentation-markers-6.5.0.tgz#e853e406cf05fea13449578c6c9c1383c6feb219"
595
+ integrity sha512-5RgeuQ6erfROi1EVI2X7G4UR+KByjb07jhYMynvpvlrV22JlnARifmKMGEUKy0pKcxBNfwbFqoUlTYHPgyZNlg==
596
+
597
"@sveltejs/vite-plugin-svelte-inspector@^1.0.4":
598
version "1.0.4"
599
resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz#c99fcb73aaa845a3e2c0563409aeb3ee0b863add"