Draft-js: Editor is placed under the placeholder

[barbu110]

When specifying placeholder attribute to the Draft.Editor component, the placeholder element is rendered with position: relative (as far as I can see) so it comes above the editor itself.

[barbu110]

My Editor component uses custom block-styling which apparently does not merge the original styles with mine, but completely overrides them. So what I was missing was adding CSS rules for the placeholder itself:

.public/DraftEditorPlaceholder/root {
    @extend .RichEditor/block;
    color: var(palette-grey-500);
    position: absolute;
    z-index: 0;
}

.public/DraftEditorPlaceholder/hasFocus {
    color: var(palette-grey-700);
}

.DraftEditorPlaceholder/hidden {
    display: none;
}

P.S. I leave this here for others who might miss the same thing as I did!

[hnordt]

I had the same problem. Thank you!

For Create React App users, you can import Draft's CSS: import "draft-js/dist/Draft.css";