{open && ( <>

setOpen(false)} />

{([1, 2, 3, 4, 5, 6] as HeadingLevel[]).map((l) => ( ))}

)}

); } function Toolbar({ editor, onImagePick, fullscreen, onToggleFullscreen, }: { editor: Editor; onImagePick: () => void; fullscreen: boolean; onToggleFullscreen: () => void; }) { function setLink() { const prev = editor.getAttributes('link').href as string | undefined; const url = window.prompt('URL:', prev ?? 'https://'); if (url === null) return; if (url === '') { editor.chain().focus().extendMarkRange('link').unsetLink().run(); return; } editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run(); } function insertVideo() { const url = window.prompt('URL YouTube / Vimeo:'); if (!url) return; editor.commands.setYoutubeVideo({ src: url }); } function insertPdf() { const url = window.prompt('URL File PDF:'); if (!url) return; editor.commands.setIframe({ src: url, title: 'PDF' }); } return (

{/* Heading dropdown */} {/* Teks */} editor.chain().focus().toggleBold().run()} active={editor.isActive('bold')}> editor.chain().focus().toggleItalic().run()} active={editor.isActive('italic')}> editor.chain().focus().toggleStrike().run()} active={editor.isActive('strike')}> editor.chain().focus().toggleCode().run()} active={editor.isActive('code')}>



            

            {/* List & blok */}
             editor.chain().focus().toggleBulletList().run()} active={editor.isActive('bulletList')}>
                
            
             editor.chain().focus().toggleOrderedList().run()}
                active={editor.isActive('orderedList')}
            >
                
            
             editor.chain().focus().toggleBlockquote().run()} active={editor.isActive('blockquote')}>
                
            
             editor.chain().focus().toggleCodeBlock().run()} active={editor.isActive('codeBlock')}>
                
            
             editor.chain().focus().setHorizontalRule().run()}>
                
            

            

            {/* Link */}
            
                
            

            

            {/* Media */}
            
                
            
            
                
            
                
            

            

            {/* History */}
             editor.chain().focus().undo().run()} disabled={!editor.can().undo()}>
                
            
             editor.chain().focus().redo().run()} disabled={!editor.can().redo()}>
                
            

            {/* Fullscreen — pushed to the right */}
            
            
                {fullscreen ?  : }


    );
}

export default function RichEditor({
    value,
    onChange,
    placeholder = 'Tulis konten di sini...',
    minHeight = 320,
}: {
    value: string;
    onChange: (html: string) => void;
    placeholder?: string;
    minHeight?: number;
}) {
    const imageInputRef = useRef(null);
    const [fullscreen, setFullscreen] = useState(false);

    const editor = useEditor({
        extensions: [
            StarterKit.configure({
                link: { openOnClick: false, HTMLAttributes: { class: 'underline text-primary' } },
            }),
            Placeholder.configure({ placeholder }),
            TiptapImage.configure({
                inline: false,
                HTMLAttributes: { class: 'rounded-lg max-w-full' },
            }),
            Youtube.configure({
                nocookie: true,
            }),
            IframeNode,
        ],
        content: value,
        editorProps: {
            attributes: {
                class: 'prose prose-sm dark:prose-invert max-w-none focus:outline-none px-4 py-3',
                style: `min-height: ${minHeight}px`,
            },
        },
        onUpdate({ editor }) {
            onChange(editor.getHTML());
        },
    });

    useEffect(() => {
        if (editor && value !== editor.getHTML()) {
            editor.commands.setContent(value);
        }
    }, [value, editor]);

    const handleImageFile = useCallback(
        async (file: File) => {
            if (!editor) return;

            const formData = new FormData();
            formData.append('image', file);

            const match = document.cookie.match(/XSRF-TOKEN=([^;]+)/);
            const csrf = match ? decodeURIComponent(match[1]) : '';

            try {
                const res = await fetch('/instructor/media/image', {
                    method: 'POST',
                    headers: { 'X-XSRF-TOKEN': csrf },
                    body: formData,
                });

                if (!res.ok) throw new Error();

                const { url } = (await res.json()) as { url: string };
                editor.chain().focus().setImage({ src: url }).run();
            } catch {
                alert('Gagal mengupload gambar. Coba lagi.');
            }
        },
        [editor],
    );

    const triggerImagePicker = useCallback(() => {
        imageInputRef.current?.click();
    }, []);

    if (!editor) return null;

    const wrapperCls = fullscreen
        ? 'fixed inset-0 z-50 flex flex-col overflow-hidden rounded-none border-0 bg-background shadow-2xl'
        : 'overflow-hidden rounded-lg border bg-background shadow-xs transition-[box-shadow,border-color] focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50';

    return (
        
             {
                    const file = e.target.files?.[0];
                    if (file) void handleImageFile(file);
                    e.target.value = '';
                }}
            />
             setFullscreen((v) => !v)} />
            
                
            
        
    );
}