ADR-003: Notion-artiger E-Mail-Builder

• Status: Angenommen
• Datum: 2025-01-10

Kontext

Der ursprüngliche E-Mail-Builder verwendete ein klassisches 3-Spalten-Layout: eine Blockpalette links, eine Canvas in der Mitte und ein Eigenschaftenpanel rechts. Das ist der Standardansatz der meisten E-Mail-Editoren (Mailchimp, Beehiiv usw.).

Nutzerrückmeldungen und interne Tests brachten Probleme zutage:

• Kognitiver Aufwand — Nutzer wechselten ständig den Kontext zwischen Palette, Canvas und Eigenschaftenpanel. Einen Block zu bearbeiten erforderte: (1) den Block auf der Canvas anklicken, (2) nach rechts schauen, um die Einstellungen zu finden, (3) Änderungen vornehmen, (4) zurück zur Canvas schauen, um das Ergebnis zu sehen.
• Verschwendeter Platz — Palette und Eigenschaftenpanel belegten Bildschirmbreite, auch wenn sie nicht genutzt wurden, und ließen eine schmale Canvas übrig, die nicht der tatsächlichen E-Mail-Breite entsprach.
• Reibung bei Drag-and-drop — Blöcke aus einer Palette an eine bestimmte Position zu ziehen war ungenau, besonders beim Umsortieren bestehender Blöcke.

Notion, Linear und moderne Dokumenteditoren lösen das mit Inline-Bearbeitung: Inhalte werden dort bearbeitet, wo sie stehen, und Werkzeuge erscheinen kontextbezogen.

Entscheidung

Das 3-Spalten-Layout durch eine einspaltige Dokument-Canvas ersetzen (Notion-artiger Editor). Blöcke werden inline bearbeitet. Einstellungen erscheinen in einem schwebenden Popover, das am ausgewählten Block verankert ist. Neue Blöcke werden über ein Slash-Command-Menü oder eine horizontale Toolbar eingefügt.

Zentrale Komponenten:

• DocumentCanvas.vue ersetzt CanvasArea.vue
• UnifiedToolbar.vue — kombinierte schwebende Toolbar (Textformatierung + Blockeinstellungen), die das frühere seitliche Eigenschaftenpanel ablöst
• FloatingBlockSidebar.vue (+ BlockPickerPopover.vue) für das Einfügen von Blöcken
• Slash-Command-Menü (/) für tastaturzentriertes Einfügen von Blöcken

Konsequenzen

Ermöglicht:

• WYSIWYG-Bearbeitung — was auf der Canvas zu sehen ist, ist das, wie die E-Mail aussieht
• Tastaturzentrierter Arbeitsablauf — Slash-Befehle, Navigation mit den Pfeiltasten, Enter zum Hinzufügen von Blöcken
• Eine Canvas in voller Breite, die der Renderbreite der E-Mail entspricht
• Einfacheres mentales Modell — „klicken zum Bearbeiten, tippen zum Schreiben“
• Mobilfreundliche Bearbeitung (kein Mehrspaltenlayout, das gequetscht werden muss)

Trade-offs:

• Komplexere Komponentenarchitektur — die schwebende Toolbar bzw. das Popover benötigt eine Ankerverwaltung (useToolbarPosition.ts)
• Layout-Blöcke (Columns, Container, Hero) verwenden defineAsyncComponent, um zirkuläre Importe aufzubrechen
• Die alten 3-Spalten-Komponenten (CanvasArea.vue, PropertyPanel.vue, BlockPalette.vue, FloatingToolbar.vue) wurden entfernt; die öffentliche Komponenten-API (Props/Emits von EmailBuilder.vue) ist unverändert
• Manche Power-User-Funktionen (Massenbearbeitung von Eigenschaften, Blockbaum-Ansicht) sind ohne dauerhaftes Seitenpanel schwerer zugänglich zu machen