minor: remove elements covering href elements

README.md

@@ -1,8 +1,8 @@
 # @luma-dev/my-katex
 
 > [!WARNING]
-> このパッケージが提供するプラグインは私のユースケースに特化したものなので，直接使うのは推奨しません．  
-> The plugins provided by this package are specific to my use case, so I do not recommend using them directly!
+> このパッケージは私のユースケースに特化したものなので，直接使うのは推奨しません．  
+> This package is specific to my use case, so I do not recommend using them directly!
 
 下記の通りCC0でライセンスしていますので，コピペしてご利用することをおすすめします．
 

example/main.tsx

@@ -3,8 +3,19 @@ import ReactDOM from "react-dom/client";
 import { renderKatex } from "../src/main.js";
 import { toReactStyle } from "../src/react.js";
 
-const App = () => {
-  const [value, setValue] = React.useState("x^2 + 2x + 1 = 0");
+const examples = [
+  String.raw`
+    \begin{matrix*}[l]
+      \begin{pmatrix}
+        a\\
+      \end{pmatrix}
+      \\
+      \kern{0.2em}\href{a}{a}
+    \end{matrix*}
+  `,
+];
+
+const Render: React.FC<{ value: string }> = ({ value }) => {
   const k = renderKatex<React.ReactNode>(
     value,
     (props) => {
@@ -26,6 +37,11 @@ const App = () => {
       displayMode: true,
     },
   );
+  return <div>{k}</div>;
+};
+
+const App = () => {
+  const [value, setValue] = React.useState("x^2 + 2x + 1 = 0");
   return (
     <div>
       <h1>@luma-dev/my-katex Example</h1>
@@ -34,7 +50,14 @@ const App = () => {
         onChange={(e) => setValue(e.target.value)}
         style={{ width: "100%", height: "100px" }}
       />
-      <div>{k}</div>
+      <Render value={value} />
+      <h2>Examples</h2>
+      {examples.map((value, i) => (
+        <div key={i}>
+          <h3>Example {i + 1}</h3>
+          <Render value={value} />
+        </div>
+      ))}
     </div>
   );
 };

package.json

@@ -48,6 +48,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@luma-dev/unist-util-visit-fast": "^1.0.1",
     "inline-style-parser": "^0.2.2",
     "katex": "^0.16.9",
     "rehype-parse": "^9.0.0",

src/main.ts

@@ -1,6 +1,7 @@
 import { unified } from "unified";
 import rehypeParse from "rehype-parse";
 import katex from "katex";
+import { visit } from "@luma-dev/unist-util-visit-fast";
 
 const parseHtml = unified().use(rehypeParse, { fragment: true });
 
@@ -33,6 +34,24 @@ export const renderKatex = <T>(
 ): T => {
   const r = katex.renderToString(input, options);
   const p = parseHtml.parse(r);
+  visit(p, (node) => {
+    if (node.type === "element") {
+      const ch0 = node.children[0];
+      const ch1 = node.children[1];
+      if (ch0?.type === "element" && ch1?.type === "element") {
+        const className0 = ch0.properties.className;
+        const className1 = ch1.properties.className;
+        if (
+          Array.isArray(className0) &&
+          Array.isArray(className1) &&
+          className0[0] === "vlist-r" &&
+          className1[0] === "vlist-r"
+        ) {
+          node.children.pop();
+        }
+      }
+    }
+  });
   const dfs = (node: any): T => {
     return renderer({
       renderedChildren: node.children?.map(dfs) ?? [],

tsconfig.json

@@ -3,6 +3,7 @@
     "strict": true,
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
+    "noUncheckedIndexedAccess": true,
     "skipLibCheck": true,
     "target": "ES2022",
     "outDir": "dist",