feat(render): add heading support

phodal · Dec 11, 2021 · ba4e78d · ba4e78d
1 parent 7ac5f56
commit ba4e78d
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 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
@@ -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,18 +42,53 @@ 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} />;
         break;
       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
@@ -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);
     }