"""

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Code Editor</title>

    <!-- CodeMirror Styles -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/codemirror.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/theme/dracula.min.css" rel="stylesheet">

    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #2b2c2b;
            color: #ffffff;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .tab-container {
            background-color: #21252b;
            padding: 5px;
            display: flex;
            justify-content: center;
        }

        .tab-container button {
            padding: 10px 20px;
            background-color: #44475a;
            border: 1px solid #282a36;
            color: #ffffff;
            border-radius: 4px 4px 0 0;
            cursor: pointer;
            margin: 0 5px;
        }

        .tab-container button.active {
            background-color: #61afef;
            border-bottom: 2px solid #282c34;
            color: #ffffff;
        }

        .editor-container {
            flex: 1;
            position: relative;
            overflow: hidden;
        }

        .CodeMirror {
            height: 100%;
            font-size: 14px;
            background-color: #282a36;
            font-family: 'Fira Code', monospace;
        }

        .CodeMirror-gutters {
            background-color: #21252b;
            color: #636d83;
        }

        .line-number-highlight {
            background-color: #ff79c6 !important;
            color: #2b2c2b !important;
            border-radius: 3px;
        }

        .buttons-container {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            background-color: #21252b;
        }

        button {
            padding: 8px 16px;
            background-color: #61afef;
            border: none;
            border-radius: 4px;
            color: white;
            font-size: 14px;
            cursor: pointer;
        }

        button:hover {
            background-color: #528bff;
        }

        .search-container input {
            padding: 8px;
            border: 2px solid #528bff;
            border-radius: 4px;
            background-color: #1e1e1e;
            color: white;
        }

        .search-container input:focus {
            outline: none;
            border-color: #61afef;
        }

        .search-blink-error {
            animation: blink-error 0.5s linear 2;
        }

        @keyframes blink-error {
            0%, 100% {
                border-color: #ff5555;
            }

            50% {
                border-color: #ffffff;
            }
        }
    </style>
</head>

<body>
    <div class="tab-container">
        <button class="tab active" data-lang="html">HTML</button>
        <button class="tab" data-lang="css">CSS</button>
        <button class="tab" data-lang="js">JavaScript</button>
    </div>

    <div class="editor-container">
        <textarea id="editor"></textarea>
    </div>

    <div class="buttons-container">
        <div class="search-container">
            <input id="searchField" type="text" placeholder="Search or L#: Line Number">
            <button id="searchButton">Search</button>
        </div>
        <div>
            <button id="runButton">Run</button>
            <button id="saveButton">Save</button>
        </div>
    </div>

    <!-- CodeMirror Core Script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/codemirror.min.js"></script>

    <!-- Syntax Highlighting Modes -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/mode/htmlmixed/htmlmixed.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/mode/css/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/mode/javascript/javascript.min.js"></script>

    <!-- Addons for Advanced Features -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/edit/matchbrackets.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/edit/closetag.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/edit/closebrackets.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/selection/active-line.min.js"></script>

    <!-- Addon for Matching Tags -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/fold/xml-fold.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/edit/matchtags.min.js"></script>

    <!-- Addon for Searching -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/search/search.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/search/searchcursor.min.js"></script>

    <script>
        const files = {
            html: "<!DOCTYPE html>\n<html>\n<head>\n<title>Document</title>\n</head>\n<body>\n\n</body>\n</html>",
            css: "body { background-color: #fff; }",
            js: "console.log('Hello, World!');"
        };
        let currentLanguage = "html";

        const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
            lineNumbers: true,
            matchBrackets: true,
            autoCloseBrackets: true,
            autoCloseTags: true,
            matchTags: { bothTags: true },
            styleActiveLine: true,
            theme: "dracula",
            mode: "htmlmixed",
        });

        editor.setValue(files[currentLanguage]);

        // Handle Tab Switching
        document.querySelectorAll(".tab").forEach(tab => {
            tab.addEventListener("click", () => {
                files[currentLanguage] = editor.getValue();
                currentLanguage = tab.dataset.lang;
                editor.setOption("mode", currentLanguage === "html" ? "htmlmixed" : currentLanguage);
                editor.setValue(files[currentLanguage]);
                document.querySelectorAll(".tab").forEach(item => item.classList.remove("active"));
                tab.classList.add("active");
            });
        });

        // Search and Line Highlighting
        document.getElementById("searchField").addEventListener("keydown", e => {
            if (e.key === "Enter") performSearch();
        });

        document.getElementById("searchButton").addEventListener("click", performSearch);

        function performSearch() {
            const query = document.getElementById("searchField").value.trim();
            if (query.toLowerCase().startsWith("l")) {
                const line = parseInt(query.slice(1)) - 1;
                if (isNaN(line) || line < 0 || line >= editor.lineCount()) {
                    blinkError();
                } else {
                    editor.setCursor({ line, ch: 0 });
                    editor.scrollIntoView({ line, ch: 0 });
                }
            } else {
                const cursor = editor.getSearchCursor(query, editor.getCursor());
                if (!cursor.findNext()) {
                    blinkError();
                } else {
                    editor.setSelection(cursor.from(), cursor.to());
                    editor.scrollIntoView(cursor.from());
                }
            }
        }

        function blinkError() {
            const searchField = document.getElementById("searchField");
            searchField.classList.add("search-blink-error");
            setTimeout(() => searchField.classList.remove("search-blink-error"), 500);
        }

        // Blob Run
        document.getElementById("runButton").addEventListener("click", () => {
            files[currentLanguage] = editor.getValue();
            const blobContent = `
                ${files.html}
                <style>${files.css}</style>
                <script>${files.js}<\/script>
            `;
            const blob = new Blob([blobContent], { type: 'text/html' });
            const url = URL.createObjectURL(blob);
            window.open(url);
        });

        // Save All Files
        document.getElementById("saveButton").addEventListener("click", () => {
            const zip = new JSZip();
            zip.file("index.html", files.html);
            zip.file("styles.css", files.css);
            zip.file("script.js", files.js);

            zip.generateAsync({ type: "blob" }).then(content => {
                const a = document.createElement("a");
                a.href = URL.createObjectURL(content);
                a.download = "project.zip";
                a.click();
            });
        });
    </script>
</body>

</html>

""".

