From 2d6f1ee9b768fa89881a722338640f98c0f643a0 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 11 Apr 2026 14:26:22 +0300 Subject: [PATCH] fix(sidebar): editable mode equations sometimes not rendering --- apps/client/src/widgets/react/hooks.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 945bad29e5..251463fa9a 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -1447,14 +1447,24 @@ export function useColorScheme() { export function useMathRendering(containerRef: RefObject, deps: unknown[]) { useEffect(() => { if (!containerRef.current) return; - const mathElements = containerRef.current.querySelectorAll(".math-tex"); + // Support both read-only (.math-tex) and CKEditor editing view (.ck-math-tex) classes + const mathElements = containerRef.current.querySelectorAll(".math-tex, .ck-math-tex"); for (const mathEl of mathElements) { // Skip if already rendered by KaTeX if (mathEl.querySelector(".katex")) continue; try { - math.render(mathEl.textContent || "", mathEl as HTMLElement); + let equation = mathEl.textContent || ""; + + // CKEditor widgets store equation without delimiters, add them for KaTeX + if (mathEl.classList.contains("ck-math-tex")) { + // Check if it's display mode or inline + const isDisplay = mathEl.classList.contains("ck-math-tex-display"); + equation = isDisplay ? `\\[${equation}\\]` : `\\(${equation}\\)`; + } + + math.render(equation, mathEl as HTMLElement); } catch (e) { console.warn("Failed to render math:", e); }