From 5e9ef8f3b1dc6f266e766da557d459e6f6bf40be Mon Sep 17 00:00:00 2001 From: Luma Date: Tue, 6 Feb 2024 03:01:08 +0900 Subject: [PATCH] minor: remove elements covering href elements --- README.md | 4 +-- example/main.tsx | 29 +++++++++++++++-- package-lock.json | 83 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/main.ts | 19 +++++++++++ tsconfig.json | 1 + 6 files changed, 132 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a230910..1e9e56d 100644 --- a/README.md +++ b/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でライセンスしていますので，コピペしてご利用することをおすすめします． diff --git a/example/main.tsx b/example/main.tsx index 202ab13..0bbfeff 100644 --- a/example/main.tsx +++ b/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( value, (props) => { @@ -26,6 +37,11 @@ const App = () => { displayMode: true, }, ); + return
{k}
; +}; + +const App = () => { + const [value, setValue] = React.useState("x^2 + 2x + 1 = 0"); return (

@luma-dev/my-katex Example

@@ -34,7 +50,14 @@ const App = () => { onChange={(e) => setValue(e.target.value)} style={{ width: "100%", height: "100px" }} /> -
{k}
+ +

Examples

+ {examples.map((value, i) => ( +
+

Example {i + 1}

+ +
+ ))}
); }; diff --git a/package-lock.json b/package-lock.json index 7434f4b..80f2a31 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0-dev", "license": "CC0-1.0", "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", @@ -719,6 +720,20 @@ "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", "dev": true }, + "node_modules/@luma-dev/unist-util-visit-fast": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@luma-dev/unist-util-visit-fast/-/unist-util-visit-fast-1.0.1.tgz", + "integrity": "sha512-ZMRRzj8UEOgcvRaIYQJRGn+6sFgNvpw7PMzAtcm78YhTF3IhYdpyYi9Fa/BKeL+BFjoNc4Ns8MUJeSrM7SNK9w==", + "dependencies": { + "hast-util-to-text": "4", + "yaml": "2", + "zod": "3" + }, + "engines": { + "node": ">=20", + "npm": ">=10" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -3423,6 +3438,18 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hast-util-is-element": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz", + "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==", + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-parse-selector": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz", @@ -3435,6 +3462,21 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hast-util-to-text": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.0.tgz", + "integrity": "sha512-EWiE1FSArNBPUo1cKWtzqgnuRQwEeQbQtnFJRYV1hb1BWDgrAlBU0ExptvZMM/KSA82cDpm2sFGf3Dmc5Mza3w==", + "dependencies": { + "@types/hast": "^3.0.0", + "@types/unist": "^3.0.0", + "hast-util-is-element": "^3.0.0", + "unist-util-find-after": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hastscript": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-8.0.0.tgz", @@ -8638,6 +8680,31 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/unist-util-find-after": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz", + "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unist-util-is": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", + "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==", + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/unist-util-stringify-position": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", @@ -8975,6 +9042,14 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/yaml": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", + "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==", + "engines": { + "node": ">= 14" + } + }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", @@ -9013,6 +9088,14 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zod": { + "version": "3.22.4", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz", + "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } } } } diff --git a/package.json b/package.json index bb2baa1..ed2935c 100644 --- a/package.json +++ b/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", diff --git a/src/main.ts b/src/main.ts index 336a2c4..7ed99bf 100644 --- a/src/main.ts +++ b/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 => { 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) ?? [], diff --git a/tsconfig.json b/tsconfig.json index 59fc197..83c3cf0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,6 +3,7 @@ "strict": true, "module": "NodeNext", "moduleResolution": "NodeNext", + "noUncheckedIndexedAccess": true, "skipLibCheck": true, "target": "ES2022", "outDir": "dist",