[{"data":1,"prerenderedAt":201},["ShallowReactive",2],{"search-de":3,"content-de-developer\u002Fdecisions\u002F003-notion-like-builder":4,"surround-de-\u002Fdeveloper\u002Fdecisions\u002F003-notion-like-builder":192},[],{"id":5,"title":6,"body":7,"description":184,"extension":185,"meta":186,"navigation":187,"path":188,"seo":189,"stem":190,"__hash__":191},"content_de\u002F3.developer\u002Fdecisions\u002F4.003-notion-like-builder.md","ADR-003: Notion-artiger E-Mail-Builder",{"type":8,"value":9,"toc":177},"minimark",[10,27,32,36,39,59,62,66,69,72,107,111,116,133,138],[11,12,13,21],"ul",{},[14,15,16,20],"li",{},[17,18,19],"strong",{},"Status:"," Angenommen",[14,22,23,26],{},[17,24,25],{},"Datum:"," 2025-01-10",[28,29,31],"h2",{"id":30},"kontext","Kontext",[33,34,35],"p",{},"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.).",[33,37,38],{},"Nutzerrückmeldungen und interne Tests brachten Probleme zutage:",[11,40,41,47,53],{},[14,42,43,46],{},[17,44,45],{},"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.",[14,48,49,52],{},[17,50,51],{},"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.",[14,54,55,58],{},[17,56,57],{},"Reibung bei Drag-and-drop"," — Blöcke aus einer Palette an eine bestimmte Position zu ziehen war ungenau, besonders beim Umsortieren bestehender Blöcke.",[33,60,61],{},"Notion, Linear und moderne Dokumenteditoren lösen das mit Inline-Bearbeitung: Inhalte werden dort bearbeitet, wo sie stehen, und Werkzeuge erscheinen kontextbezogen.",[28,63,65],{"id":64},"entscheidung","Entscheidung",[33,67,68],{},"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.",[33,70,71],{},"Zentrale Komponenten:",[11,73,74,84,90,100],{},[14,75,76,80,81],{},[77,78,79],"code",{},"DocumentCanvas.vue"," ersetzt ",[77,82,83],{},"CanvasArea.vue",[14,85,86,89],{},[77,87,88],{},"UnifiedToolbar.vue"," — kombinierte schwebende Toolbar (Textformatierung + Blockeinstellungen), die das frühere seitliche Eigenschaftenpanel ablöst",[14,91,92,95,96,99],{},[77,93,94],{},"FloatingBlockSidebar.vue"," (+ ",[77,97,98],{},"BlockPickerPopover.vue",") für das Einfügen von Blöcken",[14,101,102,103,106],{},"Slash-Command-Menü (",[77,104,105],{},"\u002F",") für tastaturzentriertes Einfügen von Blöcken",[28,108,110],{"id":109},"konsequenzen","Konsequenzen",[33,112,113],{},[17,114,115],{},"Ermöglicht:",[11,117,118,121,124,127,130],{},[14,119,120],{},"WYSIWYG-Bearbeitung — was auf der Canvas zu sehen ist, ist das, wie die E-Mail aussieht",[14,122,123],{},"Tastaturzentrierter Arbeitsablauf — Slash-Befehle, Navigation mit den Pfeiltasten, Enter zum Hinzufügen von Blöcken",[14,125,126],{},"Eine Canvas in voller Breite, die der Renderbreite der E-Mail entspricht",[14,128,129],{},"Einfacheres mentales Modell — „klicken zum Bearbeiten, tippen zum Schreiben“",[14,131,132],{},"Mobilfreundliche Bearbeitung (kein Mehrspaltenlayout, das gequetscht werden muss)",[33,134,135],{},[17,136,137],{},"Trade-offs:",[11,139,140,147,154,174],{},[14,141,142,143,146],{},"Komplexere Komponentenarchitektur — die schwebende Toolbar bzw. das Popover benötigt eine Ankerverwaltung (",[77,144,145],{},"useToolbarPosition.ts",")",[14,148,149,150,153],{},"Layout-Blöcke (Columns, Container, Hero) verwenden ",[77,151,152],{},"defineAsyncComponent",", um zirkuläre Importe aufzubrechen",[14,155,156,157,159,160,159,163,159,166,169,170,173],{},"Die alten 3-Spalten-Komponenten (",[77,158,83],{},", ",[77,161,162],{},"PropertyPanel.vue",[77,164,165],{},"BlockPalette.vue",[77,167,168],{},"FloatingToolbar.vue",") wurden entfernt; die öffentliche Komponenten-API (Props\u002FEmits von ",[77,171,172],{},"EmailBuilder.vue",") ist unverändert",[14,175,176],{},"Manche Power-User-Funktionen (Massenbearbeitung von Eigenschaften, Blockbaum-Ansicht) sind ohne dauerhaftes Seitenpanel schwerer zugänglich zu machen",{"title":178,"searchDepth":179,"depth":179,"links":180},"",2,[181,182,183],{"id":30,"depth":179,"text":31},{"id":64,"depth":179,"text":65},{"id":109,"depth":179,"text":110},"Warum Owlat den klassischen 3-Spalten-E-Mail-Editor durch eine Notion-artige, einspaltige Canvas für Inline-WYSIWYG-Bearbeitung ersetzt hat.","md",{},true,"\u002Fdeveloper\u002Fdecisions\u002F003-notion-like-builder",{"title":6,"description":184},"3.developer\u002Fdecisions\u002F4.003-notion-like-builder","Yktr7W3qZnvG45M-jYOra-JIbGcecIvd27g44qQ61-A",[193,197],{"title":194,"path":195,"stem":196,"children":-1},"ADR-002: Convex als Backend","\u002Fdeveloper\u002Fdecisions\u002F002-convex-backend","3.developer\u002Fdecisions\u002F3.002-convex-backend",{"title":198,"path":199,"stem":200,"children":-1},"ADR-004: Monorepo mit Bun Workspaces","\u002Fdeveloper\u002Fdecisions\u002F004-monorepo-bun-workspaces","3.developer\u002Fdecisions\u002F5.004-monorepo-bun-workspaces",1786915110531]