Settings

Theme

Using React Transitions for low priority text editor updates

handlewithcare.dev

2 points by smoores 10 days ago · 1 comment

Reader

smooresOP 10 days ago

Howdy! React ProseMirror maintainer here. Our collective has been helping out a client with migrating their existing text editor to use React ProseMirror from @tiptap/react. They had a very complex system for deferring updates to their miniature editor preview, which involved queuing ProseMirror transactions and applying them to a second Tiptap Editor during idle time.

While migrating to React ProseMirror, initially I tried out just passing the primary editor's EditorState directly to the preview editor's <ProseMirror /> component, but the top level node view components turned out to be just slow enough to render that rendering them twice on every keypress introduced a noticeable lag. So I added a useDeferredValue to render the preview editor in a Transition! Here's a post about how that works and the tradeoffs involved. I added some interactive demos to illustrate how the Transition changes the render flow.

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection