admin-valentin/agent-ecosystem
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: enhance MarkdownViewer with improved character limits and syntax highlighting management

Browse source 
- Updated character limits for Markdown content to prevent UI freezes with large inputs.
- Introduced logic to disable syntax highlighting for medium/large content and show raw previews for very large content.
- Enhanced responsiveness of the MarkdownViewer by managing rendering based on content size.
This commit is contained in:
iliya 2026-02-28 22:56:53 +02:00
parent ede47903c1
commit 7d575b3383
1 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/renderer/components/chat/viewers/MarkdownViewer.tsx
View file

@ -268,8 +268,13 @@ function createViewerMarkdownComponents(searchCtx: SearchContext | null): Compon
/** Default components without search highlighting */ /** Default components without search highlighting */
const defaultComponents = createViewerMarkdownComponents(null); const defaultComponents = createViewerMarkdownComponents(null);
const MAX_MARKDOWN_CHARS = 200_000; // Markdown + syntax highlighting can freeze the renderer on some inputs
const LARGE_PREVIEW_CHARS = 50_000; // (very large text, huge code blocks, pathological markdown). Keep the UI responsive:
// - for medium/large content: disable syntax highlighting
// - for very large content: show a raw preview instead of parsing markdown
const DISABLE_HIGHLIGHT_CHARS = 12_000;
const MAX_MARKDOWN_CHARS = 60_000;
const LARGE_PREVIEW_CHARS = 30_000;
// ============================================================================= // =============================================================================
// Component // Component
@ -288,6 +293,7 @@ export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
const [rawLimit, setRawLimit] = React.useState(LARGE_PREVIEW_CHARS); const [rawLimit, setRawLimit] = React.useState(LARGE_PREVIEW_CHARS);
const isTooLarge = content.length > MAX_MARKDOWN_CHARS; const isTooLarge = content.length > MAX_MARKDOWN_CHARS;
const disableHighlight = content.length > DISABLE_HIGHLIGHT_CHARS;
// Only subscribe to search store when itemId is provided // Only subscribe to search store when itemId is provided
const { searchQuery, searchMatches, currentSearchIndex } = useStore( const { searchQuery, searchMatches, currentSearchIndex } = useStore(
@ -475,7 +481,7 @@ export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
<div className="min-w-0 break-words p-4"> <div className="min-w-0 break-words p-4">
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}
rehypePlugins={REHYPE_PLUGINS} rehypePlugins={disableHighlight ? [] : REHYPE_PLUGINS}
urlTransform={(url) => url} urlTransform={(url) => url}
components={components} components={components}
> >