mirrors/Equicord
1
1
Fork 0
mirror of https://github.com/Equicord/Equicord.git synced 2025-01-18 05:13:29 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

@KrystalSkullOfficial

Browse source
This commit is contained in:
thororen1234 2024-10-19 13:31:15 -04:00
parent 6fc7fc9f97
commit 79a44729a0
1 changed files with 98 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
browser/monacoWin.html
View file

@ -2,8 +2,11 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8">
<title>Equicord QuickCSS Editor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs/editor/editor.main.css"
integrity="sha256-tiJPQ2O04z/pZ/AwdyIghrOMzewf+PIvEl1YKbQvsZk=" crossorigin="anonymous"
referrerpolicy="no-referrer">
<style>
html,
body,
@ -17,22 +20,109 @@
padding: 0;
overflow: hidden;
}
header {
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: #1e1e1e;
color: #1e1e1e;
border-bottom: 1px solid #444;
width: 100%;
z-index: 10;
}
#container {
margin-top: 45px;
background-color: #1e1e1e;
border: 1px solid #1e1e1e;
}
.toolbar button:hover {
background: rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body>
<header>
<div>
<button id="selectAllButton"
style="background: #1e1e1e; color: #ffffff; border: 1px solid transparent; padding: 5px 10px; margin-right: 5px; border-radius: 4px; transition: background 0.3s, border 0.3s;">Select
All</button>
<button id="saveButton"
style="background: #1e1e1e; color: #ffffff; border: 1px solid transparent; padding: 5px 10px; margin-right: 5px; border-radius: 4px; transition: background 0.3s, border 0.3s;">Save</button>
<button id="copyButton"
style="background: #1e1e1e; color: #ffffff; border: 1px solid transparent; padding: 5px 10px; border-radius: 4px; transition: background 0.3s, border 0.3s;">Copy</button>
<button id="undoButton"
style="background: #1e1e1e; color: #ffffff; border: 1px solid transparent; padding: 5px 10px; border-radius: 4px; transition: background 0.3s, border 0.3s;">Undo</button>
<button id="redoButton"
style="background: #1e1e1e; color: #ffffff; border: 1px solid transparent; padding: 5px 10px; border-radius: 4px; transition: background 0.3s, border 0.3s;">Redo</button>
</div>
</header>
<div id="container"></div>
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs/loader.js"
integrity="sha256-KcU48TGr84r7unF7J5IgBo95aeVrEbrGe04S7TcFUjs=" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script>
const script = document.createElement("script");
script.src = new URL("/dist/monaco/index.js", baseUrl);
require.config({
paths: {
vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs"
}
});
const style = document.createElement("link");
style.type = "text/css";
style.rel = "stylesheet";
style.href = new URL("/dist/monaco/index.css", baseUrl);
require(["vs/editor/editor.main"], () => {
getCurrentCss().then((css) => {
const editor = monaco.editor.create(document.getElementById("container"), {
value: css,
language: "css",
theme: getTheme()
});
document.body.append(style, script);
editor.onDidChangeModelContent(() => setCss(editor.getValue()));
document.getElementById('selectAllButton').onclick = () => {
editor.setSelection(editor.getModel().getFullModelRange());
editor.focus();
};
document.getElementById('saveButton').onclick = () => {
const css = editor.getValue();
const blob = new Blob([css], { type: 'text/css' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'style.css';
document.body.append(link);
link.click();
link.remove();
URL.revokeObjectURL(url);
};
document.getElementById('copyButton').onclick = () => {
editor.focus();
const selection = editor.getSelection();
editor.setSelection(selection);
document.execCommand('copy');
};
document.getElementById('undoButton').onclick = () => {
editor.trigger('keyboard', 'undo');
};
document.getElementById('redoButton').onclick = () => {
editor.trigger('keyboard', 'redo');
};
window.addEventListener("resize", () => {
editor.layout();
});
});
});
</script>
</body>