import React, { useState, useCallback, useEffect } from 'react';
import { EditorContent, useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { HighlightTextExtension } from './HighlightText';

interface MainEditorProps {
  content: any[];
}

export default function MainEditor({ content }: MainEditorProps) {
  const editor = useEditor({
    extensions: [
      StarterKit,
      HighlightTextExtension,
    ],
    content: { type: 'doc', content: content },
    editorProps: {
      attributes: {
        class: 'prose prose-invert max-w-none focus:outline-none'
      }
    },
    immediatelyRender: false,
    onCreate: ({ editor }) => {
      editor.setOptions({ editable: true })
    },
  });

  if (!editor) {
    return null
  }
  return (
    <EditorContent editor={editor} />
  );
}