add code editor

package.json

@@ -31,6 +31,7 @@
     "url": "^0.11.3"
   },
   "dependencies": {
+    "@codemirror/lang-less": "^6.0.2",
     "@million/lint": "latest",
     "@sentry/browser": "^7.100.1",
     "@sentry/cli": "^2.28.6",
@@ -43,6 +44,8 @@
     "@types/react-dom": "^18.2.19",
     "@types/sortablejs": "^1.15.7",
     "@types/webextension-polyfill": "^0.10.7",
+    "@uiw/codemirror-theme-github": "^4.21.25",
+    "@uiw/react-codemirror": "^4.21.25",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.17",
     "color": "^4.2.3",

src/interface/components/CodeEditor.tsx

@@ -0,0 +1,30 @@
+import CodeMirror, { ViewUpdate } from '@uiw/react-codemirror'
+import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
+import { less } from '@codemirror/lang-less'
+import { useCallback, useEffect, useState } from 'react';
+
+export default function CodeEditor({ callback, initialState }: { callback: (value: string) => void, initialState: string }) {
+  const [value, setValue] = useState(initialState)
+  const [darkMode, setDarkMode] = useState(true)
+
+  useEffect(() => {
+    if (document.body.classList.contains('dark')) {
+      setDarkMode(true)
+    }
+  }, [])
+
+  const onChange = useCallback((value: string, _: ViewUpdate) => {
+    setValue(value)
+    callback(value)
+  }, [])
+
+  return(
+    <CodeMirror basicSetup={{
+      allowMultipleSelections: true,
+      lineNumbers: false,
+      foldGutter: false,
+      dropCursor: true,
+      tabSize: 2
+    }} theme={ darkMode ? githubDark : githubLight } placeholder={"It's time to dream up some code!"} value={value} height="200px" extensions={[less()]} onChange={onChange} />
+  )
+}

src/interface/main.tsx

@@ -7,6 +7,7 @@ import browser from 'webextension-polyfill';
 import font from '../resources/fonts/IconFamily.woff'
 
 import * as Sentry from "@sentry/react";
+import ThemeCreator from './pages/ThemeCreator';
 
 browser.storage.local.get().then(({ telemetry, DarkMode }) => {
   if (DarkMode) document.body.classList.add('dark');
@@ -41,6 +42,7 @@ root.render(
         <Routes>
           <Route path="/settings" element={<SettingsPage standalone={true} />} />
           <Route path="/settings/embedded" element={<SettingsPage standalone={false} />} />
+          <Route path="/themeCreator" element={<ThemeCreator />} />
         </Routes>
       </HashRouter>
   </React.StrictMode>,

src/interface/pages/About.tsx

@@ -1,20 +0,0 @@
-const About: React.FC = () => {
-
-  return (
-    <div className="flex flex-col overflow-y-scroll divide-y divide-zinc-100/50 dark:divide-zinc-700/50">
-      <div>
-        <h2 className="text-lg font-bold">About</h2>
-        <p className="py-2">BetterSEQTA+ is a branch of BetterSEQTA which was originally developed by Nulkem. It was discontinued. So BetterSEQTA+ has come in to fill in that gap!</p>
-        <p className="py-2">We are currently working on fixing bugs and adding new features. If you want to request a feature or report a bug, you can do so on 
-          <a className="pl-1 text-blue-500 underline hover:text-blue-600" href="https://github.com/BetterSEQTA/BetterSEQTA-Plus" target="_blank">Github</a>.
-        </p>
-      </div>
-      <div>
-        <h2 className="pt-2 text-lg font-bold">Credits</h2>
-        <p className="py-2">Nulkem for the original extension, OG-RandomTechChannel, Crazypersonalph, and the current maintainer BetterSEQTA</p>
-      </div>
-    </div>
-  );
-};
-
-export default About;

src/interface/pages/ThemeCreator.tsx

@@ -0,0 +1,14 @@
+import CodeEditor from '../components/CodeEditor';
+
+export default function ThemeCreator() {
+  const handleSave = (value: string) => {
+    // Save the theme
+    console.log(value)
+  }
+
+  return (
+    <div className='w-full h-full'>
+      <CodeEditor initialState={'.hi {}'} callback={handleSave} />
+    </div>
+  );
+}