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() { Вопрос - -
+ onblur="fcEndEdit(this)">${esc(c.front)} ${imgRowHtml(c, 'front')}
@@ -841,11 +843,10 @@ function renderCardList() { Ответ - -
+ onblur="fcEndEdit(this)">${esc(c.back)} ${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'); }