146 lines
4.6 KiB
TypeScript
146 lines
4.6 KiB
TypeScript
import React, { useRef } from "react";
|
|
import { useSnapshot, ref } from "valtio";
|
|
import Editor, { loader } from "@monaco-editor/react";
|
|
import type monaco from "monaco-editor";
|
|
import { ArrowBendLeftUp } from "phosphor-react";
|
|
import { useTheme } from "next-themes";
|
|
import { useRouter } from "next/router";
|
|
|
|
import Box from "./Box";
|
|
import Container from "./Container";
|
|
import dark from "../theme/editor/amy.json";
|
|
import light from "../theme/editor/xcode_default.json";
|
|
import { saveFile, state } from "../state";
|
|
|
|
import EditorNavigation from "./EditorNavigation";
|
|
import Text from "./Text";
|
|
import { MonacoServices } from "@codingame/monaco-languageclient";
|
|
import { createLanguageClient, createWebSocket } from "../utils/languageClient";
|
|
import { listen } from "@codingame/monaco-jsonrpc";
|
|
|
|
loader.config({
|
|
paths: {
|
|
vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
|
|
},
|
|
});
|
|
|
|
const HooksEditor = () => {
|
|
const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
|
|
const snap = useSnapshot(state);
|
|
const router = useRouter();
|
|
const { theme } = useTheme();
|
|
return (
|
|
<Box
|
|
css={{
|
|
flex: 1,
|
|
flexShrink: 1,
|
|
display: "flex",
|
|
position: "relative",
|
|
flexDirection: "column",
|
|
backgroundColor: "$mauve3",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<EditorNavigation />
|
|
{snap.files.length > 0 && router.isReady ? (
|
|
<Editor
|
|
className="hooks-editor"
|
|
keepCurrentModel
|
|
defaultLanguage={snap.files?.[snap.active]?.language}
|
|
language={snap.files?.[snap.active]?.language}
|
|
path={snap.files?.[snap.active]?.name}
|
|
defaultValue={snap.files?.[snap.active]?.content}
|
|
beforeMount={(monaco) => {
|
|
// @ts-expect-error
|
|
window.monaco = monaco;
|
|
monaco.languages.register({
|
|
id: "c",
|
|
extensions: [".c", ".h"],
|
|
aliases: ["C", "c", "H", "h"],
|
|
mimetypes: ["text/plain"],
|
|
});
|
|
MonacoServices.install(monaco);
|
|
// create the web socket
|
|
const webSocket = createWebSocket(
|
|
process.env.NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT || ""
|
|
);
|
|
// listen when the web socket is opened
|
|
listen({
|
|
webSocket,
|
|
onConnection: (connection) => {
|
|
// create and start the language client
|
|
const languageClient = createLanguageClient(connection);
|
|
const disposable = languageClient.start();
|
|
connection.onClose(() => disposable.dispose());
|
|
connection.onError((error) => console.log(error));
|
|
},
|
|
});
|
|
// // hook editor to global state
|
|
// editor.updateOptions({
|
|
// minimap: {
|
|
// enabled: false,
|
|
// },
|
|
// ...snap.editorSettings,
|
|
// });
|
|
if (!state.editorCtx) {
|
|
state.editorCtx = ref(monaco.editor);
|
|
// @ts-expect-error
|
|
monaco.editor.defineTheme("dark", dark);
|
|
// @ts-expect-error
|
|
monaco.editor.defineTheme("light", light);
|
|
}
|
|
}}
|
|
onMount={(editor, monaco) => {
|
|
editorRef.current = editor;
|
|
editor.updateOptions({
|
|
glyphMargin: true,
|
|
lightbulb: {
|
|
enabled: true,
|
|
},
|
|
});
|
|
editor.addCommand(
|
|
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
|
|
() => {
|
|
saveFile(editor.getValue());
|
|
}
|
|
);
|
|
}}
|
|
theme={theme === "dark" ? "dark" : "light"}
|
|
/>
|
|
) : (
|
|
<Container>
|
|
{!snap.loading && router.isReady && (
|
|
<Box
|
|
css={{
|
|
flexDirection: "row",
|
|
width: "$spaces$wide",
|
|
gap: "$3",
|
|
display: "inline-flex",
|
|
}}
|
|
>
|
|
<Box css={{ display: "inline-flex", pl: "35px" }}>
|
|
<ArrowBendLeftUp size={30} />
|
|
</Box>
|
|
<Box
|
|
css={{ pl: "0px", pt: "15px", flex: 1, display: "inline-flex" }}
|
|
>
|
|
<Text
|
|
css={{
|
|
fontSize: "14px",
|
|
maxWidth: "220px",
|
|
fontFamily: "$monospace",
|
|
}}
|
|
>
|
|
Click the link above to create a your file
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</Container>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default HooksEditor;
|