From 01c84d89cb942b42b90d529830ee3a07fed56510 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=BCdiger=20Rolf?= <rrolf@uni-osnabrueck.de>
Date: Wed, 30 Sep 2026 08:23:11 +0200
Subject: [PATCH 1/2] fix(ui): RichTextEditor without injected TipTap style
 tag, base rules in base.css (#9)

TipTap appended a <style data-tiptap-style> at runtime, which a CSP with
style-src 'self' blocks. Run the editor with injectCSS: false and ship the
same ProseMirror base rules (verbatim from @tiptap/core style.ts, 3.31)
unlayered in base.css, so Tailwind's purge cannot drop them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md                       | 16 ++++++
 packages/ui/README.md              | 18 ++++++-
 packages/ui/base.css               | 79 ++++++++++++++++++++++++++++++
 packages/ui/package-lock.json      |  4 +-
 packages/ui/package.json           |  2 +-
 packages/ui/src/RichTextEditor.tsx |  5 ++
 6 files changed, 120 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f21281b..9b0e2d8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,22 @@ Changelog ist die Upgrade-Anleitung für die Tools.
 
 ## [Unreleased]
 
+### @basicbar/ui (→ wird `ui/v0.5.1`)
+
+**CSP-tauglicher `RichTextEditor`** (basicbar#9): TipTap hängte beim Mounten
+ein `<style data-tiptap-style>` mit den ProseMirror-Grundregeln an `<head>` —
+unter einer Content-Security-Policy mit `style-src 'self'` (ohne
+`'unsafe-inline'`) blockiert der Browser das, der Editor verliert dann u. a.
+sein Umbruchverhalten. Der Editor läuft jetzt mit `injectCSS: false`; die
+Regeln (unverändert aus `@tiptap/core` `src/style.ts`, TipTap 3.31) stehen in
+`base.css` — bewusst außerhalb jedes `@layer`, weil Tailwind die zur Laufzeit
+gesetzten `ProseMirror-*`-Klassen nicht sieht und gelayerte Regeln sonst
+entfernen würde. README: neuer Abschnitt „CSP“.
+
+Migration: keine, solange das Tool `@basicbar/ui/base.css` importiert (wie
+im README beschrieben). Wer `base.css` nicht einbindet, muss die
+ProseMirror-Regeln selbst bereitstellen.
+
 ### basicbar-integrations (→ wird `integrations/v0.2.1`)
 
 **Sicherheitsfix:** `clean_media_url` prüfte den rohen String, sodass
diff --git a/packages/ui/README.md b/packages/ui/README.md
index d5d316f..0f0c8b2 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -15,7 +15,8 @@ Tools identisch aussehen, übergeben sie dieselbe Ramp.
 - **`@basicbar/ui/base.css`** — gemeinsamer `@layer base`: Canvas hell/dunkel,
   `accent-color`, `::selection`, konsistenter `:focus-visible`-Ring
   (WCAG 2.4.7), `color-scheme`-Regeln, Skip-Link (WCAG 2.4.1),
-  `prefers-reduced-motion`, `text-wrap: balance`, tabellarische Ziffern.
+  `prefers-reduced-motion`, `text-wrap: balance`, tabellarische Ziffern,
+  dazu die ProseMirror-Grundregeln für `RichTextEditor` (siehe „CSP“).
   Als erste Zeile der Tool-`index.css` importieren.
 - **`ThemeProvider` / `useTheme` / `prePaintScript`** — Auto/Light/Dark mit
   Live-Systemfolge und `color-scheme`-Sync; `storageKey` konfigurierbar
@@ -172,3 +173,18 @@ siehe `initI18n`): `"Bold"`, `"Italic"`, `"Heading (large)"`,
 `"Enter URL"`, `"Insert image (or drag and drop)"`,
 `"Image upload failed"`, `"Image description (alt text)"`,
 `"Image description"`.
+
+## CSP
+
+Die Komponenten injizieren zur Laufzeit **keine** Inline-Styles oder
+-Skripte, damit Tools eine strikte Content-Security-Policy
+(`script-src 'self'; style-src 'self'`, ohne `'unsafe-inline'`) fahren können.
+`RichTextEditor` läuft deshalb mit TipTaps `injectCSS: false`; die
+ProseMirror-Grundregeln (Umbruchverhalten, Gapcursor, Auswahl) kommen aus
+`base.css` — ein Tool, das `base.css` wie oben importiert, muss nichts weiter
+tun. React-`style={{}}`-Props (CSSOM) sind unter `style-src 'self'` erlaubt.
+
+Ausnahme: `prePaintScript()` liefert das Theme-Skript als String für ein
+Inline-`<script>` in `index.html`. Unter einer strikten CSP schreibt das Tool
+den Inhalt stattdessen in eine eigene Datei (z. B. `public/theme-init.js`) und
+bindet sie synchron im `<head>` ein (so macht es ausleihbar, #44).
diff --git a/packages/ui/base.css b/packages/ui/base.css
index b3f7175..5f2793d 100644
--- a/packages/ui/base.css
+++ b/packages/ui/base.css
@@ -72,3 +72,82 @@
     scroll-behavior: auto !important;
   }
 }
