import { useEffect } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';

import './Lexical.css';

const MyCustomAutoFocusPlugin = () => {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    editor.focus();
  }, [editor.getKey()]);

  return null;
}

const Lexical = () => {
  const initialConfig = {
    namespace: 'MyLexicalEditor',
    onError(error: any) {
      console.error(error);
    },
  };

  return (
    <div className="Lexical">
      <LexicalComposer initialConfig={initialConfig}>
        <RichTextPlugin
          contentEditable={<ContentEditable className='ContentEditable' />}
          placeholder={<p className="placeholder">Enter some text...</p>}
        />
        <HistoryPlugin />
        <MyCustomAutoFocusPlugin />
      </LexicalComposer>
    </div>
  );
}

export default Lexical;