facebook / facebook/lexical

Placeholder does not behave like a placeholder

Open
#4,113 12 comments 18 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 14h
Merged PRs (30d)
55

Description

When setting the `placeholder` property (JSX.Element) for the PlainTextPlugin it adds the JSX.Element as element to the DOM after the editor `div`. This is incorrect placeholder behavior as it just another element in the DOM. It would be expected that the placeholder becomes an actual placeholder property for the editor `div` which has property `contentEditable=true`.

Lexical version: 0.9.0

```
}
placeholder={props.placeholder &&

{props.placeholder}
}
ErrorBoundary={LexicalErrorBoundary}
/>
```

## The current behavior
The placeholder is added is element to the DOM after the editor `div`.

## The expected behavior
The placeholder is a property of the editor `div` that sets a placeholder text when the editor is empty like with below CSS.

```
[contentEditable="true"]:empty:not(:focus):before {
content: attr(placeholder)
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.