From a1d36be61c3e383459d7c6cf35bb37ce6d56a339 Mon Sep 17 00:00:00 2001
From: Fienny Angelina <24544912+fiennyangeln@users.noreply.github.com>
Date: Wed, 27 Feb 2019 00:56:30 +0800
Subject: [PATCH] fix: make referenced links work with code block tabs (#1249)

* Fix bug Code block tabs broke the referenced links

- The reason is that the previous Codeblock implementation separates
the tabs, the markdown before tabs, and the markdown after tabs into
separate Remarkable component, thus they don't share information
regarding the reference link
- To solve this, change the Doc implementation so that one Doc
have only one Remarkable component by transforming the codeblock
into html string and add it as part of the markdown, letting the
Remarkable take care of the html string
- However, this approach made us need to ensure that there is no
newline in the codetab, otherwise, the formatting inside the
code will be broken. Thus, I replace every newline inside the
code tag with a br tag

Fix #1215

* Fix prettier
---
 v1/lib/core/Doc.js | 40 ++++++++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/v1/lib/core/Doc.js b/v1/lib/core/Doc.js
index c42fe493bf..d31505f0bb 100644
--- a/v1/lib/core/Doc.js
+++ b/v1/lib/core/Doc.js
@@ -6,6 +6,7 @@
  */
 
 const React = require('react');
+const {renderToStaticMarkup} = require('react-dom/server');
 const MarkdownBlock = require('./MarkdownBlock.js');
 const CodeTabsMarkdownBlock = require('./CodeTabsMarkdownBlock.js');
 
@@ -31,6 +32,26 @@ const splitTabsToTitleAndContent = content => {
   }));
 };
 
+const cleanTheCodeTag = content => {
+  const contents = content.split(/(<pre>)(.*?)(<\/pre>)/gms);
+  let inCodeBlock = false;
+  const cleanContents = contents.map(c => {
+    if (c === '<pre>') {
+      inCodeBlock = true;
+      return c;
+    }
+    if (c === '</pre>') {
+      inCodeBlock = false;
+      return c;
+    }
+    if (inCodeBlock) {
+      return c.replace(/\n/g, '<br />');
+    }
+    return c;
+  });
+  return cleanContents.join('');
+};
+
 // inner doc component for article itself
 class Doc extends React.Component {
   renderContent() {
@@ -40,26 +61,27 @@ class Doc extends React.Component {
       /(<!--DOCUSAURUS_CODE_TABS-->\n)(.*?)(\n<!--END_DOCUSAURUS_CODE_TABS-->)/gms,
     );
 
-    const renderResult = contents.map((c, index) => {
+    const renderResult = contents.map(c => {
       if (c === '<!--DOCUSAURUS_CODE_TABS-->\n') {
         inCodeTabs = true;
-        return null;
+        return '';
       }
       if (c === '\n<!--END_DOCUSAURUS_CODE_TABS-->') {
         inCodeTabs = false;
-        return null;
+        return '';
       }
       if (inCodeTabs) {
-        return (
+        const codeTabsMarkdownBlock = renderToStaticMarkup(
           <CodeTabsMarkdownBlock>
             {splitTabsToTitleAndContent(c)}
-          </CodeTabsMarkdownBlock>
+          </CodeTabsMarkdownBlock>,
         );
+        return cleanTheCodeTag(codeTabsMarkdownBlock);
       }
-      return <MarkdownBlock key={index}>{c}</MarkdownBlock>;
+      return c;
     });
 
-    return renderResult;
+    return renderResult.join('');
   }
 
   render() {
@@ -110,7 +132,9 @@ class Doc extends React.Component {
             <h1 className="postHeaderTitle">{this.props.title}</h1>
           )}
         </header>
-        <article>{this.renderContent()}</article>
+        <article>
+          <MarkdownBlock>{this.renderContent()}</MarkdownBlock>
+        </article>
       </div>
     );
   }