Added monaco editor.

admin/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-toast": "^1.1.5",
     "i18next": "^23.10.1",
@@ -19,7 +20,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.0",
-    "react-monaco-editor": "^0.55.0",
     "react-router-dom": "^6.22.3",
     "zustand": "^4.5.2"
   },

admin/src/index.css

@@ -49,6 +49,14 @@ div.menu {
     cursor: pointer;
 }
 
+.icon-button svg {
+    align-self: center;
+}
+
+.icon-button span {
+    align-self: center;
+}
+
 
 div.menu span:first-child {
     display: flex;
@@ -188,6 +196,10 @@ table {
     margin: 20px 0;
 }
 
+
+
+
+
 #available-plugins  th:first-child, #available-plugins  th:nth-child(2){
     text-align: center;
 }
@@ -581,7 +593,6 @@ pre {
 }
 
 table {
-    border-collapse: collapse;
     margin: 25px 0;
     font-size: 0.9em;
     font-family: sans-serif;
@@ -589,6 +600,14 @@ table {
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
 }
 
+th:first-child {
+    border-top-left-radius: 10px;
+}
+
+th:last-child {
+    border-top-right-radius: 10px;
+}
+
 table thead tr {
     font-size: 25px;
     background-color: var(--etherpad-color);

admin/src/pages/SettingsPage.tsx

@@ -3,23 +3,26 @@ import {isJSONClean} from "../utils/utils.ts";
 import {Trans} from "react-i18next";
 import {IconButton} from "../components/IconButton.tsx";
 import {RotateCw, Save} from "lucide-react";
-import Editor from 'react-monaco-editor';
+import Editor from '@monaco-editor/react';
 
 export const SettingsPage = ()=>{
     const settingsSocket = useStore(state=>state.settingsSocket)
-
     const settings = useStore(state=>state.settings)
 
     return <div>
         <h1><Trans i18nKey="admin_settings.current"/></h1>
         <Editor language="json" theme="vs-dark" options={{
+            comments: {
+                ignoreEmptyLines: true,
+                insertSpace: true
+            },
             codeLens:false,
             inDiffEditor: false
         }} value={settings} onChange={(v)=>{
-            useStore.getState().setSettings(v)
+            useStore.getState().setSettings(v!)
         }}   className="settings"/>
         <div className="settings-button-bar">
-            <IconButton icon={<Save/>} title={<Trans i18nKey="admin_settings.current_save.value"/>} onClick={() => {
+            <IconButton className="settingsButton" icon={<Save/>} title={<Trans i18nKey="admin_settings.current_save.value"/>} onClick={() => {
                 if (isJSONClean(settings!)) {
                     // JSON is clean so emit it to the server
                     settingsSocket!.emit('saveSettings', settings!);