question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DefaultPlaceholder does not apply placeholderClassName and placeholderStyle

See original GitHub issue

This is a bug. The doc states that Editor accepts placeholderClassName and placeholderStyle props but they are not applied since https://github.com/ianstormtaylor/slate/pull/1253

I think this is an easy fix, DefaultComponent just need to read them and set the class / merge the style.

I can create a PR for this, but I am unsure if the docs (and editor.js, as the props are still defined there) are a leftover from the above PR and should be removed in favor of custom placeholder, or if they need to be added back to DefaultComponent. I would prefer the latter as this seems a common usecase and the implementation is quite simple.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
renchapcommented, Oct 27, 2017

See an example here: https://www.talegraph.com/tales/hX2bWZixOK?d

When editing the chapter’s title, I want the placeholder to be rendered like the normal text, but in grey, like this: screen shot 2017-10-27 at 18 55 39

It might take multiple lines, I do not care but it needs to stay in the grey column.

I can definitely use a custom renderPlaceholder function and I understand that you want to keep the core simple, but in this case you need to remove mention of placeholderClassName and placeholderStyle in code/docs, and probably add an example with a custom placeholder as it is currently quite hard to figure it out from the docs/examples.

0reactions
ianstormtaylorcommented, Jun 19, 2018

This should be solved these days by implementing your own renderPlaceholder prop to render the placeholder with whatever extra styles you’d like.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Set text input placeholder color in reactjs - Stack Overflow
My approach is to simply apply different styles to the entire <input /> component based on whether or not the value is empty....
Read more >
placeholder - CSS: Cascading Style Sheets - MDN Web Docs
The ::placeholder CSS pseudo-element represents the placeholder text in an or element.
Read more >
::placeholder | CSS-Tricks - CSS-Tricks
You would use a selector like input:focus::placeholder , which you wouldn't be able to do with a pseudo class (they don't stack the...
Read more >
Don't Use The Placeholder Attribute - Smashing Magazine
If a person is requesting a page to be translated, the expectation is that all visible page content will be updated. Placeholders are...
Read more >
react-image-appear - npm
Wraps an img within a placeholder element and adds a gif loader in between. No more ugly-looking progressively loading images! react-image- ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found