The code preview does not show the text after the first line when using the Katex preview

[felipe1120gomez]

When you do not use the Katex preview, the blocks or lines of code show all the content

But when you use the Katex preview, the blocks or lines of code only show the first line of the content

As you can see the string is complete and even if you increase the size of the container to min-height: 5rem; the string is not shown complete

If you use the mermaid preview this error does not occur

Finally, as you can see, this error occurs in the github readme so I think it happens in all cases.

In my nextJs 13.3 app with "@uiw/react-md-editor": "^3.23.6" also happens

Thanks in advance for the help

[jaywcjlove]

@felipe1120gomez https://codesandbox.io/embed/headless-frog-em8yg?fontsize=14&hidenavigation=1&theme=dark

Support Custom KaTeX Preview

KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web, We perform math rendering through KaTeX.

The following example is preview in CodeSandbox.

⚠️ Upgrade v2 to v3 d025430

npm install katex

import React from "react";
import MDEditor from '@uiw/react-md-editor';
import { getCodeString } from 'rehype-rewrite';
import katex from 'katex';
import 'katex/dist/katex.css';

const mdKaTeX = `This is to display the 
\`\$\$\c = \\pm\\sqrt{a^2 + b^2}\$\$\`
 in one line

\`\`\`KaTeX
c = \\pm\\sqrt{a^2 + b^2}
\`\`\`

\`\`\`css
.w-md-editor-text-input,
.w-md-editor-text-pre > code,
.w-md-editor-text-pre {
  font-size: 2rem !important;
  line-height: 2.5rem !important;
}
\`\`\`
`;

export default function App() {
  const [value, setValue] = React.useState(mdKaTeX);
  return (
    <MDEditor
      value={value}
      onChange={(val) => setValue(val)}
      previewOptions={{
        components: {
          code: ({ inline, children = [], className, ...props }) => {
            const txt = children[0] || '';
            if (inline) {
              if (typeof txt === 'string' && /^\$\$(.*)\$\$/.test(txt)) {
                const html = katex.renderToString(txt.replace(/^\$\$(.*)\$\$/, '$1'), {
                  throwOnError: false,
                });
                return <code dangerouslySetInnerHTML={{ __html: html }} />;
              }
              return <code>{txt}</code>;
            }
            const code = props.node && props.node.children ? getCodeString(props.node.children) : txt;
            if (
              typeof code === 'string' &&
              typeof className === 'string' &&
              /^language-katex/.test(className.toLocaleLowerCase())
            ) {
              const html = katex.renderToString(code, {
                throwOnError: false,
              });
              return <code style={{ fontSize: '150%' }} dangerouslySetInnerHTML={{ __html: html }} />;
            }
            return <code className={String(className)}>{children}</code>;
          },
        },
      }}
    />
  );
}

[jaywcjlove]

@felipe1120gomez There is a little error in the official example, I modified it.

[felipe1120gomez]

Thank you so much