Placeholder style

[AliHammami]

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.

[Thibaud Colas]

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?

[AliHammami]

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}' },
        ]}
/>

[Diky Hadna]

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.

[Thibaud Colas]

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.