feat: code block tab (#1063)

* Try to find a way to recognize the codeblock tabs, its title, and
where it ends
- I try using DOCUSAURUS_CODE_TABS to mark the start
- Use TAB_TITLE to mark the title of the tab
- END_TAB to mark the end of that tab
- END_DOCUSAURUS_CODE_TABS to mark the end of the whole code blocks
then parse using regex and render accordingly

* Added on click hook

* Added example on how to write it, how to use it, how it will look like can be reverted later

* Fix css error

* - Move addEventListener part to lib/static
- Remove comments

* Add documentation

* Remove examples

* Change syntax of the codetabs

v1/lib/core/CodeTabsMarkdownBlock.js

@@ -0,0 +1,50 @@
+import _ from 'lodash';
+
+const React = require('react');
+const Remarkable = require('./Remarkable');
+
+/**
+ * The MarkdownBlock component is used to parse markdown and render to HTML.
+ */
+class MarkdownBlock extends React.Component {
+  render() {
+    const groupId = _.uniqueId();
+
+    const tabs = this.props.children.map(({title, content}) => ({
+      id: _.uniqueId(),
+      groupId,
+      label: title,
+      lang: title,
+      panelContent: <Remarkable source={content} />,
+    }));
+
+    return (
+      <div className="tabs">
+        <div className="nav-tabs">
+          {tabs.map((t, i) => (
+            <div
+              className={`nav-link${i === 0 ? ' active' : ''}`}
+              id={`${t.id}-tab`}
+              data-group={`group_${t.groupId}`}
+              data-tab={`tabpanel_${t.id}`}>
+              {t.label}
+            </div>
+          ))}
+        </div>
+        <div className="tab-content">
+          {tabs.map((t, i) => (
+            <div
+              className={`tab-pane${i === 0 ? ' active' : ''}`}
+              data-group={`group_${t.groupId}`}
+              tabIndex="-1"
+              id={`tabpanel_${t.id}`}>
+              {t.panelContent}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+module.exports = MarkdownBlock;