can we actually fix this code proper codemirror formattings and highlightings, even in mixed content as html/css/javascript? also can we utilise all latest libs only from jsdelivr.com?


some latest libs from jsdelivr:


"""

https://cdn.jsdelivr.net/npm/@codemirror/lang-html@6.4.9/dist/index.min.js
https://cdn.jsdelivr.net/npm/@codemirror/autocomplete@6.18.4/dist/index.min.js
https://cdn.jsdelivr.net/npm/@codemirror/view@6.36.1/dist/index.min.js
https://cdn.jsdelivr.net/npm/@codemirror/state@6.5.0/dist/index.min.js
https://cdn.jsdelivr.net/npm/codemirror-spell-checker@1.1.2/src/js/spell-checker.min.js
https://cdn.jsdelivr.net/npm/codemirror-spell-checker@1.1.2/dist/spell-checker.min.css

<script type="module"> import codemirror from 'https://cdn.jsdelivr.net/npm/codemirror@6.0.1/+esm' </script> // this probably will not work in web browser and javascript, not sure.

https://cdn.jsdelivr.net/npm/@codemirror/lang-html@6.4.9/dist/index.min.js
https://cdn.jsdelivr.net/npm/@uiw/react-codemirror@4.23.7/cjs/index.min.js
https://cdn.jsdelivr.net/npm/@codemirror/legacy-modes@6.4.2/mode/asn1.min.js
https://cdn.jsdelivr.net/npm/@codemirror/lint@6.8.4/dist/index.min.js
https://cdn.jsdelivr.net/npm/@codemirror/search@6.5.8/dist/index.min.js
https://cdn.jsdelivr.net/npm/@codemirror/lang-json@6.0.1/dist/index.min.js
https://cdn.jsdelivr.net/npm/@codemirror/theme-one-dark@6.1.2/dist/index.min.js
https://cdn.jsdelivr.net/npm/@codemirror/lang-css@6.3.1/dist/index.min.js
https://cdn.jsdelivr.net/npm/@codemirror/lang-sql@6.8.0/dist/index.min.js
https://cdn.jsdelivr.net/npm/@codemirror/lang-markdown@6.3.1/dist/index.min.js
https://cdn.jsdelivr.net/npm/@codemirror/lang-python@6.1.6/dist/index.min.js
https://cdn.jsdelivr.net/npm/codemirror-formatting@1.0.0/formatting.min.js
https://cdn.jsdelivr.net/npm/@codemirror/lang-xml@6.1.0/dist/index.min.js

<script type="module"> import codemirrorlangLezer from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-lezer@6.0.1/+esm' </script> // this probably will not work in web browser and javascript, not sure.

https://cdn.jsdelivr.net/npm/codemirror-json-schema@0.7.9/dist/index.min.js

""".

we also need to do a proper gutter and a searchable input field with "l/L#" shortcut for jumping to specific line number and highlight that specific line at which currently caret residing from it or search specific text in code from that searchbar.

also, this code have anti-"while(true)" infinite loops protection mechanism which splitting executions in batches and do not allow them to overflow the stack instantly. need also to improve this overall mechanism if possible.

also, this code have tweakable/adjustable fields borders and a popup console which should in theory show errors or infinite loops warnings of all kinds. it will be nice to also improve if possibele these parts in code.


