feat(umi-plugin): support to write markdown in demo desc field (#75)

umijs · Feb 1, 2020 · 553c0ac · 553c0ac
1 parent ee58843
commit 553c0ac
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git a/packages/umi-plugin-father-doc/src/themes/default/previewer.less b/packages/umi-plugin-father-doc/src/themes/default/previewer.less
@@ -16,6 +16,14 @@
       border-top: 1px solid @c-border;
     }
 
+    .markdown > p:first-child {
+      margin-top: 0;
+    }
+
+    .markdown > p:last-child {
+      margin-bottom: 0;
+    }
+
     &[title] {
       position: relative;
       margin-top: 6px;

diff --git a/packages/umi-plugin-father-doc/src/themes/default/previewer.tsx b/packages/umi-plugin-father-doc/src/themes/default/previewer.tsx
@@ -155,9 +155,11 @@ ${issueLink}`,
         >
           {children}
         </div>
-        <div className="__father-doc-default-previewer-desc" title={title}>
-          {desc}
-        </div>
+        <div
+          className="__father-doc-default-previewer-desc"
+          title={title}
+          dangerouslySetInnerHTML={{ __html: desc }}
+        />
         <div className="__father-doc-default-previewer-actions">
           <CsbButton
             type={this.props.source.tsx ? 'tsx' : 'jsx'}

diff --git a/packages/umi-plugin-father-doc/src/transformer/index.ts b/packages/umi-plugin-father-doc/src/transformer/index.ts
@@ -15,6 +15,7 @@ export default function () {
 
 export interface TransformResult {
   content: string;
+  html?: string;
   config: {
     [key: string]: any;
   };
@@ -42,6 +43,7 @@ export default {
 
     return {
       content,
+      html: result.contents as string,
       config: {
         ...(result.data as TransformResult['config']),
       },

diff --git a/packages/umi-plugin-father-doc/src/transformer/remark/previewer.ts b/packages/umi-plugin-father-doc/src/transformer/remark/previewer.ts
@@ -1,7 +1,8 @@
 import { Node } from 'unist';
 import visit from 'unist-util-visit';
 import toHtml from 'hast-util-to-html';
-import transformer, { DEMO_COMPONENT_NAME } from '../demo';
+import demoTransformer, { DEMO_COMPONENT_NAME } from '../demo';
+import transformer from '../index';
 
 function visitor(node, i, parent) {
   if (node.tagName === 'div' && node.properties?.type === 'previewer') {
@@ -11,6 +12,13 @@ function visitor(node, i, parent) {
     const yaml = node.properties?.meta || {};
     let transformCode = raw;
 
+    // transform markdown for previewer desc field
+    Object.keys(yaml).forEach(key => {
+      if (/^desc(\.|$)/.test(key)) {
+        yaml[key] = transformer.markdown(yaml[key], '').html;
+      }
+    });
+
     // use import way rather than source code way for external demo (for HMR & sourcemap)
     if (node.properties.filePath) {
       transformCode = `
@@ -20,7 +28,7 @@ import Demo from '${node.properties.filePath}';
 export default () => <Demo />;`;
     }
 
-    const code = transformer(transformCode, Boolean(tsx));
+    const code = demoTransformer(transformCode, Boolean(tsx));
 
     // replace original node
     parent.children[i] = {