Markdown Editor

1"use client";
2
3import { Bold, Italic, Link, List, ListOrdered } from "lucide-react";
4import { marked } from "marked";
5import React from "react";
6import { Separator } from "@/components/ui/separator";
7import { Textarea } from "@/components/ui/textarea";
8import { Button } from "@/registry/new-york/components/button";
9import { isMac } from "@/registry/new-york/lib/utils";
10
11export interface MarkdownEditorProps {
12  initialValue?: string;
13  onChange?: (value: string) => void;
14}
15
16export function MarkdownEditor({
17  initialValue = "",
18  onChange,
19}: MarkdownEditorProps) {
20  const [markdown, setMarkdown] = React.useState(initialValue);
21  const [parsedHtml, setParsedHtml] = React.useState<string>("");
22  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
23
24  const handleMarkdownChange = React.useCallback(
25    (value: string) => {
26      setMarkdown(value);
27      onChange?.(value);
28    },
29    [onChange],
30  );
31
32  const parseMarkdown = React.useCallback(
33    async (text: string): Promise<string> => {
34      try {
35        const result = await marked(text, {
36          breaks: true,
37          gfm: true,
38        });
39        return result;
40      } catch (error) {
41        console.error("Error parsing markdown:", error);
42        return text;
43      }
44    },
45    [],
46  );
47
48  const insertMarkdown = React.useCallback(
49    (before: string, after = "", placeholder = "") => {
50      const textarea = textareaRef.current;
51      if (!textarea) return;
52
53      const start = textarea.selectionStart;
54      const end = textarea.selectionEnd;
55      const selectedText = textarea.value.substring(start, end);
56
57      // Check if the selected text is already wrapped with the markdown syntax
58      const beforeStart = start - before.length;
59      const afterEnd = end + after.length;
60      const textBefore = textarea.value.substring(beforeStart, start);
61      const textAfter = textarea.value.substring(end, afterEnd);
62
63      const isAlreadyFormatted = textBefore === before && textAfter === after;
64
65      if (isAlreadyFormatted && selectedText) {
66        // Remove the formatting
67        const newText =
68          textarea.value.substring(0, beforeStart) +
69          selectedText +
70          textarea.value.substring(afterEnd);
71
72        handleMarkdownChange(newText);
73
74        setTimeout(() => {
75          textarea.focus();
76          textarea.setSelectionRange(
77            beforeStart,
78// … truncated