-
Notifications
You must be signed in to change notification settings - Fork 21
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How can I use upload decorations with this library? #13
Comments
Hello @OrcaXS. Thank you for opening this issue and for including a reproduction. The reason your example doesn't work is because the value 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 |
Made some edits to the reply above, sorry had lots of typos :). |
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));
});
This is the behavior of the official example: Screen.Recording.2021-04-17.at.21.13.10.mov
|
Whoops yeah I neglected to include this. Your approach is what I would have done.
Yep, that's what I meant by
In the PM upload example that is done with
So you'll want to do this too. To do this, use the
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. |
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. |
Thanks for explaining that decoration mapping part, looks like I wasn't understanding enough about the official example... Using 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:
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. |
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. |
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. ButplaceholderPlugin.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.
The text was updated successfully, but these errors were encountered: