refactor(render): move inline render to render component

phodal · Dec 11, 2021 · 3cc5a14 · 3cc5a14
1 parent 4fdb592
commit 3cc5a14
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 79 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
@@ -1,6 +1,5 @@
 import { Component, h, State } from '@stencil/core';
 import QuakeDown from '../../utils/quake-down';
-import { marked } from 'marked';
 
 @Component({
   tag: 'quake-render',
@@ -58,8 +57,7 @@ some_link [[note:0001-demo]] fdas
 sample
 `;
 
-    let renderer = new marked.Renderer();
-    this.markdownData = new QuakeDown(content, renderer).gen();
+    this.markdownData = new QuakeDown(content, this.parseInline).gen();
   }
 
   render() {
@@ -168,4 +166,67 @@ sample
       </ul>;
     }
   }
+
+  parseInline(tokens, renderer) {
+    let out = '',
+      i,
+      token;
+
+    const l = tokens.length;
+    for (i = 0; i < l; i++) {
+      token = tokens[i];
+
+      switch (token.type) {
+        case 'escape': {
+          out += renderer.text(token.text);
+          break;
+        }
+        case 'html': {
+          out += renderer.html(token.text);
+          break;
+        }
+        case 'link': {
+          out += renderer.link(token.href, token.title, this.parseInline(token.tokens, renderer));
+          break;
+        }
+        case 'image': {
+          out += renderer.image(token.href, token.title, token.text);
+          break;
+        }
+        case 'strong': {
+          out += renderer.strong(this.parseInline(token.tokens, renderer));
+          break;
+        }
+        case 'em': {
+          out += renderer.em(this.parseInline(token.tokens, renderer));
+          break;
+        }
+        case 'codespan': {
+          out += renderer.codespan(token.text);
+          break;
+        }
+        case 'br': {
+          out += renderer.br();
+          break;
+        }
+        case 'del': {
+          out += renderer.del(this.parseInline(token.tokens, renderer));
+          break;
+        }
+        case 'text': {
+          out += renderer.text(token.text);
+          break;
+        }
+        case 'page_link': {
+          out += `<a href="#">${token.raw}</a>`;
+          break;
+        }
+        default: {
+          const errMsg = 'Token with "' + token.type + '" type was not found.';
+          console.error(errMsg);
+        }
+      }
+    }
+    return out;
+  }
 }
diff --git a/quake_webapp/quake-render/src/utils/quake-down.sepc.ts b/quake_webapp/quake-render/src/utils/quake-down.sepc.ts
@@ -1,16 +1,9 @@
-import QuakeDown from './quake-down';
-import { marked } from 'marked';
-
 describe('render', () => {
   it('render heading', () => {
-    let renderer = new marked.Renderer();
-    let data = new QuakeDown('# heading+', renderer).gen();
-    expect(data.length).toEqual(1);
+
   });
 
   it('render heading with links', () => {
-    let renderer = new marked.Renderer();
-    let data = new QuakeDown('# [heading+](https://quake.inherd.org)', renderer).gen();
-    expect(data.length).toEqual(1);
+
   });
 });
diff --git a/quake_webapp/quake-render/src/utils/quake-down.ts b/quake_webapp/quake-render/src/utils/quake-down.ts
@@ -1,19 +1,20 @@
 import { marked, Slugger } from 'marked';
 import TokensList = marked.TokensList;
-import { h } from '@stencil/core';
 
 class QuakeDown {
   content = '';
   tokens: TokensList | any = [];
   markdownData: any[] = [];
   slugger = new Slugger();
 
+  parseInline: (tokens, renderer) => string;
+
   headingIndex = 0;
 
   renderer: marked.Renderer;
 
-  constructor(content: string, renderer: marked.Renderer) {
-    this.renderer = renderer;
+  constructor(content: string, parseInline: (tokens, renderer) => string) {
+    this.parseInline = parseInline;
     this.content = content;
   }
 
@@ -186,70 +187,6 @@ class QuakeDown {
       return '';
     });
   }
-
-  // todo: parse inline
-  parseInline(tokens, renderer) {
-    let out = '',
-      i,
-      token;
-
-    const l = tokens.length;
-    for (i = 0; i < l; i++) {
-      token = tokens[i];
-
-      switch (token.type) {
-        case 'escape': {
-          out += renderer.text(token.text);
-          break;
-        }
-        case 'html': {
-          out += renderer.html(token.text);
-          break;
-        }
-        case 'link': {
-          out += renderer.link(token.href, token.title, this.parseInline(token.tokens, renderer));
-          break;
-        }
-        case 'image': {
-          out += renderer.image(token.href, token.title, token.text);
-          break;
-        }
-        case 'strong': {
-          out += renderer.strong(this.parseInline(token.tokens, renderer));
-          break;
-        }
-        case 'em': {
-          out += renderer.em(this.parseInline(token.tokens, renderer));
-          break;
-        }
-        case 'codespan': {
-          out += renderer.codespan(token.text);
-          break;
-        }
-        case 'br': {
-          out += renderer.br();
-          break;
-        }
-        case 'del': {
-          out += renderer.del(this.parseInline(token.tokens, renderer));
-          break;
-        }
-        case 'text': {
-          out += renderer.text(token.text);
-          break;
-        }
-        case 'page_link': {
-          out += `<a href="#">${token.raw}</a>`;
-          break;
-        }
-        default: {
-          const errMsg = 'Token with "' + token.type + '" type was not found.';
-          console.error(errMsg);
-        }
-      }
-    }
-    return out;
-  }
 }
 
 export default QuakeDown;