refactor: refactor code tab split

.eslintignore

@@ -9,3 +9,4 @@ website/
 scripts
 packages/docusaurus-1.x/lib/core/metadata.js
 packages/docusaurus-1.x/lib/core/MetadataBlog.js
+packages/docusaurus-1.x/lib/core/__tests__/split-tab.test.js

package.json

@@ -15,6 +15,8 @@
  "devDependencies": {
  "babel-core": "^7.0.0-0",
  "babel-eslint": "8",
+ "enzyme": "^3.9.0",
+ "enzyme-adapter-react-16": "^1.12.1",
  "eslint": "4.x",
  "eslint-config-airbnb": "17.1.0",
  "eslint-config-prettier": "^2.9.0",

packages/docusaurus-1.x/lib/core/Doc.js

@@ -19,20 +19,120 @@ const translateThisDoc = translate(
  'Translate this Doc|recruitment message asking to translate the docs',
 );
 
-const splitTabsToTitleAndContent = content => {
- const titles = content.match(/<!--(.*?)-->/gms);
- const tabs = content.split(/<!--.*?-->/gms);
- if (!titles || !tabs || !titles.length || !tabs.length) {
- return [];
+const splitTabsToTitleAndContent = (lines, indents) => {
+ let first = false;
+ let inBlock = false;
+ let whitespace = false;
+ const tc = [];
+ let current = {
+ content: [],
+ };
+ lines.forEach(line => {
+ if (indents) {
+ line = line.replace(new RegExp(`^((\\t|\\s{4}){${indents}})`, 'g'), '');
+ }
+ let pos = 0;
+ const end = line.length;
+ const isToken = (cline, cpos, ...chars) => {
+ for (let i = 0; i < chars.length; i++) {
+ if (cline.charCodeAt(cpos) !== chars[i]) {
+ return false;
+ }
+ cpos++;
+ }
+ return true;
+ };
+ while (pos + 1 < end) {
+ // Skip all the whitespace when we first start the scan.
+ for (let max = end; pos < max; pos++) {
+ if (line.charCodeAt(pos) !== 0x20 && line.charCodeAt(pos) !== 0x0a) {
+ break;
+ }
+ whitespace = true;
+ }
+ // Check for the start of a comment: <!--
+ // If we're in a code block we skip it.
+ if (
+ isToken(
+ line,
+ pos,
+ 0x3c /* < */,
+ 0x21 /* ! */,
+ 0x2d /* - */,
+ 0x2d /* - */,
+ ) &&
+ !inBlock
+ ) {
+ if (current !== null && current.title !== undefined) {
+ tc.push({
+ title: current.title,
+ content: current.content.join('\n'),
+ });
+ current = {
+ content: [],
+ };
+ }
+ first = true;
+ pos += 4;
+ let b0;
+ let b1;
+ const buf = [];
+ // Add all characters to the title buffer until
+ // we reach the end marker: -->
+ for (let max = end; pos < max; pos++) {
+ const b = line.charCodeAt(pos);
+ if (b0 === 0x2d /* - */ && b1 === 0x2d /* - */) {
+ if (b !== 0x3e /* > */) {
+ throw new Error(`Invalid comment sequence "--"`);
+ }
+ break;
+ }
+ buf.push(b);
+ b0 = b1;
+ b1 = b;
+ }
+ // Clear the line out before we add it to content.
+ // This also means tabs can only be defined on a line by itself.
+ line = '\n';
+ // Trim the last 2 characters: --
+ current.title = String.fromCharCode(...buf)
+ .substring(0, buf.length - 2)
+ .trim();
+ }
+ // If the first thing in a code tab is not a title it's invalid.
+ if (!first) {
+ throw new Error(`Invalid code tab markdown`);
+ }
+ // Check for code block: ```
+ // If the line begins with whitespace we don't consider it a code block.
+ if (
+ isToken(line, pos, 0x60 /* ` */, 0x60 /* ` */, 0x60 /* ` */) &&
+ !whitespace
+ ) {
+ pos += 3;
+ inBlock = !inBlock;
+ }
+ pos++;
+ whitespace = false;
+ }
+ current.content.push(line);
+ });
+ if (current !== null && current.title !== undefined) {
+ tc.push({
+ title: current.title,
+ content: current.content.join('\n'),
+ });
  }
- tabs.shift();
- return titles.map((title, idx) => ({
- title: title.substring(4, title.length - 3).trim(),
- content: tabs[idx],
- }));
+ return tc;
 };
 
-const cleanTheCodeTag = content => {
+const cleanTheCodeTag = (content, indents) => {
+ const prepend = (line, indent) => {
+ if (indent) {
+ return ' '.repeat(indent) + line;
+ }
+ return line;
+ };
  const contents = content.split(/(<pre>)(.*?)(<\/pre>)/gms);
  let inCodeBlock = false;
  const cleanContents = contents.map(c => {
@@ -47,7 +147,7 @@ const cleanTheCodeTag = content => {
  if (inCodeBlock) {
  return c.replace(/\n/g, '<br />');
  }
- return c;
+ return prepend(c, indents);
  });
  return cleanContents.join('');
 };
@@ -56,32 +156,43 @@ const cleanTheCodeTag = content => {
 class Doc extends React.Component {
  renderContent() {
  const {content} = this.props;
- let inCodeTabs = false;
- const contents = content.split(
- /(<!--DOCUSAURUS_CODE_TABS-->\n)(.*?)(\n<!--END_DOCUSAURUS_CODE_TABS-->)/gms,
- );
-
- const renderResult = contents.map(c => {
- if (c === '<!--DOCUSAURUS_CODE_TABS-->\n') {
- inCodeTabs = true;
- return '';
- }
- if (c === '\n<!--END_DOCUSAURUS_CODE_TABS-->') {
- inCodeTabs = false;
- return '';
- }
- if (inCodeTabs) {
+ let indents = 0;
+ return content.replace(
+ /(\t|\s{4})*?(<!--DOCUSAURUS_CODE_TABS-->\n)(.*?)((\n|\t|\s{4})<!--END_DOCUSAURUS_CODE_TABS-->)/gms,
+ m => {
+ const contents = m.split('\n').filter(c => {
+ if (!indents) {
+ indents = (
+ c.match(/((\t|\s{4})+)<!--DOCUSAURUS_CODE_TABS-->/) || []
+ ).length;
+ }
+ if (c.match(/(\t|\s{4})+<!--DOCUSAURUS_CODE_TABS-->/)) {
+ return false;
+ }
+ if (
+ c.match(
+ /<!--END_DOCUSAURUS_CODE_TABS-->|<!--DOCUSAURUS_CODE_TABS-->/,
+ ) ||
+ (indents > 0 &&
+ c.match(
+ /(\t|\s{4})+(<!--END_DOCUSAURUS_CODE_TABS-->|<!--DOCUSAURUS_CODE_TABS-->)/,
+ ))
+ ) {
+ return false;
+ }
+ return true;
+ });
+ if (indents) {
+ indents -= 1;
+ }
  const codeTabsMarkdownBlock = renderToStaticMarkup(
  <CodeTabsMarkdownBlock>
- {splitTabsToTitleAndContent(c)}
+ {splitTabsToTitleAndContent(contents, indents)}
  </CodeTabsMarkdownBlock>,
  );
- return cleanTheCodeTag(codeTabsMarkdownBlock);
- }
- return c;
- });
-
- return renderResult.join('');
+ return cleanTheCodeTag(codeTabsMarkdownBlock, indents);
+ },
+ );
  }
 
  render() {

packages/docusaurus-1.x/lib/core/__tests__/__fixtures__/split-tab_doc1.md

@@ -0,0 +1,29 @@
+<!--DOCUSAURUS_CODE_TABS-->
+<!--JavaScript-->
+```js
+console.log('Hello, world!');
+```
+<!--Python-->
+```py
+print('Hello, world!')
+```
+
+<!--C-->
+```C
+#include <stdio.h>
+
+int main() {
+ printf("Hello World!");
+ return 0;
+}
+```
+
+<!--Pascal-->
+```Pascal
+program HelloWorld;
+begin
+ WriteLn('Hello, world!');
+end.
+```
+
+<!--END_DOCUSAURUS_CODE_TABS-->

packages/docusaurus-1.x/lib/core/__tests__/__fixtures__/split-tab_doc2.md

@@ -0,0 +1,32 @@
+1. Doc
+ * Hello
+ <!--DOCUSAURUS_CODE_TABS-->
+ <!--JavaScript-->
+ ```js
+ console.log('Hello, world!');
+ ```
+ <!--Python-->
+ ```py
+ print('Hello, world!')
+ ```
+
+ <!--C-->
+ ```C
+ #include <stdio.h>
+
+ int main() {
+ printf("Hello World!");
+ return 0;
+ }
+ ```
+
+ <!--Pascal-->
+ ```Pascal
+ program HelloWorld;
+ begin
+ WriteLn('Hello, world!');
+ end.
+ ```
+
+ <!--END_DOCUSAURUS_CODE_TABS-->
+ 1. Do that

packages/docusaurus-1.x/lib/core/__tests__/__fixtures__/website/i18n/en.json

@@ -0,0 +1,10 @@
+{
+ "_comment": "This file is auto-generated by write-translations.js",
+ "localized-strings": {
+ },
+ "pages-strings": {
+ "Help Translate|recruit community translators for your project": "Help Us Translate",
+ "Edit this Doc|recruitment message asking to edit the doc source": "Edit",
+ "Translate this Doc|recruitment message asking to translate the docs": "Translate"
+ }
+}

packages/docusaurus-1.x/lib/core/__tests__/__fixtures__/website/siteConfig.js

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* List of projects/orgs using your project for the users page */
+
+const siteConfig = {
+ title: 'Docusaurus',
+ tagline: 'Easy to Maintain Open Source Documentation Websites',
+ url: 'https://docusaurus.io',
+ baseUrl: '/',
+ organizationName: 'facebook',
+ projectName: 'Docusaurus',
+ cname: 'docusaurus.io',
+ noIndex: false,
+ editUrl: 'https://github.com/facebook/docusaurus/edit/master/docs/',
+ headerLinks: [],
+ headerIcon: 'img/docusaurus.svg',
+ footerIcon: 'img/docusaurus_monochrome.svg',
+ favicon: 'img/docusaurus.ico',
+ algolia: {
+ apiKey: '3eb9507824b8be89e7a199ecaa1a9d2c',
+ indexName: 'docusaurus',
+ algoliaOptions: {
+ facetFilters: ['language:LANGUAGE', 'version:VERSION'],
+ },
+ },
+ colors: {
+ primaryColor: '#2E8555',
+ secondaryColor: '#205C3B',
+ },
+ translationRecruitingLink: 'https://crowdin.com/project/docusaurus',
+ copyright: `Copyright © ${new Date().getFullYear()} Facebook Inc.`,
+ usePrism: ['jsx'],
+ highlight: {
+ theme: 'atom-one-dark',
+ },
+ scripts: [
+ 'https://buttons.github.io/buttons.js',
+ 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
+ '/js/code-blocks-buttons.js',
+ ],
+ gaTrackingId: 'UA-44373548-31',
+ facebookAppId: '199138890728411',
+ facebookComments: true,
+ twitter: 'true',
+ twitterUsername: 'docusaurus',
+ ogImage: 'img/docusaurus.png',
+ twitterImage: 'img/docusaurus.png',
+ onPageNav: 'separate',
+ cleanUrl: true,
+ scrollToTop: true,
+ scrollToTopOptions: {
+ zIndex: 100,
+ },
+ enableUpdateTime: true,
+ enableUpdateBy: true,
+ docsSideNavCollapsible: true,
+};
+
+module.exports = siteConfig;