Blog-editor / script.js
shethjenil's picture
Upload 7 files
d45a73e verified
const input = document.getElementById('input');
const transformed = document.getElementById('transformed');
const preview = document.getElementById('preview');
input.addEventListener('input', update);
function renderPreview(raw) {
// 1. Markdown Parse (Pehle markdown convert karein)
let html = marked.parse(raw);
// 2. Render Display Math ($$ .. $$)
// Yeh logic sirf tabhi replace karega jab closing $$ mil jaaye
html = html.replace(/\$\$([\s\S]+?)\$\$/g, (match, expr) => {
try {
// KaTeX render check
return katex.renderToString(expr.trim(), {
displayMode: true,
throwOnError: true // Galti hone par catch block mein bhej dega
});
} catch (e) {
return match; // Agar invalid LaTeX hai toh original text ($$..) hi rehne do
}
});
// 3. Render Inline Math ($ .. $)
// Negative lookbehind use kiya hai taaki $$ ko target na kare
html = html.replace(/(?<!\$)\$([^\$\n]+?)\$(?!\$)/g, (match, expr) => {
try {
return katex.renderToString(expr.trim(), {
displayMode: false,
throwOnError: true
});
} catch (e) {
return match; // Invalid hone par render mat karo, as-is rehne do
}
});
preview.innerHTML = html;
}
function update() {
const val = input.value;
// Transformed View Logic (Sirf valid pairs ko replace karega)
let transformedText = val;
let displayCount = 0;
// Display Math replace for Transformed View
transformedText = transformedText.replace(/\$\$([\s\S]+?)\$\$/g, (match, expr) => {
return "{% katex %}" + expr.trim() + "{% endkatex %}";
});
// Inline Math replace for Transformed View
transformedText = transformedText.replace(/(?<!\$)\$([^\$\n]+?)\$(?!\$)/g, (match, expr) => {
return "{% katex inline %}" + expr.trim() + "{% endkatex %}";
});
transformed.innerText = transformedText;
renderPreview(val);
}
function copyTransformed() {
const textToCopy = transformed.innerText; // Sirf transformed content lega
if (!textToCopy) return;
navigator.clipboard.writeText(textToCopy).then(() => {
const btn = document.getElementById('copyBtn');
btn.innerHTML = "βœ… Copied!";
btn.style.background = "var(--success)";
setTimeout(() => {
btn.innerHTML = "πŸ“‹ Copy Result";
btn.style.background = "var(--accent)";
}, 2000);
});
}
function showTab(idx) {
document.querySelectorAll('.panel').forEach((p, i) => {
p.classList.toggle('active', i === idx);
if (window.innerWidth > 850) p.style.display = "flex"; // Reset for desktop
});
document.querySelectorAll('.tab').forEach((t, i) => t.classList.toggle('active', i === idx));
}
function loadFile(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (ev) => { input.value = ev.target.result; update(); };
reader.readAsText(file);
}
// Default content
input.value = "# Hello LaTeX\nWrite math between double dollar signs:\n\n$$ e^{i\\pi} + 1 = 0 $$";
update();