💄 style: make latex always ltr (#253)

* 🐛 fix: make latex always ltr

* Update rehypePlugin.ts

Author: arvinxx

src/Markdown/index.tsx

@@ -23,6 +23,7 @@ import type { AProps } from '@/types';
 import { CodeFullFeatured, CodeLite } from './CodeBlock';
 import type { TypographyProps } from './Typography';
 import { useStyles as useMarkdownStyles } from './markdown.style';
+import { rehypeKatexDir } from './rehypePlugin';
 import { useStyles } from './style';
 import { escapeBrackets, escapeMhchem, fixMarkdownBold } from './utils';
 
@@ -139,9 +140,12 @@ const Markdown = memo<MarkdownProps>(
 
     const memoRehypePlugins = useMemo(
       () =>
-        [allowHtml && rehypeRaw, enableLatex && rehypeKatex, ...innerRehypePlugins].filter(
-          Boolean,
-        ) as any,
+        [
+          allowHtml && rehypeRaw,
+          enableLatex && rehypeKatex,
+          enableLatex && rehypeKatexDir,
+          ...innerRehypePlugins,
+        ].filter(Boolean) as any,
       [allowHtml, enableLatex, ...innerRehypePlugins],
     );
 

src/Markdown/rehypePlugin.ts

@@ -0,0 +1,13 @@
+// katex-directive
+// 给 class="katex" 的节点加上 dir="ltr" 属性
+import type { Node } from 'unist';
+import { visit } from 'unist-util-visit';
+
+// eslint-disable-next-line unicorn/consistent-function-scoping
+export const rehypeKatexDir = () => (tree: Node) => {
+  visit(tree, 'element', (node: any) => {
+    if (node.properties?.className?.includes('katex')) {
+      node.properties.dir = 'ltr';
+    }
+  });
+};