'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Placeholder from '@tiptap/extension-placeholder';
import TaskList from '@tiptap/extension-task-list';
import TaskItem from '@tiptap/extension-task-item';
import Link from '@tiptap/extension-link';
import Image from '@tiptap/extension-image';
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
import { Table } from '@tiptap/extension-table';
import { TableRow } from '@tiptap/extension-table-row';
import { TableCell } from '@tiptap/extension-table-cell';
import { TableHeader } from '@tiptap/extension-table-header';
import { common, createLowlight } from 'lowlight';
import { useCallback, useRef, useEffect } from 'react';
import { cn } from '../../../lib/utils.js';
import { PageEditorToolbar } from './page-editor-toolbar.js';
const lowlight = createLowlight(common);
export function PageEditor({ content, onUpdate, editable = true, className }) {
    const debounceRef = useRef(null);
    const handleUpdate = useCallback((json) => {
        if (debounceRef.current)
            clearTimeout(debounceRef.current);
        debounceRef.current = setTimeout(() => {
            onUpdate(json);
        }, 500);
    }, [onUpdate]);
    const editor = useEditor({
        extensions: [
            StarterKit.configure({
                codeBlock: false,
            }),
            Placeholder.configure({
                placeholder: 'Start writing...',
            }),
            TaskList,
            TaskItem.configure({
                nested: true,
            }),
            Link.configure({
                openOnClick: false,
                autolink: true,
            }),
            Image,
            CodeBlockLowlight.configure({
                lowlight,
            }),
            Table.configure({
                resizable: true,
            }),
            TableRow,
            TableHeader,
            TableCell,
        ],
        content: content ? JSON.parse(content) : undefined,
        editable,
        onUpdate: ({ editor: e }) => {
            handleUpdate(JSON.stringify(e.getJSON()));
        },
        editorProps: {
            attributes: {
                class: 'prose prose-sm dark:prose-invert max-w-none focus:outline-none min-h-[200px] px-4 py-3',
            },
        },
    });
    useEffect(() => {
        return () => {
            if (debounceRef.current)
                clearTimeout(debounceRef.current);
        };
    }, []);
    if (!editor)
        return null;
    return (_jsxs("div", { "data-testid": "page-editor", className: cn('rounded-md border', className), children: [editable ? _jsx(PageEditorToolbar, { editor: editor }) : null, _jsx(EditorContent, { editor: editor })] }));
}
