Doku: Excalidraw als sechstes Standard-Plugin ergänzt
- Tutorial K19: neue Sektion „Excalidraw — Skizzen wie von Hand" mit
Nadias Bühnenplan-Beispiel (konzerte-live); Intro fünf→sechs Plugins.
- Tutorial K18: fünf→sechs Standard-Plugins.
- Site-Admin-Guide (en+de): Referenzliste + Build-Namensliste +
Build-Hinweis (~16-MiB-ZIP aus npm).
- plugin-architecture.md: Referenz-Eintrag excalidraw (npm-Library-
Spielart des Bundled-App-Pfads, {scene, svg}).
- developer/extending (en+de): Excalidraw als zweite Bundled-App-Variante.
Holt die in #136 zugesagten Doku-Ergänzungen nach. Screenshot für K19
folgt nach dem CSP-Deploy (damit die Handschrift korrekt rendert).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0155v2aT8AG1kZDQEZiCLBWC
This commit is contained in:
parent
75ec7f6006
commit
d997b8248a
@ -128,6 +128,12 @@ person looking at it could.
|
||||
build time into `vendor/`, gitignored) and runs fullscreen in the
|
||||
sandbox; blocks store `{ xml, svg }`, render mode and exports use the
|
||||
SVG snapshot.
|
||||
- `excalidraw` (`block`): hand-drawn sketches — proves the npm-library
|
||||
flavor of the bundled-app path: the Excalidraw React editor is bundled
|
||||
straight into `plugin.js` (esbuild) with its font/locale assets shipped
|
||||
alongside and loaded via `EXCALIDRAW_ASSET_PATH`; blocks store
|
||||
`{ scene, svg }`, render mode and exports use the SVG snapshot (with
|
||||
subsetted fonts embedded as `data:` URIs).
|
||||
|
||||
These live in `packages/plugins/` in the monorepo, are built by CI, and
|
||||
double as the plugin-SDK integration tests.
|
||||
|
||||
@ -76,9 +76,13 @@ auszuführen.
|
||||
|
||||
Ein Plugin darf eine ganze Unter-Anwendung als Assets mitbringen und in
|
||||
einem Kind-iframe seines eigenen Asset-Pfads ausführen — so bettet das
|
||||
`drawio`-Plugin den echten draw.io-Editor ein. Kombiniere das mit
|
||||
`host.ui.enterFullscreen()` für Editoren, die den ganzen Bildschirm
|
||||
brauchen. Größen-Limits: 64 MiB ZIP, 256 MiB entpackt.
|
||||
`drawio`-Plugin den echten draw.io-Editor ein. Das `excalidraw`-Plugin
|
||||
zeigt die andere Spielart derselben Idee: eine npm-React-Bibliothek,
|
||||
per esbuild direkt in die `plugin.js` gebündelt und im Frame selbst im
|
||||
Vollbild gemountet, mit ihren Laufzeit-Assets (Fonts, Sprachen) im ZIP.
|
||||
Kombiniere das mit `host.ui.enterFullscreen()` für Editoren, die den
|
||||
ganzen Bildschirm brauchen. Größen-Limits: 64 MiB ZIP, 256 MiB
|
||||
entpackt.
|
||||
|
||||
### Entwickeln und ausliefern
|
||||
|
||||
|
||||
@ -97,20 +97,22 @@ zeigen den Fallback-Text des Plugins, wenn es fehlt.
|
||||
Mitgelieferte Referenz-Plugins: `toc` (Inhaltsverzeichnis),
|
||||
`page-index` (label-gefilterte Seitenliste), `mermaid`
|
||||
(Diagramm-Blöcke), `drawio` (vollwertiges draw.io-Bearbeiten),
|
||||
`section-styles-basic` (farbige Hinweiskästen).
|
||||
`excalidraw` (handgezeichnete Skizzen), `section-styles-basic`
|
||||
(farbige Hinweiskästen).
|
||||
|
||||
**Woher kommen die ZIPs der Referenz-Plugins?** Sie liegen den
|
||||
Server-Images nicht bei — sie werden aus dem Repository gebaut (Node 22
|
||||
und pnpm, einmalig `pnpm install` im Repo-Wurzelverzeichnis):
|
||||
|
||||
```sh
|
||||
cd packages/plugins/<name> # toc | page-index | mermaid | drawio | section-styles-basic
|
||||
cd packages/plugins/<name> # toc | page-index | mermaid | drawio | excalidraw | section-styles-basic
|
||||
pnpm build # → dist/<id>-<version>.zip — diese Datei hochladen
|
||||
```
|
||||
|
||||
Der `drawio`-Build lädt beim ersten Lauf sein gepinntes Editor-Bundle
|
||||
von GitHub und packt ein ~27-MiB-ZIP (innerhalb des 64-MiB-Limits für
|
||||
Plugin-Uploads); die anderen vier bauen offline in Sekunden.
|
||||
Plugin-Uploads); `excalidraw` bündelt seinen Editor aus npm in ein
|
||||
~16-MiB-ZIP; die übrigen vier bauen offline in Sekunden.
|
||||
|
||||
**Typischer Ablauf:** ZIP hochladen, die abgeschottete Vorschau prüfen,
|
||||
den Instanz-Modus auf `optional` stellen und das Plugin dann je Teich
|
||||
|
||||
@ -38,7 +38,7 @@ anderen Seiten noch an deinem Konto etwas ändern.
|
||||
|
||||
## Ein Blick voraus
|
||||
|
||||
Dorfteich bringt fünf Standard-Plugins mit — von der Diagramm-Zeichnung
|
||||
Dorfteich bringt sechs Standard-Plugins mit — von der Diagramm-Zeichnung
|
||||
bis zum automatischen Inhaltsverzeichnis. Die stellen wir im nächsten
|
||||
Kapitel einzeln vor, und du siehst sie dort auch in Nadias Teich im
|
||||
Einsatz.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
# Die Standard-Bausteine im Schaufenster
|
||||
|
||||
Dorfteich bringt fünf Plugins mit. Dieses Kapitel ist ein
|
||||
Dorfteich bringt sechs Plugins mit. Dieses Kapitel ist ein
|
||||
Schaufensterbummel: je ein Blick, wofür jeder Baustein gut ist — ohne
|
||||
Bedienungsanleitung. (Die beiden Diagramm-Bausteine haben eigene kleine
|
||||
Welten; hier geht es nur darum, dass du weißt, was es gibt.)
|
||||
Bedienungsanleitung. (Die Diagramm- und Zeichen-Bausteine haben eigene
|
||||
kleine Welten; hier geht es nur darum, dass du weißt, was es gibt.)
|
||||
|
||||
## Mermaid-Diagramm — Diagramme aus Text
|
||||
|
||||
@ -33,6 +33,19 @@ skizziert.
|
||||
|
||||

