feat(editor): add code-mirror 6 as query editor

frontend/package.json

@@ -13,6 +13,8 @@
     "check": "biome check"
   },
   "dependencies": {
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/language": "^6.12.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-popover": "^1.1.15",
@@ -25,6 +27,7 @@
     "@tanstack/react-query-devtools": "^5.84.2",
     "@tanstack/react-router": "^1.130.2",
     "@tanstack/react-router-devtools": "^1.131.5",
+    "@uiw/react-codemirror": "^4.25.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.575.0",

frontend/src/components/editor/index.tsx

@@ -0,0 +1,12 @@
+import { useCallback, useState } from "react"
+import CodeMirror from '@uiw/react-codemirror'
+import { sql } from "@codemirror/lang-sql"
+
+export const CodeEditor = () => {
+  const [content, setContent] = useState<string>('')
+  const onChange = useCallback((v: string, _) => {
+    setContent(v)
+  }, [])
+
+  return <CodeMirror value={content} height="50px" extensions={[sql()]} onChange={onChange} />
+}

frontend/src/containers/events/event.container.tsx

@@ -1,12 +1,14 @@
-import type {ReactNode} from "react";
+import { CodeEditor } from "@/components/editor";
+import type { ReactNode } from "react";
 
-export const EventContainer = ({children}: { children: ReactNode }) => {
+export const EventContainer = ({ children }: { children: ReactNode }) => {
   return (
     <div>
       <div className="flex justify-between w-full items-center">
         <h1>Event Queue Overview</h1>
         {children}
       </div>
+      <CodeEditor />
     </div>
   )
 }