feat(markdown-renderer): add optional syntax highlighting support#1815
feat(markdown-renderer): add optional syntax highlighting support#1815Killusions wants to merge 3 commits intomainfrom
Conversation
Add max-inline-size constraint to message bubble and wrapper to prevent overflow. Fix attachment preview backdrop click behavior. Use index-based tracking for message list and add scroll-to-bottom on message send. Update example action labels for clarity.
…line and caching Rewrite the markdown renderer to use a recursive processing pipeline with placeholder-based architecture. Add SSR support via optional doc/isBrowser parameters. Introduce LRU caching for code blocks and tables. Improve table rendering with proper thead/th support. Add code-wrapper structure with language labels. Update SCSS for new structural layout including code-wrapper, table-wrapper, and table-scroll-container.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the markdown renderer to support server-side rendering and introduces LRU caching for code blocks and tables. It adds a syntax highlighter input and integrates highlight.js for code formatting. Feedback identifies a memory leak caused by uncleared placeholder maps, suggests improving JSDoc for the options interface, and recommends safer handling of the global document object to prevent ReferenceErrors in SSR environments.
| return (text: string): HTMLElement => { | ||
| const div = docRef.createElement('div'); |
There was a problem hiding this comment.
The placeholder maps (codeBlockPlaceholderMap, tablePlaceholderMap, and linkPlaceholderMap) are shared across all calls to this renderer instance but are never cleared. This causes them to grow indefinitely as more content is processed, leading to a memory leak. They should be cleared at the start of each rendering cycle.
return (text: string): HTMLElement => {
codeBlockPlaceholderMap.clear();
tablePlaceholderMap.clear();
linkPlaceholderMap.clear();
const div = docRef.createElement('div');| export interface MarkdownRendererOptions { | ||
| /** | ||
| * Optional syntax highlighter function for code blocks. | ||
| * Receives code content and optional language, returns highlighted HTML or undefined. | ||
| */ | ||
| syntaxHighlighter?: (code: string, language?: string) => string | undefined; | ||
| } |
There was a problem hiding this comment.
The MarkdownRendererOptions interface and its properties should be documented with JSDoc to provide clarity for API consumers and ensure complete documentation in the generated API goldens. When adding these comments, ensure that any '/' sequences are escaped as '/' to prevent premature termination of the comment block.
References
- In JSDoc/TSDoc comments, escape the */ sequence (as */) to prevent premature termination of the comment block.
| isBrowser?: boolean | ||
| ): ((text: string) => Node) => { | ||
| // Use provided document or fall back to global document for backwards compatibility | ||
| const docRef = doc ?? document; |
There was a problem hiding this comment.
Directly falling back to the global document can cause a ReferenceError in Server-Side Rendering (SSR) environments where document is not defined. Ensure that browser-dependent features or global objects are only accessed after verifying the environment (e.g., using isPlatformBrowser or checking if document is defined) to prevent errors during SSR.
| const docRef = doc ?? document; | |
| const docRef = doc ?? (typeof document !== 'undefined' ? document : undefined); |
References
- When using browser-dependent UI features, ensure they are only executed in a browser environment. Use a check like isPlatformBrowser to prevent errors during Server-Side Rendering (SSR).
Add optional syntax highlighting the markdown renderer for libraries like highlight.js and a custom hljs theme using Element design tokens
Killusions
force-pushed
the
feat/markdown-renderer-syntax-highlighting
branch
from
49f849d to
11cbefd
Compare
1 participant
Merge after #1810 and #1811
Add optional syntax highlighting the markdown renderer for libraries like highlight.js and a custom hljs theme using Element design tokens
Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: