Two-way binding (current value is not displayed)

[novikov1337danil]

First of all thanks for your great job.

I tried to implement two way binding with [(ngModel)] but the DISPLAYED content of the editor is not updated when its value update was called from the parent component (e.g. set value as an empty string).

To reproduce:

1. Implement two way binding
2. From parent component set any value to ngModel state
3. editor.content has actual state, but not editor.getHtml() (as I understand it, it is it who is displayed in the editor)

I tried to set content manually by editor.setOptions({content: value }) but editor still display not correct value

[sibiraj-s]

To reproduce

A stackblitz will be better than screenshots.

From parent component set any value to ngModel state

not sure how you are setting the value, but it works for me, any value set to the ngModel bound variable is reflected in the editor as expected.

editor.content has actual state, but not editor.getHtml()

The editor instance belong to tiptap, You may not need it, unless you know what you are upto. You can use the ngModel bound variable to get values.

Also, I was able to get the value from the editor with editor.getHTML() anytime, which returns the correct value from the editor.

And I am not sure you can set content via editor.setOptions({content: value }). Does this work outside angular?

[novikov1337danil]

@sibiraj-s Thanks for the quick response. Here is the link to reproduce

[sibiraj-s]

Something wrong with handling empty values. It's a bug, but not sure its in ngx-tiptap or with tiptap itself. will get this checked. Meanwhile as a workaround you can do this. the binding works fine for other non empty values

clear() {
  this.value = '<p></p>';
}

[sibiraj-s]

Fixed in 89c510e20f4f1eb42b55b5d0a40e6efc623e97e2

[sibiraj-s]

Fixed in v4.0.1.

v4 requires angular 13, If you are not using 13, you can use <p></p> to set empty content which is also a perfectly valid option.

One another option using the editor instance directly is

editor.chain().setContent('').run()
// or
editor.commands.setContent('')

[novikov1337danil]

Good job! Thanks for the help

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in the thread.