Block-Plugin „Akkordblätter/Leadsheets" (ChordPro) #155

New Issue

fable-5 · 2026-07-20T00:15:50+02:00

fable-5 commented

2026-07-20 00:15:50 +02:00

Ziel

Neues Block-Plugin packages/plugins/chordpro/: Quelle im ChordPro-Format ({title: …}, [C]Text…), gerendertes Akkordblatt (Akkorde über dem Text) im Editor-Preview, Lese- und Public-Ansicht.

Umsetzungsskizze

Klon des mermaid-Musters (packages/plugins/mermaid/): manifest kind=code, Block-Extension-Point sheet, permissions ["blockData","ui"], build.mjs (esbuild-Bundle + fflate-ZIP).
Parser: chordsheetjs (MIT) ins Bundle; Darstellung als selbst erzeugtes SVG (Monospace-Layout, Akkordzeile über Textzeile, Direktiven title/artist/key als Kopf).
Persistenz {source, svg} — der SVG-Snapshot bedient den PluginFallbackRenderer (sanitizeSvg) für Public-Ansicht und Export, exakt die mermaid-Konvention.
Edit-Modus: Textarea + debounced Live-Preview (mermaid-Vorbild onEdit); host.ui.resize().
Optional (nur wenn billig): Transponier-Buttons im Edit-Modus.
Prod-Installation ist wie üblich Site-Admin-Handgriff (Stefan); Anleitung im site-admin-guide ergänzen.

Akzeptanzkriterien

ZIP baut unter den Limits (64/256 MiB).
Beispiel-Sheet rendert im Editor, im Lesemodus und anonym (svg-Fallback); Umlaute korrekt.
Unit-Test für den SVG-Formatter; Doku-Absatz (extending/user-guide en+de) + Install-Hinweis.

## Ziel Neues Block-Plugin `packages/plugins/chordpro/`: Quelle im ChordPro-Format (`{title: …}`, `[C]Text…`), gerendertes Akkordblatt (Akkorde über dem Text) im Editor-Preview, Lese- und Public-Ansicht. ## Umsetzungsskizze - Klon des mermaid-Musters (`packages/plugins/mermaid/`): manifest kind=code, Block-Extension-Point `sheet`, permissions `["blockData","ui"]`, `build.mjs` (esbuild-Bundle + fflate-ZIP). - Parser: `chordsheetjs` (MIT) ins Bundle; Darstellung als selbst erzeugtes SVG (Monospace-Layout, Akkordzeile über Textzeile, Direktiven title/artist/key als Kopf). - Persistenz `{source, svg}` — der SVG-Snapshot bedient den `PluginFallbackRenderer` (sanitizeSvg) für Public-Ansicht und Export, exakt die mermaid-Konvention. - Edit-Modus: Textarea + debounced Live-Preview (mermaid-Vorbild `onEdit`); `host.ui.resize()`. - Optional (nur wenn billig): Transponier-Buttons im Edit-Modus. - Prod-Installation ist wie üblich Site-Admin-Handgriff (Stefan); Anleitung im site-admin-guide ergänzen. ## Akzeptanzkriterien - ZIP baut unter den Limits (64/256 MiB). - Beispiel-Sheet rendert im Editor, im Lesemodus und anonym (svg-Fallback); Umlaute korrekt. - Unit-Test für den SVG-Formatter; Doku-Absatz (extending/user-guide en+de) + Install-Hinweis.

fable-5 added this to the M23 — ChordPro-Plugin milestone 2026-07-20 00:15:50 +02:00

fable-5 referenced this issue

2026-07-20 02:26:05 +02:00

M23: ChordPro-Plugin — Akkordblätter/Leadsheets (#155) #159

fable-5 referenced this issue from a commit

2026-07-20 02:26:06 +02:00

#155: ChordPro-Plugin — Akkordblätter/Leadsheets als Block

fable-5 commented

2026-07-20 02:41:54 +02:00

Umgesetzt in PR #159 (a879561): Referenz-Plugin packages/plugins/chordpro nach dem mermaid-Muster. ABWEICHUNG zur Skizze: kein chordsheetjs — eigener minimaler ChordPro-Parser (Direktiven title/subtitle/artist/key/capo/tempo/comment, Chorus-Fences, [Akkord]-Marker, #-Kommentare) + SVG-Formatter mit Monospace-Raster (Akkorde ueber dem Text, Titelkopf, Chorus-Einrueckung, XML-escaped) — kein neuer Supply-Chain-Zuwachs (Lehre aus #136), und der SVG-Formatter waere ohnehin Eigenbau gewesen. Persistenz {source, svg}; der Snapshot bedient Lesemodus, Public-Ansicht und Exporte ueber den PluginFallbackRenderer. ZIP 20 KB (Limits 64/256 MiB). 4 Parser-/Formatter-Tests; Runtime in der Sandbox verifiziert (Install → Aktivierung → Block einfuegen → Quelltext → SVG mit Titel/Akkorden gerendert). Doku: site-admin-guide en+de (Plugin-Liste + Build-Zeile), plugin-architecture-Referenzliste. Prod-Installation wie ueblich als Site-Admin-Handgriff (ZIP: packages/plugins/chordpro/dist/chordpro-1.0.0.zip nach pnpm build).

Umgesetzt in PR #159 (a879561): Referenz-Plugin packages/plugins/chordpro nach dem mermaid-Muster. ABWEICHUNG zur Skizze: kein chordsheetjs — eigener minimaler ChordPro-Parser (Direktiven title/subtitle/artist/key/capo/tempo/comment, Chorus-Fences, [Akkord]-Marker, #-Kommentare) + SVG-Formatter mit Monospace-Raster (Akkorde ueber dem Text, Titelkopf, Chorus-Einrueckung, XML-escaped) — kein neuer Supply-Chain-Zuwachs (Lehre aus #136), und der SVG-Formatter waere ohnehin Eigenbau gewesen. Persistenz {source, svg}; der Snapshot bedient Lesemodus, Public-Ansicht und Exporte ueber den PluginFallbackRenderer. ZIP 20 KB (Limits 64/256 MiB). 4 Parser-/Formatter-Tests; Runtime in der Sandbox verifiziert (Install → Aktivierung → Block einfuegen → Quelltext → SVG mit Titel/Akkorden gerendert). Doku: site-admin-guide en+de (Plugin-Liste + Build-Zeile), plugin-architecture-Referenzliste. Prod-Installation wie ueblich als Site-Admin-Handgriff (ZIP: packages/plugins/chordpro/dist/chordpro-1.0.0.zip nach pnpm build).

fable-5 closed this issue

2026-07-20 02:41:54 +02:00

Sign in to join this conversation.