feat(render): #12 add pure render

phodal · Apr 3, 2020 · ece0b1a · ece0b1a
1 parent 4362eba
commit ece0b1a
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 30 deletions.
diff --git a/src/app/presentation/ledge-helper/ledge-helper.component.ts b/src/app/presentation/ledge-helper/ledge-helper.component.ts
@@ -7,7 +7,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LedgeHelperComponent implements OnInit {
   content = `
-# Syntax Test
+# Ledge 语法帮助
+
+ - list
+ - item
+ + a
+   + a
+
+> blockquote
+
+分割线
+
+----
 
 \`\`\`list-style
  - 开源工具采用

diff --git a/src/app/shared/components/model/ledge-markdown-converter.ts b/src/app/shared/components/model/ledge-markdown-converter.ts
@@ -35,11 +35,11 @@ const LedgeMarkdownConverter = {
           result += ']';
           break;
         }
-        case 'table' : {
+        case 'table': {
           const cells = this.transpose(token.cells);
           tables.push({
             header: token.header,
-            cells
+            cells,
           });
           break;
         }
@@ -50,6 +50,8 @@ const LedgeMarkdownConverter = {
           }
           break;
         }
+        case 'space':
+          break;
         default: {
           console.log(token);
         }
@@ -70,8 +72,8 @@ const LedgeMarkdownConverter = {
       console.error(e);
     }
 
-    return {tables, config, lists};
-  }
+    return { tables, config, lists };
+  },
 };
 
 export default LedgeMarkdownConverter;
diff --git a/src/app/shared/ledge-render/ledge-render.component.html b/src/app/shared/ledge-render/ledge-render.component.html
@@ -113,6 +113,10 @@ <h6 *ngIf="item.depth === 6">{{item.text}}</h6>
       </pre>
     </div>
 
+    <div *ngSwitchCase="'blockquote'">
+      <blockquote>{{item.text}}</blockquote>
+    </div>
+
     <div *ngSwitchDefault>
       {{stringify(item)}}
     </div>

diff --git a/src/app/shared/ledge-render/ledge-render.component.ts b/src/app/shared/ledge-render/ledge-render.component.ts
@@ -7,8 +7,7 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import marked from 'marked/lib/marked';
-import { LedgeChartModel } from '../components/model/ledge-chart.model';
-import { Tokens, TokensList } from 'marked';
+import { Token, Tokens, TokensList } from 'marked';
 import LedgeMarkdownConverter from '../components/model/ledge-markdown-converter';
 
 @Component({
@@ -19,9 +18,9 @@ import LedgeMarkdownConverter from '../components/model/ledge-markdown-converter
 export class LedgeRenderComponent implements OnInit, AfterViewInit, OnChanges {
   @Input()
   content: string;
-
-  charts: LedgeChartModel[] = [];
   markdownData: any[] = [];
+  token: null;
+  tokens: TokensList | any = [];
 
   constructor() {}
 
@@ -40,36 +39,59 @@ export class LedgeRenderComponent implements OnInit, AfterViewInit, OnChanges {
   private renderContent(content: string) {
     this.markdownData = [];
     const tokens = marked.lexer(content);
-    this.buildData(tokens);
+    this.tokens = tokens.reverse();
+
+    while (this.next()) {
+      this.tok();
+    }
+  }
+
+  next(): Token {
+    this.token = this.tokens.pop();
+    return this.token;
+  }
+
+  peek() {
+    return this.tokens[this.tokens.length - 1] || 0;
   }
 
-  private buildData(tokens: TokensList) {
-    for (const token of tokens) {
-      switch (token.type) {
-        case 'table':
-          this.markdownData.push(token);
-          break;
-        case 'code':
-          this.handleCode(token);
-          break;
-        case 'paragraph':
-          this.handleParaGraph(token, tokens);
-          break;
-        case 'space':
-          break;
-        default:
-          this.markdownData.push(token);
-          break;
-      }
+  private tok() {
+    const token: Token = this.token;
+    switch (token.type) {
+      case 'table':
+        this.markdownData.push(token);
+        break;
+      case 'code':
+        this.handleCode(token);
+        break;
+      case 'space':
+        break;
+      case 'blockquote_start':
+        let body = '';
+        while (this.next().type !== 'blockquote_end') {
+          body += this.tok();
+        }
+        this.markdownData.push({ type: 'blockquote', text: body });
+        break;
+      case 'paragraph':
+        return this.handleParaGraph(token);
+      case 'text':
+        return token.text;
+      default:
+        console.log(token);
+        this.markdownData.push(token);
+        break;
     }
   }
 
-  private handleParaGraph(token: marked.Tokens.Paragraph, tokens: TokensList) {
-    const inline = marked.inlineLexer(token.text, tokens.links);
+  private handleParaGraph(token: marked.Tokens.Paragraph) {
+    const inline = marked.inlineLexer(token.text, this.tokens.links);
     this.markdownData.push({
       type: 'paragraph',
       data: inline,
     });
+
+    return inline;
   }
 
   private handleCode(token: marked.Tokens.Code) {