From ba4e78d7b8ef256c171b06070e2874dc4fffa8b5 Mon Sep 17 00:00:00 2001
From: Phodal Huang <h@phodal.com>
Date: Sat, 11 Dec 2021 13:54:57 +0800
Subject: [PATCH] feat(render): add heading support

---
 .../components/my-component/quake-render.tsx  | 50 ++++++++++++++++++-
 .../quake-render/src/utils/quake-gen.ts       | 23 ++++++---
 2 files changed, 63 insertions(+), 10 deletions(-)

diff --git a/quake_webapp/quake-render/src/components/my-component/quake-render.tsx b/quake_webapp/quake-render/src/components/my-component/quake-render.tsx
index 827a0233..ab1e1936 100644
--- a/quake_webapp/quake-render/src/components/my-component/quake-render.tsx
+++ b/quake_webapp/quake-render/src/components/my-component/quake-render.tsx
@@ -13,8 +13,19 @@ export class QuakeRender {
     let content = `# [heading+](https://quake.inherd.org)
 > blockquote
 
+# h1
+## h2
+### h3
+#### h4
+##### h5
+###### h6
+
 ---
 
+123
+
+456
+
 `;
     this.markdownData = new QuakeGen(content).gen();
   }
@@ -31,7 +42,8 @@ export class QuakeRender {
     let temp: string;
     switch (item.type) {
       case 'heading':
-        temp = <h1 innerHTML={item.text} class='quake-heading' id={item.anchor} />;
+        console.log(item);
+        temp = this.create_heading(item);
         break;
       case 'blockquote':
         temp = <blockquote innerHTML={item.text} />;
@@ -39,10 +51,44 @@ export class QuakeRender {
       case 'hr':
         temp = <hr />;
         break;
+      case 'paragraph':
+        temp = <p innerHTML={item.data} />;
+        break;
+      case 'space':
+        break;
       default:
-        temp = <div>233</div>;
+        console.log(item);
+        temp = <span/>;
     }
 
     return temp;
   }
+
+  private static create_heading(item: any) {
+    let heading: string;
+    switch (item.depth) {
+      case 1:
+        heading = <h1 innerHTML={item.text} class='quake-heading' id={item.anchor} />
+        break;
+      case 2:
+        heading = <h2 innerHTML={item.text} class='quake-heading' id={item.anchor} />
+        break;
+      case 3:
+        heading = <h3 innerHTML={item.text} class='quake-heading' id={item.anchor} />
+        break;
+      case 4:
+        heading = <h4 innerHTML={item.text} class='quake-heading' id={item.anchor} />
+        break;
+      case 5:
+        heading = <h5 innerHTML={item.text} class='quake-heading' id={item.anchor} />
+        break;
+      case 6:
+        heading = <h6 innerHTML={item.text} class='quake-heading' id={item.anchor} />
+        break;
+      default:
+        console.log(item);
+    }
+
+    return heading
+  }
 }
diff --git a/quake_webapp/quake-render/src/utils/quake-gen.ts b/quake_webapp/quake-render/src/utils/quake-gen.ts
index 40b70ba1..b076298f 100644
--- a/quake_webapp/quake-render/src/utils/quake-gen.ts
+++ b/quake_webapp/quake-render/src/utils/quake-gen.ts
@@ -35,29 +35,36 @@ class QuakeGen {
       this.tok();
     }
 
-    return this.markdownData
+    return this.markdownData;
   }
 
   private tok() {
     const token: Token = this.token;
     switch (token.type) {
       case 'heading':
-        const inline = this.renderInline(token.text);
-        console.log(inline);
         this.markdownData.push({
           type: 'heading',
           depth: token.depth,
-          text: inline,
+          text: this.renderInline(token.text),
           headingIndex: this.headingIndex,
-          anchor: this.slugger.slug(this.unescape(inline)),
+          anchor: this.slugger.slug(this.unescape(this.renderInline(token.text))),
         });
         break;
       case 'blockquote':
-        console.log(token.tokens);
-        this.markdownData.push({type: 'blockquote', text: token.text, raw: token.raw});
+        this.markdownData.push({ type: 'blockquote', text: token.text, raw: token.raw });
         break;
       case 'hr':
-        this.markdownData.push({type: 'hr', raw: token.raw});
+        this.markdownData.push({ type: 'hr', raw: token.raw });
+        break;
+      case 'space':
+        this.markdownData.push({ type: 'space', raw: token.raw });
+        break;
+      case 'paragraph':
+        this.markdownData.push({
+          type: 'paragraph',
+          data: this.renderInline(token.text),
+        });
+        break;
       default:
         console.log(token);
     }