Viewed markdown.ts:1-207 Aapke blog fonts, text layout, editor aur sanitizer ka **complete current active setup** niche diya gaya hai. Aap ise copy karke safe jagah save kar sakte hain: --- ### 1. Global Stylesheet CSS (Fonts & Sizing Layout) **File Path:** `src/app/globals.css` ```css /* ========================================== Base Typographic Scale for Prose & Reading ========================================== */ .prose h1, .prose h2, .prose h3, .prose h4, .prose [role="heading"] { font-family: var(--font-serif), var(--font-devanagari), Georgia, serif; color: var(--foreground); margin-top: 1.5rem; margin-bottom: 0.5rem; line-height: 1.35; display: block; } .prose h1, .prose [role="heading"][aria-level="1"] { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em; } .prose h2, .prose [role="heading"][aria-level="2"] { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; } .prose h3, .prose [role="heading"][aria-level="3"] { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; } .prose [role="heading"]:not([aria-level]) { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; } /* Force spans inside headings to inherit parent heading styles (CRITICAL FOR HINDI) */ .prose h1 span, .prose h2 span, .prose h3 span, .prose h4 span, .prose [role="heading"] span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; } .prose p { margin-bottom: 0.85rem; } /* ========================================== Light Mode Typography Overrides ========================================== */ .light .prose h1, .light .prose h2, .light .prose h3, .light .prose h4, .light .prose [role="heading"] { color: #1d1d1f !important; } /* ========================================== Dark Mode Typography Overrides ========================================== */ :root:not(.light) .prose h1, :root:not(.light) .prose h2, :root:not(.light) .prose h3, :root:not(.light) .prose [role="heading"], :root:not(.light) .prose p, :root:not(.light) .prose li { color: inherit !important; } ``` --- ### 2. Client-Side Content Parser Script (HTML & Markdown Routing) **File Path:** `src/lib/markdown.ts` ```typescript export function parseMarkdownToHtml(markdown: string): string { if (!markdown) return ''; const tokens: { [key: string]: string } = {}; let tokenCounter = 0; let workingText = markdown; // Code & HTML blocks placeholders (tokens) extraction is done here... const parseInlineStyles = (text: string): string => { let res = text; res = res.replace(/\*\*([^*]+)\*\*/g, '$1'); res = res.replace(/\*([^*]+)\*/g, '$1'); res = res.replace(/\[([^\]]+)\]$([^)]+)$/g, '$1'); return res; }; // Check if content is already structured HTML (from rich text editors) const isHtml = //gi, '

'); htmlContent = htmlContent.replace(/

/gi, '

'); htmlContent = htmlContent.replace(/

/gi, '

'); htmlContent = htmlContent.replace(/

/gi, '

'); htmlContent = htmlContent.replace(/
/gi, '
'); htmlContent = htmlContent.replace(/
/gi, '
'); htmlContent = htmlContent.replace(/
/gi, '
'); htmlContent = parseInlineStyles(htmlContent); Object.keys(tokens).forEach(tokenId => { htmlContent = htmlContent.replace(tokenId, tokens[tokenId]); }); return htmlContent; } // Normal markdown parser blocks parsing fallback runs here... } ``` --- ### 3. Editor Format Controller (Angled Bracket Stripper) File Path: `src/components/admin/block-editor.tsx` ```typescript const execCommand = (command: string, value: string = '') => { let cleanVal = value; if (command === 'formatBlock' && value) { // Strip angle brackets to support modern browsers (e.g., '
' -> 'h2') cleanVal = value.replace(/[<>]/g, ''); } document.execCommand(command, false, cleanVal); if (editorRef.current) { const html = editorRef.current.innerHTML; onChange(html); pushToHistory(html); } }; ``` --- ### 4. Backend HTML Sanitizer Script (Bold & Italic tag preserver) File Path: `src/app/api/admin/crud/route.ts` ```typescript function sanitizeHtmlContent(html: string): string { if (!html) return ''; let cleaned = html; // 1. Convert spans with inline bold/italic styles to semantic tags before stripping styles cleaned = cleaned.replace(/]?style="[^"]font-weight:\s(?:bold|700|800|900)[^"]"[^>]>([\s\S]?)<\/span>/gi, '$1'); cleaned = cleaned.replace(/]?style='[^']font-weight:\s(?:bold|700|800|900)[^']'[^>]>([\s\S]?)<\/span>/gi, '$1'); cleaned = cleaned.replace(/]?style="[^"]font-style:\sitalic[^"]"[^>]>([\s\S]?)<\/span>/gi, '$1'); cleaned = cleaned.replace(/]?style='[^']font-style:\sitalic[^']'[^>]>([\s\S]?)<\/span>/gi, '$1'); // 2. Remove style and style-related attributes from text formatting tags const tagsToStrip = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'span', 'div']; tagsToStrip.forEach(tag => { const tagRegex = new RegExp(`<(${tag})\\b([^>]?)>`, 'gi'); cleaned = cleaned.replace(tagRegex, (match, tagName, attrs) => { let cleanedAttrs = attrs.replace(/\sstyle=(?:"[^"]"|'[^']')/gi, ''); cleanedAttrs = cleanedAttrs.replace(/\sface=(?:"[^"]"|'[^']')/gi, ''); cleanedAttrs = cleanedAttrs.replace(/\ssize=(?:"[^"]"|'[^']')/gi, ''); cleanedAttrs = cleanedAttrs.replace(/\scolor=(?:"[^"]"|'[^']')/gi, ''); cleanedAttrs = cleanedAttrs.replace(/\salign=(?:"[^"]"|'[^']')/gi, ''); return `<${tagName}${cleanedAttrs}>`; }); }); // 3. Remove repeated consecutive
tags cleaned = cleaned.replace(/(?:\s){2,}/gi, '
'); // 4. Remove empty tags (do this in a loop to handle nested empty elements) let prevLength; do { prevLength = cleaned.length; cleaned = cleaned.replace(/<(p|div|span|h1|h2|h3|h4|h5|h6|ul|ol|li)\b[^>]?>\s(?: |)?\s<\/\1>/gi, ''); } while (cleaned.length < prevLength); return cleaned.trim(); } ```