aboutsummaryrefslogtreecommitdiff
path: root/src/components/monacoWin.html
blob: 57d3214104a5acea13aa72cc9c9c3f585a824248 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Vencord QuickCSS Editor</title>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/editor/editor.main.min.css"
            integrity="sha512-wB3xfL98hWg1bpkVYSyL0js/Jx9s7FsDg9aYO6nOMSJTgPuk/PFqxXQJKKSUjteZjeYrfgo9NFBOA1r9HwDuZw=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
        <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.37.1/min/vs/loader.min.js"
            integrity="sha512-A+6SvPGkIN9Rf0mUXmW4xh7rDvALXf/f0VtOUiHlDUSPknu2kcfz1KzLpOJyL2pO+nZS13hhIjLqVgiQExLJrw=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        ></script>

        <script>
            require.config({
                paths: {
                    vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs",
                },
            });

            require(["vs/editor/editor.main"], () => {
                getCurrentCss().then((css) => {
                    var editor = monaco.editor.create(
                        document.getElementById("container"),
                        {
                            value: css,
                            language: "css",
                            theme: getTheme(),
                        }
                    );
                    editor.onDidChangeModelContent(() =>
                        setCss(editor.getValue())
                    );
                    window.addEventListener("resize", () => {
                        // make monaco re-layout
                        editor.layout();
                    });
                });
            });
        </script>
    </body>
</html>