12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- import React, { useMemo, useState } from 'react';
- import PropTypes from 'prop-types';
-
- // Import the Slate editor factory.
- import { createEditor, Node } from 'slate'
-
- // Import the Slate components and React plugin.
- import { Slate, Editable, withReact } from 'slate-react'
-
-
- import styles from './RichTextEditorForSlate.less';
-
- interface RichTextEditorForSlateProps {}
- interface RichTextEditorForSlateState {
- editorState: any;
- }
-
- const RichTextEditorForSlate = () => {
- const editor = useMemo(() => withReact(createEditor()), []);
- const [value, setValue] = useState([
- {
- type: 'paragraph',
- children: [{ text: 'A line of text in a paragraph.' }],
- },
- ] as Node[]);
- return (
- // Add the editable component inside the context.
- <Slate editor={editor} value={value} onChange={value => {
- console.log('value: ', value);
- setValue(value);
- }}>
- <Editable />
- </Slate>
- )
- }
-
- // class RichTextEditorForSlate extends React.Component<RichTextEditorForSlateProps, RichTextEditorForSlateState> {
- // constructor(props: RichTextEditorForSlateProps) {
- // super(props);
- // this.state = {
- // editorState: initialState,
- // };
- // }
-
- // render() {
- // }
- // }
-
- export default RichTextEditorForSlate;
|