Draft-js: Placeholder logic does not account for empty blocks

[makenosound]

The placeholder check doesn’t account for situations where you have an empty block of a type that renders a visual representation. For example, if you have a single unordered-list-item block without any text, it will render the list item in conflict with the placeholder text.

This is because the check only accounts for text and not the blocks themselves. I’ll look to fix this up and submit a PR, just wanted to note it somewhere. My thought on implementation is to check:

• There’s only one block
• That block is unstyled
• That block has no text

Seem reasonable?

[hellendag]

Great question.

Take a look at the render method of the rich editor example. The placeholder is explicitly hidden via CSS when there is no text and the first block is unstyled, otherwise, as you note, you'd end up with the placeholder weirdly misaligned with the cursor.

The reason the framework does not hardcode hiding the placeholder for the empty unstyled case alone is that the developer may wish to have a styled placeholder for different block types. For instance, if the user changes to an unordered-list-item, the editor could be given a class that pushes the placeholder out to the appropriate margin.

This kind of behavior might be relatively uncommon, but I'm hesitant to bake in a rule like this one and eliminate the flexibility. :)

[makenosound]

@hellendag Ah, of course — that makes a lot of sense.

For instance, if the user changes to an unordered-list-item, the editor could be given a class that pushes the placeholder out to the appropriate margin.

This seems like a reasonable general solution to the problem. Would that be a reasonable thing to include as core behaviour? Making it CSS enforceable would mean that it’s very easy to opt out of.

[makenosound]

And I have it working using your suggested approach:

And an out-of-context code snippet:

let placeholderBlockType = false
const contentState = editorState.getCurrentContent();
if (!contentState.hasText()) {
  placeholderBlockType = contentState.getBlockMap().first().getType()
}

// Set up content wrapper classes
let contentClassNames = classNames(
  styles.content,
  {
    [`${styles['contentPlaceholder--' + placeholderBlockType]}`]: (placeholderBlockType && styles['contentPlaceholder--' + placeholderBlockType])
  }
)

Ta again for the pointer @hellendag.

[flarnie]

Looks like this question was answered - feel free to open a new issue if any questions remain.