resources/editors/codemirror.html [144:203]:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
            let editorContainer = document.querySelector("#editor");
            let editorInstance = null;

            let buttons = {
                create: document.querySelector("#create"),
                highlight: document.querySelector("#highlight"),
                unhighlight: document.querySelector("#unhighlight"),
                long: document.querySelector("#long"),
                short: document.querySelector("#short"),
                scroll: document.querySelector("#scroll"),
                layout: document.querySelector("#layout"),
            };
            buttons.scroll.addEventListener("click", scroll);
            buttons.highlight.addEventListener("click", highlight);
            buttons.unhighlight.addEventListener("click", unhighlight);
            buttons.long.addEventListener("click", long);
            buttons.short.addEventListener("click", short);
            buttons.layout.addEventListener("click", layout);

            buttons.create.addEventListener("click", (e) => {
                if (!editorInstance) {
                    editorInstance = editor(editorContainer);
                    editorInstance.ready.then(() => {
                        buttons.unhighlight.classList.add("active", "true");
                        buttons.create.setAttribute("disabled", "true");
                    });
                }
            });

            function layout() {
                // Todo - is this necessary with the runner?
                const body = document.body.getBoundingClientRect();
                layout.e = document.elementFromPoint((body.width / 2) | 0, (body.height / 2) | 0);
            }

            function highlight() {
                buttons.unhighlight.classList.toggle("active", false);
                buttons.highlight.classList.toggle("active", true);
                editorInstance.format(true);
            }
            function unhighlight() {
                buttons.unhighlight.classList.toggle("active", true);
                buttons.highlight.classList.toggle("active", false);
                editorInstance.format(false);
            }
            function long() {
                buttons.short.classList.toggle("active", false);
                buttons.long.classList.toggle("active", true);
                editorInstance.setValue(longtext);
            }
            function short() {
                buttons.short.classList.toggle("active", true);
                buttons.long.classList.toggle("active", false);
                editorInstance.setValue(shorttext);
            }

            function scroll() {
                let isTop = editorInstance.getScrollTop() == 0;
                editorInstance.setScrollTop(isTop ? editorInstance.getScrollHeight() : 0);
            }
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -



resources/editors/tiptap.html [134:193]:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
            let editorContainer = document.querySelector("#editor");
            let editorInstance = null;

            let buttons = {
                create: document.querySelector("#create"),
                highlight: document.querySelector("#highlight"),
                unhighlight: document.querySelector("#unhighlight"),
                long: document.querySelector("#long"),
                short: document.querySelector("#short"),
                scroll: document.querySelector("#scroll"),
                layout: document.querySelector("#layout"),
            };
            buttons.scroll.addEventListener("click", scroll);
            buttons.highlight.addEventListener("click", highlight);
            buttons.unhighlight.addEventListener("click", unhighlight);
            buttons.long.addEventListener("click", long);
            buttons.short.addEventListener("click", short);
            buttons.layout.addEventListener("click", layout);

            buttons.create.addEventListener("click", (e) => {
                if (!editorInstance) {
                    editorInstance = editor(editorContainer);
                    editorInstance.ready.then(() => {
                        buttons.unhighlight.classList.add("active", "true");
                        buttons.create.setAttribute("disabled", "true");
                    });
                }
            });

            function layout() {
                // Todo - is this necessary with the runner?
                const body = document.body.getBoundingClientRect();
                layout.e = document.elementFromPoint((body.width / 2) | 0, (body.height / 2) | 0);
            }

            function highlight() {
                buttons.unhighlight.classList.toggle("active", false);
                buttons.highlight.classList.toggle("active", true);
                editorInstance.format(true);
            }
            function unhighlight() {
                buttons.unhighlight.classList.toggle("active", true);
                buttons.highlight.classList.toggle("active", false);
                editorInstance.format(false);
            }
            function long() {
                buttons.short.classList.toggle("active", false);
                buttons.long.classList.toggle("active", true);
                editorInstance.setValue(longtext);
            }
            function short() {
                buttons.short.classList.toggle("active", true);
                buttons.long.classList.toggle("active", false);
                editorInstance.setValue(shorttext);
            }

            function scroll() {
                let isTop = editorInstance.getScrollTop() == 0;
                editorInstance.setScrollTop(isTop ? editorInstance.getScrollHeight() : 0);
            }
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -