React-draft-wysiwyg: Placeholder still shows when creating list

[ljowen]

If a ordered or unordered list is started before typing any text the placeholder text still displays which looks weird as the bullet point or number are rendered on top.

[jpuri]

@ljowen : thanks for reporting this issue. I will soon check.

[jpuri]

@ljowen : I could not replicate this:

[ljowen]

@jpuri : see attached, showing the number before anything has been typed.

[jpuri]

@ljowen : do you also see some errors in console ?

[ljowen]

Just two failed GET's:
GET https://jpuri.github.io/react-draft-wysiwyg/static/bundle.js jpuri.github.io/:1
GET https://jpuri.github.io/react-draft-wysiwyg/static/main.css jpuri.github.io/:1

This is Chrome and Firefox on Ubuntu btw

[rawris]

@jpuri Hi! I'm facing this issue too. Do you have any solution for this? Thanks.

[Frozzy6]

Hi there!
That's the problem of js-draft. Link to issue
If you inspect the code you can check the placeholder component.

The placeholder is still here but was hidden by css (link to docs)

`

const {editorState} = this.state;

// If the user changes block type before entering any text, we can
// either style the placeholder or hide it. Let's just hide it now.
let className = 'RichEditor-editor';
var contentState = editorState.getCurrentContent();
if (!contentState.hasText()) {
  if (contentState.getBlockMap().first().getType() !== 'unstyled') {
    className += ' RichEditor-hidePlaceholder';
  }
}

return (
  <div className="RichEditor-root">
    <div className={className}>
      <Editor  placeholder="Tell a story..."  />
    </div>
  </div>
);

`

[jpuri]

@Frozzy6 : good finding 👍 I will add this to the editor also.

[MeSanti]

Hello,
I'm having the same issue, have you guys solved the problem? it happens even in you live demo here: https://jpuri.github.io/react-draft-wysiwyg/#/

Thanks! and thank you for the work you are doing

[Frozzy6]

@MeSanti, I described the solution in my previous message.

in a nutshell use css to hide the placeholder