feat: migrate editor to prosekit #4855
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@ocavue is attempting to deploy a commit to the Hey Team on Vercel. A member of the Team first needs to authorize it. |
Screen.Recording.2024-05-05.at.11.24.26.AM.movGetting this now 🙇🏼 Try commenting on this post https://web-git-fork-ocavue-ocavue-prosekit-heyxyz.vercel.app/posts/0x05-0x0c-DA-c5acc0cc |
If the document is large, the serialization (editor data structure => HTML string => Markdown string) could be slow. That's why I added a 500ms debounce for serialization (code link). However, because of this debounce, if you type something very fast and click the submit button immediately, the Markdown string is not ready yet. That's why you saw this error. Let me think what's the best way to resolve it. Also let me know if you have any suggestions that fit your coding pattern. Update: I removed the delay when the document is small. This should improve such cases. (Git commit link) |
|
@ocavue One last thing i found is the mention dropdown not autoselecting the 0th index Screen.Recording.2024-05-05.at.12.57.59.PM.mov |
Screen.Recording.2024-05-05.at.12.59.47.PM.movThe avatar in the composer causing some CLS |
Fixed. This issue is caused by the overflowing when there is a long word (like a long link) in the editor. Before
After
|
|
Also for mention, lets not limit to first 3 chars, we can start searching from the first character similar to twitter or github |
|
Hovering profile on mention dropdown should show cursor-pointer, RN it shows text selection cursor |
Screen.Recording.2024-05-05.at.1.20.22.PM.movit should show the username and not the profile name 🙇🏼 |
|
LGTM so far |
Fixed. 
|
What does this PR do?
Migrate the text editor from Lexical to ProseKit.
This is a draft PR and not all features are finished. See the list below for details.
Feature list
In this section I listed all features that I implemented in the PR. Each feature has a screen recording to show its behavior. Currently I show both the new ProseKit editor and the old Lexical editor for debugging and testing purpose. I will remove the Lexical editor once this PR is good enough.
Style text by keyboard shortcut (e.g.
Command B)Video
feature-inline-keyboard-shortcut.mp4
Style text by input rule (e.g.
**bold**)You can see a bug in the Lexical editor when typing
~~delete~~. This migration fixes it.Video
feature-input-rule.mp4
Show a floating inline menu when text is selected
This is a new feature.
Video
feature-inline-menu.mp4
Mention picker
Video
feature-mention-menu.mp4
Emoji picker
Video
feature-emoji-menu.mp4
Link matching
Video
(HTTP links)
feature-link-matching.mp4
(Email links)
feature-email.mp4
There are various improvements for link matching compared to the previous Lexical editor. Now the link matching is more robust and it has similar behavior as Twitter's link matching.
Hashtag and Cashtag
Video
feature-hashtag.mp4
Cashtag was never implemented in the Lexical editor, so this would be a new feature.
Drag and drop to insert images
Video
feature-dnd-image.mp4
Related issues
Fixes # (issue)
HEY-106
Type of change
Explanation of the changes