From f17cff3b86cf1b2d363f97b2e5d686180cb80769 Mon Sep 17 00:00:00 2001
From: Fienny Angelina <angelinaf@angelinaf-mac.local>
Date: Thu, 29 Nov 2018 18:46:51 +0800
Subject: [PATCH] [WIP] Change syntax of the codetabs

---
 docs/api-doc-markdown.md | 16 ++++++----------
 v1/lib/core/Doc.js       | 25 +++++++++++++------------
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/docs/api-doc-markdown.md b/docs/api-doc-markdown.md
index 96c219207e7d9..346028204c678 100644
--- a/docs/api-doc-markdown.md
+++ b/docs/api-doc-markdown.md
@@ -140,18 +140,16 @@ Secondly, wrap each tab with `TAB_TITLE=[TAB_TITLE]` and `END_TAB` tag.
 
 Example:
 
-DOCUSAURUS_CODE_TABS
-TAB_TITLE=Javascript
+<!--DOCUSAURUS_CODE_TABS-->
+<!--Javascript-->
 ```js
 console.log("Hello, world!");
 ```
-END_TAB
-TAB_TITLE=Python
+<!--Python-->
 ```py
 print("Hello, world!")
 ```
-END_TAB
-TAB_TITLE=C
+<!--C-->
 ```C
 #include
 
@@ -160,16 +158,14 @@ int main(void)
     puts("Hello, world!");
 }
 ```
-END_TAB
-TAB_TITLE=Pascal
+<!--Pascal-->
 ```Pascal
 program HelloWorld;
 begin
   WriteLn('Hello, world!');
 end.
 ```
-END_TAB
-END_DOCUSAURUS_CODE_TABS
+<!--END_DOCUSAURUS_CODE_TABS-->
 
 
 ## Syntax Highlighting
diff --git a/v1/lib/core/Doc.js b/v1/lib/core/Doc.js
index 9d240aa6d6a95..5de79a31c1fa1 100644
--- a/v1/lib/core/Doc.js
+++ b/v1/lib/core/Doc.js
@@ -19,15 +19,15 @@ const translateThisDoc = translate(
 );
 
 const splitTabsToTitleAndContent = content => {
-  const tabs = content.match(/TAB_TITLE(.*?)END_TAB/gms);
-  const titleAndContentRegex = /^TAB_TITLE=([^\n]+)(.*?)END_TAB$/s;
-  if (tabs && tabs.length) {
-    return tabs.map(tab => {
-      const temp = tab.match(titleAndContentRegex);
-      return {title: temp[1], content: temp[2]};
-    });
-  }
-  return null;
+  const titles = content.match(/<!--(.*?)-->/gms);
+  const tabs = content.split(/<!--.*?-->/gms);
+  if (!titles || !tabs) return null;
+  tabs.shift();
+  const result = titles.map((title, idx) => ({
+    title: title.substring(4, title.length - 3),
+    content: tabs[idx],
+  }));
+  return result;
 };
 // inner doc component for article itself
 class Doc extends React.Component {
@@ -35,14 +35,15 @@ class Doc extends React.Component {
     const {content} = this.props;
     let inCodeTabs = false;
     const contents = content.split(
-      /(DOCUSAURUS_CODE_TABS\n)(.*?)(\nEND_DOCUSAURUS_CODE_TABS)/gms,
+      /(<!--DOCUSAURUS_CODE_TABS-->\n)(.*?)(\n<!--END_DOCUSAURUS_CODE_TABS-->)/gms,
     );
+
     const renderResult = contents.map(c => {
-      if (c === 'DOCUSAURUS_CODE_TABS\n') {
+      if (c === '<!--DOCUSAURUS_CODE_TABS-->\n') {
         inCodeTabs = true;
         return null;
       }
-      if (c === '\nEND_DOCUSAURUS_CODE_TABS') {
+      if (c === '\n<!--END_DOCUSAURUS_CODE_TABS-->') {
         inCodeTabs = false;
         return null;
       }