Error with documentation regarding how to use renderPlaceholder

[ianleeduckworth]

Problem
The documentation around renderPlaceholder appears to be wrong, specifically the example usage. I used the prescribed example exactly and the placeholder behavior seemed incorrect. I noticed that it is because the attributes object that comes in has a style tag that must be applied to the div element. As such I believe the right way to use this functionality is to extend style instead of overriding it

Solution
This is the recommended approach to make a custom placeholder per the docs referenced below:

<Editable
  renderPlaceholder={({ attributes, children }) => (
    <div {...attributes} style={{ fontStyle: 'italic', color: 'gray' }}>
      {children}
    </div>
  )}
/>

However this appears not to work because attributes that comes in has styles already attached to it. If these styles are overridden as in the example above, you get some undesirable behavior and some errors. I got it to work by modifying the example slightly as such:

<Editable
  placeholder="Enter text here..."
  renderPlaceholder={({ attributes, children }) => {
    const styledAttributes = {
      ...attributes,
      style: {
        ...attributes.style,
        color: controlPlaceholderColor,
        opacity: 1,
      },
    };
    return <div {...styledAttributes}>{children}</div>;
  }}
</Editable>

The above example does two things:

1. It respects the existing styles and only extends; this means that as long as you don't override critical properties like the position etc it will still work fine
2. It actually adds a placeholder which is what will be rendered as children in the renderPlaceholder function

Alternatives
I can't really see any alternatives; the functionality works fine. If I am correct it's just the docs that need to be updated

Context
Documentation I'm referencing: https://docs.slatejs.org/libraries/slate-react/editable.