Section-style plugins and the section container node #75

Closed
opened 2026-07-04 14:52:40 +02:00 by fable-5 · 1 comment
Collaborator

Context

The vision's simplest plugin case: CSS-only styles like colored section backgrounds, without any sandbox cost (ADR 0008 kind section_style).

Scope

Add a section container node to the shared schema (attrs: styleId) with editor UI (wrap selection in section, style picker fed from active section-style plugins, unwrap); CSS pipeline: sanitize (no @import/external url()), scope under .dt-style-<plugin>-<style>, inject active plugins' CSS per pond; ship the reference plugin section-styles-basic (callout/info/warning/colored-box styles) in packages/plugins/; render sections in HTML/PDF export with inlined styles.

Acceptance criteria

  • wrapping content in a styled section renders in editor, read view, and PDF export
  • hostile CSS fixtures (external url, @import, position:fixed overlay) are neutralized (sanitizer tests)
  • disabling the plugin leaves content intact with neutral styling
  • markdown mapping: sections serialize to fenced div syntax and round-trip

Technical notes

  • ADR 0008, plugin-architecture.md (scoping scheme), ADR 0004 (schema extension).

Dependencies

Depends on #24, #71, #72.

Size: ~1.5 days


Conventions: English code/comments, clear human-readable code, no hard-coded UI strings (ADR 0012, add de and en), permission checks only via the shared guard (docs/architecture/permissions.md). Read the referenced ADRs before starting.

## Context The vision's simplest plugin case: CSS-only styles like colored section backgrounds, without any sandbox cost (ADR 0008 kind `section_style`). ## Scope Add a `section` container node to the shared schema (attrs: styleId) with editor UI (wrap selection in section, style picker fed from active section-style plugins, unwrap); CSS pipeline: sanitize (no @import/external url()), scope under `.dt-style-<plugin>-<style>`, inject active plugins' CSS per pond; ship the reference plugin `section-styles-basic` (callout/info/warning/colored-box styles) in `packages/plugins/`; render sections in HTML/PDF export with inlined styles. ## Acceptance criteria - [ ] wrapping content in a styled section renders in editor, read view, and PDF export - [ ] hostile CSS fixtures (external url, @import, position:fixed overlay) are neutralized (sanitizer tests) - [ ] disabling the plugin leaves content intact with neutral styling - [ ] markdown mapping: sections serialize to fenced div syntax and round-trip ## Technical notes - ADR 0008, plugin-architecture.md (scoping scheme), ADR 0004 (schema extension). ## Dependencies Depends on #24, #71, #72. **Size**: ~1.5 days --- *Conventions: English code/comments, clear human-readable code, no hard-coded UI strings (ADR 0012, add `de` **and** `en`), permission checks only via the shared guard (docs/architecture/permissions.md). Read the referenced ADRs before starting.*
fable-5 added this to the M7 — Plugins milestone 2026-07-04 14:52:40 +02:00
fable-5 added the
frontend
plugins
labels 2026-07-04 14:52:40 +02:00
Author
Collaborator

Umgesetzt in 2e96173, 784f21d und e32f961 (CI grün, alle 8 Kontexte).

Akzeptanzkriterien:

  • Styled Section rendert in Editor, Read-View (e2e section-styles.spec.ts: computed background in beiden Modi) und PDF-Export (export.service.db.test.ts: Plugin-CSS + Section-Markup im Gotenberg-HTML)
  • Hostile-CSS-Fixtures neutralisiert (plugin-css.test.ts: external url, @import, position:fixed-Overlay, dazu </style>-Breakout, Scope-Umgehungen, Statement-At-Rules)
  • Plugin deaktivieren lässt Inhalt intakt mit neutralem Styling (e2e-Schritt: disable → reload → Section-Node vorhanden, Style weg)
  • Markdown-Mapping: fenced div Roundtrip (Teil 1, markdown.test.ts)

Design-Entscheidung: Das Install-Gate erzwingt die Scope-Klassen .dt-style-<pluginId>-<styleId> statt CSS umzuschreiben (dokumentiert in plugin-architecture.md) — vorhersagbar für Plugin-Autoren, kein CSS-Rewriter im Serve-Pfad. Zusätzlich verboten: position außer static/relative (Overlay-Vektor).

Referenz-Plugin packages/plugins/section-styles-basic (callout/info/warning/colored-box) ist Workspace-Package, läuft durch SDK-Validierung und das echte API-Install-Gate; pnpm --filter @dorfteich/plugin-section-styles-basic build erzeugt das installierbare ZIP.

Umgesetzt in `2e96173`, `784f21d` und `e32f961` (CI grün, alle 8 Kontexte). **Akzeptanzkriterien:** - [x] Styled Section rendert in Editor, Read-View (e2e `section-styles.spec.ts`: computed background in beiden Modi) und PDF-Export (`export.service.db.test.ts`: Plugin-CSS + Section-Markup im Gotenberg-HTML) - [x] Hostile-CSS-Fixtures neutralisiert (`plugin-css.test.ts`: external url, @import, position:fixed-Overlay, dazu `</style>`-Breakout, Scope-Umgehungen, Statement-At-Rules) - [x] Plugin deaktivieren lässt Inhalt intakt mit neutralem Styling (e2e-Schritt: disable → reload → Section-Node vorhanden, Style weg) - [x] Markdown-Mapping: fenced div Roundtrip (Teil 1, `markdown.test.ts`) **Design-Entscheidung:** Das Install-Gate **erzwingt** die Scope-Klassen `.dt-style-<pluginId>-<styleId>` statt CSS umzuschreiben (dokumentiert in `plugin-architecture.md`) — vorhersagbar für Plugin-Autoren, kein CSS-Rewriter im Serve-Pfad. Zusätzlich verboten: `position` außer static/relative (Overlay-Vektor). Referenz-Plugin `packages/plugins/section-styles-basic` (callout/info/warning/colored-box) ist Workspace-Package, läuft durch SDK-Validierung und das echte API-Install-Gate; `pnpm --filter @dorfteich/plugin-section-styles-basic build` erzeugt das installierbare ZIP.
Sign in to join this conversation.
No Milestone
No project
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: stwaidele/dorfteich#75
No description provided.