feat(shared): replace MarkdownInput with RichTextInput#5457
feat(shared): replace MarkdownInput with RichTextInput#5457rebelchris wants to merge 5 commits intomainfrom
Conversation
Migrate from textarea-based MarkdownInput to TipTap-powered RichTextInput for a WYSIWYG editing experience while maintaining markdown compatibility. Changes: - Add RichTextInput component with TipTap editor - Add markdown<->HTML conversion utilities - Enable headings, code blocks, and images in rich text editor - Fix invalid typo-title4 CSS class (design system only has title1-3) - Simplify LinkModal form handling - Update comment, post, and freeform content editors to use RichTextInput Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
rebelchris
left a comment
rebelchris
left a comment
There was a problem hiding this comment.
@claude see my comments
| useEffect(() => { | ||
| queryRef.current = query; | ||
| }, [query]); | ||
|
|
||
| useEffect(() => { | ||
| mentionsRef.current = mentions || []; | ||
| }, [mentions]); | ||
|
|
||
| useEffect(() => { | ||
| emojiDataRef.current = emojiData; | ||
| }, [emojiData]); | ||
|
|
||
| useEffect(() => { | ||
| emojiQueryRef.current = emojiQuery; | ||
| }, [emojiQuery]); | ||
|
|
||
| useEffect(() => { | ||
| selectedRef.current = selected; | ||
| }, [selected]); | ||
|
|
||
| useEffect(() => { | ||
| selectedEmojiRef.current = selectedEmoji; | ||
| }, [selectedEmoji]); |
There was a problem hiding this comment.
Is there no better way to do this? this feels very hacky
| ); | ||
| } | ||
|
|
||
| export default forwardRef(RichTextInput); |
There was a problem hiding this comment.
This file is very overwhelming, can we abstract it, make it leaner or split.
But also have a look seems like lots of rubbish to be honest.
|
Claude finished @rebelchris's task in 13m 2s —— View job Refactoring Complete ✓I've addressed both review comments by extracting the logic into focused, reusable hooks: What I did:
About the refs pattern (line 288):The refs are still used because TipTap's Bonus fix:Fixed ESLint errors in Tasks completed:
Branch: fix/richtext-editor-typography |
- Extract mention autocomplete to useMentionAutocomplete hook - Extract emoji autocomplete to useEmojiAutocomplete hook - Extract image upload to useImageUpload hook - Extract draft storage to useDraftStorage hook - Reduce RichTextInput from 938 to 651 lines (31% reduction) - Fix ESLint errors in markdownConversion.ts for mutually recursive functions Co-authored-by: Chris Bongers <rebelchris@users.noreply.github.com>
1 participant
Summary
typo-title4CSS class (design system only hastypo-title1throughtypo-title3)<form>element instead of duplicateonKeyDownhandlersTest plan
**bold**,*italic*) still work🤖 Generated with Claude Code
Preview domain
https://fix-richtext-editor-typography.preview.app.daily.dev