From 0a4fcb44be167f3642ab3f5724259a74105f7c50 Mon Sep 17 00:00:00 2001
From: erjemin <erjemin@gmail.com>
Date: Mon, 5 Jan 2026 21:25:02 +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(15)=20=D0=B1=D0=BE=D1=80=D1=8C=D0=B1=D0=B0=20?=
 =?UTF-8?q?=D1=81=20CodeMirror=206?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../typograph/templates/typograph/index.html  | 51 ++++++++++++++++---
 etpgrf_site/typograph/views.py                | 12 +++--
 2 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/etpgrf_site/typograph/templates/typograph/index.html b/etpgrf_site/typograph/templates/typograph/index.html
index 4ddf502..1bd8d21 100644
--- a/etpgrf_site/typograph/templates/typograph/index.html
+++ b/etpgrf_site/typograph/templates/typograph/index.html
@@ -144,19 +144,19 @@
                       </div>
                   </div>
                 {# ========== #}<hr class="my-2" />
-                  {# Группа «Санитайзер» #}<div x-data="{ enabled: false }" class="mb-2">
+                  {# Группа "Санитайзер" #}<div x-data="{ enabled: false }" class="mb-2">
                       <div class="form-check">
                         <input class="form-check-input" type="checkbox" name="sanitizer_enabled" id="optSanitizer" x-model="enabled">
-                        <label class="form-check-label fw-bold" for="optSanitizer">Очистка от&nbsp;HTML (Sanitizer)</label>
+                        <label class="form-check-label fw-bold" for="optSanitizer">Очистка от HTML (Sanitizer)</label>
                       </div>
-                      {# Настройки группы «Санитайзер» (видны, когда включено) #}<div class="ms-3 mt-1" x-show="enabled" x-transition>
+                      {# Настройки группы "Санитайзер" (видны, когда включено) #}<div class="ms-3 mt-1" x-show="enabled" x-transition>
                           <select class="form-select form-select-sm" name="sanitizer">
                               <option value="etp" selected>Очистить разметку висячей пунктуации</option>
                               <option value="html">Очистить все HTML-теги</option>
                           </select>
                       </div>
-                      {# Описание группы «Санитайзер» (видно, когда выключено) #}<div class="ms-3 form-text text-muted small" x-show="!enabled" x-transition>
-                          Текст будет обработан &laquo;как есть&raquo;, без предва&shy;рительной очистки от&nbsp;HTML-тегов или&nbsp;старой разметки.
+                      {# Описание группы "Санитайзер" (видно, когда выключено) #}<div class="ms-3 form-text text-muted small" x-show="!enabled" x-transition>
+                          Текст будет обработан «как&nbsp;есть», без&nbsp;предва­рительной очистки от&nbsp;HTML-тегов или&nbsp;старой разметки.
                       </div>
                   </div>
                    {# ========== #}<hr class="my-2" />
@@ -197,8 +197,45 @@
 
     <div class="col-md-12 mt-4">
       <h3>Результат</h3>
-      <pre id="result-area" class="result-box">Здесь появится результат...</pre>
-
+      <div id="cm-result-wrapper" class="result-box"></div>
+      <div id="result-area" style="display: none;"></div>
     </div>
   </div>
+
+<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} 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');
+
+    const resultState = EditorState.create({
+        doc: "Здесь появится результат...",
+        extensions: [
+            minimalSetup,
+            lineNumbers(),
+            highlightActiveLineGutter(),
+            html(),
+            oneDark,
+            EditorState.readOnly.of(true)
+        ]
+    });
+
+    const resultView = new EditorView({
+        state: resultState,
+        parent: resultWrapper
+    });
+
+    document.body.addEventListener('htmx:afterSwap', function(evt) {
+        if (evt.detail.target.id === 'result-area') {
+            const newContent = evt.detail.target.innerHTML;
+            resultView.dispatch({
+                changes: { from: 0, to: resultView.state.doc.length, insert: newContent }
+            });
+        }
+    });
+</script>
 {% endblock %}
diff --git a/etpgrf_site/typograph/views.py b/etpgrf_site/typograph/views.py
index 75b13c0..8c51647 100644
--- a/etpgrf_site/typograph/views.py
+++ b/etpgrf_site/typograph/views.py
@@ -46,10 +46,10 @@ def process_text(request):
             )
 
         # 4. Читаем Sanitizer
-        sanitizer_enabled = request.POST.get(key='sanitizer_enabled', default='')
-        sanitizer_option = request.POST.get(key='sanitizer', default='etp')
-        if sanitizer_enabled and sanitizer_option not in ['etp', 'html']:
-            sanitizer_option = 'etp'
+        sanitizer_enabled = request.POST.get(key='sanitizer_enabled') == 'on'
+        sanitizer_option = None
+        if sanitizer_enabled:
+            sanitizer_option = request.POST.get(key='sanitizer', default='etp')
 
         # 5. Читаем Hanging Punctuation
         hanging_enabled = request.POST.get(key='hanging_enabled') == 'on'
@@ -70,6 +70,10 @@ def process_text(request):
             'mode': request.POST.get(key='mode', default='mixed'),
             'sanitizer': sanitizer_option
         }
+        
+        # --- ДИАГНОСТИКА ---
+        print("Typographer options:", options)
+        # -------------------
 
         # Создаем экземпляр типографа
         typo = Typographer(**options)