Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-10-31 07:34:05 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(code-editor): update theme handling and optimize highlighter integration

Browse Source
This commit is contained in:
cfngc4594 2025-02-20 00:30:45 +08:00
parent 2f2b172fb8
commit 423951ec58
1 changed files with 15 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/code-editor.tsx
View File

@ -1,20 +1,17 @@
"use client"; "use client";
import {
toSocket,
WebSocketMessageReader,
WebSocketMessageWriter,
} from "vscode-ws-jsonrpc";
import { useEffect } from "react"; import { useEffect } from "react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { useTheme } from "next-themes";
import normalizeUrl from "normalize-url"; import normalizeUrl from "normalize-url";
import { createHighlighter } from 'shiki'; import { highlighter } from "@/lib/shiki";
import { shikiToMonaco } from '@shikijs/monaco'; import { shikiToMonaco } from "@shikijs/monaco";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from "vscode-ws-jsonrpc";
const DynamicEditor = dynamic( const DynamicEditor = dynamic(
async () => { async () => {
await import("vscode") await import("vscode");
const monaco = await import("monaco-editor"); const monaco = await import("monaco-editor");
const { loader, Editor } = await import("@monaco-editor/react"); const { loader, Editor } = await import("@monaco-editor/react");
@ -27,6 +24,8 @@ const DynamicEditor = dynamic(
); );
export default function CodeEditor() { export default function CodeEditor() {
const { resolvedTheme } = useTheme();
useEffect(() => { useEffect(() => {
const url = normalizeUrl("ws://localhost:4594/clangd"); const url = normalizeUrl("ws://localhost:4594/clangd");
const webSocket = new WebSocket(url); const webSocket = new WebSocket(url);
@ -37,9 +36,7 @@ export default function CodeEditor() {
const writer = new WebSocketMessageWriter(socket); const writer = new WebSocketMessageWriter(socket);
const { MonacoLanguageClient } = await import("monaco-languageclient"); const { MonacoLanguageClient } = await import("monaco-languageclient");
const { ErrorAction, CloseAction } = await import( const { ErrorAction, CloseAction } = await import("vscode-languageclient");
"vscode-languageclient"
);
const languageClient = new MonacoLanguageClient({ const languageClient = new MonacoLanguageClient({
name: "C Language Client", name: "C Language Client",
@ -75,16 +72,16 @@ export default function CodeEditor() {
return ( return (
<div className="h-screen flex flex-col"> <div className="h-screen flex flex-col">
<DynamicEditor <DynamicEditor
theme="vs-dark" theme={
resolvedTheme === "light"
? "github-light-default"
: "github-dark-default"
}
defaultLanguage="c" defaultLanguage="c"
defaultValue="# include<stdio.h>" defaultValue="# include<stdio.h>"
path="file:///main.c" path="file:///main.c"
beforeMount={async (monaco) => { beforeMount={(monaco) => {
const highlighter = await createHighlighter({ shikiToMonaco(highlighter, monaco);
themes: ["github-light-default", "github-dark-default"],
langs: ["c"]
})
shikiToMonaco(highlighter, monaco)
}} }}
onValidate={(markers) => { onValidate={(markers) => {
markers.forEach((marker) => markers.forEach((marker) =>