Skip to content

Add a formatting toolbar to the comment editor - #109

Merged
lisa-fehr merged 8 commits into
mainfrom
feat/75-tiptap-toolbar
Jul 31, 2026
Merged

Add a formatting toolbar to the comment editor#109
lisa-fehr merged 8 commits 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

@lisa-fehr lisa-fehr left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Seems to work pretty well. But there is a delay when attempting to select or deselect. It may highlight after focusing the text area.

The lists and styling was also missing (fixed)

…Add to the link checks and set it as an opt-in. Add missing styles.
@lisa-fehr
lisa-fehr force-pushed the feat/75-tiptap-toolbar branch from 46cb6e5 to f5b6fa2 Compare July 29, 2026 20:54
@lisa-fehr
lisa-fehr force-pushed the feat/75-tiptap-toolbar branch from b3f0405 to c84ef49 Compare July 31, 2026 17:13
@lisa-fehr
lisa-fehr merged commit 496d759 into main Jul 31, 2026
20 checks passed
@lisa-fehr
lisa-fehr deleted the feat/75-tiptap-toolbar branch July 31, 2026 19:19
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

2 participants