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;