vue-quill icon indicating copy to clipboard operation
vue-quill copied to clipboard

Update the editor upon receiving an empty html string

Open paveltobias opened this issue 1 year ago • 0 comments

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.

paveltobias avatar Feb 21 '24 14:02 paveltobias