Simplify implementation of custom editor styling (#5278)

* Switch back to using inline styles for default editor styles

* Add example page and test for editor styling

* Add section in docs for editor styling

* Add test for editor height being set to placeholder height

* Add changeset

site/examples/styling.tsx

@@ -0,0 +1,47 @@
+import React, { useMemo } from 'react'
+import { createEditor } from 'slate'
+import { Slate, Editable, withReact } from 'slate-react'
+import { withHistory } from 'slate-history'
+
+const StylingExample = () => {
+  const editor1 = useMemo(() => withHistory(withReact(createEditor())), [])
+  const editor2 = useMemo(() => withHistory(withReact(createEditor())), [])
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
+      <Slate
+        editor={editor1}
+        value={[
+          {
+            type: 'paragraph',
+            children: [{ text: 'This editor is styled using the style prop.' }],
+          },
+        ]}
+      >
+        <Editable
+          style={{
+            backgroundColor: 'rgb(255, 230, 156)',
+            minHeight: '200px',
+            outline: 'rgb(0, 128, 0) solid 2px',
+          }}
+        />
+      </Slate>
+
+      <Slate
+        editor={editor2}
+        value={[
+          {
+            type: 'paragraph',
+            children: [
+              { text: 'This editor is styled using the className prop.' },
+            ],
+          },
+        ]}
+      >
+        <Editable className="fancy" disableDefaultStyles />
+      </Slate>
+    </div>
+  )
+}
+
+export default StylingExample