feat: export Markdown component for reusing (#90)

Author: JounQin

.changeset/proud-boats-wink.md

@@ -0,0 +1,5 @@
+---
+"@alauda/doom": minor
+---
+
+feat: export `Markdown` component for reusing

package.json

@@ -58,17 +58,17 @@
   },
   "dependencies": {
     "@cspell/eslint-plugin": "^8.19.4 || ^9.0.2",
-    "@eslint-react/eslint-plugin": "^1.51.3",
+    "@eslint-react/eslint-plugin": "^1.52.1",
     "@inquirer/prompts": "^7.5.3",
     "@openapi-contrib/openapi-schema-to-json-schema": "^5.1.0",
     "@playwright/browser-chromium": "^1.53.0",
     "@rsbuild/plugin-react": "^1.3.2",
     "@rsbuild/plugin-sass": "^1.3.2",
     "@rsbuild/plugin-svgr": "^1.2.0",
     "@rsbuild/plugin-yaml": "^1.0.2",
-    "@rspress/core": "2.0.0-beta.13",
-    "@rspress/plugin-algolia": "2.0.0-beta.13",
-    "@rspress/plugin-llms": "2.0.0-beta.13",
+    "@rspress/core": "2.0.0-beta.14",
+    "@rspress/plugin-algolia": "2.0.0-beta.14",
+    "@rspress/plugin-llms": "2.0.0-beta.14",
     "@shikijs/transformers": "^3.6.0",
     "@total-typescript/ts-reset": "^0.6.1",
     "chokidar": "^4.0.3",
@@ -91,6 +91,8 @@
     "picomatch": "^4.0.2",
     "playwright": "^1.53.0",
     "react-markdown": "^10.1.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
     "remark-directive": "^4.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
@@ -117,13 +119,13 @@
     "@types/ejs": "^3.1.5",
     "@types/node": "^22.15.31",
     "@types/picomatch": "^4.0.0",
-    "@types/react": "^19.1.7",
+    "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/swagger2openapi": "^7.0.4",
     "@unts/patch-package": "^8.1.1",
     "clean-pkg-json": "^1.3.0",
     "eslint-import-resolver-typescript": "^4.4.3",
-    "eslint-plugin-import-x": "^4.15.1",
+    "eslint-plugin-import-x": "^4.15.2",
     "eslint-plugin-react-hooks": "^5.2.0",
     "nano-staged": "^0.8.0",
     "npm-run-all2": "^8.0.4",

src/runtime/components/K8sCrd.tsx

@@ -10,7 +10,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useIsPrint, useTranslation } from '../hooks/index.js'
 
 import { Directive } from './Directive.js'
-import { Markdown } from './_Markdown.js'
+import { Markdown } from './Markdown.js'
 import { X } from './_X.js'
 
 export interface K8sCrdProps {

src/runtime/components/_Markdown.tsx src/runtime/components/Markdown.tsxsrc/runtime/components/_Markdown.tsx renamed to src/runtime/components/Markdown.tsx

@@ -1,15 +1,20 @@
 import { type ElementType } from 'react'
 import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
 import remarkGfm from 'remark-gfm'
 
 import { X } from './_X.js'
 
+const remarkPlugins = [remarkGfm]
+const rehypePlugins = [rehypeRaw, rehypeSanitize]
+
 export const Markdown = ({ children }: { children?: string }) =>
   children && (
     <ReactMarkdown
-      remarkPlugins={[[remarkGfm]]}
+      remarkPlugins={remarkPlugins}
+      rehypePlugins={rehypePlugins}
       components={X as Record<string, ElementType>}
-      skipHtml={true}
     >
       {children}
     </ReactMarkdown>

src/runtime/components/OpenAPIPath.tsx

@@ -8,9 +8,9 @@ import { Fragment, useId, useMemo, type ReactNode } from 'react'
 
 import { omitRoutePathRefs, resolveRef } from '../utils.js'
 
+import { Markdown } from './Markdown.js'
 import { OpenAPIProperties, OpenAPIProperty, OpenAPIRef } from './OpenAPIRef.js'
 import { HeadingTitle } from './_HeadingTitle.js'
-import { Markdown } from './_Markdown.js'
 import { RefLink } from './_RefLink.js'
 import { X } from './_X.js'
 

src/runtime/components/OpenAPIRef.tsx

@@ -5,8 +5,8 @@ import { type ReactNode, useId, useMemo } from 'react'
 
 import { modelName, omitRoutePathRefs, resolveRef } from '../utils.js'
 
+import { Markdown } from './Markdown.js'
 import { HeadingTitle } from './_HeadingTitle.js'
-import { Markdown } from './_Markdown.js'
 import { RefLink } from './_RefLink.js'
 import { X } from './_X.js'
 

src/runtime/components/index.ts

@@ -10,6 +10,7 @@ export * from './JsonViewer.js'
 export * from './K8sCrd.js'
 export * from './K8sPermissionTable.js'
 export * from './LinkCard.js'
+export * from './Markdown.js'
 export * from './Mermaid.js'
 export * from './OpenAPIPath.js'
 export * from './OpenAPIRef.js'