feat: support remark-gfm (#32)

cnodejs · Jan 21, 2022 · 3ab9622 · 3ab9622
1 parent 859338b
commit 3ab9622
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "rehype-raw": "^6.1.1",
     "rehype-sanitize": "^5.0.1",
     "rehype-stringify": "^9.0.2",
+    "remark-gfm": "^3.0.1",
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
     "unified": "^10.1.1"

diff --git a/src/component/Markdown/index.tsx b/src/component/Markdown/index.tsx
@@ -3,54 +3,58 @@ import { unified } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import rehypeAttr from 'rehype-attr';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import rehypeStringify from 'rehype-stringify';
+import type { Schema } from 'hast-util-sanitize';
 
 import MdEditor from 'react-markdown-editor-lite';
 // import 'react-markdown-editor-lite/esm/index.less';
 
 import * as styles from './index.less';
 
+const CONFIG_MAP = {
+  render: {
+    view: {
+      menu: false,
+      md: false,
+      html: true,
+    },
+    classname: styles.markdown_render,
+  },
+  editor: {
+    view: {
+      menu: true,
+      md: true,
+      html: false,
+    },
+    classname: styles.markdown_editor,
+  },
+};
+
+const CONFIG_SCHEMA: Schema = {
+  ...defaultSchema,
+  attributes: {
+    ...defaultSchema.attributes,
+    img: [...(defaultSchema?.attributes?.img || []), ['style']],
+  },
+};
+
 const processor = unified()
   .use(remarkParse)
+  .use(remarkGfm)
   .use(remarkRehype, { allowDangerousHtml: true })
   .use(rehypeRaw)
   .use(rehypeAttr, { properties: 'attr' })
-  .use(rehypeSanitize, {
-    ...defaultSchema,
-    attributes: {
-      ...defaultSchema.attributes,
-      img: [...(defaultSchema?.attributes?.img || []), ['style']],
-    },
-  })
+  .use(rehypeSanitize, CONFIG_SCHEMA)
   .use(rehypeStringify);
 
 const Markdown: React.FC<Props> = (props) => {
   const { value = '', type, onChange, customClassName = '' } = props;
+  const { view, classname: defaultClassName } = CONFIG_MAP[type];
 
-  let view;
-  let classname = styles.markdown;
-
-  if (type === 'render') {
-    view = {
-      menu: false,
-      md: false,
-      html: true,
-    };
-
-    classname += ` ${styles.markdown_render}`;
-  }
-
-  if (type === 'editor') {
-    view = {
-      menu: true,
-      md: true,
-      html: false,
-    };
-
-    classname += ` ${styles.markdown_editor}`;
-  }
+  let classname = `${styles.markdown} ${defaultClassName}`;
 
   if (customClassName) {
     classname += ` ${customClassName}`;
@@ -63,8 +67,8 @@ const Markdown: React.FC<Props> = (props) => {
       view={view}
       value={value}
       renderHTML={async (text) => {
-        const content: any = await processor.process(text);
-        return content.value;
+        const content = await processor.process(text);
+        return content.toString();
       }}
       onChange={(data) => {
         onChange && onChange(data.text);
@@ -77,7 +81,8 @@ export default Markdown;
 
 interface Props {
   type: 'editor' | 'render';
+  customClassName?: string;
+
   value?: string;
-  customClassName?: '';
   onChange?: (text: string) => void;
 }
diff --git a/src/page/about/index.tsx b/src/page/about/index.tsx
@@ -10,20 +10,20 @@ CNode 社区由一批热爱 Node.js 技术的工程师发起，目前已经吸
 
 CNode 的 SLA 保证是，一个9，即 90.000000%。
 
-社区目前由 [@alsotang](http://cnodejs.org/user/alsotang) 在维护，有问题请联系：[https://github.com/alsotang](https://github.com/alsotang)
+社区目前由 [@alsotang](http://cnodejs.org/user/alsotang) 在维护，有问题请联系：https://github.com/alsotang
 
-请关注我们的官方微博：[http://weibo.com/cnodejs](http://weibo.com/cnodejs)
+请关注我们的官方微博：http://weibo.com/cnodejs
 
 
 ## 客户端
 
 客户端由 [@soliury](https://cnodejs.org/user/soliury) 开发维护。
 
-源码地址： [https://github.com/soliury/noder-react-native](https://github.com/soliury/noder-react-native) 。
+源码地址： https://github.com/soliury/noder-react-native 。
 
 立即体验 CNode 客户端，直接扫描页面右侧二维码。
 
-另，安卓用户同时可选择：[https://github.com/TakWolf/CNode-Material-Design](https://github.com/TakWolf/CNode-Material-Design) ，这是 Java 原生开发的安卓客户端。
+另，安卓用户同时可选择：https://github.com/TakWolf/CNode-Material-Design ，这是 Java 原生开发的安卓客户端。
 
 
 ## 贡献者