How can I use upload decorations with this library?

[OrcaXS]

Hi,

I'm trying to add Prosemirror's Upload Example to your codesandbox example.
For placeholderPlugin, adding a decoration to DecorationSet seems to be working. But placeholderPlugin.getState(state) seems to be always returning an empty DecorationSet.

Am I doing anything wrong? Should I use a different way other than the official one to implement image uploading?

Reproduction: https://codesandbox.io/s/use-prosemirror-basic-example-forked-6g2t0

Thanks.

[dminkovsky]

Hello @OrcaXS. Thank you for opening this issue and for including a reproduction.

The reason your example doesn't work is because the value state captured inside startImageUpload and then passed to findPlaceholder is the value before the decoration was added. See my fork which fixes this: https://codesandbox.io/s/use-prosemirror-basic-example-forked-funwu. I changed the dispatch function you provide to startImageUpload to return the updated value, and then use that value instead. This change makes it work.

However, it is my opinion that using ProseMirror plugins for state management is an anti-pattern with React. Why? Because React is all about top-down data flow, where state is kept up in the render tree and flows down through components as they render. ProseMirror plugins have state management because ProseMirror is intended to exist independently in environments without state management. But state management is a central component of React, so I wouldn't use plugins for state.

Instead, I recommend skipping the plugin for this use-case entirely, and using useState() (or whatever state management you use) to store an initial empty DecorationSet. Then you can update the decoration set directly in your React callbacks, and render it by passing that DecorationSet to <ProseMirror/> using the decorations prop. In my opinion this approach is much more straight forward and idiomatic. There is no using the editor state meta, no "events" ("add"/"remove"). Here is an example of this: https://codesandbox.io/s/use-prosemirror-basic-example-forked-k5v6r. This example is missing mapping transactions like in the plugin version (you'll want to do this in dispatchTransaction) but is otherwise complete.

[dminkovsky]

Made some edits to the reply above, sorry had lots of typos :).

[OrcaXS]

Hi again, Thanks for your detailed explanations.

The second example doesn't clear the decoration after upload complete, here're the little changes I made:

  {...}
  const tr = stateRef.current.tr;
  tr.replaceWith(
    pos,
    pos,
    schema.nodes.image.create({ src: url })
  );
  setDecorations(decorations.remove([deco])); // remove decorations afterwards
  setState(state.apply(tr));
});

The other problem is, in Prosemirror's Upload Example, while the image is "uploading", any inserted text in the meantime won't get cleared after the "upload" is finished. However, both of your forked examples don't seem to save the changes that happens between adding and removing of the decoration. Looks like I have to capture the state just before the "upload" finishes, but I can't figure out how yet. Is achieving the same functionalities viable?

This is the behavior of the official example:

Screen.Recording.2021-04-17.at.21.13.10.mov

After all, I feel handling decoration states in React will be a better and cleaner approach. I'd try integrating those states into React meanwhile.

[dminkovsky]

The second example doesn't clear the decoration after upload complete

Whoops yeah I neglected to include this. Your approach is what I would have done.

The other problem is, in Prosemirror's Upload Example, while the image is "uploading", any inserted text in the meantime won't get cleared after the "upload" is finished.

Yep, that's what I meant by

This example is missing mapping transactions like in the plugin version (you'll want to do this in dispatchTransaction) but is otherwise complete.

In the PM upload example that is done with

      // Adjust decoration positions to changes made by the transaction
      set = set.map(tr.mapping, tr.doc)

So you'll want to do this too. To do this, use the dispatchTransaction prop on <ProseMirror /> instead of onChange, and every time you get a transaction from the editor:

1. apply it to the current state and update the state,
2. use it to map the decoration set, like in the example.

I don't have time to update the example w/ this right now, but I do this in my project and it works well. Let me know if you can't get it working.

[dminkovsky]

BTW I updated the title of this issue, so that anyone facing this problem can more easily find it. I hope you don't mind. Feel free to further improve or revert it.

[OrcaXS]

Thanks for explaining that decoration mapping part, looks like I wasn't understanding enough about the official example...
Here's the new fork I made:
https://codesandbox.io/s/use-prosemirror-basic-example-forked-mt1jd

Using stateRef.current.tr and setting a new decoration set with mapping in dispatchTransaction, it's working like the official one apparently.

This part:

  const decorationsRef = useRef(decorations);
  decorationsRef.current = decorations;
  // ...
  const stateRef = useRef(state);
  stateRef.current = state;

looked a little bit confusing, though. useRef API says:

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue).

But in this case, I guess we have to ensure every decorationsRef and stateRef does hold the latest state/decorations after state updating happens? I'm not pretty sure about this.

If this is the recommended way for implementing uploading decorations, can we update the original example to help anyone run into the same problem? Cleanups and adding necessary comments may be needed.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.