From d41d8aae1ac42b5475e0dc3234a9cb60c77c212f Mon Sep 17 00:00:00 2001
From: Arvin Xu <arvinx@foxmail.com>
Date: Sun, 26 Jan 2025 22:36:16 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20make=20latex=20always?=
 =?UTF-8?q?=20ltr=20(#253)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :bug: fix: make latex always ltr

* Update rehypePlugin.ts
---
 src/Markdown/index.tsx       | 10 +++++++---
 src/Markdown/rehypePlugin.ts | 13 +++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src/Markdown/rehypePlugin.ts

diff --git a/src/Markdown/index.tsx b/src/Markdown/index.tsx
index fa2fbe56..60051b80 100644
--- a/src/Markdown/index.tsx
+++ b/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],
     );
 
diff --git a/src/Markdown/rehypePlugin.ts b/src/Markdown/rehypePlugin.ts
new file mode 100644
index 00000000..304f558b
--- /dev/null
+++ b/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';
+    }
+  });
+};