Render images inside links

sibiraj-s · Oct 27, 2021 · fd3603b · fd3603b
1 parent f4c6db5
commit fd3603b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/src/ReactParser.js b/src/ReactParser.js
@@ -14,6 +14,8 @@ class ReactParser {
   }
 
   parse(tokens) {
+    const { langPrefix } = this.options;
+
     return tokens.map((token) => {
       switch (token.type) {
         case 'space': {
@@ -50,7 +52,7 @@ class ReactParser {
         }
 
         case 'code': {
-          const lang = token.lang ? `${this.options.langPrefix}${token.lang}` : null;
+          const lang = token.lang ? `${langPrefix}${token.lang}` : null;
           return this.renderer.code(token.text, lang);
         }
 
@@ -90,6 +92,8 @@ class ReactParser {
   }
 
   parseInline(tokens) {
+    const { baseURL, openLinksInNewTab } = this.options;
+
     return tokens.map((token) => {
       switch (token.type) {
         case 'text': {
@@ -121,12 +125,12 @@ class ReactParser {
         }
 
         case 'link': {
-          const href = joinBase(token.href, this.options.baseURL);
-          return this.renderer.link(href, token.text, this.options.openLinksInNewTab);
+          const href = joinBase(token.href, baseURL);
+          return this.renderer.link(href, this.parseInline(token.tokens), openLinksInNewTab);
         }
 
         case 'image': {
-          const href = joinBase(token.href, this.options.baseURL);
+          const href = joinBase(token.href, baseURL);
           return this.renderer.image(href, token.text, token.title);
         }
 

diff --git a/tests/markdown.spec.js b/tests/markdown.spec.js
@@ -87,13 +87,13 @@ const cases = [
   },
   {
     title: 'render unordered lists',
-    markdown: '- option 1\n- option 2',
-    html: '<ul><li>option 1</li><li>option 2</li></ul>',
+    markdown: '- option-1\n- option-2',
+    html: '<ul><li>option-1</li><li>option-2</li></ul>',
   },
   {
     title: 'render ordered lists',
-    markdown: '1. option 1\n2. option 2',
-    html: '<ol><li>option 1</li><li>option 2</li></ol>',
+    markdown: '1. option-1\n2. option-2',
+    html: '<ol><li>option-1</li><li>option-2</li></ol>',
   },
   {
     title: 'render codeblocks',
@@ -147,8 +147,8 @@ const cases = [
   },
   {
     title: 'should render table',
-    markdown: '|CellHead|\n|--|\n|CellBody|',
-    html: '<table><thead><tr><th>CellHead</th></tr></thead><tbody><tr><td>CellBody</td></tr></tbody></table>',
+    markdown: '|Head|\n|--|\n|Body|',
+    html: '<table><thead><tr><th>Head</th></tr></thead><tbody><tr><td>Body</td></tr></tbody></table>',
   },
   {
     title: 'should render br tag',
@@ -166,6 +166,11 @@ const cases = [
     markdown: '\n\n\n',
     html: '',
   },
+  {
+    title: 'should parse images inside links',
+    markdown: '[![Tests](https://p.com/i.png)](https://p.com)',
+    html: '<p><a href="https://p.com" target="_blank"><img src="https://p.com/i.png" alt="Tests"/></a></p>',
+  },
 ];
 
 test.each(cases)('should $title', ({ markdown, html, props = null }) => {