GfmMarkdown support remark-breaks, and hacks on rehype-github-alerts …

…for correct blockquote handling

for #2

package.json

@@ -19,6 +19,7 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "github-markdown-css": "^5.6.1",
+    "hast-util-from-html": "^2.0.1",
     "highlight.js": "^11.10.0",
     "mermaid": "^11.2.1",
     "next": "14.2.12",
@@ -27,13 +28,13 @@
     "react": "^18",
     "react-dom": "^18",
     "react-markdown": "^9.0.1",
-    "rehype-github-alerts": "^3.0.0",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-slug": "^6.0.0",
+    "remark-breaks": "^4.0.0",
     "remark-directive": "^3.0.0",
     "remark-gfm": "^4.0.0",
-    "remark-github-admonitions-to-directives": "^2.0.0"
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@types/node": "^20",

src/components/markdown/gfm-markdown-alerts.ts

@@ -1,4 +1,4 @@
-import { IAlert } from "rehype-github-alerts";
+import { IAlert } from "./rehype-plugin-github-alerts";
 
 // https://github.com/orgs/community/discussions/16925
 export const alerts: Array<IAlert> = [

src/components/markdown/gfm-markdown.tsx

@@ -1,15 +1,16 @@
 import { clsx } from "clsx";
 import Markdown from "react-markdown";
-import { rehypeGithubAlerts } from "rehype-github-alerts";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
 import rehypeSlug from "rehype-slug";
+import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
 import { PluggableList } from "unified";
 import { AnchorIdSanitizeFixer } from "./anchor-id-sanitize-fixer";
 import { alerts } from "./gfm-markdown-alerts";
 import { HighlightJsHookDynamic } from "./highlight-js-hook-dynamic";
 import { MermaidHook } from "./mermaid-hook";
+import { rehypeGithubAlerts } from "./rehype-plugin-github-alerts";
 import { imageHeightFixer, mermaidTransformer } from "./rehype-plugins";
 import "@/styles/github-markdown.css"
 import "@/styles/github-markdown-alert.css"
@@ -38,7 +39,10 @@ function CheckMarkdownFeatures(text: string): FeatureFlags {
 export default function GfmMarkdown({children, className, allowEmbedHtml, allowAnchor, ...markdownProps}: GfmMarkdownProps) {
   const flags = CheckMarkdownFeatures(children)
 
-  const remarkPlugins: PluggableList = [remarkGfm]
+  const remarkPlugins: PluggableList = [
+    remarkGfm,
+    remarkBreaks,
+  ]
   const rehypePlugins: PluggableList = []
   if (allowEmbedHtml) {
     rehypePlugins.push(rehypeRaw)
@@ -57,7 +61,6 @@ export default function GfmMarkdown({children, className, allowEmbedHtml, allowA
 
   return (
     <div className={clsx("markdown-body", className)}>
-      {allowAnchor && <AnchorIdSanitizeFixer/>}
       <Markdown
         {...markdownProps}
         remarkPlugins={remarkPlugins}
@@ -67,6 +70,7 @@ export default function GfmMarkdown({children, className, allowEmbedHtml, allowA
       </Markdown>
       {flags.hasCodeBlock && <HighlightJsHookDynamic ignoredLanguages={['mermaid']}/>}
       {flags.hasMermaid && <MermaidHook/>}
+      {allowAnchor && <AnchorIdSanitizeFixer/>}
     </div>
   )
 }