feat(flashcards): KaTeX-превью формул в редакторе карточек
В редакторе текст карточки — в textarea (сырой LaTeX рендерить нельзя), поэтому $a^2+b^2=c^2$ показывался текстом. Под каждым полем добавлено живое превью mathHtmlFC: формулы рендерятся KaTeX, обновляются на вводе, скрыты если формул нет. В режиме изучения рендер уже был. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -139,6 +139,9 @@
|
|||||||
.card-textarea { width: 100%; border: none; outline: none; resize: none; background: transparent;
|
.card-textarea { width: 100%; border: none; outline: none; resize: none; background: transparent;
|
||||||
font-family: 'Manrope', sans-serif; font-size: .88rem; color: var(--text);
|
font-family: 'Manrope', sans-serif; font-size: .88rem; color: var(--text);
|
||||||
min-height: 48px; line-height: 1.5; padding: 0; }
|
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-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;
|
.card-act-btn { padding: 0 14px; height: 100%; flex: 1; border: none; background: none;
|
||||||
cursor: pointer; color: var(--text-3); transition: .15s; display: flex;
|
cursor: pointer; color: var(--text-3); transition: .15s; display: flex;
|
||||||
@@ -827,7 +830,9 @@ function renderCardList() {
|
|||||||
</div>
|
</div>
|
||||||
<textarea class="card-textarea" rows="2"
|
<textarea class="card-textarea" rows="2"
|
||||||
onpaste="onCardPaste(event,${c.id},'front')"
|
onpaste="onCardPaste(event,${c.id},'front')"
|
||||||
|
oninput="fcMathPreview(this)"
|
||||||
onchange="saveCard(${c.id},'front',this.value)">${esc(c.front)}</textarea>
|
onchange="saveCard(${c.id},'front',this.value)">${esc(c.front)}</textarea>
|
||||||
|
<div class="fc-math-preview"></div>
|
||||||
${imgRowHtml(c, 'front')}
|
${imgRowHtml(c, 'front')}
|
||||||
</div>
|
</div>
|
||||||
<div class="card-divider"></div>
|
<div class="card-divider"></div>
|
||||||
@@ -838,7 +843,9 @@ function renderCardList() {
|
|||||||
</div>
|
</div>
|
||||||
<textarea class="card-textarea" rows="2"
|
<textarea class="card-textarea" rows="2"
|
||||||
onpaste="onCardPaste(event,${c.id},'back')"
|
onpaste="onCardPaste(event,${c.id},'back')"
|
||||||
|
oninput="fcMathPreview(this)"
|
||||||
onchange="saveCard(${c.id},'back',this.value)">${esc(c.back)}</textarea>
|
onchange="saveCard(${c.id},'back',this.value)">${esc(c.back)}</textarea>
|
||||||
|
<div class="fc-math-preview"></div>
|
||||||
${imgRowHtml(c, 'back')}
|
${imgRowHtml(c, 'back')}
|
||||||
</div>
|
</div>
|
||||||
<div class="card-actions">
|
<div class="card-actions">
|
||||||
@@ -848,9 +855,22 @@ function renderCardList() {
|
|||||||
</div>
|
</div>
|
||||||
</div>`).join('');
|
</div>`).join('');
|
||||||
|
|
||||||
|
// Превью формул KaTeX под каждым полем (textarea сырой LaTeX не рендерит)
|
||||||
|
list.querySelectorAll('.card-textarea').forEach(fcMathPreview);
|
||||||
if (!q) bindCardDrag();
|
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 карточек (только без активного фильтра) ── */
|
/* ── drag-reorder карточек (только без активного фильтра) ── */
|
||||||
let _dragId = null;
|
let _dragId = null;
|
||||||
function bindCardDrag() {
|
function bindCardDrag() {
|
||||||
|
|||||||
Reference in New Issue
Block a user