Script-Editor: CodeMirror 6 in separatem Modal (Stored-Scripts erstellen/bearbeiten) statt rohem Textarea #177

New issue

Closed

opened 2026-06-26 09:04:13 +00:00 by chinux · 0 comments

chinux commented

2026-06-26 09:04:13 +00:00

Owner

Ziel

Die rohen <textarea>-Script-Editoren durch einen CodeMirror-6-Editor in einem separaten Modal ersetzen — mit Syntax-Highlighting, Zeilennummern, Tab/Indent. Statt des Inline-Feldes ein Editor-Modal mit klaren Buttons: „Script erstellen" / „Script bearbeiten".

Betroffene Stellen (3 — alle auf dieselbe neue Komponente umstellen)

frontend/src/lib/components/admin-node-tabs/NodeCommandPanel.svelte — Stored-Scripts-Verwaltung (das Feld aus dem Screenshot: content + interpreter).
frontend/src/lib/components/admin-vm-modal/tabs/CommandsTab.svelte — Inline-Befehl (inlineContent, :145) + Interpreter-Select (:152).
NodeSchedulerPanel.svelte nutzt Scripts via script_id (seit #142) — kein eigener Editor, aber der „Script erstellen/bearbeiten"-Einstieg sollte von dort erreichbar sein.

Datenmodell (vorhanden)

StoredScript (server/models/command.py): content (Text) + interpreter (z. B. /bin/bash, python3). Keine separate language-Spalte → die CodeMirror-Sprache aus dem interpreter ableiten (Mapping unten). Keine Migration nötig.

Umsetzung

Abhängigkeiten (npm)

CodeMirror 6 modular: codemirror, @codemirror/state, @codemirror/view, @codemirror/commands, @codemirror/language, @codemirror/lang-python, @codemirror/legacy-modes (für Shell via StreamLanguage) — plus ein dunkles Theme (@codemirror/theme-one-dark oder eigenes, passend zum App-Dark-Theme).

Neue Komponenten

lib/components/editor/CodeEditor.svelte — dünner CodeMirror-6-Wrapper:
- Props: value (bindable/$bindable), language ("shell"|"python"|"plain"), readonly?, placeholder?.
- Zeilennummern, Syntax-Highlight, Tab-Indent, Dark-Theme, auf App-Tokens abgestimmt.
- Sauberes Mount/Teardown (onDestroy → view.destroy()), Wert-Sync in beide Richtungen.
lib/components/editor/ScriptEditorModal.svelte — das Modal:
- Felder: Name, Beschreibung, Interpreter-Select, CodeEditor (Sprache folgt dem Interpreter).
- Modi: Erstellen (leer/Shebang-Vorlage je Interpreter) und Bearbeiten (lädt vorhandenes StoredScript).
- Speichern → commandApi create/update; Schließen ohne Speichern verwirft.

Interpreter → CodeMirror-Sprache (Mapping)

enthält python → lang-python
bash/sh/zsh//bin/*sh → Shell (StreamLanguage aus legacy-modes shell)
sonst → plain (kein Highlight)
Shebang-Vorlage beim „Erstellen" je Interpreter (#!/usr/bin/env python3 bzw. #!/bin/bash).

UI-Umbau

In NodeCommandPanel: das rohe <textarea> für content raus; stattdessen Liste der Scripts + Buttons „Script erstellen" und je Eintrag „Bearbeiten" → öffnet ScriptEditorModal.
In CommandsTab: das Inline-<textarea> (:145) durch CodeEditor (kompakt, ~6 Zeilen) ersetzen; großer Editier-Komfort optional über denselben Modal-Button.

Akzeptanz

Script-Bearbeitung läuft über ein separates Modal mit CodeMirror 6 (Highlight + Zeilennummern), nicht mehr im rohen Textarea.
„Script erstellen" und „Script bearbeiten" als klare Buttons; Erstellen legt Shebang-Vorlage je Interpreter an.
Highlighting folgt dem gewählten Interpreter (Python/Shell/plain).
Speichern/Laden über bestehende commandApi/StoredScript (keine Backend-/Migration-Änderung).
Dark-Theme-konform; sauberes Teardown (kein Editor-Leak — vgl. #119 Timer/Lifecycle).
Alle 3 Stellen nutzen dieselbe CodeEditor-Komponente (keine Dubletten).

Bezug

#142 (command.run nutzt Stored-Script), Konvention „1 Komponente = 1 Datei" (#94, wiki/Development.md).

Branch

feat/codemirror-script-editor

## Ziel Die rohen `<textarea>`-Script-Editoren durch einen **CodeMirror-6**-Editor in einem **separaten Modal** ersetzen — mit Syntax-Highlighting, Zeilennummern, Tab/Indent. Statt des Inline-Feldes ein Editor-Modal mit klaren Buttons: **„Script erstellen"** / **„Script bearbeiten"**. ## Betroffene Stellen (3 — alle auf dieselbe neue Komponente umstellen) - `frontend/src/lib/components/admin-node-tabs/NodeCommandPanel.svelte` — Stored-Scripts-Verwaltung (das Feld aus dem Screenshot: `content` + `interpreter`). - `frontend/src/lib/components/admin-vm-modal/tabs/CommandsTab.svelte` — Inline-Befehl (`inlineContent`, :145) + Interpreter-Select (:152). - `NodeSchedulerPanel.svelte` nutzt Scripts via `script_id` (seit #142) — kein eigener Editor, aber der „Script erstellen/bearbeiten"-Einstieg sollte von dort erreichbar sein. ## Datenmodell (vorhanden) `StoredScript` (`server/models/command.py`): `content` (Text) + `interpreter` (z. B. `/bin/bash`, `python3`). **Keine** separate `language`-Spalte → die CodeMirror-Sprache aus dem `interpreter` ableiten (Mapping unten). Keine Migration nötig. ## Umsetzung ### Abhängigkeiten (npm) CodeMirror 6 modular: `codemirror`, `@codemirror/state`, `@codemirror/view`, `@codemirror/commands`, `@codemirror/language`, `@codemirror/lang-python`, `@codemirror/legacy-modes` (für Shell via StreamLanguage) — plus ein dunkles Theme (`@codemirror/theme-one-dark` oder eigenes, passend zum App-Dark-Theme). ### Neue Komponenten 1. **`lib/components/editor/CodeEditor.svelte`** — dünner CodeMirror-6-Wrapper: - Props: `value` (bindable/`$bindable`), `language` ("shell"|"python"|"plain"), `readonly?`, `placeholder?`. - Zeilennummern, Syntax-Highlight, Tab-Indent, Dark-Theme, auf App-Tokens abgestimmt. - Sauberes Mount/Teardown (`onDestroy` → `view.destroy()`), Wert-Sync in beide Richtungen. 2. **`lib/components/editor/ScriptEditorModal.svelte`** — das Modal: - Felder: Name, Beschreibung, **Interpreter-Select**, **CodeEditor** (Sprache folgt dem Interpreter). - Modi: **Erstellen** (leer/Shebang-Vorlage je Interpreter) und **Bearbeiten** (lädt vorhandenes StoredScript). - Speichern → `commandApi` create/update; Schließen ohne Speichern verwirft. ### Interpreter → CodeMirror-Sprache (Mapping) - enthält `python` → `lang-python` - `bash`/`sh`/`zsh`/`/bin/*sh` → Shell (StreamLanguage aus legacy-modes `shell`) - sonst → plain (kein Highlight) - Shebang-Vorlage beim „Erstellen" je Interpreter (`#!/usr/bin/env python3` bzw. `#!/bin/bash`). ### UI-Umbau - In **NodeCommandPanel**: das rohe `<textarea>` für `content` raus; stattdessen Liste der Scripts + Buttons **„Script erstellen"** und je Eintrag **„Bearbeiten"** → öffnet `ScriptEditorModal`. - In **CommandsTab**: das Inline-`<textarea>` (:145) durch `CodeEditor` (kompakt, ~6 Zeilen) ersetzen; großer Editier-Komfort optional über denselben Modal-Button. ## Akzeptanz - Script-Bearbeitung läuft über ein **separates Modal** mit CodeMirror 6 (Highlight + Zeilennummern), nicht mehr im rohen Textarea. - „Script erstellen" und „Script bearbeiten" als klare Buttons; Erstellen legt Shebang-Vorlage je Interpreter an. - Highlighting folgt dem gewählten Interpreter (Python/Shell/plain). - Speichern/Laden über bestehende `commandApi`/`StoredScript` (keine Backend-/Migration-Änderung). - Dark-Theme-konform; sauberes Teardown (kein Editor-Leak — vgl. #119 Timer/Lifecycle). - Alle 3 Stellen nutzen dieselbe `CodeEditor`-Komponente (keine Dubletten). ## Bezug #142 (command.run nutzt Stored-Script), Konvention „1 Komponente = 1 Datei" (#94, wiki/Development.md). ## Branch `feat/codemirror-script-editor`

chinux added the

frontend

label

2026-06-26 09:04:13 +00:00

chinux referenced this issue from a commit

2026-06-26 09:21:12 +00:00

feat(scripts): CodeMirror-Editor-Modal + Editor-UX (#175,#176,#177)

chinux closed this issue

2026-06-26 09:21:12 +00:00

chinux referenced this issue

2026-06-26 11:13:56 +00:00

Script-Editor: Strg+S / Cmd+S speichert (Save-Shortcut, auch im CodeMirror-Feld) #179