Editor Markdown

1'use client';
2 
3import React, { useEffect, useRef } from 'react';
4import { Crepe } from '@milkdown/crepe';
5import '@milkdown/crepe/theme/common/style.css';
6import { cn } from '@/lib/utils/deso';
7 
8export interface EditorMarkdownProps {
9  value?: string;
10  onChange?: (value: string) => void;
11  placeholder?: string;
12  className?: string;
13  disabled?: boolean;
14}
15 
16export function EditorMarkdown({
17  value = '',
18  onChange,
19  placeholder = 'Start writing...',
20  className,
21  disabled = false,
22}: EditorMarkdownProps) {
23  const editorRef = useRef<HTMLDivElement>(null);
24  const crepeRef = useRef<Crepe | null>(null);
25 
26  useEffect(() => {
27    if (!editorRef.current) return;
28 
29    // Initialize Crepe editor
30    const crepe = new Crepe({
31      root: editorRef.current,
32      defaultValue: value,
33    });
34 
35    crepeRef.current = crepe;
36    crepe.create();
37 
38    return () => {
39      if (crepeRef.current) {
40        crepeRef.current.destroy();
41        crepeRef.current = null;
42      }
43    };
44  }, []);
45 
46  return (
47    <div
48      ref={editorRef}
49      className={cn(
50        'prose prose-sm max-w-none focus:outline-none border-border rounded-md !p-0',
51        disabled && 'opacity-50 cursor-not-allowed',
52        className
53      )}
54    />
55  );
56}