slate

import React, { useMemo, useState } from 'react'; import { createEditor, Descendant } from 'slate'; import { Slate, Editable, withReact, ReactEditor } from 'slate-react'; import { withHistory } from 'slate-history'; // Define our custom editor and element types for TypeScript to enable type safety type CustomEditor = ReactEditor; type ParagraphElement = { type: 'paragraph'; children: CustomText[] }; type CustomText = { text: string; bold?: boolean; italic?: boolean }; declare module 'slate' { interface CustomTypes { Editor: CustomEditor; Element: ParagraphElement; Text: CustomText; } } const initialValue: Descendant[] = [ { type: 'paragraph', children: [{ text: 'Hello, Slate!' }], }, { type: 'paragraph', children: [{ text: 'This is some ' }, { text: 'bold', bold: true }, { text: ' text.' }], }, ]; const MySimpleEditor = () => { // Create a Slate editor object that won't change across renders. // It's enhanced with React capabilities and history (undo/redo). const editor = useMemo(() => withHistory(withReact(createEditor())), []); const [value, setValue] = useState<Descendant[]>(initialValue); return ( <Slate editor={editor} value={value} onChange={setValue}> <Editable placeholder="Start typing..." // Define a rendering function for elements renderElement={props => <p {...props.attributes}>{props.children}</p>} // Define a rendering function for leaf nodes (text with formatting) renderLeaf={props => { let children = props.children; if (props.leaf.bold) children = <strong>{children}</strong>; if (props.leaf.italic) children = <em>{children}</em>; return <span {...props.attributes}>{children}</span>; }} style={{ border: '1px solid #ccc', padding: '10px', minHeight: '100px' }} /> </Slate> ); }; export default MySimpleEditor;