mirror of
https://gitee.com/wanwujie/deer-flow
synced 2026-04-14 02:34:46 +08:00
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>
This commit is contained in:
committed by
Willem Jiang
parent
24e2d86f7b
commit
58c1743ed5
@@ -3,7 +3,7 @@ import assert from "node:assert/strict";
|
||||
|
||||
import katex from "katex";
|
||||
|
||||
import { katexOptions } from "../src/core/markdown/katex";
|
||||
import { katexOptions } from "../src/core/markdown/katex.ts";
|
||||
|
||||
function render(expression: string) {
|
||||
return katex.renderToString(expression, {
|
||||
|
||||
119
web/tests/markdown-math-editor.test.ts
Normal file
119
web/tests/markdown-math-editor.test.ts
Normal file
@@ -0,0 +1,119 @@
|
||||
import { describe, it } from "node:test";
|
||||
import assert from "node:assert/strict";
|
||||
|
||||
import { normalizeMathForEditor, normalizeMathForDisplay } from "../src/core/utils/markdown.ts";
|
||||
|
||||
describe("markdown math normalization for editor", () => {
|
||||
it("converts LaTeX display delimiters to $$ for editor", () => {
|
||||
const input = "Here is a formula \\[E=mc^2\\] in the text.";
|
||||
const output = normalizeMathForEditor(input);
|
||||
assert.strictEqual(output, "Here is a formula $$E=mc^2$$ in the text.");
|
||||
});
|
||||
|
||||
it("converts escaped LaTeX display delimiters to $$ for editor", () => {
|
||||
const input = "Formula \\\\[x^2 + y^2 = z^2\\\\] here.";
|
||||
const output = normalizeMathForEditor(input);
|
||||
assert.strictEqual(output, "Formula $$x^2 + y^2 = z^2$$ here.");
|
||||
});
|
||||
|
||||
it("converts LaTeX inline delimiters to $ for editor", () => {
|
||||
const input = "Inline formula \\(a + b = c\\) in text.";
|
||||
const output = normalizeMathForEditor(input);
|
||||
assert.strictEqual(output, "Inline formula $a + b = c$ in text.");
|
||||
});
|
||||
|
||||
it("converts escaped LaTeX inline delimiters to $ for editor", () => {
|
||||
const input = "Inline \\\\(x = 5\\\\) here.";
|
||||
const output = normalizeMathForEditor(input);
|
||||
assert.strictEqual(output, "Inline $x = 5$ here.");
|
||||
});
|
||||
|
||||
it("handles mixed delimiters for editor", () => {
|
||||
const input = "Display \\[E=mc^2\\] and inline \\(F=ma\\) formulas.";
|
||||
const output = normalizeMathForEditor(input);
|
||||
assert.strictEqual(output, "Display $$E=mc^2$$ and inline $F=ma$ formulas.");
|
||||
});
|
||||
|
||||
it("preserves already normalized math syntax for editor", () => {
|
||||
const input = "Already normalized $$E=mc^2$$ and $F=ma$ formulas.";
|
||||
const output = normalizeMathForEditor(input);
|
||||
assert.strictEqual(output, "Already normalized $$E=mc^2$$ and $F=ma$ formulas.");
|
||||
});
|
||||
});
|
||||
|
||||
describe("markdown math normalization for display", () => {
|
||||
it("converts LaTeX display delimiters to $$ for display", () => {
|
||||
const input = "Here is a formula \\[E=mc^2\\] in the text.";
|
||||
const output = normalizeMathForDisplay(input);
|
||||
assert.strictEqual(output, "Here is a formula $$E=mc^2$$ in the text.");
|
||||
});
|
||||
|
||||
it("converts escaped LaTeX display delimiters to $$ for display", () => {
|
||||
const input = "Formula \\\\[x^2 + y^2 = z^2\\\\] here.";
|
||||
const output = normalizeMathForDisplay(input);
|
||||
assert.strictEqual(output, "Formula $$x^2 + y^2 = z^2$$ here.");
|
||||
});
|
||||
|
||||
it("converts LaTeX inline delimiters to $$ for display", () => {
|
||||
const input = "Inline formula \\(a + b = c\\) in text.";
|
||||
const output = normalizeMathForDisplay(input);
|
||||
assert.strictEqual(output, "Inline formula $$a + b = c$$ in text.");
|
||||
});
|
||||
|
||||
it("converts escaped LaTeX inline delimiters to $$ for display", () => {
|
||||
const input = "Inline \\\\(x = 5\\\\) here.";
|
||||
const output = normalizeMathForDisplay(input);
|
||||
assert.strictEqual(output, "Inline $$x = 5$$ here.");
|
||||
});
|
||||
|
||||
it("handles mixed delimiters for display", () => {
|
||||
const input = "Display \\[E=mc^2\\] and inline \\(F=ma\\) formulas.";
|
||||
const output = normalizeMathForDisplay(input);
|
||||
assert.strictEqual(output, "Display $$E=mc^2$$ and inline $$F=ma$$ formulas.");
|
||||
});
|
||||
|
||||
it("handles complex physics formulas", () => {
|
||||
const input = "Maxwell equation: \\[\\nabla \\times \\vec{E} = -\\frac{\\partial \\vec{B}}{\\partial t}\\]";
|
||||
const output = normalizeMathForDisplay(input);
|
||||
assert.ok(output.includes("$$"));
|
||||
assert.ok(output.includes("nabla"));
|
||||
});
|
||||
});
|
||||
|
||||
describe("markdown math round-trip consistency", () => {
|
||||
it("handles editor normalization consistently", () => {
|
||||
const original = "Formula \\[E=mc^2\\] and \\(F=ma\\)";
|
||||
const forEditor = normalizeMathForEditor(original);
|
||||
|
||||
// Simulate editor output (should have $ and $$)
|
||||
assert.ok(forEditor.includes("$$"));
|
||||
assert.ok(forEditor.includes("$"));
|
||||
});
|
||||
|
||||
it("handles multiple formulas correctly", () => {
|
||||
const input = `
|
||||
# Physics Formulas
|
||||
|
||||
Energy: \\[E = mc^2\\]
|
||||
|
||||
Force: \\(F = ma\\)
|
||||
|
||||
Momentum: \\[p = mv\\]
|
||||
`;
|
||||
|
||||
const forEditor = normalizeMathForEditor(input);
|
||||
const forDisplay = normalizeMathForDisplay(input);
|
||||
|
||||
// Both should have converted the delimiters
|
||||
assert.ok(forEditor.includes("$$"));
|
||||
assert.ok(forDisplay.includes("$$"));
|
||||
});
|
||||
|
||||
it("preserves text content around formulas", () => {
|
||||
const input = "Text before \\[E=mc^2\\] text after";
|
||||
const output = normalizeMathForEditor(input);
|
||||
|
||||
assert.ok(output.startsWith("Text before"));
|
||||
assert.ok(output.endsWith("text after"));
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user