Switch to monaco editor

frigate/http.py

@@ -622,6 +622,7 @@ def config_raw():
     with open(config_file, "r") as f:
         raw_config = f.read()
         f.close()
+
         return raw_config, 200
 
 

web/package.json

@@ -22,7 +22,7 @@
     "preact-router": "^4.1.0",
     "react": "npm:@preact/compat@^17.1.2",
     "react-dom": "npm:@preact/compat@^17.1.2",
-    "@uiw/react-textarea-code-editor": "^2.0.6",
+    "vite-plugin-monaco-editor": "^1.1.0",
     "swr": "^1.3.0",
     "video.js": "^7.20.3",
     "videojs-playlist": "^5.0.0",

web/src/routes/Config.jsx

@@ -1,11 +1,11 @@
 import { h } from 'preact';
 import useSWR from 'swr';
-import CodeEditor from '@uiw/react-textarea-code-editor';
+import axios from 'axios';
 import ActivityIndicator from '../components/ActivityIndicator';
 import Heading from '../components/Heading';
-import { useState } from 'preact/hooks';
+import { useEffect, useState } from 'preact/hooks';
 import Button from '../components/Button';
-import axios from 'axios';
+import * as monaco from 'monaco-editor';
 
 export default function Config() {
   const { data: config } = useSWR('config/raw');
@@ -40,12 +40,23 @@ export default function Config() {
     await window.navigator.clipboard.writeText(newCode);
   };
 
+  useEffect(() => {
+    if (!config) {
+      return;
+    }
+
+    monaco.editor.create(document.getElementById('container'), {
+      language: 'yaml',
+      value: config,
+    });
+  });
+
   if (!config) {
     return <ActivityIndicator />;
   }
 
   return (
-    <div className="space-y-4 p-2 px-4">
+    <div className="space-y-4 p-2 px-4 h-full">
       <div className="flex justify-between">
         <Heading>Config</Heading>
         <div>
@@ -63,7 +74,7 @@ export default function Config() {
       {success && <div className="max-h-20 text-red-500">{success}</div>}
       {error && <div className="p-4 overflow-scroll text-red-500 whitespace-pre-wrap">{error}</div>}
 
-      <CodeEditor value={config} language="yaml" onChange={(e) => setNewCode(e.target.value)} />
+      <div id="container" className="h-full" />
     </div>
   );
 }

web/vite.config.ts

@@ -2,13 +2,14 @@
 import path from "path";
 import { defineConfig } from 'vite'
 import preact from '@preact/preset-vite'
+import monacoEditorPlugin from 'vite-plugin-monaco-editor';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   define: {
     'import.meta.vitest': 'undefined',
   },
-  plugins: [preact()],
+  plugins: [preact(), monacoEditorPlugin.default({})],
   test: {
     environment: 'jsdom',
     alias: {