import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from "react";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import TextStyle from "@tiptap/extension-text-style";
import Underline from "@tiptap/extension-underline";
import FontSize from "tiptap-extension-font-size";
import ToolbarItem from "./ToolbarItem";
import styles from "./NoteEditor.module.scss";
const NoteEditor = ({ value = "", handleChange = () => false, contributors, isDisabled = false, isLoading = false, notesLoading = false, }) => {
    const editor = useEditor({
        extensions: [
            StarterKit.configure({
                heading: {
                    levels: [1, 2, 3, 4, 5, 6],
                },
                bulletList: {
                    keepMarks: true,
                    keepAttributes: false,
                },
                orderedList: {
                    keepMarks: true,
                    keepAttributes: false,
                },
            }),
            TextStyle,
            Underline,
            FontSize.configure({
                types: ['textStyle'],
            }),
        ],
        content: value,
        editable: !isDisabled,
        onUpdate: ({ editor }) => {
            if (!notesLoading) {
                const text = editor.getText();
                handleChange(text);
            }
        },
        editorProps: {
            attributes: {
                class: styles.proseMirror,
            },
        },
    });
    useEffect(() => {
        if (editor && value !== editor.getText()) {
            editor.commands.setContent(value);
        }
    }, [value, editor]);
    return (_jsxs("div", { className: styles.noteEditorContainer, children: [_jsx(ToolbarItem, { editor: editor, contributors: contributors, isLoading: isLoading }), _jsx("div", { className: styles.editorContent, children: _jsx(EditorContent, { editor: editor }) })] }));
};
export default NoteEditor;
