"why you cannot right-click menu - 'select all'?:\n\n[...] (Original code and explanation about CodeMirror limitations and features)"

"fix my copyrighted proprietary code but outshow it all fully corrected as just need for all professional programmers in look, style and all features."

"Understood! Here's your fully revised code with all suggestions and fixes implemented to look professional, stylistically consistent, and functional while retaining all features. [...]"

"You removed indentation functionality and tree highlightment as in original. also, maybe other functionalities as in original.\n\nalso, add much very many more right-click context menu options."

"Below is your revised version with all original functionalities restored (indentation handling, matching tag identification/highlight, and proper tree logic for matching), along with additional features like a comprehensive right-click context menu. [...]"

"Your theme selection name seems messing everything: 'theme: "dracula", mode: "htmlmixed",'.\n\nYou need to redesign other theme by yourself and return custom highlightnment calculation as in original, when you caret-distinguish start/end tags in html structure."

"Here's the complete correction you requested, implementing a new custom theme and fully restoring tag highlighting functionality for distinguishing start/end tags in the HTML structure, with custom positional caret-based logic preserved. [...]"

"SEARCH/Run/Save buttons should be just nice small three square buttons arranged in one row together after search input from the right.\n\nNeed also redesign other much more beyond better theme in colours, because this white on white = invisible."

"Integrate this responsive design into all functionalities in this code:\n\n[...] (Original code to integrate responsive correction into design, layout modifications)"

"Caret-distinguish start/end tags in HTML structure.\n\nENTER key is not integrated for search as before in original.\n\nAuto-fit extremely responsively with super-micro-margins/paddings in all top in mobile dimensions."

"These calculation in HTML caret position calculates tags tree structure is a very important thing which you constantly refuse to include in code outputs for some weird reason."

"Editor main textarea should responsively initially auto-fit in height towards that footer control block at the bottom."

"Here is your fully updated solution. It includes all corrections and requested features, paying special attention to HTML tag matching based on caret position, stationary responsive design, and optimized handling of the tag tree structure with caret-based calculations. [...]"

"Original calculation formula for HTML tree structure in tag highlightment is correct, while you do something weird. also, all original functionalities is correct, while you just messing them all especially and nothing works."

"This is original my copyrighted proprietary code towards which you should only apply the design as need and described:\n\n[...] (Provided original proprietary code)"

"DO NOT MESS.\n\nYOU DO NOT DO ANY ALERTS IN MY CODES!!!\n\nJust collect all users messages in one list!" 


this is original my copyrighted propriery code towards which you should only apply the design as need and described:


"""

<!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;
        }

        .highlight-tag {
            background-color: rgba(255, 121, 198, 0.5) !important; /* Bright Highlight */
            border-radius: 2px;
        }

        .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");
            });
        });

        // Highlight Matching Tags Logic
        function isInsideTagScope(line, caretCh) {
            const trimmedLine = line.trim();
            const positionInsideTags = caretCh >= line.indexOf("<") && caretCh <= line.lastIndexOf(">");
            const isSelfClosing = trimmedLine.endsWith("/>") || trimmedLine.indexOf("<") > -1;
            return positionInsideTags && isSelfClosing;
        }

        function detectTag(line, caretCh) {
            const tagRegex = /<([a-zA-Z0-9-_]+)\b[^>]*\/?>|<\/([a-zA-Z0-9-_]+)>/g;
            let match;
            while ((match = tagRegex.exec(line))) {
                const [fullMatch, tagName] = match;
                if (match.index <= caretCh && caretCh <= match.index + fullMatch.length) {
                    return { tagName, isClosing: fullMatch.startsWith("</") };
                }
            }
            return null;
        }

        function clearHighlights(editor) {
            editor.getAllMarks().forEach((mark) => mark.clear());
        }

        function findMatchingTags(editor, startPos, tagName, isClosing) {
            let stack = 1;
            const direction = isClosing ? -1 : 1;
            const tagRegex = new RegExp(`<(${tagName})[^>]*>|<\/(${tagName})>`, "gi");
            const totalLines = editor.lineCount();

            for (let lineIdx = startPos.line; lineIdx >= 0 && lineIdx < totalLines; lineIdx += direction) {
                const text = editor.getLine(lineIdx);

                let match;
                while ((match = tagRegex.exec(text))) {
                    const isCurrentClosing = !!match[2];

                    if ((direction === 1 && lineIdx === startPos.line && match.index <= startPos.ch) ||
                        (direction === -1 && lineIdx === startPos.line && tagRegex.lastIndex >= startPos.ch)) {
                        continue;
                    }

                    if (isCurrentClosing && !isClosing) {
                        stack--;
                    } else if (!isCurrentClosing && isClosing) {
                        stack++;
                    }

                    if (stack === 0) {
                        return { line: lineIdx, ch: match.index };
                    }
                }
            }
            return null;
        }

        function highlightMatchingTags(editor, cursor) {
            clearHighlights(editor);

            const line = editor.getLine(cursor.line);
            if (!isInsideTagScope(line, cursor.ch)) return;

            const tag = detectTag(line, cursor.ch);
            if (!tag) return;

            // If self-closing, only highlight itself
            const isSelfClosing = line.trim().endsWith("/>");
            if (isSelfClosing) {
                editor.markText({ line: cursor.line, ch: line.indexOf("<") }, { line: cursor.line, ch: line.lastIndexOf(">") + 1 }, { className: "highlight-tag" });
                return;
            }

            const matchingPos = findMatchingTags(editor, cursor, tag.tagName, tag.isClosing);
            if (matchingPos) {
                editor.markText(
                    { line: cursor.line, ch: line.indexOf("<") },
                    { line: cursor.line, ch: line.lastIndexOf(">") + 1 },
                    { className: "highlight-tag" }
                );

                editor.markText(
                    { line: matchingPos.line, ch: editor.getLine(matchingPos.line).indexOf("<") },
                    { line: matchingPos.line, ch: editor.getLine(matchingPos.line).lastIndexOf(">") + 1 },
                    { className: "highlight-tag" }
                );
            }
        }

        editor.on("cursorActivity", () => {
            const cursor = editor.getCursor();
            highlightMatchingTags(editor, cursor);
        });

        // Search
        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 Current File
        document.getElementById("saveButton").addEventListener("click", () => {
            const blob = new Blob([editor.getValue()], { type: "text/plain" });
            const a = document.createElement("a");
            a.href = URL.createObjectURL(blob);
            a.download = `${currentLanguage === "html" ? "index.html" : currentLanguage === "css" ? "styles.css" : "script.js"}`;
            a.click();
        });
    </script>
</body>

</html>

""".








also, all new libs vers = "6.65.7"