From 54ac7b3cd5b3094c626e7c3cceb43f9d654cb832 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Fri, 4 Apr 2025 20:24:11 +0800
Subject: [PATCH] feat(editor): add Markdown editor component with Monaco
 editor integration

---
 src/components/markdown-editor.tsx | 42 ++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/markdown-editor.tsx

diff --git a/src/components/markdown-editor.tsx b/src/components/markdown-editor.tsx
new file mode 100644
index 0000000..d236994
--- /dev/null
+++ b/src/components/markdown-editor.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { useCallback } from "react";
+import { highlighter } from "@/lib/shiki";
+import type { editor } from "monaco-editor";
+import { Loading } from "@/components/loading";
+import { shikiToMonaco } from "@shikijs/monaco";
+import { useMonacoTheme } from "@/hooks/use-monaco-theme";
+import { Editor, type Monaco } from "@monaco-editor/react";
+import { DefaultEditorOptionConfig } from "@/config/editor-option";
+
+interface MarkdownEditorProps {
+  value?: string;
+  onChange?: (value: string | undefined, ev: editor.IModelContentChangedEvent) => void;
+  className?: string;
+}
+
+export default function MarkdownEditor({
+  value,
+  onChange,
+  className,
+}: MarkdownEditorProps) {
+  const { currentTheme } = useMonacoTheme();
+
+  const handleEditorWillMount = useCallback((monaco: Monaco) => {
+    shikiToMonaco(highlighter, monaco);
+  }, []);
+
+  return (
+    <Editor
+      language="markdown"
+      theme={currentTheme}
+      value={value}
+      beforeMount={handleEditorWillMount}
+      onChange={onChange}
+      options={DefaultEditorOptionConfig}
+      loading={<Loading />}
+      className={cn("h-full w-full", className)}
+    />
+  );
+}