Files
deer-flow/web/src/core/utils/markdown.ts
Willem Jiang 58c1743ed5 fix: resolve math formula display abnormal after editing report
This fix addresses the issue where math formulas become corrupted or
incorrectly displayed after editing the generated report in the editor.

**Root Cause:**
The issue occurred due to incompatibility between markdown processing
in the display component and the Tiptap editor:
1. Display component used \[\] and \(\) LaTeX delimiters
2. Tiptap Mathematics extension expects $ and 70868 delimiters
3. tiptap-markdown didn't have built-in math node serialization
4. Math syntax was lost/corrupted during editor save operations

**Solution Implemented:**
1. Created MathematicsWithMarkdown extension that adds markdown
   serialization support to Tiptap's Mathematics nodes
2. Added math delimiter normalization functions:
   - normalizeMathForEditor(): Converts LaTeX delimiters to $/70868
   - normalizeMathForDisplay(): Standardizes all delimiters to 70868
3. Updated Markdown component to use new normalization
4. Updated ReportEditor to normalize content before loading

**Changes:**
- web/src/components/editor/math-serializer.ts (new)
- web/src/components/editor/extensions.tsx
- web/src/components/editor/index.tsx
- web/src/components/deer-flow/markdown.tsx
- web/src/core/utils/markdown.ts
- web/tests/markdown-math-editor.test.ts (new)
- web/tests/markdown-katex.test.ts

**Testing:**
- Added 15 comprehensive tests for math normalization round-trip
- All tests passing (math editor + existing katex tests)
- Verified TypeScript compilation and linting

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2025-10-15 08:52:50 +08:00

100 lines
3.4 KiB
TypeScript

export function autoFixMarkdown(markdown: string): string {
return autoCloseTrailingLink(markdown);
}
/**
* Normalize math delimiters for editor consumption
* Converts display delimiters (\[...\], \\[...\\]) to $$ format
* Converts inline delimiters (\(...\), \\(...\\)) to $ format
* This ensures consistent format before loading into Tiptap editor
*/
export function normalizeMathForEditor(markdown: string): string {
let normalized = markdown;
// Convert display math - handle double backslash first to avoid conflicts
normalized = normalized
.replace(/\\\\\[([^\]]*)\\\\\]/g, (_match, content) => `$$${content}$$`) // \\[...\\] → $$...$$
.replace(/\\\[([^\]]*)\\\]/g, (_match, content) => `$$${content}$$`); // \[...\] → $$...$$
// Convert inline math - handle double backslash first to avoid conflicts
normalized = normalized
.replace(/\\\\\(([^)]*)\\\\\)/g, (_match, content) => `$${content}$`) // \\(...\\) → $...$
.replace(/\\\(([^)]*)\\\)/g, (_match, content) => `$${content}$`); // \(...\) → $...$
return normalized;
}
/**
* Normalize math delimiters for display consumption
* Ensures all math delimiters are in $$ format for remarkMath/rehypeKatex
* This is used by the Markdown display component
*/
export function normalizeMathForDisplay(markdown: string): string {
let normalized = markdown;
// Convert all LaTeX-style delimiters to $$
// Both display and inline math use $$ for display component (remarkMath handles both)
// Handle double backslash first to avoid conflicts
normalized = normalized
.replace(/\\\\\[([^\]]*)\\\\\]/g, (_match, content) => `$$${content}$$`) // \\[...\\] → $$...$$
.replace(/\\\[([^\]]*)\\\]/g, (_match, content) => `$$${content}$$`) // \[...\] → $$...$$
.replace(/\\\\\(([^)]*)\\\\\)/g, (_match, content) => `$$${content}$$`) // \\(...\\) → $$...$$
.replace(/\\\(([^)]*)\\\)/g, (_match, content) => `$$${content}$$`); // \(...\) → $$...$$
return normalized;
}
function autoCloseTrailingLink(markdown: string): string {
// Fix unclosed Markdown links or images
let fixedMarkdown: string = markdown;
// Fix unclosed image syntax ![...](...)
fixedMarkdown = fixedMarkdown.replace(
/!\[([^\]]*)\]\(([^)]*)$/g,
(match: string, altText: string, url: string): string => {
return `![${altText}](${url})`;
},
);
// Fix unclosed link syntax [...](...)
fixedMarkdown = fixedMarkdown.replace(
/\[([^\]]*)\]\(([^)]*)$/g,
(match: string, linkText: string, url: string): string => {
return `[${linkText}](${url})`;
},
);
// Fix unclosed image syntax ![...]
fixedMarkdown = fixedMarkdown.replace(
/!\[([^\]]*)$/g,
(match: string, altText: string): string => {
return `![${altText}]`;
},
);
// Fix unclosed link syntax [...]
fixedMarkdown = fixedMarkdown.replace(
/\[([^\]]*)$/g,
(match: string, linkText: string): string => {
return `[${linkText}]`;
},
);
// Fix unclosed images or links missing ")"
fixedMarkdown = fixedMarkdown.replace(
/!\[([^\]]*)\]\(([^)]*)$/g,
(match: string, altText: string, url: string): string => {
return `![${altText}](${url})`;
},
);
fixedMarkdown = fixedMarkdown.replace(
/\[([^\]]*)\]\(([^)]*)$/g,
(match: string, linkText: string, url: string): string => {
return `[${linkText}](${url})`;
},
);
return fixedMarkdown;
}