Skip to content

ui 0.5.1: RichTextEditor without injected TipTap style tag (CSP) - #10

Merged
rrolf merged 2 commits into
mainfrom
fix/tiptap-inject-css
Sep 30, 2026
Merged

rrolf merged 2 commits into
mainfrom
fix/tiptap-inject-css

Conversation

@rrolf

@rrolf rrolf commented Sep 30, 2026

Copy link
Copy Markdown
Contributor

Closes #9

Problem

RichTextEditor let TipTap attach a <style data-tiptap-style> with the ProseMirror base rules to <head> at runtime. Under a Content-Security-Policy with style-src 'self' (no 'unsafe-inline'), which Ausleihbar introduces in virtUOS/ausleihbar#44 and enforces in virtUOS/ausleihbar#45, the browser blocks that. The editor would then lose its base styles, including line wrapping.

Change

  • useEditor({ injectCSS: false, … }).
  • base.css now carries the ProseMirror rules. They are byte-for-byte identical to @tiptap/core src/style.ts, which is unchanged from 3.27.2 to 3.31.3, so the whole dependency range is covered. The rules are deliberately not in an @layer. The ProseMirror-* classes are only set at runtime by prosemirror-view, so Tailwind's content scan never finds them and would drop layered rules.
  • The README gets a new "CSP" section: @basicbar/ui injects no inline styles or scripts, with a note on prePaintScript() under a strict CSP. The CHANGELOG gets the ui 0.5.1 entry, and the version is bumped to 0.5.1.

Migration: none, as long as the tool imports @basicbar/ui/base.css, which Ausleihbar and AbstimmBAR both do. AbstimmBAR still uses its own editor, so the new rules are harmless there.

Tests

  • npm run build passes.
  • Checked in Ausleihbar with the packed tgz and a production-like build served behind Caddy with the report-only CSP:
    • The built CSS contains all the rules: break-spaces, gapcursor, cursor-blink, hideselection.
    • The page has no <style> element and reports 0 CSP violations. This was the last remaining violation in Ausleihbar.
    • .ProseMirror computes to white-space: break-spaces and position: relative, with ligatures off.
    • Multiple spaces are kept while typing.
    • A selected image gets ProseMirror-selectednode and ProseMirror-hideselection.
  • Review: no findings. The CSS is byte-identical to TipTap's, and no other TipTap or ProseMirror code creates style tags; the remaining style writes go through CSSOM, which the CSP allows.

Release after merge

Tag ui/v0.5.1.

🤖 Generated with Claude Code

rrolf and others added 2 commits September 30, 2026 08:23
… 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>
…wind v4 note (#9)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@rrolf
rrolf merged commit 16c2581 into main Sep 30, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

RichTextEditor: TipTap-Style nicht inline injizieren (CSP style-src 'self')

1 participant