md-editor – Ein eigener Markdown-Editor

Dieser Standalone-Markdown-Editor ist eine eigene Web-Komponente für Algroveon-Mini-SSG, einen von mir entwickelten Static Site Generator mit browserbasierter Admin-Oberfläche. Er ist zwar für diesen Einsatz entstanden, lässt sich aber ebenso in andere Projekte einbinden. Im Mittelpunkt steht eine schlanke Editor-Oberfläche mit den typischen Funktionen für Überschriften, Einrückungen, Formatierungen und Vorschau.

Kern-Features

Toolbar: Fett, Kursiv, H1–H3, Link, Bild, Liste, Trennlinie. Alle Aktionen arbeiten mit dem aktuellen Cursor-Kontext: Ist Text markiert, wird er eingeschlossen. Ist nichts markiert, wird ein Platzhalter eingefügt. Präfixe (Überschriften, Listen) lassen sich mit einem zweiten Klick wieder entfernen – # Titel wird also wieder zu Titel.

Split-Live-Preview: Ein Klick teilt den Editor vertikal – links Rohtext, rechts gerendertes HTML via marked.js. Die Vorschau aktualisiert sich bei jeder Eingabe.

Frontmatter-Handling: Ein ----Block am Anfang einer Datei wird als YAML-Frontmatter erkannt und in der Vorschau als separater Block dargestellt – nicht als Markdown gerendert. Das ist wichtig für den Einsatz in einem Static Site Generator.

Vollbild-Modus: Per Toolbar-Button oder Escape. Legt sich als position: fixed über das gesamte Viewport – alle anderen geöffneten Instanzen deaktivieren sich dabei.

Tastaturkürzel: Strg/Cmd+B (Fett), Strg/Cmd+I (Kursiv), Tab (Einrückung mit zwei Leerzeichen statt Fokus-Verlust).

API

Einbindung per CSS-Selektor oder direktem Element-Referenz:

const editor = new MdEditor('#container', { value: '# Hallo' });
editor.on('change', value => console.log(value));
editor.getValue();
editor.setValue('# Neuer Inhalt');
editor.destroy();

Theming

Alle Farben sind CSS Custom Properties auf .mde. Drei Modi werden unterstützt: Dark (Standard), Light (.mde-light) und Auto (.mde-auto, folgt prefers-color-scheme). Farben, Radius und Schriftarten lassen sich ohne Eingriff in den JavaScript-Code anpassen.

Einbindung in Algroveon-Mini-SSG

Der Editor läuft als Git-Submodul unter admin_ui/md-editor/ in Algroveon-Mini-SSG. Er übernimmt dort die Bearbeitung aller Markdown-Dateien. HTML- und YAML-Dateien behalten ihren bisherigen Editor. Der Einsatzbereich ist bewusst klar begrenzt, aber hat trotzdem Potential für mehr.