Excalidraw-Block-Plugin #136

New Issue

fable-5 · 2026-07-19T00:18:35+02:00

fable-5 commented

2026-07-19 00:18:35 +02:00

Ziel

Neues Block-Plugin „Excalidraw" (handgezeichnete Whiteboard-Skizzen), analog zum bestehenden draw.io-Plugin. Keine Backend-/SDK-/Host-Änderungen nötig — Capability-Fläche (blockData, ui.enterFullscreen), CSP (frame-src/connect-src self), Fallback-Renderer ({…, svg}) und Install-/Registry-/Serving-Pfad tragen die Block-Form bereits.

Vorbild

packages/plugins/drawio/ — das einzige „bundled-app"-Plugin: vendored Sub-App, Vollbild, persistiert {xml, svg}.

Umsetzung — neues Paket `packages/plugins/excalidraw/` spiegelt `drawio/`

manifest.json: id:"excalidraw", kind:"code", Block-Extension-Point id:"diagram", permissions:["blockData","ui"], fallback:{type:"text",value:"[Excalidraw]"}, i18n-Refs.
src/plugin.ts (Vorbild drawio/src/plugin.ts): createPlugin mit
- onRender: gespeichertes svg inline;
- onEdit: Snapshot + Bearbeiten-Knopf, Auto-Öffnen bei leerem Block;
- openEditor: host.ui.enterFullscreen() + eingebettetes Excalidraw, Export über exportToSvg, Persistenz { scene, svg } per host.blockData.setData;
- onDestroy → closeEditor → host.ui.exitFullscreen().
- Snapshot unter Key svg speichern → PluginFallbackRenderer bedient Lese-/Public-Ansicht und Export ohne Backend-Änderung.
build.mjs: draw.io-Stil (vendor + esbuild + fflate) empfohlen, weil Excalidraw groß ist (Fonts/roughjs/Worker) und Assets nur unter dem eigenen Asset-Pfad laden darf (CSP font-src/connect-src self). Größenlimits: ZIP ≤ 64 MiB, entpackt ≤ 256 MiB (apps/api/src/plugins/plugin.constants.ts). Mermaid-Stil (esbuild-inline) nur, falls das Bundle klein genug bleibt.
i18n/de.json, i18n/en.json.
Doku: Autor-Guide docs/developer/extending.md (+ docs/de/…) und Plugin-Referenzliste um Excalidraw ergänzen.

Offene Punkte

Excalidraw-Assets sauber vendoren und unter den Plugin-Asset-Pfad bringen; CSP-Konformität im Preview (/admin/plugins/excalidraw/preview) verifizieren (Konsole ohne Verstöße).
Installation/Aktivierung auf Prod erfordert wie bei allen Plugins Stefans Site-Admin-Handgriff (nicht Teil des Codes).

Akzeptanzkriterien

pnpm build erzeugt dist/excalidraw-<v>.zip innerhalb der 64/256-MiB-Limits.
Im Preview lässt sich ein Block anlegen, im Vollbild zeichnen; Speichern persistiert {scene, svg}.
Lese-/Public-Ansicht zeigt das SVG (über den bestehenden Fallback-Renderer).
Keine CSP-Verstöße im Preview.
pnpm lint + betroffene Gates grün.

## Ziel Neues **Block-Plugin „Excalidraw"** (handgezeichnete Whiteboard-Skizzen), analog zum bestehenden **draw.io-Plugin**. **Keine Backend-/SDK-/Host-Änderungen nötig** — Capability-Fläche (`blockData`, `ui.enterFullscreen`), CSP (`frame-src`/`connect-src` self), Fallback-Renderer (`{…, svg}`) und Install-/Registry-/Serving-Pfad tragen die Block-Form bereits. ## Vorbild `packages/plugins/drawio/` — das einzige „bundled-app"-Plugin: vendored Sub-App, Vollbild, persistiert `{xml, svg}`. ## Umsetzung — neues Paket `packages/plugins/excalidraw/` spiegelt `drawio/` - **`manifest.json`:** `id:"excalidraw"`, `kind:"code"`, Block-Extension-Point `id:"diagram"`, `permissions:["blockData","ui"]`, `fallback:{type:"text",value:"[Excalidraw]"}`, i18n-Refs. - **`src/plugin.ts`** (Vorbild `drawio/src/plugin.ts`): `createPlugin` mit - `onRender`: gespeichertes `svg` inline; - `onEdit`: Snapshot + Bearbeiten-Knopf, Auto-Öffnen bei leerem Block; - `openEditor`: `host.ui.enterFullscreen()` + eingebettetes Excalidraw, Export über `exportToSvg`, Persistenz **`{ scene, svg }`** per `host.blockData.setData`; - `onDestroy → closeEditor → host.ui.exitFullscreen()`. - **Snapshot unter Key `svg`** speichern → `PluginFallbackRenderer` bedient Lese-/Public-Ansicht und Export ohne Backend-Änderung. - **`build.mjs`:** **draw.io-Stil** (vendor + esbuild + fflate) empfohlen, weil Excalidraw groß ist (Fonts/roughjs/Worker) und Assets nur unter dem eigenen Asset-Pfad laden darf (CSP `font-src`/`connect-src` self). **Größenlimits:** ZIP ≤ 64 MiB, entpackt ≤ 256 MiB (`apps/api/src/plugins/plugin.constants.ts`). Mermaid-Stil (esbuild-inline) nur, falls das Bundle klein genug bleibt. - **`i18n/de.json`, `i18n/en.json`.** - **Doku:** Autor-Guide `docs/developer/extending.md` (+ `docs/de/…`) und Plugin-Referenzliste um Excalidraw ergänzen. ## Offene Punkte - Excalidraw-Assets sauber vendoren und unter den Plugin-Asset-Pfad bringen; **CSP-Konformität** im Preview (`/admin/plugins/excalidraw/preview`) verifizieren (Konsole ohne Verstöße). - Installation/Aktivierung auf Prod erfordert wie bei allen Plugins Stefans **Site-Admin-Handgriff** (nicht Teil des Codes). ## Akzeptanzkriterien - [ ] `pnpm build` erzeugt `dist/excalidraw-<v>.zip` innerhalb der 64/256-MiB-Limits. - [ ] Im Preview lässt sich ein Block anlegen, im Vollbild zeichnen; Speichern persistiert `{scene, svg}`. - [ ] Lese-/Public-Ansicht zeigt das SVG (über den bestehenden Fallback-Renderer). - [ ] Keine CSP-Verstöße im Preview. - [ ] `pnpm lint` + betroffene Gates grün.

