Slate: Allow to customize the placeholder style

Created on 23 Jan 2020  Â·  2Comments  Â·  Source: ianstormtaylor/slate

Feature

In the versions 0.4, it seems there were a way to customize the placeholder style which is not the case anymore in versions 0.5.

It would be nice to add a slate-placeholder to the placeholder span, i.e. here: https://github.com/ianstormtaylor/slate/blob/4c03b497d9407a36c568ed96ada1ca7342ccf578/packages/slate-react/src/components/leaf.tsx#L34

I created a pull-request for this: https://github.com/ianstormtaylor/slate/pull/3461

feature ♥ help

Most helpful comment

While that is useful, it still doesn't allow us to override the parent properties, such as the opacity.
If you could add classname or something else that we could attack with css, that'd be great.

All 2 comments

While the type signature for Editable's placeholder is string, you can still pass in a React component there. That is what I have done to override the placeholder styling. E.g.:

return (
  <Editable
    placeholder={
      <span style={{ ...whatever... }}>
        Write stuff
      </span>
    }
)

If you update that component, the changes will not re-render however. https://github.com/ianstormtaylor/slate/pull/3437 will fix that.

While that is useful, it still doesn't allow us to override the parent properties, such as the opacity.
If you could add classname or something else that we could attack with css, that'd be great.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ianstormtaylor picture ianstormtaylor  Â·  3Comments

JSH3R0 picture JSH3R0  Â·  3Comments

ianstormtaylor picture ianstormtaylor  Â·  3Comments

yalu picture yalu  Â·  3Comments

ezakto picture ezakto  Â·  3Comments