From 7441d3359e679b08d8a2c904dac4151dcfaa0135 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Mon, 4 Jul 2022 14:06:33 +0800
Subject: [PATCH] refactor(console): add support to toc internal link in
 connector README

---
 .../console/src/components/Markdown/index.tsx | 79 +++++++++++++------
 1 file changed, 54 insertions(+), 25 deletions(-)

diff --git a/packages/console/src/components/Markdown/index.tsx b/packages/console/src/components/Markdown/index.tsx
index efc7b7b79..fc56bc518 100644
--- a/packages/console/src/components/Markdown/index.tsx
+++ b/packages/console/src/components/Markdown/index.tsx
@@ -1,5 +1,6 @@
+import { conditionalString, Optional } from '@silverhand/essentials';
 import classNames from 'classnames';
-import React from 'react';
+import React, { memo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
@@ -12,29 +13,57 @@ type Props = {
   children: string;
 };
 
-const Markdown = ({ className, children }: Props) => (
-  <ReactMarkdown
-    remarkPlugins={[remarkGfm]}
-    className={classNames(styles.markdown, className)}
-    components={{
-      code: ({ node, inline, className, children, ...props }) => {
-        const [, codeBlockType] = /language-(\w+)/.exec(className ?? '') ?? [];
+const Markdown = ({ className, children }: Props) => {
+  const tocIdSet = React.useRef<Set<string>>(new Set());
 
-        return inline ? (
-          <code className={styles.inlineCode} {...props}>
-            {children}
-          </code>
-        ) : (
-          <CodeEditor isReadonly language={codeBlockType} value={String(children)} />
-        );
-      },
-      img: ({ src, alt }) => {
-        return <GithubRawImage src={src} alt={alt} />;
-      },
-    }}
-  >
-    {children}
-  </ReactMarkdown>
-);
+  const generateTocId = (text: string): Optional<string> => {
+    const resolveIdCollision = (kebabCaseString: string, index = 0): string => {
+      const result = `${kebabCaseString}${conditionalString(index && `-${index}`)}`;
 
-export default Markdown;
+      if (!tocIdSet.current.has(result)) {
+        tocIdSet.current.add(result);
+
+        return result;
+      }
+
+      return resolveIdCollision(kebabCaseString, index + 1);
+    };
+
+    const initialKebabCaseString = text.replace(/\s/g, '-').toLowerCase();
+
+    return resolveIdCollision(initialKebabCaseString);
+  };
+
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      className={classNames(styles.markdown, className)}
+      components={{
+        code: ({ node, inline, className, children, ...props }) => {
+          const [, codeBlockType] = /language-(\w+)/.exec(className ?? '') ?? [];
+
+          return inline ? (
+            <code className={styles.inlineCode} {...props}>
+              {children}
+            </code>
+          ) : (
+            <CodeEditor isReadonly language={codeBlockType} value={String(children)} />
+          );
+        },
+        img: ({ src, alt }) => {
+          return <GithubRawImage src={src} alt={alt} />;
+        },
+        h1: ({ children }) => <h1 id={generateTocId(String(children))}>{children}</h1>,
+        h2: ({ children }) => <h2 id={generateTocId(String(children))}>{children}</h2>,
+        h3: ({ children }) => <h3 id={generateTocId(String(children))}>{children}</h3>,
+        h4: ({ children }) => <h4 id={generateTocId(String(children))}>{children}</h4>,
+        h5: ({ children }) => <h5 id={generateTocId(String(children))}>{children}</h5>,
+        h6: ({ children }) => <h6 id={generateTocId(String(children))}>{children}</h6>,
+      }}
+    >
+      {children}
+    </ReactMarkdown>
+  );
+};
+
+export default memo(Markdown);