BEST FORMAT FOR HINDI/ENGLISH FONTS ON WEBSIE

/* ==========================================
   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;
}

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, '<strong class="font-bold text-foreground">$1</strong>');
    res = res.replace(/\*([^*]+)\*/g, '<em class="italic text-foreground/75">$1</em>');
    res = res.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-indigo-400 hover:text-indigo-300 font-semibold underline underline-offset-4 decoration-indigo-500/30 hover:decoration-indigo-500/80 transition-all">$1</a>');
    return res;
  };

  // Check if content is already structured HTML (from rich text editors)
  const isHtml = /<p\b|<div\b|<h[1-6]\b|<ul\b|<ol\b|<li\b|<blockquote\b/i.test(workingText);
  if (isHtml) {
    let htmlContent = workingText;
    
    // Inject typography classes into standard HTML tags
    htmlContent = htmlContent.replace(/<p>/gi, '<p class="mb-3 text-foreground/80 leading-relaxed text-sm sm:text-base">');
    htmlContent = htmlContent.replace(/<h2>/gi, '<h2 class="text-xl sm:text-2xl font-black text-foreground mt-8 mb-4 scroll-mt-24">');
    htmlContent = htmlContent.replace(/<h3>/gi, '<h3 class="text-lg sm:text-xl font-extrabold text-foreground mt-7 mb-3 border-b border-foreground/10 pb-2 scroll-mt-24">');
    htmlContent = htmlContent.replace(/<h4>/gi, '<h4 class="text-md sm:text-lg font-bold text-foreground mt-5 mb-2.5 scroll-mt-24">');
    htmlContent = htmlContent.replace(/<ul>/gi, '<ul class="my-2.5 pl-5 space-y-1 text-foreground/85">');
    htmlContent = htmlContent.replace(/<ol>/gi, '<ol class="my-2.5 pl-5 space-y-1 text-foreground/85">');
    htmlContent = htmlContent.replace(/<li>/gi, '<li class="ml-5 list-disc text-foreground/85 my-0.5 leading-relaxed">');
    
    htmlContent = parseInlineStyles(htmlContent);

    Object.keys(tokens).forEach(tokenId => {
      htmlContent = htmlContent.replace(tokenId, tokens[tokenId]);
    });
    
    return htmlContent;
  }

  // Normal markdown parser blocks parsing fallback runs here...
}

const execCommand = (command: string, value: string = '') => {
    let cleanVal = value;
    if (command === 'formatBlock' && value) {
      // Strip angle brackets to support modern browsers (e.g., '<h2>' -> 'h2')
      cleanVal = value.replace(/[<>]/g, '');
    }
    document.execCommand(command, false, cleanVal);
    if (editorRef.current) {
      const html = editorRef.current.innerHTML;
      onChange(html);
      pushToHistory(html);
    }
  };

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(/<span\b[^>]*?style="[^"]*font-weight:\s*(?:bold|700|800|900)[^"]*"[^>]*>([\s\S]*?)<\/span>/gi, '<strong>$1</strong>');
  cleaned = cleaned.replace(/<span\b[^>]*?style='[^']*font-weight:\s*(?:bold|700|800|900)[^']*'[^>]*>([\s\S]*?)<\/span>/gi, '<strong>$1</strong>');
  cleaned = cleaned.replace(/<span\b[^>]*?style="[^"]*font-style:\s*italic[^"]*"[^>]*>([\s\S]*?)<\/span>/gi, '<em>$1</em>');
  cleaned = cleaned.replace(/<span\b[^>]*?style='[^']*font-style:\s*italic[^']*'[^>]*>([\s\S]*?)<\/span>/gi, '<em>$1</em>');

  // 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(/\s*style=(?:"[^"]*"|'[^']*')/gi, '');
      cleanedAttrs = cleanedAttrs.replace(/\s*face=(?:"[^"]*"|'[^']*')/gi, '');
      cleanedAttrs = cleanedAttrs.replace(/\s*size=(?:"[^"]*"|'[^']*')/gi, '');
      cleanedAttrs = cleanedAttrs.replace(/\s*color=(?:"[^"]*"|'[^']*')/gi, '');
      cleanedAttrs = cleanedAttrs.replace(/\s*align=(?:"[^"]*"|'[^']*')/gi, '');
      return `<${tagName}${cleanedAttrs}>`;
    });
  });

  // 3. Remove repeated consecutive <br> tags
  cleaned = cleaned.replace(/(?:<br\s*\/?>\s*){2,}/gi, '<br />');

  // 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*(?:&nbsp;|<br\s*\/?>)?\s*<\/\1>/gi, '');
  } while (cleaned.length < prevLength);

  return cleaned.trim();
}