import React, { useState, useEffect, useRef, memo, useMemo, useCallback } from 'react'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import remarkBreaks from 'remark-breaks'; import remarkMath from 'remark-math'; import rehypeKatex from 'rehype-katex'; import 'katex/dist/katex.min.css'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'; // Improved oneDark theme for better comment contrast and readability const customOneDarkTheme = { ...oneDark, 'code[class*="language-"]': { ...oneDark['code[class*="language-"]'], color: '#e6e6e6', fontSize: '14px', }, 'pre[class*="language-"]': { ...oneDark['pre[class*="language-"]'], color: '#e6e6e6', fontSize: '14px', }, comment: { ...oneDark.comment, color: '#a0a0a0', fontStyle: 'italic' }, prolog: { ...oneDark.prolog, color: '#a0a0a0' }, doctype: { ...oneDark.doctype, color: '#a0a0a0' }, cdata: { ...oneDark.cdata, color: '#a0a0a0' }, }; import { Check, Copy } from './icons'; import { wrapHTMLInCodeBlock } from '../utils/htmlSecurity'; import { isProtocolSafe, getProtocol, BLOCKED_PROTOCOLS } from '../utils/urlSecurity'; import { ConfirmationModal } from './ui/ConfirmationModal'; import { defineMessages, useIntl } from '../i18n'; const i18n = defineMessages({ copyCode: { id: 'markdownContent.copyCode', defaultMessage: 'Copy code', }, openExternalLink: { id: 'markdownContent.openExternalLink', defaultMessage: 'Open External Link', }, openProtocolLink: { id: 'markdownContent.openProtocolLink', defaultMessage: 'Open {protocol} link?', }, thisWillOpen: { id: 'markdownContent.thisWillOpen', defaultMessage: 'This will open: {href}', }, open: { id: 'markdownContent.open', defaultMessage: 'Open', }, cancel: { id: 'markdownContent.cancel', defaultMessage: 'Cancel', }, failedToOpenLink: { id: 'markdownContent.failedToOpenLink', defaultMessage: 'Failed to Open Link', }, noApplicationFound: { id: 'markdownContent.noApplicationFound', defaultMessage: 'No application found to open this link.', }, }); interface CodeProps extends React.ClassAttributes, React.HTMLAttributes { inline?: boolean; } interface MarkdownContentProps { content: string; className?: string; } // Memoized CodeBlock component to prevent re-rendering when props haven't changed const CodeBlock = memo(function CodeBlock({ language, children, }: { language: string; children: string; }) { const intl = useIntl(); const [copied, setCopied] = useState(false); const timeoutRef = useRef(null); const handleCopy = async () => { try { await navigator.clipboard.writeText(children); setCopied(true); if (timeoutRef.current) { window.clearTimeout(timeoutRef.current); } timeoutRef.current = window.setTimeout(() => setCopied(false), 2000); } catch (err) { console.error('Failed to copy text: ', err); } }; useEffect(() => { return () => { if (timeoutRef.current) { window.clearTimeout(timeoutRef.current); } }; }, []); // Memoize the SyntaxHighlighter component to prevent re-rendering // Only re-render if language or children change const memoizedSyntaxHighlighter = useMemo(() => { // For very large code blocks, consider truncating or lazy loading const isLargeCodeBlock = children.length > 10000; // 10KB threshold if (isLargeCodeBlock) { console.log(`Large code block detected (${children.length} chars), consider optimization`); } return ( {children} ); }, [language, children]); return (

{memoizedSyntaxHighlighter}

); }); const MarkdownCode = memo( React.forwardRef(function MarkdownCode( { inline, className, children, ...props }: CodeProps, ref: React.Ref ) { const match = /language-(\w+)/.exec(className || ''); return !inline && match ? ( {String(children).replace(/\n$/, '')} ) : (


        {children}

); }) ); // Custom URL transform to preserve deep link URLs (spotify:, vscode:, slack:, etc.) // React-markdown's default only allows http/https/mailto and strips all other protocols // We allow all protocols except dangerous ones (javascript:, data:, file:, etc.) const customUrlTransform = (url: string): string => { try { const protocol = new URL(url).protocol; if (BLOCKED_PROTOCOLS.includes(protocol)) { return ''; } } catch { // Not a valid URL, allow it (could be relative path) } return url; }; const MarkdownContent = memo(function MarkdownContent({ content, className = '', }: MarkdownContentProps) { const intl = useIntl(); const [processedContent, setProcessedContent] = useState(content); const [pendingLink, setPendingLink] = useState<{ protocol: string; href: string } | null>(null); useEffect(() => { try { const processed = wrapHTMLInCodeBlock(content); setProcessedContent(processed); } catch (error) { console.error('Error processing content:', error); setProcessedContent(content); } }, [content]); const handleConfirmOpen = useCallback(async () => { if (pendingLink) { try { await window.electron.openExternal(pendingLink.href); } catch { await window.electron.showMessageBox({ type: 'error', buttons: ['OK'], title: intl.formatMessage(i18n.failedToOpenLink), message: intl.formatMessage(i18n.noApplicationFound), detail: pendingLink.href, }); } } setPendingLink(null); }, [pendingLink, intl]); const handleCancelOpen = useCallback(() => { setPendingLink(null); }, []); return ( <>

{ return ( { e.preventDefault(); e.stopPropagation(); if (!props.href) return; if (isProtocolSafe(props.href)) { window.electron.openExternal(props.href); } else { const protocol = getProtocol(props.href); if (!protocol) return; setPendingLink({ protocol, href: props.href }); } }} /> ); }, code: MarkdownCode, }} > {processedContent}

); }); export default MarkdownContent;