Skip to content

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

Closed
dSolid opened this issue May 9, 2019 · 15 comments
Closed
Labels
Type: Bug The issue or pullrequest is related to a bug

Comments

@dSolid
Copy link

dSolid commented May 9, 2019

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:

  1. Add an image with the menu or drag and drop
  2. Try to enter text inside the placeholder
  3. The onUpdate method of the editor should trigger to see the changes made to the document

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:
image

@dSolid dSolid added the Type: Bug The issue or pullrequest is related to a bug label May 9, 2019
@philippkuehn
Copy link
Contributor

philippkuehn commented May 9, 2019

Hmm, I think something changed in ProseMirror in the latest updates. The major issue is fixable with adding a contenteditable="false" to your wrapper div of your image node. But I can see that your computed captionEmpty still isn't working after that. I think this is a new optimization of ProseMirror to not update node views whenever a child node (your image caption) is updated.

@dSolid
Copy link
Author

dSolid commented May 9, 2019

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

@philippkuehn
Copy link
Contributor

okay I can reproduce this bug for some extension at scrumpy too.

@philippkuehn
Copy link
Contributor

I hope this is a bug in ProseMirror. I created a thread.

@dSolid
Copy link
Author

dSolid commented May 10, 2019

Hopefully its an issue on their end as well, or theres a way to fix it.

@dSolid
Copy link
Author

dSolid commented May 13, 2019

@philippkuehn now when I create that image node, it straight up goes on forever and locks everything up, did I have to change anything?

@philippkuehn
Copy link
Contributor

philippkuehn commented May 13, 2019

oh no. I'm sorry. can't reproduce this in my local tests. will open this issue again :(

@philippkuehn philippkuehn reopened this May 13, 2019
@dSolid
Copy link
Author

dSolid commented May 13, 2019

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?

@dSolid dSolid closed this as completed May 13, 2019
@philippkuehn
Copy link
Contributor

ah! the problem is this line:

<p ref="content" :class="{ 'is-empty': captionEmpty }"></p>

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:

<div :class="{ 'is-empty': captionEmpty }">
   <p ref="content"></p>
</div>

BTW: you can check this.node.content.size instead of this.$refs.content.innerHTML

@dSolid
Copy link
Author

dSolid commented May 13, 2019

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!

@dSolid
Copy link
Author

dSolid commented May 13, 2019

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.

@philippkuehn
Copy link
Contributor

Yeah this seems to be another issue. Interesting that only mouse selection is broken. Selection via keyboard is working fine.

@philippkuehn
Copy link
Contributor

This behavior is because of your selectNode event handler. I'm not sure what you wanted to do and how it worked before. But since the latest versions the event handling for child nodes is probably a bit different.

@dSolid
Copy link
Author

dSolid commented May 13, 2019

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.

@Sakessonholm
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug The issue or pullrequest is related to a bug
Projects
None yet
Development

No branches or pull requests

3 participants