why you cannot right-click menu - "select all"?:


"""

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

""".