56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import { Card, Heading } from '@chakra-ui/react';
|
|
import { useState } from 'react';
|
|
import { BaseEditor, createEditor, Descendant } from 'slate';
|
|
import { Editable, ReactEditor, Slate, withReact } from 'slate-react';
|
|
|
|
type CustomElement = { type: 'paragraph'; children: CustomText[] };
|
|
type CustomText = { text: string };
|
|
|
|
declare module 'slate' {
|
|
interface CustomTypes {
|
|
Editor: BaseEditor & ReactEditor;
|
|
Element: CustomElement;
|
|
Text: CustomText;
|
|
}
|
|
}
|
|
|
|
export function EditorSlate() {
|
|
const initialValue: Descendant[] = [
|
|
{
|
|
type: 'paragraph',
|
|
children: [{ text: 'A line of text in a paragraph.' }]
|
|
}
|
|
];
|
|
|
|
const [editor] = useState(() => withReact(createEditor()));
|
|
return (
|
|
// Add the editable component inside the context.
|
|
<>
|
|
<Card.Root
|
|
variant={'subtle'}
|
|
width="100%"
|
|
maxWidth="840px"
|
|
minHeight="sm"
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
>
|
|
<Card.Header>
|
|
<Heading textAlign="center">Editor</Heading>
|
|
</Card.Header>
|
|
<Card.Body
|
|
width="90%"
|
|
css={{
|
|
'& *': {
|
|
fontSize: 'revert',
|
|
fontWeight: 'revert'
|
|
}
|
|
}}
|
|
>
|
|
<Slate editor={editor} initialValue={initialValue}>
|
|
<Editable />
|
|
</Slate>
|
|
</Card.Body>
|
|
</Card.Root>
|
|
</>
|
|
);
|
|
}
|