vueup / vue-quill

Rich Text Editor Component for Vue 3.
https://vueup.github.io/vue-quill/
MIT License
1.08k stars 261 forks source link

Update the editor upon receiving an empty html string #515

Closed paveltobias closed 4 months ago

paveltobias commented 6 months ago

Hello,

I have discovered the following issue: when using content-type="html", the editor does not re-render when it receives an empty string via the content prop. E.g. imagine appending the following code to demo/src/examples/ContentType.vue's template:

<button
  type="button"
  @click="contentHTML = ''"
>
  clear
</button>

I would assume that an empty string is a valid HTML snippet representing an empty document; therefore, I would expect that clicking the button would clear the editor. However, nothing happens.

The cause of this behavior is the initial guard clause in the content prop watcher's callback in QuillEdtor.vue. When any falsy value -- including an empty string -- is received in the content prop, the callback returns early without calling the setContents function.

To solve the issue, I propose checking whether the received value is nullish rather than falsy. This will only change the behavior for empty strings, leaving everything else intact, and thus not introduce other breaking changes to the API. The single submitted commit implements this proposal.


P.S. In my opinion, even nullish values should not be simply ignored, as it breaks the component's reactivity -- it may display historical data. Perhaps they should be somehow normalized, e.g. replaced with an "empty delta" / empty HTML string, leading to the editor's re-render. However, this is out of the scope of the discussed issue.

stale[bot] commented 4 months ago

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.