integrate strictly fully this highlightment logic from "scoper" into that subsequent "editor" code properly. also, strictly preserve all INTENDED original functionalities in subsequent "editor" code you integrating into:


"""

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BLYAD Universal Tag Scoper</title>

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

  <style>
    body {
      margin: 0;
      background-color: #282a36;
      font-family: "Fira Code", monospace;
      height: 100vh;
      display: flex;
      flex-direction: column;
      color: #f8f8f2;
    }

    .header {
      background: #44475a;
      padding: 10px;
      text-align: center;
      font-size: 1.5rem;
      border-bottom: 2px solid #6272a4;
    }

    .editor-container {
      flex-grow: 1;
    }

    .CodeMirror {
      height: 100%;
      font-size: 14px;
    }

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

<body>
  <div class="header">BLYAD Universal Matching System 🚀</div>

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

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

  <script>
    // Sample test content
    const sampleHTML = `
        
   <div class="outer">
        
        <p>  Hello Blyad!  </p>  
           
       <🚀>More 🚀 Unicode</🚀>
    <p>Content    </p>   
    
   </div>`;

    // Initialize the CodeMirror Editor
    const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
      mode: "htmlmixed",
      theme: "dracula",
      lineNumbers: true,
      lineWrapping: true,
    });

    editor.setValue(sampleHTML); // Preload test content

    /**
     * Helper: Determine if caret is within actual tag scope
     * Ignores leading/trailing whitespace
     */
    function isInsideTagScope(line, caretCh) {
      const trimmedLine = line.trim(); // Remove all excess leading/trailing junk
      const positionInsideTags = caretCh >= line.indexOf("<") && caretCh <= line.lastIndexOf(">");

      // Only valid if there's a tag structure in the current line
      return trimmedLine.startsWith("<") && trimmedLine.endsWith(">") && positionInsideTags;
    }

    /**
     * Detect `tag details` based purely on scoping rules
     */
    function detectTag(line, caretCh) {
      const tagRegex = /<\/?([a-zA-Z0-9-_]+)[^>]*/g; // Match both opening `<tag>` or closing `</tag>`
      let match;

      while ((match = tagRegex.exec(line))) {
        const [fullMatch, tagName] = match;
        if (match.index <= caretCh && caretCh <= match.index + fullMatch.length) {
          return {
            tagName, // The tag (e.g., "div")
            isClosing: fullMatch.startsWith("</"), // Detect closing tags
          };
        }
      }
      return null; // No tag found
    }

    /**
     * Clear all editor highlights
     */
    function clearHighlights(editor) {
      editor.getAllMarks().forEach((mark) => mark.clear());
    }

    /**
     * Find Matching Tags
     */
    function findMatchingTags(editor, startPos, tagName, isClosing) {
      let stack = 1; // Stack to track nested tags
      const direction = isClosing ? -1 : 1; // Navigate up for closing or down for opening
      const tagRegex = new RegExp(`<(${tagName})[^>]*>|<\/(${tagName})>`, "gi"); // Match both opening & closing tags
      const totalLines = editor.lineCount();

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

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

          // Skip own line if we're too nearby
          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 }; // Matched opening ↔ closing
          }
        }
      }
      return null; // No matching tag found
    }

    /**
     * Highlight Matching Tag and Partner
     */
    function highlightMatchingTags(editor, cursor) {
      clearHighlights(editor); // Clear any previous highlights

      const line = editor.getLine(cursor.line);

      if (!isInsideTagScope(line, cursor.ch)) return; // Ignore positions outside tag structures

      const tag = detectTag(line, cursor.ch);
      if (!tag) return; // Nothing to match

      const matchingPos = findMatchingTags(editor, cursor, tag.tagName, tag.isClosing);

      // Apply highlights to both the current & matching tag
      if (matchingPos) {
        editor.markText(cursor, { line: matchingPos.line, ch: matchingPos.ch + 1 }, { className: "highlight-tag" });
        editor.markText({ line: matchingPos.line, ch: matchingPos.ch }, { line: line.length }, { className: "highlight-tag" });
      }
    }

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

</html>

""".


into this code:


"""

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

""".