mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-05-05 14:47:12 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 52

Added monaco editor.

Browse source
This commit is contained in:
SamTV12345 2024-03-13 15:20:17 +01:00
parent 4485aa6bf8
commit 22ae8111a3
3 changed files with 28 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
admin/package.json
View file

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

21
admin/src/index.css
View file

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

11
admin/src/pages/SettingsPage.tsx
View file

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