refactor: editor-viewer using react-monaco-editor

src/components/setting/mods/config-viewer.tsx

@@ -22,15 +22,14 @@ export const ConfigViewer = forwardRef<DialogRef>((_, ref) => {
 
   return (
     <EditorViewer
+      open={open}
       title={
         <Box>
           {t("Runtime Config")}
           <Chip label={t("ReadOnly")} size="small" />
         </Box>
       }
-      mode="text"
-      property={runtimeConfig}
-      open={open}
+      initialData={Promise.resolve(runtimeConfig)}
       readOnly
       language="yaml"
       schema="clash"

src/components/setting/mods/sysproxy-viewer.tsx

@@ -262,21 +262,18 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
                 {t("Edit")} PAC
               </Button>
               <EditorViewer
-                title={`${t("Edit")} PAC`}
-                mode="text"
-                property={value.pac_content ?? ""}
                 open={editorOpen}
+                title={`${t("Edit")} PAC`}
+                initialData={Promise.resolve(value.pac_content ?? "")}
                 language="javascript"
-                onChange={(_prev, curr) => {
+                onSave={(_prev, curr) => {
                   let pac = DEFAULT_PAC;
                   if (curr && curr.trim().length > 0) {
                     pac = curr;
                   }
                   setValue((v) => ({ ...v, pac_content: pac }));
                 }}
-                onClose={() => {
-                  setEditorOpen(false);
-                }}
+                onClose={() => setEditorOpen(false)}
               />
             </ListItem>
           </>

src/components/setting/mods/theme-viewer.tsx

@@ -124,12 +124,11 @@ export const ThemeViewer = forwardRef<DialogRef>((props, ref) => {
             {t("Edit")} CSS
           </Button>
           <EditorViewer
-            title={`${t("Edit")} CSS`}
-            mode="text"
-            property={theme.css_injection ?? ""}
             open={editorOpen}
+            title={`${t("Edit")} CSS`}
+            initialData={Promise.resolve(theme.css_injection ?? "")}
             language="css"
-            onChange={(_prev, curr) => {
+            onSave={(_prev, curr) => {
               theme.css_injection = curr;
               handleChange("css_injection");
             }}