Placeholder is visible if you type `return`

[zummenix]

Placeholder is visible if you type return on the keyboard, i.e. when the editor has the following content:

<br><div><br></div>

If you type text it works as expected.

[cjwirth]

Hey! 😄

Yeah... this is a problem I know about. I don't really know too much about HTML and JS, so I wasn't sure how to best tell if there was any content inside a contentEditable div. I think I ended up just checking if the length of the text was 0 or not. Of course then you end up with his problem...

Let me know if you've got any ideas 💡

[EmperiorEric]

Its also visible if you add an image before any text. Haven't had a chance to look into possible solutions yet. But just thought I'd add that here.

[steve509]

I wanted to chime in with a possible solution:

We can update the existing condition which only looks at text content:

RE.updatePlaceholder = function() {
    if (RE.editor.textContent.length > 0) { 
        RE.editor.classList.remove("placeholder");
    } else {
        RE.editor.classList.add("placeholder");
    }
};

To this condition which looks for textContent and the innerHTML of the element:

RE.updatePlaceholder = function() {
    if (RE.editor.innerHTML.indexOf('img') !== -1 || (RE.editor.textContent.length > 0 && RE.editor.innerHTML.length > 0)) {
        RE.editor.classList.remove("placeholder");
    } else {
        RE.editor.classList.add("placeholder");
    }
};

We can therefore evaluate if there's any non-text content inside the element and show a placeholder accordingly. The condition checking for the index of 'img' was added because images are an exception to non-text content and should be considered the same as text when determining to show a placeholder or not.