How to run prose plugin apply on mount and compare oldState with newState correctly.

[zgrybus]

I'm creating a small widget that adds presentations from google slides when the link comes from google docs.
It reads all the links and filters for those that have the text docs.google.com/presentatio in the href attribute, then adds the LinkWidget component to its last position and it all works fine.

Unfortunately, I have a problem, because at the beginning of rendering, the apply method does not fire, so it will not render LinkWidget..

In addition, every time the text changes, the component is remounted. How to make a cache of widgets whose links have not changed (let's say I check if the href attribute hasn't changed, if not, you don't need to mount the widget again)? As this one is not enough ( because position has changed )

if (oldState.doc.eq(newState.doc)) {
  return value;
}

Small demo:
https://codesandbox.io/s/smoosh-sunset-ey4uhy?file=/src/useGoogleSlidesPlugin.tsx

[Saul-Mirone]

In the plugin.state.apply method, you're recreating all decorations when new state get applied. If you want to optimize this, you shouldn't recreate the list. You need to do something like diff to know which decoration you need to remove or add. This example in prosemirror website also mentions that.

As for the init behavior, you can return a initial decoration list in plugin.state.init.

[zgrybus]

plugin.state.init works, thanks.

However, regarding diff, I have a problem.. when I just return the value - iframe disappears 🤔
https://codesandbox.io/s/smoosh-sunset-ey4uhy?file=/src/useGoogleSlidesPlugin.tsx
Is it intended? I'm returning the value that contains all of the decorations 🤔

[Saul-Mirone]

That's not right. You're returning the old position, old decoration set with old state. They cannot apply to the new editor state. Always recalculate the decoration set with latest state. You just need to reuse the widgets created. DecorationSet.map will help you to do that. Take a look at this doc.

[zgrybus]

So.. basically, the way I've implemented here is fine?
https://codesandbox.io/s/smoosh-sunset-ey4uhy?file=/src/useGoogleSlidesPlugin.tsx

apply(tr, value, oldState, newState) {
  const mappedDecoration = value.map(tr.mapping, tr.doc);

 // get links from the new state
 const googleSlidesLinks = getGoogleSlidesLinks(newState);

 // filter those that are already in the previous decoration
 const newGoogleSlidesLinks = googleSlidesLinks.filter((link) => {
   const { start, end, href } = link;
   // if I find any decoration on this position with accurate `href`, we should filter it as it's already in the decoration class
   return !mappedDecoration.find(start, end, (spec) => spec.href === href).length;
 });

 // create widgets of the new one
 const googleSlidesDecorations = newGoogleSlidesLinks.map(
   (googleSliedLink) => createWidget(googleSliedLink.end, { href: googleSliedLink.href }) 
 );

 // apply new one and return the new decoration
 return mappedDecoration.add(tr.doc, googleSlidesDecorations);
}

[zgrybus]

However, I noticed small bug..

I found a bug, when I want to go to a new line and hit enter at the end of the link, a new widget is created 🤔
Strange.. should I delete the old one?

Moreover,
This script gives me a widget after the link, so if the link is the last one.. then I can't write anything else because I'm overriding a paragraph created by the plugin-trailing.

[Saul-Mirone]

Seems in your implementation, decorations will only be add, but maybe you need to remove some of them due to changes.