refactor: Move code editor logic to CodeEditor component

src/components/code-editor.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import {
+  toSocket,
+  WebSocketMessageReader,
+  WebSocketMessageWriter,
+} from "vscode-ws-jsonrpc";
+import { useEffect } from "react";
+import dynamic from "next/dynamic";
+import normalizeUrl from "normalize-url";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const DynamicEditor = dynamic(
+  async () => {
+    await import("vscode")
+
+    const monaco = await import("monaco-editor");
+    const { loader, Editor } = await import("@monaco-editor/react");
+
+    loader.config({ monaco });
+
+    return Editor;
+  },
+  { ssr: false }
+);
+
+export default function CodeEditor() {
+  useEffect(() => {
+    const url = normalizeUrl("ws://localhost:4594/clangd");
+    const webSocket = new WebSocket(url);
+
+    webSocket.onopen = async () => {
+      const socket = toSocket(webSocket);
+      const reader = new WebSocketMessageReader(socket);
+      const writer = new WebSocketMessageWriter(socket);
+
+      const { MonacoLanguageClient } = await import("monaco-languageclient");
+      const { ErrorAction, CloseAction } = await import(
+        "vscode-languageclient"
+      );
+
+      const languageClient = new MonacoLanguageClient({
+        name: "C Language Client",
+        clientOptions: {
+          documentSelector: ["c"],
+          errorHandler: {
+            error: () => ({ action: ErrorAction.Continue }),
+            closed: () => ({ action: CloseAction.DoNotRestart }),
+          },
+        },
+        connectionProvider: {
+          get: () => Promise.resolve({ reader, writer }),
+        },
+      });
+
+      languageClient.start();
+      reader.onClose(() => languageClient.stop());
+    };
+
+    webSocket.onerror = (event) => {
+      console.error("WebSocket error observed:", event);
+    };
+
+    webSocket.onclose = (event) => {
+      console.log("WebSocket closed:", event);
+    };
+
+    return () => {
+      webSocket.close();
+    };
+  }, []);
+
+  return (
+    <div className="h-screen flex flex-col">
+      <DynamicEditor
+        theme="vs-dark"
+        defaultLanguage="c"
+        defaultValue="# include<stdio.h>"
+        path="file:///main.c"
+        onValidate={(markers) => {
+          markers.forEach((marker) =>
+            console.log("onValidate:", marker.message)
+          );
+        }}
+        options={{ automaticLayout: true }}
+        loading={<Skeleton className="h-full w-full p-4" />}
+      />
+    </div>
+  );
+}