refactor: move

frontend/src/components/workspace/code-editor.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import CodeMirror from "@uiw/react-codemirror";
+import { languages } from "@codemirror/language-data";
+import { basicLightInit } from "@uiw/codemirror-theme-basic";
+import { monokaiInit } from "@uiw/codemirror-theme-monokai";
+import { javascript, javascriptLanguage } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { html } from "@codemirror/lang-html";
+import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
+import { python } from "@codemirror/lang-python";
+import { css } from "@codemirror/lang-css";
+import { useTheme } from "next-themes";
+
+import { cn } from "@/lib/utils";
+import { useMemo } from "react";
+const customDarkTheme = monokaiInit({
+  settings: {
+    background: "transparent",
+    gutterBackground: "transparent",
+    gutterForeground: "#555",
+    gutterActiveForeground: "#fff",
+    fontSize: "var(--text-sm)",
+  },
+});
+
+const customLightTheme = basicLightInit({
+  settings: {
+    background: "transparent",
+    fontSize: "var(--text-sm)",
+  },
+});
+
+export function CodeEditor({
+  className,
+  placeholder,
+  value,
+  readonly,
+  disabled,
+  autoFocus,
+  settings,
+}: {
+  className?: string;
+  placeholder?: string;
+  value: string;
+  readonly?: boolean;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  settings?: any;
+}) {
+  const { resolvedTheme } = useTheme();
+
+  const extensions = useMemo(() => {
+    return [
+      css(),
+      html(),
+      javascript({}),
+      json(),
+      markdown({
+        base: markdownLanguage,
+        codeLanguages: languages,
+      }),
+      python(),
+    ];
+  }, []);
+
+  return (
+    <div
+      className={cn(
+        "flex cursor-text flex-col overflow-hidden rounded-md",
+        className,
+      )}
+    >
+      <CodeMirror
+        readOnly={readonly ?? disabled}
+        placeholder={placeholder}
+        className={cn(
+          "h-full overflow-auto font-mono [&_.cm-editor]:h-full [&_.cm-focused]:outline-none!",
+          "px-2 py-0! [&_.cm-line]:px-2! [&_.cm-line]:py-0!",
+        )}
+        theme={resolvedTheme === "dark" ? customDarkTheme : customLightTheme}
+        extensions={extensions}
+        basicSetup={{
+          foldGutter: settings?.foldGutter ?? false,
+          highlightActiveLine: false,
+          highlightActiveLineGutter: false,
+          lineNumbers: settings?.lineNumbers ?? false,
+        }}
+        autoFocus={autoFocus}
+        value={value}
+      />
+    </div>
+  );
+}