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?


also, need to utilise these latest libraries from jsdelivr, not some outdated garbage from memory:


"""

    <!-- Include CodeMirror and Plugins -->
    <script type="module">
        import { EditorView,keymap,highlightActiveLineGutter,highlightSpecialChars,drawSelection,highlightActiveLine,dropCursor,rectangularSelection,crosshairCursor } from 'https://cdn.jsdelivr.net/npm/@codemirror/view@6.36.1/+esm';
        import { EditorState } from 'https://cdn.jsdelivr.net/npm/@codemirror/state@6.5.0/+esm';
        import { markdown } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-markdown@6.3.1/+esm';
        import { html } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-html@6.4.9/+esm';
        import { javascript } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-javascript@6.2.2/+esm';
        import { css } from 'https://cdn.jsdelivr.net/npm/@codemirror/lang-css@6.3.1/+esm';
        import { oneDark } from 'https://cdn.jsdelivr.net/npm/@codemirror/theme-one-dark@6.1.2/+esm';
        import { defaultKeymap,historyKeymap } from 'https://cdn.jsdelivr.net/npm/@codemirror/commands@6.7.1/+esm';
        import { gutter,lineNumbers,GutterMarker } from 'https://cdn.jsdelivr.net/npm/@codemirror/gutter@0.19.9/+esm';
        import { searchKeymap,highlightSelectionMatches } from 'https://cdn.jsdelivr.net/npm/@codemirror/search@6.5.8/+esm';
        
""".

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>

""".














some unrelated debug info to consider while you generating and do not do the same mistakes:


"""

https://cdn.jsdelivr.net/npm/@codemirror/lang-css@6.3.1/+esm' = Couldn't find the requested file /+esm' in @codemirror/lang-css.

https://cdn.jsdelivr.net/npm/@codemirror/lang-html@6.5.0/+esm = Couldn't find the requested release version 6.5.0.

https://cdn.jsdelivr.net/npm/@codemirror/basic-setup@6.0.1/+esm' = Couldn't find the requested release version 6.0.1.

https://cdn.jsdelivr.net/npm/@codemirror/theme-one-dark@6.2.0/+esm = Couldn't find the requested release version 6.2.0.

while other library links working correctly opening.


well, you have made the same error as all other your nlp ai archiecture versions doing constantly: "Uncaught SyntaxError: `` literal not terminated before end of script".

because html cannot be nested inside an html in tags and something follow a closing html tag.

yes, snapouts in a new tab in blob is important but in your case and implementations you always doing it wrong.

(WARNING: this original code above does not have that problem!)

""".







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