Skip to content

Add a formatting toolbar to the comment editor#109

Open
ItsMalikJones wants to merge 1 commit into
mainfrom
feat/75-tiptap-toolbar
Open

Add a formatting toolbar to the comment editor#109
ItsMalikJones wants to merge 1 commit into
mainfrom
feat/75-tiptap-toolbar

Conversation

@ItsMalikJones
Copy link
Copy Markdown
Contributor

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

  • A formatting toolbar with bold, italic, underline, strike, h1h3,
    blockquote, bulletList, orderedList, code, and link buttons.
  • Configurable globally via a new toolbar config key — a flat list, or grouped
    into arrays to render visual separators:
    'toolbar' => [
        'enabled' => env('COMMENTIONS_TOOLBAR_ENABLED', true),
        'buttons' => [
            ['bold', 'italic', 'underline'],
            ['bulletList', 'orderedList'],
            ['link'],
        ],
    ],
  • Per-component overrides via ->toolbarButtons([...]) on CommentsEntry,
    CommentsAction, and CommentsTableAction; pass [] to hide it for a single
    component, or set enabled => false (or COMMENTIONS_TOOLBAR_ENABLED=false)
    to disable it globally.
  • Active-state highlighting that tracks the cursor/selection, keyboard-focusable
    buttons, and role="toolbar" / aria-pressed for accessibility.
  • All button labels and link prompts are translatable.

HTML sanitization

  • Comment bodies are now sanitized on write via symfony/html-sanitizer against
    an allowlist that matches exactly what the editor can emit (StarterKit +
    Underline + Link + Mention). Scripts, event handlers, iframes, and unsafe link
    schemes are stripped.
  • Links are restricted to http/https/mailto and forced to
    rel="noopener noreferrer" on both the client and the server to close the
    reverse-tabnabbing vector.

Configuration / upgrade notes

  • New dependency: symfony/html-sanitizer (^7.0|^8.0).
  • New config block under toolbar — republish or merge config/commentions.php.

Testing

  • Added tests/Livewire/CommentToolbarTest.php (toolbar config normalization,
    per-component overrides, enabled/disabled rendering, fallback behavior).
  • Added tests/SanitizeCommentHtmlTest.php (strips scripts/handlers/iframes,
    drops unsafe schemes, preserves editor-produced formatting and mention spans,
    forces rel="noopener noreferrer").
  • Frontend assets rebuilt (resources/dist).

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.
@ItsMalikJones ItsMalikJones self-assigned this May 31, 2026
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.

Add support to implement formatting toolbar buttons in TipTap

1 participant