DefaultPlaceholder does not apply placeholderClassName and placeholderStyle
See original GitHub issueThis 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:
- Created 6 years ago
- Reactions:1
- Comments:6 (6 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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:
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 ofplaceholderClassName
andplaceholderStyle
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.This should be solved these days by implementing your own
renderPlaceholder
prop to render the placeholder with whatever extra styles you’d like.