|
||||
|
||||
## Excalidraw — Skizzen wie von Hand
|
||||
|
||||
Der dritte Zeichen-Baustein, und der lockerste: **Excalidraw** öffnet
|
||||
sich ebenfalls im Vollbild, zeichnet aber im Handschrift-Look — Kästen
|
||||
wirken hingeworfen, Beschriftungen wie mit dem Stift geschrieben.
|
||||
Perfekt für schnelle Ideen, Lagepläne und alles, was bewusst nach
|
||||
Entwurf aussehen soll statt nach fertigem Diagramm.
|
||||
|
||||
Nadia hat damit auf ihrer Seite
|
||||
[Konzerte & Live](https://dorfteich.online/public/nadia-morgenstern/konzerte-live)
|
||||
den Bühnenplan fürs nächste Open-Air gekritzelt — samt Merker, wo der
|
||||
beste Platz ist.
|
||||
|
||||
## Inhaltsverzeichnis — lange Seiten gliedern
|
||||
|
||||
Ein **Seiten-Werkzeug**: Es sitzt hinter dem Werkzeug-Symbol in der
|
||||
|
||||
@ -70,7 +70,10 @@ without ever executing plugin code.
|
||||
|
||||
A plugin may ship an entire sub-application as assets and run it in a
|
||||
child iframe of its own asset path — that is how the `drawio` plugin
|
||||
embeds the real draw.io editor. Combine with
|
||||
embeds the real draw.io editor. The `excalidraw` plugin shows the other
|
||||
flavor of the same idea: an npm React library bundled directly into
|
||||
`plugin.js` (esbuild) and mounted fullscreen in the frame itself, with
|
||||
its runtime assets (fonts, locales) shipped in the ZIP. Combine with
|
||||
`host.ui.enterFullscreen()` for editors that need the whole screen.
|
||||
Size limits: 64 MiB ZIP, 256 MiB unpacked.
|
||||
|
||||
|
||||
@ -88,20 +88,22 @@ fallback text when it is missing.
|
||||
|
||||
Shipped reference plugins: `toc` (table of contents), `page-index`
|
||||
(label-filtered page list), `mermaid` (diagram blocks), `drawio`
|
||||
(full draw.io editing), `section-styles-basic` (colored callouts).
|
||||
(full draw.io editing), `excalidraw` (hand-drawn sketches),
|
||||
`section-styles-basic` (colored callouts).
|
||||
|
||||
**Getting the reference plugin ZIPs.** They are not bundled with the
|
||||
server images — build them from the repository (Node 22 + pnpm, one-time
|
||||
`pnpm install` at the repo root):
|
||||
|
||||
```sh
|
||||
cd packages/plugins/<name> # toc | page-index | mermaid | drawio | section-styles-basic
|
||||
cd packages/plugins/<name> # toc | page-index | mermaid | drawio | excalidraw | section-styles-basic
|
||||
pnpm build # → dist/<id>-<version>.zip — upload that file
|
||||
```
|
||||
|
||||
The `drawio` build downloads its pinned editor bundle from GitHub on the
|
||||
first run and packs a ~27 MiB ZIP (within the 64 MiB plugin upload
|
||||
limit); the other four build offline in seconds.
|
||||
limit); `excalidraw` bundles its editor from npm into a ~16 MiB ZIP; the
|
||||
remaining four build offline in seconds.
|
||||
|
||||
**Typical rollout:** upload the ZIP, check the sandboxed preview, switch
|
||||
the instance mode to `optional`, then enable the plugin per pond (pond
|
||||
|
||||
Loading…
Reference in New Issue
Block a user