Slow input typing if dragglable is true

[lucastsudaka]

Hi,
There is one problem if you insert an input field inside get view() and type something
https://codesandbox.io/s/qvn50vv964
(click youtube video and type in the field)

This problem dont occurs with draggable false

Seemsn this happens cause the editor need to update.

[Chrissi2812]

@philippkuehn What exactly does this part of the code? https://github.com/scrumpy/tiptap/blob/0e59e0cc0c2b4f0be5c46ebf2a698c674bfda821/packages/tiptap/src/Utils/ComponentView.js#L103-L107

Because if it returns false the component no longer gets destroyed on each prop change.

Maybe implement a check like this?

  // prevent a full re-render of the vue component on update
  // we'll handle prop updates in `update()`
  ignoreMutation() {
    return !(this.editable && this.extension.schema.draggable)
  }

[philippkuehn]

I'm not sure what's the difference between your sandbox and this embed example. Even if I set draggable to true, the demo works without the described problem 🤔

@Chrissi2812 It's not a good idea to change the behavior of ignoreMutation. By default ProseMirror re-renders a node view whenever an attribute changes. In some situations this makes it impossible to use tooltips or fade-in transitions for example.

[lucastsudaka]

In the newer versions with "stopEvent()" is possible to control this behavior.
https://codesandbox.io/s/qvn50vv964 (see components/iframe.js)
Thanks @philippkuehn, amazing job!

[Chrissi2812]

Can confirm that with 1.17.0 this works without much problems.
Even without stopEvent as mentioned by @lucastsudaka.
The only thing I have noticed is that as soon as you press backspace the embed gets deleted. @keydown.stop on the input element prevents this behaviour.

[philippkuehn]

Please reopen if this issue is still present.