Placeholder style
AliHammami opened this issue · comments
Hi,
My placeholder is too bold on my DraftEditor component, is there a way to make it clearer ?
And I want to remove the placeholder on focus, but I couldn't do it. Is there a way to remove it on focus ?
Thank you.
Hey @AliHammami, thanks for getting in touch.
There is a predefined issue template for questions, which looks like this:
Please make sure you have read available documentation and have searched for other resources available online before submitting your question here. Please also have a look at [Draftail’s Help resources](https://www.draftail.org/help)
Thanks!
(Write your answer here.)
### Which terms did you search for in the docs, issues, Stack Overflow?
<!--
Some common issues with the project are detailed in the documentation.
If you didn't find the solution, please share which words you searched for.
This helps us improve documentation for future readers who might encounter the same problem.
-->
- [ ] In the https://www.draftail.org/ documentation I searched for: (Write your answers here).
- [ ] In the issues / pull requests, I searched for: (Write your answers here).
- [ ] In Stack Overflow, I searched for: (Write your answers here).
could you reformat your question to follow it?
Additionally since this is an implementation question, could you share what you’ve tried so far?
Which terms did you search for in the docs, issues, Stack Overflow?
Placeholder DraftailEditor on focus, How to remove placeholder on focus on draftail ?, How to customize placeholder on draftail ?...
- In the https://www.draftail.org/ documentation I searched for: placeholder, onfocus
- In the issues / pull requests, I searched for: placeholder, onfocus
- In Stack Overflow, I searched for: draftail, placeholder, onfocus
To make the placeholder clearer, I add a css class and tried to change the fontstyle of the placeholder.
To remove the placeholder on focus, here's what I've tried:
<DraftailEditor
{...rest}
stateSaveInterval={stateSaveInterval || 16}
rawContentState={rawContentState || null}
onBlur={handleBlur}
onSave={onSave}
onChange={null}
placeholder={placeholder || null}
onFocus={this.placeholder=""}
blockTypes={limitedBlockTypes ? [
{ type: BLOCK_TYPE.HEADER_TWO, label: 'titre' },
{ type: BLOCK_TYPE.HEADER_THREE, label: 'sous-titre' },
{ type: BLOCK_TYPE.UNORDERED_LIST_ITEM, label: '-' },
{ type: BLOCK_TYPE.ORDERED_LIST_ITEM, label: '1...' },
] : removeBlockTypes ? [] : [
{ type: BLOCK_TYPE.HEADER_TWO, label: 'titre' },
{ type: BLOCK_TYPE.HEADER_THREE, label: 'sous-titre' },
{ type: BLOCK_TYPE.UNORDERED_LIST_ITEM, label: '-' },
{ type: BLOCK_TYPE.ORDERED_LIST_ITEM, label: '1...' },
{ type: BLOCK_TYPE.CODE, label: '[Bloc Code]' },
]}
decorators={[{
strategy: handleLinkStrategy,
component: DraftLink,
}]}
inlineStyles={
limitedBlockTypes ? [
{ type: INLINE_STYLE.BOLD, label: 'G' },
{ type: INLINE_STYLE.ITALIC, label: 'I' },
] : removeBlockTypes ? [] : [
{ type: INLINE_STYLE.BOLD, label: 'G' },
{ type: INLINE_STYLE.ITALIC, label: 'I' },
{ type: INLINE_STYLE.CODE, label: '{Code}' },
]}
/>
Hi @AliHammami
I know it's an old question, but in case you haven't managed to solve the problems, here are my simple steps to solve the problems:
Remove placeholder onFocus (and put it back onBlur)
- Define
placeHolder
in your state with your preferred value, and create these two functions:
removePlaceHolder() {
this.setState({
placeHolder: ""
})
}
setPlaceHolder() {
this.setState({
placeHolder: "Your placeholder here"
})
}
- Don't forget to bind those functions
this.removePlaceHolder = this.removePlaceHolder.bind(this);
this.setPlaceHolder = this.setPlaceHolder.bind(this);
- Finally, in your
<DraftailEditor />
, put these code:
placeholder={this.state.placeHolder}
onFocus={this.removePlaceHolder}
onBlur={this.setPlaceHolder}
Change placeholder style
Well, I haven't found any easier way beside overriding public-DraftEditorPlaceholder-inner
class in the CSS.
So, in your CSS file, override this class:
.public-DraftEditorPlaceholder-inner {
/* override your style here with !important */
}
Please be aware that this method is not recommended.
I would recommend styling either .public-DraftEditorPlaceholder-inner
or .public-DraftEditorPlaceholder-root
.
About hiding the placeholder, @dkhd’s solution looks perfect. However I’d caution against doing that, as I believe the browsers’ default behavior is to display the placeholder while focused. If you hide it, then it means someone jumping straight to a field by keyboard navigation might never seen the placeholder.