mirror of
https://gitee.com/wanwujie/deer-flow
synced 2026-04-28 00:04:47 +08:00
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>
100 lines
3.4 KiB
TypeScript
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 ``;
|
|
},
|
|
);
|
|
|
|
// 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 ``;
|
|
},
|
|
);
|
|
|
|
fixedMarkdown = fixedMarkdown.replace(
|
|
/\[([^\]]*)\]\(([^)]*)$/g,
|
|
(match: string, linkText: string, url: string): string => {
|
|
return `[${linkText}](${url})`;
|
|
},
|
|
);
|
|
|
|
return fixedMarkdown;
|
|
}
|