if html tag/class/id/or namespace selected, then other closing tag should highlight in syntax or all analogical namespaces as in fullyfledged code editor.

basically if you select opening html tag, then its corresponding closing tag should be highlighted, and vice-versa

if you select opening or closing "<>", then it should highlight either of them in tree as in super fullyfledged code editors.

for example: we have similar classes or ids or whatever names:

"""
    <div class="controls">
      <div>
        <label for="model">Select Model:</label>
        <select id="model">
          <option value="model/stable-model-2-1">Stable model 2.1</model>
          <option value="model/stable-model-xl-base-1.0">model Diffusion XL</option>
          <option value="prompthero/openjourney">OpenJourney</option>
          <!-- model more model as model -->
        </select>
      </model>
      <div>

""".

we selecting one "model" and seeing all other "models" being highlighted all around.

do not do nested nonsenses in tags as for example html tag within a html tag = fail.

PRESERVE ALL ORIGINAL FUNCTIONALITIES, BUT ONLY IMPROVE ACTUAL THAT SYNTAX HIGHLIGHTMENTS!




pizdec paradox.

if:

"<", then seek in subsequen tree a closing ">"

if:

">", then seek in reverse through tree an opening "<"

if:

"selected text", then seek AROUND similarly "selected text reflection in current viewport scope"

what else there?


"Must only reflect within the current viewport scope, even if the document contains 1000+ lines, to avoid overload.".

yes, you scroll upward or downwward, it then rerenders strictly within current viewport dimensions a highlighted elements or any texts and rerender everything if you scrolling all around without specifically shifting a caret or interacting anyhow with the editing field. obviously if you interacted anyhow (except scrolling) with the editing field or reselected anything, then it should reset a highlightments.

about "<>":

1-oh blyad, we see an opening "<" eeehhh, blyaaaaaaa...
2-let's look what it refers to...
3-oh fuk, it is a div blyad "<div" oooaaaahh, blyaaaa...
4-let's seek further and see where do we met a closing tag for this as "/div>"
5-ugh blyad! we just found a first occurrance of this div tag
6-pizdec. let's just highlight it, and pizdec.


yes, we can store jusSelectedText inside some very safe array independently for further manipulations.


preserve obviously all original functionalities. you just need to improve usability, not ruin original INTENDED functionalities.

nu, it highlights but not distinguishing through trees as suppose to be in proper code editors.

also, deselection is not functioning properly on any events inside editing field but scrolling.

also this: "Uncaught TypeError: section is null".

nu, and pizdec. congratz: "Uncaught TypeError: a.findMatchingTag is not a function"

also, do there in all tabs default proper small code examples with multiple classes/ids/namaspaces/tags for testing.
fix all and be da hero!

output full corrected.