mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-02-21 23:53:50 +01:00
9c4097a26f
* 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
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
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
|