ReactQuill: Validating Empty Input Value (Showing html tags)

Question

I have problem regarding validating the ReactQuill.

The Scenario: When i remove the input in ReactQuill Textarea the last value will be

<p><br></p>

Question: How to validate if the last value would be <p><br></p> i tried to get value and validate it. but still the value is inserting without data. I don't know where's the problem in my code or in the ReactQuill

State:

 const datas = {
    textValue: this.state.text
 }

My Condition:

 if(datas.textValue.length === 0 || datas.textValue.value == '<p><br></p>')
 {
    return 'false';
 }
 else
 {
    return 'true';
 }

Answer 1

React Quill uses HTML tags for markup purpose. To check length of the entered text by user, we can just filter out html tags from datas.textValue using following regex and trim whitespaces if present.

if(datas.textValue.replace(/<(.|\n)*?>/g, '').trim().length === 0) {
    //textarea is still empty
}

Answer 2

I had to add just a bit to @Scorpionsk answer for it to work perfectly for me so it wouldn't escape images as well.

This works for me.

function isQuillEmpty(value: string) {
  if (value.replace(/<(.|\n)*?>/g, '').trim().length === 0 && !value.includes("<img")) {
     return true;
   }
     return false;
  }