Add monaco editor and remove old one

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@icons-pack/react-simple-icons": "^9.4.1",
+    "@monaco-editor/react": "^4.6.0",
     "@uidotdev/usehooks": "^2.4.1",
     "client-only": "^0.0.1",
     "clsx": "^2.1.0",
@@ -21,7 +22,6 @@
     "react": "^18",
     "react-dom": "^18",
     "server-only": "^0.0.1",
-    "shiki": "^1.3.0",
     "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {

src/app/globals.css

@@ -1,39 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-html .shiki {
-  background-color: transparent !important;
-}
-
-html .shiki,
-html .shiki > * {
-  font-family: inherit;
-}
-
-html .shiki .line {
-  counter-increment: line-numbering;
-}
-
-html .shiki .line::before {
-  content: counter(line-numbering);
-  display: inline-block;
-  width: 2em;
-  margin-right: 1em;
-  color: var(--shiki-line-number-color);
-  text-align: right;
-  user-select: none;
-
-  @apply text-neutral-400;
-}
-
-@media (prefers-color-scheme: dark) {
-  html .shiki,
-  html .shiki span {
-    color: var(--shiki-dark) !important;
-    /* Optional, if you also want font styles */
-    font-style: var(--shiki-dark-font-style) !important;
-    font-weight: var(--shiki-dark-font-weight) !important;
-    text-decoration: var(--shiki-dark-text-decoration) !important;
-  }
-}

src/app/inner.tsx

@@ -4,13 +4,13 @@ import { Header } from "@/lib/ui/header";
 import { TabSelector } from "@/lib/ui/tabs/selector";
 import { TabController } from "@/lib/ui/tabs/controller";
 import { useBreakpoint } from "@/lib/ui/tailwindcss/client/hooks/breakpoint";
-import { Highlight } from "@/lib/ui/highlight";
 import { cn } from "@/lib/ui/utils/cn";
-import { TabContent } from "@/lib/ui/tabs/content";
 import { OutputTabContents } from "@/lib/ui/protocol/OutputTabContents";
 import { OutputTabSelectors } from "@/lib/ui/protocol/OutputTabSelectors";
 import { OutputTabController } from "@/lib/ui/protocol/OutputTabController";
 import { CompilerProvider } from "@/lib/hooks/compiler";
+import CodeEditor from "@/lib/ui/editor/codeEditor";
+import { TabContent } from "@/lib/ui/tabs/content";
 
 const defaultCode = `// Insert your code here
 
@@ -64,9 +64,7 @@ export function Inner({ initialCode }: { initialCode: string | null }) {
               </nav>
             </div>
             <TabContent name="input">
-              <div className="overflow-x-auto bg-neutral-100 outline-2 -outline-offset-2 outline-teal-500 focus-visible:outline dark:bg-neutral-900 dark:outline-teal-300">
-                <Highlight />
-              </div>
+              <CodeEditor initialCode={initialCode ?? defaultCode}/>
             </TabContent>
             {!lg.loading && !lg.active && <OutputTabContents />}
           </section>

src/lib/ui/editor/codeEditor.tsx

@@ -0,0 +1,24 @@
+import { useCompilerContext } from "@/lib/hooks/compiler"
+import { Editor } from "@monaco-editor/react"
+
+
+export type CodeEditorProps = {
+    initialCode: string
+}
+
+export default function CodeEditor({initialCode}: CodeEditorProps){
+    const compilerContext =  useCompilerContext()
+
+    return (
+        <>
+            <Editor 
+              language="java" 
+              defaultValue={initialCode}
+              theme={window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'vs-dark' : 'light'}
+              onChange={ (value) => {
+                if (value != undefined) compilerContext.setCode(value)
+              }}
+              />
+        </>
+    )
+}