Issue 5782 (#5783)

* updated docs for editable file such that renderProps will have the desired effect if the instructions are followed

* Update docs/libraries/slate-react/editable.md

* Update docs/libraries/slate-react/editable.md

* Update editable.md

fix incorrect code format label

* Update docs/libraries/slate-react/editable.md

---------

Co-authored-by: Dylan Schiemann <dylan@dojotoolkit.org>

Author: ianleeduckworth

docs/libraries/slate-react/editable.md

@@ -136,7 +136,7 @@ export interface RenderLeafProps {
 
 Example usage:
 
-```typescript
+```jsx
 <Editor
   renderLeaf={({ attributes, children, leaf }) => {
     return (
@@ -206,14 +206,22 @@ An example usage might look like:
 
 ```jsx
 <Editable
-  renderPlaceholder={({ attributes, children }) => (
-    <div {...attributes} style={{ fontStyle: 'italic', color: 'gray' }}>
-      {children}
-    </div>
-  )}
+  placeholder="Enter text here..."
+  renderPlaceholder={({ attributes, children }) => {
+    const styledAttributes = {
+      ...attributes,
+      style: {
+        ...attributes.style,
+        color: 'gray',
+      },
+    }
+    return <div {...styledAttributes}>{children}</div>
+  }}
 />
 ```
 
+Note that the `attributes` prop that comes in will contain a `style` object already. This object contains important styling properties which will make the placeholder behave like a placeholder. As such, it is advisable to extend styles and to focus on things like changing colors, opacity etc. Changing positioning, for example, could cause undesirable behavior.
+
 #### `scrollSelectionIntoView?: (editor: ReactEditor, domRange: DOMRange) => void`
 
 Slate has its own default method to scroll a DOM selection into view that works for most cases; however, if the default behavior isn't working for you, possible due to some complex styling, you may need to override the default behavior by providing a different function here.