Skip to content

Fix missing highlight and horizontal rule buttons in TipTap toolbar #191

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Sep 12, 2025
Merged

Fix missing highlight and horizontal rule buttons in TipTap toolbar #191

merged 2 commits into from
Sep 12, 2025

Conversation

jhodapp
Copy link
Member

@jhodapp jhodapp commented Sep 10, 2025 •
edited
Loading

Description

Implements missing highlight text and horizontal rule buttons in the TipTap v3 editor toolbar, along with improved button ordering as requested in the GitHub issue.

GitHub Issue: Fixes #179

Changes

  • Add highlight text button with highlighter icon and Ctrl-Shift-h keyboard shortcut
  • Add horizontal rule button with line icon and Ctrl-Shift-minus keyboard shortcut
  • Reorder formatting buttons to group Bold/Italic/Underline together
  • Extend MarkButton component to support highlight mark type
  • Create new HorizontalRuleButton component following established patterns of using references component from tiptap-ui-components
  • Both new buttons automatically work in floating toolbar (uses same SimpleToolbar component)

Screenshots / Videos Showing UI Changes (if applicable)

Screenshot 2025-09-10 at 13 47 35

Testing Strategy

  • Verify both new buttons appear in toolbar and function correctly
  • Test keyboard shortcuts (Ctrl-Shift-h for highlight, Ctrl-Shift-minus for HR)
  • Confirm highlight text functionality with different text selections
  • Verify horizontal rule insertion creates proper <hr> elements
  • Test that buttons work in both main toolbar and floating toolbar
  • Confirm button ordering matches requirements (B/I/U grouped together)

Concerns

None - implementation follows existing TipTap patterns and leverages already-configured extensions.

@jhodapp
Add missing highlight and horizontal rule buttons to TipTap toolbar
30a1afd 
- Add highlight text button with Ctrl-Shift-h shortcut
- Add horizontal rule button with Ctrl-Shift-minus shortcut
- Reorder formatting buttons to group B/I/U together
- Both buttons automatically work in floating toolbar
@jhodapp jhodapp self-assigned this Sep 10, 2025
@jhodapp jhodapp added the enhancement Improves existing functionality or feature label Sep 10, 2025
@jhodapp jhodapp moved this to 🏗 In progress in Refactor Coaching Platform Sep 10, 2025
@jhodapp jhodapp added this to the 1.0.0-beta2 milestone Sep 10, 2025
@jhodapp jhodapp requested a review from calebbourg September 10, 2025 18:51
@jhodapp jhodapp merged commit 21e983c into main Sep 12, 2025
7 checks passed
@jhodapp jhodapp deleted the 179-bug-tiptap-toolbar-is-missing-highlight-text-and-hr-buttons branch September 12, 2025 14:58
@github-project-automation github-project-automation bot moved this from 🏗 In progress to ✅ Done in Refactor Coaching Platform Sep 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@calebbourg calebbourg calebbourg approved these changes

Assignees

@jhodapp jhodapp

Labels
enhancement Improves existing functionality or feature
Projects
Refactor Coaching Platform
Status: ✅ Done
Milestone
1.0.0-beta2
Development

Successfully merging this pull request may close these issues.

[Bug]: TipTap toolbar is missing highlight text and hr buttons
2 participants
@jhodapp @calebbourg