fable-5 added this to the M18 — Excalidraw-Plugin milestone 2026-07-19 00:18:35 +02:00

fable-5 referenced this issue from a commit

2026-07-19 04:18:19 +02:00

#136 Excalidraw-Block-Plugin

fable-5 referenced this issue

2026-07-19 05:47:32 +02:00

M17–M19: #133–#137 (Kommentare inline, Statuszeile, Transklusion, Excalidraw, Checkbox-Fix) #138

fable-5 commented

2026-07-19 21:48:49 +02:00

Umgesetzt in c164a03: Referenz-Block-Plugin packages/plugins/excalidraw/ — anders als draw.io als React-npm-Lib per esbuild gebündelt (Controller+React+Excalidraw in plugin.js; Fonts/Locales/Data aus dist/prod/ im ZIP-Root, geladen über EXCALIDRAW_ASSET_PATH; CSP bleibt self-only). Lifecycle analog draw.io: Render zeigt gespeichertes SVG, Edit öffnet Vollbild-Excalidraw, „Speichern & Beenden" persistiert {scene, svg} → Fallback-Renderer bedient Lese-/Public-Ansicht und Exporte ohne Backend-Änderung. Build: excalidraw-1.0.0.zip, 15,5 MiB zip / 22,3 MiB unpacked (Limits 64/256). pnpm-Override @floating-ui/react-dom@2.1.2 gegen kaputte Upstream-Dependency (dokumentiert in pnpm-workspace.yaml).

Verifiziert: Manifest (SDK) valide; auf Test+Int installiert (mode=optional) und Laufzeit unter Sandbox-CSP bestätigt (Vollbild-Editor rendert komplett inkl. Fonts/Canvas). OFFEN (separat): Installation auf PROD durch Site-Admin (ZIP unter packages/plugins/excalidraw/dist/).

Umgesetzt in `c164a03`: Referenz-Block-Plugin `packages/plugins/excalidraw/` — anders als draw.io als React-npm-Lib per esbuild gebündelt (Controller+React+Excalidraw in plugin.js; Fonts/Locales/Data aus `dist/prod/` im ZIP-Root, geladen über `EXCALIDRAW_ASSET_PATH`; CSP bleibt self-only). Lifecycle analog draw.io: Render zeigt gespeichertes SVG, Edit öffnet Vollbild-Excalidraw, „Speichern & Beenden" persistiert `{scene, svg}` → Fallback-Renderer bedient Lese-/Public-Ansicht und Exporte ohne Backend-Änderung. Build: `excalidraw-1.0.0.zip`, 15,5 MiB zip / 22,3 MiB unpacked (Limits 64/256). pnpm-Override `@floating-ui/react-dom@2.1.2` gegen kaputte Upstream-Dependency (dokumentiert in pnpm-workspace.yaml). Verifiziert: Manifest (SDK) valide; auf Test+Int installiert (mode=optional) und Laufzeit unter Sandbox-CSP bestätigt (Vollbild-Editor rendert komplett inkl. Fonts/Canvas). OFFEN (separat): Installation auf PROD durch Site-Admin (ZIP unter `packages/plugins/excalidraw/dist/`).

fable-5 closed this issue

2026-07-19 21:48:49 +02:00

fable-5 referenced this issue from a commit

2026-07-19 22:27:18 +02:00

Doku: Excalidraw als sechstes Standard-Plugin ergänzt

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 referenced this issue