Add a formatting toolbar to the comment editor - #109
Merged
Conversation
Adds a configurable formatting toolbar above the comment editor with bold, italic, underline, strike, heading, list, code, blockquote and link buttons. Buttons are configured globally via the `toolbar` config key (a flat list, or grouped into arrays for visual separators) and can be overridden per component with ->toolbarButtons(), or disabled entirely. Because the toolbar lets users produce richer HTML (notably links), comment bodies are now sanitized server-side via symfony/html-sanitizer against an allowlist matching exactly what the editor can emit. Links are restricted to http/https/mailto schemes and forced to rel="noopener noreferrer" on both the client and the server to close the reverse-tabnabbing vector. Toolbar and link-prompt strings are translatable.
lisa-fehr
requested changes
Jul 28, 2026
…Add to the link checks and set it as an opt-in. Add missing styles.
lisa-fehr
approved these changes
Jul 29, 2026
lisa-fehr
force-pushed
the
feat/75-tiptap-toolbar
branch
from
July 29, 2026 20:54
46cb6e5 to
f5b6fa2
Compare
lisa-fehr
force-pushed
the
feat/75-tiptap-toolbar
branch
from
July 31, 2026 17:13
b3f0405 to
c84ef49
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #75
Summary
Adds a configurable formatting toolbar above the TipTap comment editor, so
commenters can apply rich formatting without knowing Markdown shortcuts. Because
the toolbar lets users produce richer HTML (notably links), this PR also adds
server-side sanitization of comment bodies as a security baseline.
What's included
Toolbar
bold,italic,underline,strike,h1–h3,blockquote,bulletList,orderedList,code, andlinkbuttons.toolbarconfig key — a flat list, or groupedinto arrays to render visual separators:
->toolbarButtons([...])onCommentsEntry,CommentsAction, andCommentsTableAction; pass[]to hide it for a singlecomponent, or set
enabled => false(orCOMMENTIONS_TOOLBAR_ENABLED=false)to disable it globally.
buttons, and
role="toolbar"/aria-pressedfor accessibility.HTML sanitization
symfony/html-sanitizeragainstan allowlist that matches exactly what the editor can emit (StarterKit +
Underline + Link + Mention). Scripts, event handlers, iframes, and unsafe link
schemes are stripped.
http/https/mailtoand forced torel="noopener noreferrer"on both the client and the server to close thereverse-tabnabbing vector.
Configuration / upgrade notes
symfony/html-sanitizer(^7.0|^8.0).toolbar— republish or mergeconfig/commentions.php.Testing
tests/Livewire/CommentToolbarTest.php(toolbar config normalization,per-component overrides, enabled/disabled rendering, fallback behavior).
tests/SanitizeCommentHtmlTest.php(strips scripts/handlers/iframes,drops unsafe schemes, preserves editor-produced formatting and mention spans,
forces
rel="noopener noreferrer").resources/dist).