Add a formatting toolbar to the comment editor#109
Open
ItsMalikJones wants to merge 1 commit into
Open
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.
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).