[SOLVED] How to check if rich text editor content is empty?

How to check if rich text editor content is empty?

I have a blog with posts. I also have a rich text editor (Quill).

Is it possible to check if the rich text editor has empty content?

I use Quill (with React, Express JS, MongoDB) and I want to somehow prevent storing the empty value in the database.

The problem is that if I add spaces into the editor the Quill will generate empty paragraphs. So no content only empty paragraphs. With the normal input field, I can check for the empty string but what if I have a rich text editor?

Problem:

<p>                     </p>

or even worse

<p>                            </p><p><br></p><p><br></p><p>       </p>

I don't really want to save this into the database. Because I don't want to have empty posts. How can I solve this issue? Can be the solution to somehow check for empty paragraph?.. but what about the <br> tag?

Please open this codesandbox and just enter bunch of spaces and click on the button. Open console and you'll see output of the editor.

codesandbox: https://dxqhq.codesandbox.io/

Thank you very much

Solution

as I understand you only want to save user input only if contains text so you have to clean the user input from HTML then check the output length

var regex = /(<([^>]+)>)/ig
body = "<p>test</p>"
hasText = !!body.replace(regex, "").length;
if(hasText) save()