mod: css и js вынесены во внешние файлы (будут кашироваться, что ускорит загрузку)

public/static/js/index.js

@@ -0,0 +1,99 @@
+// Импортируем из локального бандла (относительный путь)
+import {
+  EditorView,
+  EditorState,
+  lineNumbers,
+  highlightActiveLineGutter,
+  highlightWhitespace,
+  highlightTrailingWhitespace,
+  drawSelection,
+  keymap,
+  highlightSpecialChars,
+  html,
+  oneDark,
+  syntaxHighlighting,
+  defaultHighlightStyle,
+  bracketMatching,
+  defaultKeymap,
+  Compartment
+} from "../codemirror/editor.js";
+
+const resultWrapper = document.getElementById('cm-result-wrapper');
+
+const themeCompartment = new Compartment();
+
+function getTheme() {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? oneDark : [];
+}
+
+// Словарь названий для спецсимволов
+const charNames = {
+  0x00A0: "NoBreakable Space (неразрывный пробел —  )",
+  0x00AD: "Soft Hyphen (мягкий перенос — ­)",
+  0x2002: "En Space (полужирный пробел —  )",
+  0x2003: "Em Space (жирный пробел —  )",
+  0x2007: "Figure Space (цифровой пробел —  )",
+  0x2008: "Punctuation Space (пунктуационный пробел —  )",
+  0x2009: "Thin Space (тонкий пробел —  )",
+  0x200A: "Hair Space (толщина волоса —  )",
+  0x200B: "Negative Space (негативный пробел — ​)",
+  0x200C: "Zero Width Non-Joiner (пробел нулевой ширины, без объединения — ‍)",
+  0x200D: "Zero Width Joiner (пробел нулевой ширины, с объединением — ‌)",
+  0x200E: "Left-to-Right Mark (изменить направление текста на слева-направо — ‎)",
+  0x200F: "Right-to-Left Mark (изменить направление текста на справа-налево — ‏)",
+  0x205F: "Medium Mathematical Space (средний пробел —  )",
+  0x2060: "NoBreak (без разрыва — ⁠)",
+  0x2062: "Invisible Times (невидимое умножение для семантической разметки математических выражений — ⁢)",
+  0x2063: "Invisible Comma (невидимая запятая для семантической разметки математических выражений — ⁣)",
+};
+
+const resultState = EditorState.create({
+  doc: "Здесь появится результат...",
+  extensions: [
+    lineNumbers(),
+    highlightActiveLineGutter(),
+    // Подсветка NBSP и других специальных пробелов
+    highlightSpecialChars({
+      specialChars: /[\u2002\u00AD\u2003\u2007\u2009\u00a0\u200A\u200B\u200C\u200D\u200E\u200F\u205F\u2060\u2062\u2063]/,
+      addSpecialChars: true,
+      render: (code) => {
+        let span = document.createElement("span");
+        span.textContent = "•";
+        span.style.background = "#ff000044";  // Полупрозрачный красный фон
+        span.style.color = "#ffff00";  // Желтый цвет точки
+        // Используем словарь для title
+        span.title = "U+" + code.toString(16).toUpperCase().padStart(4, '0') + " / " + (charNames[code] || "Special Char");
+        return span;
+      }
+    }),
+    highlightWhitespace(),
+    highlightTrailingWhitespace(),
+    drawSelection(),
+    syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
+    bracketMatching(),
+    keymap.of(defaultKeymap),
+    html(),
+    themeCompartment.of(getTheme()),
+    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.xhr.response;
+    resultView.dispatch({
+      changes: {from: 0, to: resultView.state.doc.length, insert: newContent}
+    });
+  }
+});
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+  resultView.dispatch({
+    effects: themeCompartment.reconfigure(getTheme())
+  });
+});