Vencord Web: QuickCss Monaco Editor
This commit is contained in:
Vendicated
parent
e93111fb67
commit
4b1e96b76e
4 changed files with 105 additions and 6 deletions
|
|
@ -1,20 +1,28 @@
|
|||
import IpcEvents from "../src/utils/IpcEvents";
|
||||
import * as DataStore from "../src/api/DataStore";
|
||||
|
||||
// Discord deletes this so need to store in variable
|
||||
var { localStorage } = window;
|
||||
const { localStorage } = window;
|
||||
|
||||
// listeners for ipc.on
|
||||
const listeners = {} as Record<string, Set<Function>>;
|
||||
|
||||
const handlers = {
|
||||
[IpcEvents.GET_REPO]: () => "", // TODO
|
||||
[IpcEvents.GET_REPO]: () => "https://github.com/Vendicated/Vencord", // shrug
|
||||
[IpcEvents.GET_SETTINGS_DIR]: () => "LocalStorage",
|
||||
|
||||
[IpcEvents.GET_QUICK_CSS]: () => localStorage.getItem("VencordQuickCss"),
|
||||
[IpcEvents.GET_QUICK_CSS]: () => DataStore.get("VencordQuickCss").then(s => s ?? ""),
|
||||
[IpcEvents.SET_QUICK_CSS]: (css: string) => {
|
||||
DataStore.set("VencordQuickCss", css);
|
||||
listeners[IpcEvents.QUICK_CSS_UPDATE]?.forEach(l => l(null, css));
|
||||
},
|
||||
|
||||
[IpcEvents.GET_SETTINGS]: () => localStorage.getItem("VencordSettings") || "{}",
|
||||
[IpcEvents.SET_SETTINGS]: (s: string) => localStorage.setItem("VencordSettings", s),
|
||||
|
||||
[IpcEvents.GET_UPDATES]: () => ({ ok: true, value: [] }),
|
||||
|
||||
[IpcEvents.OPEN_EXTERNAL]: (url: string) => open(url, "_blank"),
|
||||
[IpcEvents.OPEN_QUICKCSS]: () => { } // TODO
|
||||
};
|
||||
|
||||
function onEvent(event: string, ...args: any[]) {
|
||||
|
|
@ -23,16 +31,17 @@ function onEvent(event: string, ...args: any[]) {
|
|||
return handler(...args);
|
||||
}
|
||||
|
||||
// probably should make this less cursed at some point
|
||||
window.VencordNative = {
|
||||
getVersions: () => ({}),
|
||||
ipc: {
|
||||
send: (event: string, ...args: any[]) => void onEvent(event, ...args),
|
||||
sendSync: onEvent,
|
||||
on(event: string, listener: () => {}) {
|
||||
// TODO quickCss
|
||||
(listeners[event] ??= new Set()).add(listener);
|
||||
},
|
||||
off(event: string, listener: () => {}) {
|
||||
// not used for now
|
||||
return listeners[event]?.delete(listener);
|
||||
},
|
||||
invoke: (event: string, ...args: any[]) => Promise.resolve(onEvent(event, ...args))
|
||||
},
|
||||
|
|
|
|||
80
src/components/Monaco.ts
Normal file
80
src/components/Monaco.ts
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
// this is not actually a Component but I'll put it here anyway trolley
|
||||
|
||||
import { IpcEvents } from "../utils";
|
||||
import { debounce } from "../utils/debounce";
|
||||
import { find } from "../webpack/webpack";
|
||||
|
||||
const setCss = debounce((css: string) => {
|
||||
VencordNative.ipc.invoke(IpcEvents.SET_QUICK_CSS, css);
|
||||
});
|
||||
|
||||
// FIXME: Discord Desktop support.
|
||||
// open() fails to create the popup and returns null. Probably have to
|
||||
// do some logic in main
|
||||
|
||||
// adapted from https://stackoverflow.com/a/63179814
|
||||
export async function launchMonacoEditor() {
|
||||
// TODO: Making the popup larger does not enlarge the editor and instead
|
||||
// just adds white space
|
||||
const win = open("about:blank", void 0, "popup,width=1000,height=1000")!;
|
||||
|
||||
win.getCurrentCss = () => VencordNative.ipc.invoke(IpcEvents.GET_QUICK_CSS);
|
||||
win.callback = (editor: any) => {
|
||||
editor.onDidChangeModelContent(() =>
|
||||
setCss(editor.getValue())
|
||||
);
|
||||
};
|
||||
|
||||
let { theme } = find(m => m.ProtoClass?.typeName.endsWith("PreloadedUserSettings"))
|
||||
.getCurrentValue().appearance;
|
||||
theme = theme === 1 ? "vs-dark" : "vs-light";
|
||||
|
||||
// problem?
|
||||
win.document.write(`
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>QuickCss Editor</title>
|
||||
<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/editor/editor.main.min.css">
|
||||
<style>
|
||||
html, body, #container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/loader.min.js"></script>
|
||||
|
||||
<script>
|
||||
var editor;
|
||||
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs' }});
|
||||
require(["vs/editor/editor.main"], () => {
|
||||
getCurrentCss().then(css => {
|
||||
callback(editor = monaco.editor.create(document.getElementById('container'), {
|
||||
value: css,
|
||||
language: 'css',
|
||||
theme: '${theme}',
|
||||
}));
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
// make monaco re-layout
|
||||
editor.layout();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
`);
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ import { useAwaiter } from "../utils/misc";
|
|||
import { Alerts, Button, Forms, Margins, Parser, React, Switch } from "../webpack/common";
|
||||
import ErrorBoundary from "./ErrorBoundary";
|
||||
import { Flex } from "./Flex";
|
||||
import { launchMonacoEditor } from "./Monaco";
|
||||
|
||||
export default ErrorBoundary.wrap(function Settings() {
|
||||
const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading...");
|
||||
|
|
@ -66,6 +67,14 @@ export default ErrorBoundary.wrap(function Settings() {
|
|||
</Button>
|
||||
</Flex>}
|
||||
|
||||
{IS_WEB && <Button
|
||||
onClick={launchMonacoEditor}
|
||||
size={Button.Sizes.SMALL}
|
||||
disabled={settingsDir === "Loading..."}
|
||||
>
|
||||
Open QuickCSS File
|
||||
</Button>}
|
||||
|
||||
<Forms.FormDivider />
|
||||
<Switch
|
||||
value={settings.useQuickCss}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ function strEnum<T extends Record<string, string>>(obj: T): T {
|
|||
export default strEnum({
|
||||
QUICK_CSS_UPDATE: "VencordQuickCssUpdate",
|
||||
GET_QUICK_CSS: "VencordGetQuickCss",
|
||||
SET_QUICK_CSS: "VencordSetQuickCss",
|
||||
GET_SETTINGS_DIR: "VencordGetSettingsDir",
|
||||
GET_SETTINGS: "VencordGetSettings",
|
||||
SET_SETTINGS: "VencordSetSettings",
|
||||
|
|
|
|||
Loading…
Reference in a new issue