From 24b5d969131a9bf0c2d7eae5d9f87beea47a1c0f Mon Sep 17 00:00:00 2001 From: cfngc4594 Date: Wed, 19 Mar 2025 13:18:00 +0800 Subject: [PATCH] feat(core-editor): Add CoreEditor component with Monaco Editor integration --- src/components/core-editor.tsx | 64 ++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 src/components/core-editor.tsx diff --git a/src/components/core-editor.tsx b/src/components/core-editor.tsx new file mode 100644 index 0000000..56d3fc0 --- /dev/null +++ b/src/components/core-editor.tsx @@ -0,0 +1,64 @@ +"use client"; + +import { cn } from "@/lib/utils"; +import dynamic from "next/dynamic"; +import type { ReactNode } from "react"; +import type { editor } from "monaco-editor"; +import { Loading } from "@/components/loading"; +import type { BeforeMount, OnChange, OnMount } from "@monaco-editor/react"; + +// Dynamically import Monaco Editor with SSR disabled +const Editor = dynamic( + async () => { + await import("vscode"); + const monaco = await import("monaco-editor"); + const { loader } = await import("@monaco-editor/react"); + loader.config({ monaco }); + return (await import("@monaco-editor/react")).Editor; + }, + { + ssr: false, + loading: () => , + } +); + +interface CoreEditorProps { + language?: string; + theme?: string; + path?: string; + value?: string; + beforeMount?: BeforeMount; + onMount?: OnMount; + onChange?: OnChange; + options?: editor.IStandaloneEditorConstructionOptions; + loading?: ReactNode; + className?: string; +} + +export function CoreEditor({ + language, + theme, + path, + value, + beforeMount, + onMount, + onChange, + options, + loading, + className, +}: CoreEditorProps) { + return ( + + ); +}