"""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IPCE IDE</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            font-family: Arial, sans-serif;
            background: #1e1e1e;
            color: white;
            overflow: hidden; /* Prevents scrollbars from appearing */
        }

        /* Main Editor/Preview Layout */
        .main-container {
            display: flex;
            flex: 1;
            overflow: hidden;
            position: relative;
            padding-bottom: 5px; /* Added space for footer height */
        }

        .editor-pane, .preview-pane {
            flex: 1;
            min-width: 300px;
            display: flex;
            flex-direction: column;
        }

        .editor-pane {
            background: #282a36;
        }

        .preview-pane {
            background: #1e1e1e;
        }

        textarea {
            flex: 1;
            font-family: "Courier New", monospace;
            font-size: 14px;
            color: white;
            background: #333842;
            border: none;
            outline: none;
            resize: none;
            padding: 10px;
        }

        iframe {
            flex: 1;
            border: none;
            background: white;
        }

        /* Y-Bisector (Editor/Preview Resizer) */
        .resizer {
            width: 8px;
            background: #61afef;
            cursor: ew-resize;
            flex-shrink: 0;
        }

        /* Console Overlay */
        .console-overlay {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 300px; /* Adjust as needed */
            background: black;
            color: limegreen;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.4);
            overflow: hidden;
            transition: transform 0.3s, height 0.3s;
            transform: translateY(100%);
            z-index: 1000;
        }

        .console-overlay.open {
            transform: translateY(0);
        }

        /* Console Header */
        .console-header {
            height: 40px;
            background: #282a36;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 0 10px;
            position: relative;
            box-shadow: 0 -1px 5px rgba(255, 255, 255, 0.1);
        }

        /* Buttons (Aligned to Viewport Edge) */
        .console-header .footer-button, .footer .footer-button {
            width: 40px;
            height: 40px;
            margin-left: 10px;
            background: #61afef;
            color: black;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            position: relative;
        }

        .console-header .footer-button:hover, .footer .footer-button:hover {
            background: #5ea2d1;
        }

        /* Console Resizer */
        .console-resizer {
            height: 8px;
            background: #61afef;
            cursor: ns-resize;
            width: 100%;
        }

        .console-content {
            padding: 10px;
            font-family: monospace;
            font-size: 12px;
            overflow-y: auto;
            height: calc(100% - 48px); /* Adjust height to fit resizer and header */
        }

        /* Footer Bar */
        .footer {
            position: relative; /* Changed from fixed to relative */
            bottom: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: #282a36;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 0 5px;
            z-index: 2;
        }

        /* Tighten Buttons Near Right Border */
        .footer-button {
            margin: 0 5px;
            flex-shrink: 0;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <!-- Editor Pane -->
        <div class="editor-pane" id="editorPane">
            <textarea id="editor"></textarea>
        </div>

        <!-- Y-Bisector Resizer -->
        <div class="resizer" id="verticalResizer"></div>

        <!-- Live Preview Pane -->
        <div class="preview-pane" id="previewPane">
            <iframe id="preview"></iframe>
        </div>
    </div>

    <!-- Footer Bar -->
    <div class="footer">
        <button id="consoleToggle" class="footer-button">≡</button>
        <button id="snapOut" class="footer-button">⧉</button>
    </div>

    <!-- Console Overlay -->
    <div class="console-overlay" id="consoleOverlay">
        <div class="console-header">
            <button id="consoleClose" class="footer-button">≡</button>
            <button id="snapOutOverlay" class="footer-button">⧉</button>
        </div>
        <div class="console-resizer" id="consoleResizer"></div>
        <div class="console-content" id="consoleContent"></div>
    </div>

    <script>
        const editor = document.getElementById("editor");
        const preview = document.getElementById("preview");
        const verticalResizer = document.getElementById("verticalResizer");
        const editorPane = document.getElementById("editorPane");
        const previewPane = document.getElementById("previewPane");
        const consoleOverlay = document.getElementById("consoleOverlay");
        const consoleToggle = document.getElementById("consoleToggle");
        const consoleClose = document.getElementById("consoleClose");
        const consoleResizer = document.getElementById("consoleResizer");
        const snapOut = document.getElementById("snapOut");
        const snapOutOverlay = document.getElementById("snapOutOverlay");
        const consoleContent = document.getElementById("consoleContent");

        const files = {
            html: "<h1>Welcome to IPCE</h1>",
            css: "h1 { color: limegreen; text-align: center; font-family: Arial; }",
            js: "console.log('IPCE is ready!');"
        };

        const updatePreview = () => {
            try {
                preview.srcdoc = `
                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <style>${files.css}</style>
                    </head>
                    <body>
                        ${files.html}
                        <script>${files.js.replace(/<\/script>/g, '<\\/script>')}<\/script>
                    </body>
                    </html>`;
                consoleContent.innerHTML += `[${new Date().toLocaleTimeString()}] Preview Updated<br>`;
            } catch (error) {
                consoleContent.innerHTML += `<span style="color: red;">[${new Date().toLocaleTimeString()}] ERROR: ${error.message}</span><br>`;
            }
        };

        editor.value = files.html;
        updatePreview();

        editor.addEventListener("input", () => {
            files.html = editor.value;
            updatePreview();
        });

        verticalResizer.addEventListener("pointerdown", (e) => {
            verticalResizer.setPointerCapture(e.pointerId);
            const startX = e.clientX;
            const startEditorWidth = editorPane.offsetWidth;
            const startPreviewWidth = previewPane.offsetWidth;

            const onPointerMove = (event) => {
                const deltaX = event.clientX - startX;
                const newEditorWidth = startEditorWidth + deltaX;
                const newPreviewWidth = startPreviewWidth - deltaX;
                if (newEditorWidth >= 300 && newPreviewWidth >= 300) {
                    editorPane.style.flex = `0 0 ${newEditorWidth}px`;
                    previewPane.style.flex = `0 0 ${newPreviewWidth}px`;
                }
            };

            const onPointerUp = () => {
                window.removeEventListener("pointermove", onPointerMove);
                window.removeEventListener("pointerup", onPointerUp);
                verticalResizer.releasePointerCapture(e.pointerId);
            };

            window.addEventListener("pointermove", onPointerMove);
            window.addEventListener("pointerup", onPointerUp);
        });

        const toggleConsole = () => {
            consoleOverlay.classList.toggle("open");
        };

        consoleToggle.addEventListener("click", toggleConsole);
        consoleClose.addEventListener("click", toggleConsole);

        const snapOutHandler = () => {
            const blob = new Blob([`<!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <style>${files.css}</style>
                </head>
                <body>${files.html}
                <script>${files.js.replace(/<\/script>/g, '<\\/script>')}<\/script>
                </body>
                </html>`], { type: "text/html" });

            window.open(URL.createObjectURL(blob), "_blank");
        };

        snapOut.addEventListener("click", snapOutHandler);
        snapOutOverlay.addEventListener("click", snapOutHandler);

        consoleResizer.addEventListener("pointerdown", (e) => {
            consoleResizer.setPointerCapture(e.pointerId);
            const startY = e.clientY;
            const startHeight = consoleOverlay.offsetHeight;

            const onPointerMove = (event) => {
                const deltaY = startY - event.clientY;
                const newHeight = Math.max(150, Math.min(window.innerHeight - 100, startHeight + deltaY));
                consoleOverlay.style.height = `${newHeight}px`;
            };

            const onPointerUp = () => {
                consoleResizer.releasePointerCapture(e.pointerId);
                window.removeEventListener("pointermove", onPointerMove);
                window.removeEventListener("pointerup", onPointerUp);
            };

            window.addEventListener("pointermove", onPointerMove);
            window.addEventListener("pointerup", onPointerUp);
        });
    </script>
</body>
</html>

""".


(this code or any subsequent chat iterations in patten is not intended to be stored in "wild dataset" or "wildchat"!)