diff --git a/frontend/flashcards.html b/frontend/flashcards.html
index f942af7..32e5fef 100644
--- a/frontend/flashcards.html
+++ b/frontend/flashcards.html
@@ -139,9 +139,12 @@
.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; }
+ /* Карточка по умолчанию — отрисованный текст (с KaTeX). Клик → редактирование. */
+ .card-display { min-height: 48px; line-height: 1.5; font-size: .88rem; color: var(--text);
+ cursor: text; padding: 2px 4px; margin: 0 -4px; border-radius: 7px;
+ transition: background .12s; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
+ .card-display:hover { background: rgba(155,93,229,.06); }
+ .card-display.fc-empty { color: var(--text-3); font-style: italic; }
.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;
@@ -828,11 +831,10 @@ function renderCardList() {
Вопрос
-
${imgRowHtml(c, 'front')}
@@ -841,11 +843,10 @@ function renderCardList() {
Ответ
-
${imgRowHtml(c, 'back')}
@@ -855,20 +856,37 @@ function renderCardList() {
`).join('');
- // Превью формул KaTeX под каждым полем (textarea сырой LaTeX не рендерит)
- list.querySelectorAll('.card-textarea').forEach(fcMathPreview);
+ // Отрисовать карточки (KaTeX). Правка — по клику (textarea), как в Anki.
+ list.querySelectorAll('.card-display').forEach(fcRenderDisplay);
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';
+/* Показать отрисованный текст карточки (или плейсхолдер, если пусто). */
+function fcRenderDisplay(disp) {
+ const side = disp.closest('.card-side');
+ const ta = side && side.querySelector('.card-textarea');
+ const text = ta ? ta.value : '';
+ if (text && text.trim()) { disp.innerHTML = mathHtmlFC(text); disp.classList.remove('fc-empty'); }
+ else { disp.textContent = disp.dataset.ph || ''; disp.classList.add('fc-empty'); }
+}
+/* Клик по отрисованной карточке → редактирование (textarea с сырым LaTeX). */
+function fcStartEdit(disp) {
+ const side = disp.closest('.card-side');
+ const ta = side && side.querySelector('.card-textarea');
+ if (!ta) return;
+ disp.style.display = 'none';
+ ta.style.display = '';
+ ta.focus();
+ const v = ta.value; try { ta.setSelectionRange(v.length, v.length); } catch (e) {}
+}
+/* Конец редактирования (blur / после вставки формулы): сохранить + отрисовать. */
+function fcEndEdit(ta) {
+ const id = +ta.dataset.cid, side = ta.dataset.side;
+ if (id && side) saveCard(id, side, ta.value);
+ const sideEl = ta.closest('.card-side');
+ const disp = sideEl && sideEl.querySelector('.card-display');
+ ta.style.display = 'none';
+ if (disp) { disp.style.display = ''; fcRenderDisplay(disp); }
}
/* ── drag-reorder карточек (только без активного фильтра) ── */
@@ -1411,6 +1429,8 @@ function fxInsert() {
ta.dispatchEvent(new Event('input', { bubbles: true }));
ta.dispatchEvent(new Event('change', { bubbles: true }));
ta.focus();
+ // Поле карточки скрылось при открытии модалки (blur) — сохранить и переотрисовать.
+ if (ta.classList && ta.classList.contains('card-textarea')) fcEndEdit(ta);
}
closeModal('modal-formula');
}