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 './Lexical.css';

function 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 />
      </LexicalComposer>
    </div>
  );
}

export default Lexical;