const { useState, useEffect, useContext, createContext, useMemo, useRef } = React;
function LessonContent({ markdownContent, lessonId = 'lc' }) {
const containerRef = useRef(null);
const { cmsData, saveOverride } = useContext(AdminContext || createContext({}));
useEffect(() => {
if (containerRef.current && window.renderMathInElement) {
try {
window.renderMathInElement(containerRef.current, {
delimiters: [
{ left: "$$", right: "$$", display: true },
{ left: "$", right: "$", display: false },
{ left: "\\(", right: "\\)", display: false },
{ left: "\\[", right: "\\]", display: true }
],
throwOnError: false
});
} catch (err) {
console.warn("KaTeX rendering warning:", err);
}
}
}, [markdownContent, cmsData]);
// Parse markdown into granular editable blocks
const blocks = useMemo(() => {
if (!markdownContent) return [];
const text = markdownContent.replace(/\r\n/g, '\n');
const rawBlocks = text.split(/\n\s*\n/);
const result = [];
rawBlocks.forEach((b, idx) => {
const trimmed = b.trim();
if (!trimmed) return;
const blockId = `${lessonId}-b${idx}`;
// Check if this block has an individual override
const overrideVal = cmsData && cmsData.overrides ? cmsData.overrides[blockId] : null;
const contentToUse = overrideVal !== null && overrideVal !== undefined ? overrideVal : trimmed;
if ((contentToUse.startsWith('$$') && contentToUse.endsWith('$$')) || (contentToUse.startsWith('\\[') && contentToUse.endsWith('\\]'))) {
result.push({ id: blockId, type: 'math', raw: contentToUse });
} else if (contentToUse.startsWith('#')) {
result.push({ id: blockId, type: 'heading', raw: contentToUse });
} else {
result.push({ id: blockId, type: 'text', raw: contentToUse });
}
});
return result;
}, [markdownContent, lessonId, cmsData]);
const renderSingleBlock = (rawText) => {
if (!rawText) return "";
let formatted = rawText;
formatted = formatted.replace(
/!!!\s*(\w+)(?:\s*"([^"]+)")?\n([\s\S]*?)(?=\n!!!|\n#|\n\n\n|$)/g,
(match, type, title, body) => {
const titleText = title || (type.charAt(0).toUpperCase() + type.slice(1));
const iconSvgMap = {
note: ``,
warning: ``,
tip: ``,
important: ``,
construcao: ``
};
const iconSvg = iconSvgMap[type] || ``;
const bodyText = (window.marked && window.marked.parse) ? window.marked.parse(body.trim()) : body.trim();
return ``;
}
);
// Protect math expressions from marked parser mangling
const mathTokens = [];
// Protect display math ($$...$$ or \[...\])
formatted = formatted.replace(/(\$\$[\s\S]*?\$\$|\\\[[\s\S]*?\\\])/g, (match) => {
const idx = mathTokens.length;
mathTokens.push(match);
return `___MATH_TOK_${idx}___`;
});
// Protect inline math ($...$ or \(...\))
formatted = formatted.replace(/(\$[^$\n]+?\$|\\\([\s\S]*?\\\))/g, (match) => {
const idx = mathTokens.length;
mathTokens.push(match);
return `___MATH_TOK_${idx}___`;
});
let parsedHtml = (window.marked && window.marked.parse) ? window.marked.parse(formatted) : formatted;
// Restore math expressions
mathTokens.forEach((tok, idx) => {
parsedHtml = parsedHtml.replace(`___MATH_TOK_${idx}___`, tok);
});
return (window.DOMPurify && window.DOMPurify.sanitize) ? window.DOMPurify.sanitize(parsedHtml) : parsedHtml;
};
return (
{blocks.map((block) => (
))}