Hey guys! I’m currently working on a new Decorations API for Tiptap to allow users to create Decorations straight from our Extension ecosystem without touching the Plugin system themselves. Works for now even though I can refine it but I struggle with rendering more complex elements into widget decorations.
What I’m doing is basically collecting Plugin creation and shouldUpdate functions from all extensions, pass them to a DecorationManager that is responsible for creating the Plugin, keeping Decorations and state and only update them if a shouldUpdate function tells DecorationManager to update.
This still leads to a lot of recreations of all decorations. One idea was to split the Plugin so I create plugins for each extension so at least all extensions with decorations have their own DecorationSet that I need to recreate.
Is there a way to reuse a DecorationSet but only update/add decorations that need changes?
If I find a solution for 1, could I reuse a HTML element (that was already rendered into via React or Vue) without re-rendering everything and causing the whole framework lifecycle to kick in again?
My final goal is to have a performant solution that only re-renders those decorations that were impacted by a change so I don’t accidentially re-render too many decorations in a huge document.
Yes, that’s what the add and remove methods do. You keep your set in a state field, map it on changes, and only change the parts that need to change.
If the same decoration widget appears in the same place in the document, the library will not redraw it. Being careful about either using the exact same (by identity) rendering function or using the key field should make it easy to avoid unnecessary redraws.
I’ll give it a shot. Do you have some advise on what kind of information I could use to generate those keys since I think our users could have tons of different ways to dynamically generate them (for example highlighting, adding markers, etc.) by position / text.
Anyways thanks already for the tips! Hear you later.
!