Skip to content

feat: enhance editor with UI components and fix usage display#7

Merged
typelets merged 1 commit intomainfrom
feature/editor-ui-enhancements
Sep 12, 2025
Merged

feat: enhance editor with UI components and fix usage display#7
typelets merged 1 commit intomainfrom
feature/editor-ui-enhancements

Conversation

@typelets
Copy link
Copy Markdown
Owner

@typelets typelets commented Sep 12, 2025

Enhanced TipTap Editor with UI Components and Fixes

Summary

  • Add essential TipTap UI components: color picker, reset formatting, copy to clipboard, and emoji picker
  • Consolidate toolbar buttons into organized dropdowns for better UX
  • Fix React warnings, TipTap extension conflicts, and memory leaks
  • Improve usage percentage display for small storage values

New Features

🎨 Text Color Picker

  • 10 predefined colors plus clear/default option
  • Intuitive color grid layout with hover effects
  • Proper color management through TipTap Color extension

Reset Formatting Button

  • One-click removal of all text formatting
  • Helpful for cleaning up pasted content
  • Uses TipTap's clearNodes().unsetAllMarks() command

Copy to Clipboard

  • Quick content sharing functionality
  • Copies plain text content from editor
  • Modern clipboard API integration

😀 Comprehensive Emoji Picker

  • 136+ carefully curated emojis
  • 8-column grid layout for easy browsing
  • Covers faces, gestures, hearts, symbols, and celebrations

Consolidated Dropdowns

  • Headings: H1, H2, H3 + Normal Text in single dropdown with visual hierarchy
  • Lists: Bullet, numbered, and task lists in organized dropdown
  • Dynamic icons show currently active formatting
  • Proper spacing and checkmarks for active states

Bug Fixes

  • 🔧 Fixed duplicate TipTap extension warnings (horizontalRule, dropcursor)
  • 🔧 Resolved React key warnings from duplicate emojis
  • 🔧 Fixed tippy.js memory leak in slash commands with proper cleanup
  • 🔧 Added TypeScript null safety for React root unmounting

UX Improvements

  • Fixed usage percentage display (now shows 0.11% instead of 0.0%)
  • Frontend calculation when backend returns incorrect percentages
  • Better visual spacing in dropdown menus
  • Proper icon centering in color picker
  • Font weight hierarchy in heading dropdown

Technical Details

  • Added @tiptap/extension-color and @tiptap/extension-text-style dependencies
  • Disabled conflicting extensions in StarterKit configuration
  • Enhanced cleanup logic for React components and tippy.js instances
  • Improved percentage calculation with proper decimal precision

@batalabs
feat: enhance editor with UI components and fix usage display
2502db7 
  - Add color text picker with 10 predefined colors and clear option
  - Add reset formatting button to clear all text styling
  - Add copy to clipboard functionality for editor content
  - Add comprehensive emoji picker with 136+ emojis
  - Consolidate H1/H2/H3 buttons into single headings dropdown
  - Consolidate bullet/numbered/task lists into single dropdown
  - Improve usage percentage display for small values (show 0.11% vs 0.0%)
  - Add proper spacing and visual hierarchy in dropdown menus
  - Calculate storage percentage on frontend when backend returns 0
@typelets typelets self-assigned this Sep 12, 2025
@typelets typelets merged commit 276e78e into main Sep 12, 2025
3 checks passed
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Sep 12, 2025

🎉 This PR is included in version 1.13.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@typelets typelets

Labels

released

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@typelets @batalabs