A focused Docker Compose management web application.
feat: smarter auto indent
+41
-5
-1
packages/panel/package.json
-1
packages/panel/package.json
+40
-3
packages/panel/src/lib/component/ComposeEditor.svelte
+40
-3
packages/panel/src/lib/component/ComposeEditor.svelte
···
9
9
import * as language from "@codemirror/language";
10
10
import prettierYaml from "prettier/plugins/yaml";
11
11
import * as commands from "@codemirror/commands";
12
-
import { yaml } from "@codemirror/lang-yaml";
13
12
import * as estate from "@codemirror/state";
14
13
import * as view from "@codemirror/view";
15
14
import * as lint from "@codemirror/lint";
···
23
22
24
23
let focused = $state(false);
25
24
25
+
const enterHandler = (view: view.EditorView) => {
26
+
const { state } = view;
27
+
const { from } = state.selection.main;
28
+
const line = state.doc.lineAt(from).text;
29
+
30
+
// Get the current indentation
31
+
const currentIndent = line.match(/^(\s*)/)?.[0] ?? "";
32
+
const unit = state.facet(language.indentUnit);
33
+
34
+
let result = "\n";
35
+
36
+
// Check if line ends with a colon
37
+
if (/:\s*(?:#.*)?$/.test(line)) {
38
+
result += currentIndent + unit; // Increase indent for new line
39
+
}
40
+
41
+
// Check if line starts starts with a dash
42
+
else if (/^\s*-/.test(line)) {
43
+
result += currentIndent + "- "; // Inset a dash on new line
44
+
}
45
+
46
+
// Otherwise, maintain previous indentation
47
+
else {
48
+
result = "\n" + currentIndent;
49
+
}
50
+
51
+
// Update the document
52
+
view.dispatch({
53
+
changes: { from, to: state.selection.main.to, insert: result },
54
+
selection: { anchor: from + result.length },
55
+
scrollIntoView: true,
56
+
});
57
+
58
+
return true;
59
+
};
60
+
26
61
async function format(view: view.EditorView) {
27
62
const doc = view.state.doc.toString();
28
63
···
33
68
parser: "yaml",
34
69
});
35
70
71
+
// If document hasn't changed, return early
36
72
if (formatted === doc) return;
37
73
38
74
view.dispatch({
···
50
86
indentationMarkers(),
51
87
catppuccinMacchiato,
52
88
yamlSchema(schema),
53
-
yaml(),
54
89
55
90
view.lineNumbers(),
56
91
view.highlightSpecialChars(),
···
59
94
view.drawSelection(),
60
95
view.dropCursor(),
61
96
estate.EditorState.allowMultipleSelections.of(true),
62
-
language.indentOnInput(),
63
97
language.syntaxHighlighting(language.defaultHighlightStyle, { fallback: true }),
64
98
language.bracketMatching(),
65
99
autocomplete.closeBrackets(),
···
67
101
view.rectangularSelection(),
68
102
view.crosshairCursor(),
69
103
view.keymap.of([
104
+
{ key: "Enter", run: enterHandler },
105
+
{ key: "Ctrl-Enter", run: () => true },
70
106
commands.indentWithTab,
71
107
...autocomplete.closeBracketsKeymap,
72
108
...commands.defaultKeymap,
···
74
110
...language.foldKeymap,
75
111
...autocomplete.completionKeymap,
76
112
...lint.lintKeymap,
113
+
{ key: "Ctrl-Shift-z", run: commands.redo },
77
114
78
115
// Format keybind
79
116
{
+1
-1
packages/panel/src/lib/component/LogTerminal.svelte
+1
-1
packages/panel/src/lib/component/LogTerminal.svelte