From 39aa283daff8194052348ffb1e7f31511c7a8863 Mon Sep 17 00:00:00 2001
From: Maxim Dolgolyov <maxim.dolgolyov@gmail.com>
Date: Fri, 12 Jun 2026 23:12:33 +0300
Subject: [PATCH] =?UTF-8?q?feat(flashcards):=20KaTeX-=D0=BF=D1=80=D0=B5?=
 =?UTF-8?q?=D0=B2=D1=8C=D1=8E=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=D0=BB=20?=
 =?UTF-8?q?=D0=B2=20=D1=80=D0=B5=D0=B4=D0=B0=D0=BA=D1=82=D0=BE=D1=80=D0=B5?=
 =?UTF-8?q?=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=B5=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

В редакторе текст карточки — в textarea (сырой LaTeX рендерить нельзя), поэтому
$a^2+b^2=c^2$ показывался текстом. Под каждым полем добавлено живое превью
mathHtmlFC: формулы рендерятся KaTeX, обновляются на вводе, скрыты если формул нет.
В режиме изучения рендер уже был.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/flashcards.html | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/frontend/flashcards.html b/frontend/flashcards.html
index cf6d3ef..f942af7 100644
--- a/frontend/flashcards.html
+++ b/frontend/flashcards.html
@@ -139,6 +139,9 @@
     .card-textarea { width: 100%; border: none; outline: none; resize: none; background: transparent;
                      font-family: 'Manrope', sans-serif; font-size: .88rem; color: var(--text);
                      min-height: 48px; line-height: 1.5; padding: 0; }
+    .fc-math-preview { display: none; margin-top: 6px; padding: 6px 9px; font-size: .85rem; line-height: 1.5;
+                     color: var(--text); background: rgba(155,93,229,.05); border: 1px solid rgba(155,93,229,.14);
+                     border-radius: 8px; overflow-x: auto; }
     .card-actions { display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--border); }
     .card-act-btn { padding: 0 14px; height: 100%; flex: 1; border: none; background: none;
                     cursor: pointer; color: var(--text-3); transition: .15s; display: flex;
@@ -827,7 +830,9 @@ function renderCardList() {
         </div>
         <textarea class="card-textarea" rows="2"
           onpaste="onCardPaste(event,${c.id},'front')"
+          oninput="fcMathPreview(this)"
           onchange="saveCard(${c.id},'front',this.value)">${esc(c.front)}</textarea>
+        <div class="fc-math-preview"></div>
         ${imgRowHtml(c, 'front')}
       </div>
       <div class="card-divider"></div>
@@ -838,7 +843,9 @@ function renderCardList() {
         </div>
         <textarea class="card-textarea" rows="2"
           onpaste="onCardPaste(event,${c.id},'back')"
+          oninput="fcMathPreview(this)"
           onchange="saveCard(${c.id},'back',this.value)">${esc(c.back)}</textarea>
+        <div class="fc-math-preview"></div>
         ${imgRowHtml(c, 'back')}
       </div>
       <div class="card-actions">
@@ -848,9 +855,22 @@ function renderCardList() {
       </div>
     </div>`).join('');
 
+  // Превью формул KaTeX под каждым полем (textarea сырой LaTeX не рендерит)
+  list.querySelectorAll('.card-textarea').forEach(fcMathPreview);
   if (!q) bindCardDrag();
 }
 
+/* Рендер KaTeX-превью под полем карточки, если в тексте есть формула. */
+function fcMathPreview(ta) {
+  const side = ta.closest('.card-side');
+  const prev = side && side.querySelector('.fc-math-preview');
+  if (!prev) return;
+  const txt = ta.value || '';
+  if (!/\$|\\\(|\\\[/.test(txt)) { prev.style.display = 'none'; prev.innerHTML = ''; return; }
+  prev.innerHTML = mathHtmlFC(txt);
+  prev.style.display = 'block';
+}
+
 /* ── drag-reorder карточек (только без активного фильтра) ── */
 let _dragId = null;
 function bindCardDrag() {