mirror of
https://github.com/coaidev/coai.git
synced 2025-05-19 21:10:18 +09:00
Update Markdown.tsx
### Add Math Preprocessing for Markdown Component #### Summary This PR introduces preprocessing for math expressions within the Markdown component. The component now transforms inline math (e.g., `\(...\)`) to use the `$ ... $` format and block math (e.g., `\[...\]`) to use the `$$ ... $$` format. This enhancement helps in standardizing the math syntax before it’s processed by the Markdown renderer. #### Changes - **Enhanced Markdown Component:** - Added a `useMemo` hook in the `Markdown` function to preprocess the `children` content. - **Inline Math:** Replaces `\(...\)` with `$ ... $`. - **Block Math:** Replaces `\[...\]` with `\n$$\n ... \n$$\n`, ensuring that block math expressions are placed on separate lines. - **Refactoring:** - The processed content is then passed to the existing `MarkdownContent` component, preserving all existing functionalities like code highlighting, link rendering, and file block handling. #### Rationale Previously, the Markdown component did not handle the conversion of LaTeX-style math delimiters, which could lead to inconsistent rendering of math expressions. By preprocessing the content, we ensure a more robust and flexible handling of both inline and block math expressions. #### Possible Drawbacks - **Non-Mathematical Content Interference:** The preprocessing approach targets `\(...\)` and `\[...\]` delimiters universally. This means that any non-mathematical content using these delimiters for other purposes might be unintentionally transformed, potentially leading to unexpected formatting issues. #### How to Test 1. **Inline Math:** - Input: `This is inline math: \(a^2 + b^2 = c^2\)` - Expected Transformation: `This is inline math: $ a^2 + b^2 = c^2 $` 2. **Block Math:** - Input: `Here is block math: \[ \int_0^\infty e^{-x} dx \]` - Expected Transformation: ``` Here is block math: $$ \int_0^\infty e^{-x} dx $$ ``` 3. **Non-Mathematical Content:** - Ensure that content not intended as math that might incidentally use these delimiters is reviewed to avoid unexpected changes. 4. **Overall Rendering:** - Verify that the Markdown renders as expected with both math expressions and other markdown elements (e.g., code blocks, links). #### Additional Notes - The changes maintain backwards compatibility. If there are no math delimiters present, the content remains unaffected. - The updated component still supports HTML rendering based on the `acceptHtml` prop. - No changes were made to the auxiliary components (`Label`, `Link`, `Code`), ensuring that the overall markdown styling and functionalities remain consistent.
This commit is contained in:
parent
ec48ae9a51
commit
7a57d86894
@ -68,21 +68,34 @@ function Markdown({
|
|||||||
className,
|
className,
|
||||||
loading,
|
loading,
|
||||||
}: MarkdownProps) {
|
}: MarkdownProps) {
|
||||||
// memoize the component
|
const processedContent = useMemo(() => {
|
||||||
|
let content = children;
|
||||||
|
|
||||||
|
// Inline math: replace \(...\) with $ ... $
|
||||||
|
content = content.replace(/\\\((.*?)\\\)/g, (_, equation) => `$ ${equation.trim()} $`);
|
||||||
|
|
||||||
|
// Block math: replace \[...\] with $$...$$ on separate lines
|
||||||
|
content = content.replace(
|
||||||
|
/\s*\\\[\s*([\s\S]*?)\s*\\\]\s*/g,
|
||||||
|
(_, equation) => `\n$$\n${equation.trim()}\n$$\n`
|
||||||
|
);
|
||||||
|
|
||||||
|
return content;
|
||||||
|
}, [children]);
|
||||||
|
|
||||||
return useMemo(
|
return useMemo(
|
||||||
() => (
|
() => (
|
||||||
<MarkdownContent
|
<MarkdownContent
|
||||||
children={children}
|
children={processedContent}
|
||||||
acceptHtml={acceptHtml}
|
acceptHtml={acceptHtml}
|
||||||
codeStyle={codeStyle}
|
codeStyle={codeStyle}
|
||||||
className={className}
|
className={className}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
[children, acceptHtml, codeStyle, className, loading],
|
[processedContent, acceptHtml, codeStyle, className, loading],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
type CodeMarkdownProps = MarkdownProps & {
|
type CodeMarkdownProps = MarkdownProps & {
|
||||||
filename: string;
|
filename: string;
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user