From 2ebbac62fe19866d7e53110336f0e20b9e021db0 Mon Sep 17 00:00:00 2001
From: erjemin <erjemin@gmail.com>
Date: Tue, 6 Jan 2026 13:10:10 +0300
Subject: [PATCH] =?UTF-8?q?tmp:=20=D0=BD=D0=B0=D1=81=D1=82=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B9=D0=BA=D0=B8=20=D1=82=D0=B8=D0=BF=D0=BE=D0=B3=D1=80=D0=B0?=
 =?UTF-8?q?=D1=84=D0=B0=20(16)=20=D0=BF=D0=BE=D0=BF=D1=8B=D1=82=D0=BA?=
 =?UTF-8?q?=D0=B8=20=D0=BF=D0=BE=D0=BA=D1=80=D0=B0=D1=81=D0=B8=D1=82=D1=8C?=
 =?UTF-8?q?=20&nbsp;=20=D0=B2=20CodeMirror=206?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../typograph/templates/typograph/index.html  | 46 ++++++++++++++-----
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/etpgrf_site/typograph/templates/typograph/index.html b/etpgrf_site/typograph/templates/typograph/index.html
index 771c760..8cc68f9 100644
--- a/etpgrf_site/typograph/templates/typograph/index.html
+++ b/etpgrf_site/typograph/templates/typograph/index.html
@@ -205,30 +205,52 @@
 <script type="module">
     // Используем esm.sh с фиксированной версией для всех пакетов, чтобы избежать дублирования зависимостей
     import {EditorView, minimalSetup} from "https://esm.sh/codemirror@6.0.1?deps=@codemirror/state@6.2.1";
-    import {lineNumbers, highlightActiveLineGutter, highlightSpecialChars} from "https://esm.sh/@codemirror/view@6.17.1?deps=@codemirror/state@6.2.1";
+    import {lineNumbers, highlightActiveLineGutter, ViewPlugin, Decoration} from "https://esm.sh/@codemirror/view@6.17.1?deps=@codemirror/state@6.2.1";
     import {html} from "https://esm.sh/@codemirror/lang-html@6.4.5?deps=@codemirror/state@6.2.1";
     import {oneDark} from "https://esm.sh/@codemirror/theme-one-dark@6.1.2?deps=@codemirror/state@6.2.1";
     import {EditorState} from "https://esm.sh/@codemirror/state@6.2.1";
 
     const resultWrapper = document.getElementById('cm-result-wrapper');
 
+    // Декоратор для подсветки NBSP
+    const nbspDecoration = Decoration.mark({
+        attributes: {
+            style: "background-color: rgba(108, 117, 125, 0.2); border-radius: 2px;"
+        }
+    });
+
+    const nbspScanner = ViewPlugin.fromClass(class {
+        constructor(view) {
+            this.decorations = this.getDecorations(view);
+        }
+        update(update) {
+            if (update.docChanged || update.viewportChanged) {
+                this.decorations = this.getDecorations(update.view);
+            }
+        }
+        getDecorations(view) {
+            const builder = new Decoration.Builder();
+            for (const {from, to} of view.visibleRanges) {
+                const text = view.state.doc.sliceString(from, to);
+                let match;
+                const nbspRegex = /\u00a0/g;
+                while (match = nbspRegex.exec(text)) {
+                    builder.add(from + match.index, from + match.index + 1, nbspDecoration);
+                }
+            }
+            return builder.finish();
+        }
+    }, {
+        decorations: v => v.decorations
+    });
+
     const resultState = EditorState.create({
         doc: "Здесь появится результат...",
         extensions: [
             minimalSetup,
             lineNumbers(),
             highlightActiveLineGutter(),
-            // Добавляем подсветку NBSP
-            highlightSpecialChars({
-                specialChars: /[\u00a0]/,
-                render: (code) => {
-                    let span = document.createElement("span");
-                    span.textContent = "·"; // Точка вместо пробела
-                    span.style.color = "#6c757d"; // Серый цвет
-                    span.title = "Неразрывный пробел (U+00A0)";
-                    return span;
-                }
-            }),
+            nbspScanner, // <-- Наш плагин
             html(),
             oneDark,
             EditorState.readOnly.of(true)