+
+/* ProseMirror/TipTap editor base rules (RichTextEditor). Copied verbatim from
+   @tiptap/core's `src/style.ts` (TipTap 3.31) because the editor runs with
+   `injectCSS: false`: TipTap's own runtime <style> injection would break a
+   CSP with `style-src 'self'` (basicbar#9). Re-check against that file when
+   upgrading TipTap. Deliberately NOT inside an @layer: the ProseMirror-*
+   classes are set at runtime by prosemirror-view (node_modules), so Tailwind's
+   content scan never sees them and would purge layered rules. */
+.ProseMirror {
+  position: relative;
+}
+
+.ProseMirror {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  white-space: break-spaces;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
+}
+
+.ProseMirror [contenteditable="false"] {
+  white-space: normal;
+}
+
+.ProseMirror [contenteditable="false"] [contenteditable="true"] {
+  white-space: pre-wrap;
+}
+
+.ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+img.ProseMirror-separator {
+  display: inline !important;
+  border: none !important;
+  margin: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  margin: 0;
+}
+
+.ProseMirror-gapcursor:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid black;
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection *::-moz-selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection * {
+  caret-color: transparent;
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
index d58d182..a74fed9 100644
--- a/packages/ui/package-lock.json
+++ b/packages/ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@basicbar/ui",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@basicbar/ui",
-      "version": "0.5.0",
+      "version": "0.5.1",
       "license": "Apache-2.0",
       "dependencies": {
         "@tiptap/extension-bold": "^3.27.2",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 3658fd6..e4c1af1 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@basicbar/ui",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Design-System-Basis der virtUOS -bar-Tools: Tailwind-Preset, Basis-Styles, Theme (Dark Mode), i18n-Bootstrap, contentLang, RichTextEditor/RichText (TipTap)",
   "license": "Apache-2.0",
   "author": "Universität Osnabrück (virtUOS)",
diff --git a/packages/ui/src/RichTextEditor.tsx b/packages/ui/src/RichTextEditor.tsx
index b4116f1..91bc28c 100644
--- a/packages/ui/src/RichTextEditor.tsx
+++ b/packages/ui/src/RichTextEditor.tsx
@@ -137,6 +137,11 @@ export function RichTextEditor({
     // document change) must still re-render this component or those buttons
     // go stale until the next actual edit.
     shouldRerenderOnTransaction: true,
+    // TipTap would otherwise append a <style data-tiptap-style> to <head> at
+    // runtime, which a CSP with `style-src 'self'` (no 'unsafe-inline')
+    // blocks (ausleihbar#44/#45, basicbar#9). The same ProseMirror base rules
+    // ship in base.css instead.
+    injectCSS: false,
     extensions: [
       StarterKit.configure({
         heading: { levels: [2, 3] },

From 651cf0fae52d7edf0b6628801c3d9dd7866fdf3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=BCdiger=20Rolf?= <rrolf@uni-osnabrueck.de>
Date: Wed, 30 Sep 2026 08:25:07 +0200
Subject: [PATCH 2/2] docs(ui): base.css bullet names the unlayered ProseMirror
 rules; Tailwind v4 note (#9)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/ui/README.md | 3 ++-
 packages/ui/base.css  | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/ui/README.md b/packages/ui/README.md
index 0f0c8b2..0faba5b 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -12,7 +12,8 @@ Tools identisch aussehen, übergeben sie dieselbe Ramp.
   (Plus Jakarta Sans Variable), Dark Mode per `.dark`-Klasse, Motion-Tokens
   (`pop`, `fade-up`, `out-quart`). Die `slate`/`brand`-Ramps übergibt das Tool
   (OKLCH, Konventionen im Preset-Docstring).
-- **`@basicbar/ui/base.css`** — gemeinsamer `@layer base`: Canvas hell/dunkel,
+- **`@basicbar/ui/base.css`** — gemeinsame Basis-Styles (`@layer base` plus
+  ungelayerte ProseMirror-Regeln): Canvas hell/dunkel,
   `accent-color`, `::selection`, konsistenter `:focus-visible`-Ring
   (WCAG 2.4.7), `color-scheme`-Regeln, Skip-Link (WCAG 2.4.1),
   `prefers-reduced-motion`, `text-wrap: balance`, tabellarische Ziffern,
diff --git a/packages/ui/base.css b/packages/ui/base.css
index 5f2793d..995284f 100644
--- a/packages/ui/base.css
+++ b/packages/ui/base.css
@@ -79,7 +79,9 @@
    CSP with `style-src 'self'` (basicbar#9). Re-check against that file when
    upgrading TipTap. Deliberately NOT inside an @layer: the ProseMirror-*
    classes are set at runtime by prosemirror-view (node_modules), so Tailwind's
-   content scan never sees them and would purge layered rules. */
+   content scan never sees them and would purge layered rules. (Tailwind v3;
+   re-check the cascade if a consumer moves to v4's native CSS layers, where
+   unlayered rules outrank utilities.) */
 .ProseMirror {
   position: relative;
 }