How can we know the empty state of an editor?

[jayanthbondi]

In my use case I need to disable export html button, when user has not given any content. How can I know that? Is there any property which tells me if the editor state is empty?

[ukhanzada-nisum-com]

@jayanthbondi Same in my case.. it looks like you opened it a long ago so have you found any solution? If yes - so please share here to help people who have the same concern.

[umair-khanzada]

After digging into “react-email-editor” I found some workaround which is listed below, I think the same works for unlayer’s angular and vuejs module.

1. When the email editor is empty there is an element with the class “blockbuilder-placeholder-empty” simply check the element if it is present template builder is empty but can’t do that because the template builder renders through iframe and due to the CORS can’t access iframe’s element - almost impossible 99.9% untill and unless both of the domain are same.

2. Now we know that unlayer uses iframe and the good thing is they emit some events “editor:ready, design:loaded, design:updated, image:uploaded” so we can add a listener for “design:updated” event here is the link https://docs.unlayer.com/docs/events#design-updated

3. Get template info via “exportHtml” function and iterate over rows and columns and check content if the content array has a length in any of the rows it means the template builder isn’t empty else it’s empty/blank.

Here is the example

exportHtml(data => {
  const { design: { body } } = data;
  const { rows } = body;
  let isEmpty = true;
  label: for (let i = 0; i < rows.length; i++) {
    const { columns } = rows[i];
    for (let j = 0; j < columns.length; j++) {
      const { contents } = columns[j];
      if (contents.length) {
        isEmpty = false;
        break label;
      }
    }
  }
});