Markdown to HTML Email / Markdown Newsletter Converter

`; }// Rendering Controller let tsCurrentCleanHtml = '';function tsRenderNewsletter() { const inputEl = document.getElementById('ts-markdown-input'); const modeEl = document.getElementById('ts-template-mode'); if (!inputEl) return;const mdInput = inputEl.value; const formatMode = modeEl ? modeEl.value : 'full';tsUpdateStats(mdInput);let rawParsedHtml = ''; try { if (typeof marked !== 'undefined') { rawParsedHtml = marked.parse(mdInput, { breaks: true, gfm: true }); } else { rawParsedHtml = `

${mdInput.replace(/\n/g, '
')}

`; } } catch (err) { console.error("Markdown parse error:", err); rawParsedHtml = `

Markdown Parsing Error: ${err.message}

`; }const inlineContent = tsInlineStyleNewsletter(rawParsedHtml);if (formatMode === 'full') { tsCurrentCleanHtml = tsWrapInEmailTemplate(inlineContent); } else { tsCurrentCleanHtml = inlineContent; }const previewEl = document.getElementById('ts-live-preview'); const rawOutputEl = document.getElementById('ts-raw-html-output');if (previewEl) previewEl.innerHTML = inlineContent; if (rawOutputEl) rawOutputEl.value = tsCurrentCleanHtml; }// Clipboard Copy with 2s Graceful Fade Toast function tsCopyCleanHtml() { if (!tsCurrentCleanHtml) { tsRenderNewsletter(); }if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(tsCurrentCleanHtml).then(() => { tsShowToast('HTML Copied to Clipboard!'); }).catch(() => { tsFallbackCopyText(tsCurrentCleanHtml); }); } else { tsFallbackCopyText(tsCurrentCleanHtml); } }function tsFallbackCopyText(text) { const textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; textarea.style.top = '0'; textarea.style.left = '0'; textarea.style.opacity = '0'; document.body.appendChild(textarea); textarea.focus(); textarea.select(); try { document.execCommand('copy'); tsShowToast('HTML Copied to Clipboard!'); } catch (err) { alert('Please copy manually from the HTML Output tab.'); } document.body.removeChild(textarea); }let tsToastTimer = null; function tsShowToast(message) { const toast = document.getElementById('ts-toast-notify'); const toastMsg = document.getElementById('ts-toast-message'); if (!toast || !toastMsg) return;toastMsg.textContent = message; toast.classList.add('show'); if (tsToastTimer) clearTimeout(tsToastTimer);// Gracefully fades away after 2 seconds tsToastTimer = setTimeout(() => { toast.classList.remove('show'); }, 2000); }// Tab & Viewport Controls function tsSwitchTab(mode) { const tabVisual = document.getElementById('ts-tab-visual'); const tabCode = document.getElementById('ts-tab-code'); const visualViewport = document.getElementById('ts-visual-viewport'); const codeViewport = document.getElementById('ts-code-viewport'); const devControls = document.getElementById('ts-device-controls');if (mode === 'visual') { if (tabVisual) tabVisual.classList.add('active'); if (tabCode) tabCode.classList.remove('active'); if (visualViewport) visualViewport.style.display = 'flex'; if (codeViewport) codeViewport.classList.remove('active'); if (devControls) devControls.style.display = 'flex'; } else { if (tabCode) tabCode.classList.add('active'); if (tabVisual) tabVisual.classList.remove('active'); if (visualViewport) visualViewport.style.display = 'none'; if (codeViewport) codeViewport.classList.add('active'); if (devControls) devControls.style.display = 'none'; } }function tsSetDeviceView(device) { const shell = document.getElementById('ts-email-shell'); const indicator = document.getElementById('ts-view-indicator'); const btnDesk = document.getElementById('ts-dev-desktop'); const btnMob = document.getElementById('ts-dev-mobile'); const btnFluid = document.getElementById('ts-dev-fluid');[btnDesk, btnMob, btnFluid].forEach(b => { if (b) b.classList.remove('active'); }); if (shell) shell.classList.remove('mobile-view', 'fluid-view');if (device === 'mobile') { if (shell) shell.classList.add('mobile-view'); if (btnMob) btnMob.classList.add('active'); if (indicator) indicator.textContent = 'Mobile Newsletter Preview (375px)'; } else if (device === 'fluid') { if (shell) shell.classList.add('fluid-view'); if (btnFluid) btnFluid.classList.add('active'); if (indicator) indicator.textContent = 'Full Width Fluid Preview'; } else { if (btnDesk) btnDesk.classList.add('active'); if (indicator) indicator.textContent = 'Desktop Newsletter Preview (600px)'; } }function tsInsertSyntax(before, after) { const textarea = document.getElementById('ts-markdown-input'); if (!textarea) return; const start = textarea.selectionStart; const end = textarea.selectionEnd; const selected = textarea.value.substring(start, end); const replacement = before + (selected || 'text') + after;textarea.setRangeText(replacement, start, end, 'select'); textarea.focus(); tsRenderNewsletter(); }function tsInsertButtonSyntax() { const textarea = document.getElementById('ts-markdown-input'); if (!textarea) return; const start = textarea.selectionStart; const end = textarea.selectionEnd; const btnText = '\n\n[Explore Our Services →](https://teckscaler.com)\n\n';textarea.setRangeText(btnText, start, end, 'end'); textarea.focus(); tsRenderNewsletter(); }function tsUpdateStats(text) { const counterEl = document.getElementById('ts-stats-counter'); if (!counterEl) return; const words = text.trim() ? text.trim().split(/\s+/).length : 0; const chars = text.length; counterEl.textContent = `${words} words • ${chars} chars`; }function tsLoadSample() { const textarea = document.getElementById('ts-markdown-input'); if (textarea) { textarea.value = TS_DEFAULT_MARKDOWN; tsRenderNewsletter(); tsShowToast('Loaded TeckScaler Sample!'); } }function tsClearEditor() { if (confirm('Clear editor text?')) { const textarea = document.getElementById('ts-markdown-input'); if (textarea) { textarea.value = ''; tsRenderNewsletter(); } } }// Interactive Accordion Handler function tsToggleFaq(triggerElement) { const parentItem = triggerElement.closest('.ts-faq-item'); if (!parentItem) return; const isCurrentlyActive = parentItem.classList.contains('active'); const allItems = document.querySelectorAll('#ts-app-sandbox .ts-faq-item'); // Close other items for single-open accordion feel allItems.forEach(item => item.classList.remove('active'));// If it wasn't open before, open it now if (!isCurrentlyActive) { parentItem.classList.add('active'); } }// Tab key handling for indentation function tsSetupTabIndent() { const textarea = document.getElementById('ts-markdown-input'); if (!textarea) return; textarea.addEventListener('keydown', function(e) { if (e.key === 'Tab') { e.preventDefault(); const start = this.selectionStart; const end = this.selectionEnd; this.value = this.value.substring(0, start) + ' ' + this.value.substring(end); this.selectionStart = this.selectionEnd = start + 2; tsRenderNewsletter(); } }); }// Initialize on page load function tsInit() { tsSetupTabIndent(); tsEnsureMarked(() => { tsLoadSample(); }); }if (document.readyState === 'loading') { window.addEventListener('DOMContentLoaded', tsInit); } else { tsInit(); }