Allow to customize the placeholder style

[lcswillems]

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

[thallada]

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.

[timothyarmes]

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.

[sensible-s]

With renderPlaceholder can we please close this issue? https://github.com/ianstormtaylor/slate/issues/4123