-
-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Editable content inside a view not reflecting in the prosemirror document #304
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
Comments
Hmm, I think something changed in ProseMirror in the latest updates. The major issue is fixable with adding a |
Because the codesandbox is on an old version where it used to work @philippkuehn it does make the behavior of the input work fine, but its still not taken correctly by prosemirror, since it still doesn't trigger the onUpdate method and backspace also breaks |
okay I can reproduce this bug for some extension at scrumpy too. |
I hope this is a bug in ProseMirror. I created a thread. |
Hopefully its an issue on their end as well, or theres a way to fix it. |
@philippkuehn now when I create that image node, it straight up goes on forever and locks everything up, did I have to change anything? |
oh no. I'm sorry. can't reproduce this in my local tests. will open this issue again :( |
Apparently my is-empty computed is the issue, otherwise it works perfectly. How should I go around verifying if the content is empty in order to show a placeholder text? |
ah! the problem is this line:
It seems that this will cause an infinite loop, whenever you update node view children (the element with ref="content" – in ProseMirror it's called holes). Try to do something like that:
BTW: you can check |
I was quite literally typing that as you did, its why I closed the issue, and yeah its what I ended up doing to fix the issue. I will check node.content.size though, at the time I didnt know you could add props like node to a component. Thanks! |
One other issue that I found, though it might not be related, is that you cant select the text properly. It will always deselect itself when you let go of the mouse button. EDIT: Inside the Image caption part I mean. You can make it work if you put a content-editable:false on any of the parents but if you do, it wont show the menu bubble at all when you select that text. |
Yeah this seems to be another issue. Interesting that only mouse selection is broken. Selection via keyboard is working fine. |
This behavior is because of your |
This still works, it is to show a contextual menu when you select the node and highlight it in blue in this case. Is there another way I can keep track of which node is selected? The prosemirror way to select node doesn't work too great with vue components it seems, whenever I click or try to select the node using this it would never work like I want. |
Did you ever find a solution to this @dSolid ? Selecting content inside a vue component doesn't seem to play too well with prosemirror. It's as if prosemirror doesn't see it at all. I have a very similar case as yours described above and have the same logic for selecting an image to show a menu. Selecting it obviously works since the selection logic is inside the vue component, but I also have other menus outside of it and they don't play too well with each other since they don't "know" of each other. |
Describe the bug
Something changed in one of the latest updates which causes the contenteditable inside the view of a component to not update the prosemirror document. In my case it was updating the caption of an image you add, it used to work as you'll see in the Codesandbox exemple, but in the latest version I can't seem to get it to work again.
Steps to Reproduce / Codesandbox Example
Steps to reproduce the behavior:
This is the Codesandbox setup that has the component inside which ironically doesn't have the issue:
https://codesandbox.io/s/5xrm89rmyx
Screenshots

This is an exemple of what it does when its not working:
The text was updated successfully, but these errors were encountered: