Function parseInline

src/utils/markdown.tsx:243–462

(text: string, keyPrefix: string, mentionClassName: string = 'text-white')

// Parse inline markdown and HTML (bold, italic, code, br, links, images, plain URLs, @mentions)
function parseInline(text: string, keyPrefix: string, mentionClassName: string = 'text-white'): React.ReactNode[] {
  // FIRST PASS: Handle escape sequences (e.g., \* should become just *)
  const unescapedText = text.replace(/\\([*_`[\]()#+-.|!\\])/g, '$1');

  // SECOND PASS: Extract inline math and replace with safe tokens that won't be matched by markdown regex
  const mathBlocks: string[] = [];
  const mathPlaceholder = '\u0000MATH';  // Unique placeholder that markdown won't match

  const processedText = unescapedText.replace(
    /(?<!\\)((?:\\\\)*)\\\((.+?)\\\)/g,
    (match, backslashes, latex) => {
      if (backslashes && backslashes.length % 2 === 1) {
        // Escaped, remove one backslash
        return match.slice(1);
      }
      // Store math and return placeholder
      const index = mathBlocks.push(latex) - 1;
      return `${mathPlaceholder}${index}\u0000`;
    }
  );

  const parts: React.ReactNode[] = [];
  let key = 0;

  // THIRD PASS: Process markdown - math placeholders won't be captured by markdown patterns
  // Added @mention pattern at the end: @username (alphanumeric, underscore, hyphen)
  // Note: (?<!\S) ensures @ is at start of word (not in email like user@example.com)
  const regex = /(\*\*(.+?)\*\*|\*([^\s*](?:[^*]*[^\s*])?)\*|_([^_]+?)_|`([^`]+?)`|<br\s*\/?>|<b>(.+?)<\/b>|<strong>(.+?)<\/strong>|<i>(.+?)<\/i>|<em>(.+?)<\/em>|<code>(.+?)<\/code>|<a\s+href=["']([^"']+)["']>(.+?)<\/a>|\[([^\]]+)\]\(((?:[^\s()]|\([^\s)]*\))+)(?:\s+"([^"]+)")?\)|!\[([^\]]*)\]\(((?:[^()]|\([^)]*\))+)\)|(unicity-connect:\/\/[^\s<>[\]()]+[^\s<>[\]().,;:!?'"])|(https?:\/\/[^\s<>[\]()]+[^\s<>[\]().,;:!?'"])|((?<!\S)@[\w-]+))/gi;
  let lastIndex = 0;
  let match;

  while ((match = regex.exec(processedText)) !== null) {
    // Process text before match (may contain math placeholders)
    if (match.index > lastIndex) {
      const textBefore = processedText.slice(lastIndex, match.index);
      parts.push(...replaceMathPlaceholders(textBefore, mathBlocks, keyPrefix, key));
      key += mathBlocks.length;
    }

    if (match[2]) {
      // **bold** - recursively parse content for @mentions, links, etc.
      const content = parseInline(match[2], `${keyPrefix}-bold-${key}`, mentionClassName);
      parts.push(<strong key={`${keyPrefix}-strong-${key++}`}>{content}</strong>);
    } else if (match[3]) {
      // *italic* - recursively parse content
      const content = parseInline(match[3], `${keyPrefix}-italic-${key}`, mentionClassName);
      parts.push(<em key={`${keyPrefix}-em-${key++}`}>{content}</em>);
    } else if (match[4]) {
      // _italic_ - recursively parse content
      const content = parseInline(match[4], `${keyPrefix}-italic2-${key}`, mentionClassName);
      parts.push(<em key={`${keyPrefix}-em2-${key++}`}>{content}</em>);
    } else if (match[5]) {
      // `code` - don't process math inside code blocks
      parts.push(
        <code key={`${keyPrefix}-code-${key++}`} className="bg-neutral-200 dark:bg-neutral-700/50 text-neutral-900 dark:text-neutral-200 px-1.5 py-0.5 rounded text-sm font-mono">
          {match[5]}
        </code>
      );