Skip to content

Commit

Permalink
Fix code tab list bug
Browse files Browse the repository at this point in the history
  • Loading branch information
Zach Badgett committed Apr 29, 2019
1 parent a6d8f25 commit 20ba2f2
Show file tree
Hide file tree
Showing 5 changed files with 242 additions and 159 deletions.
64 changes: 38 additions & 26 deletions packages/docusaurus-1.x/lib/core/Doc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@ const translateThisDoc = translate(
'Translate this Doc|recruitment message asking to translate the docs',
);

const splitTabsToTitleAndContent = content => {
const lines = content.split(/\n/g);
const splitTabsToTitleAndContent = (lines, indented) => {
let first = false;
let inBlock = false;
let whitespace = false;
Expand All @@ -29,6 +28,9 @@ const splitTabsToTitleAndContent = content => {
content: [],
};
lines.forEach(line => {
if (indented) {
line = line.replace(/^(\t|\s{4})/gs, '');
}
let pos = 0;
const end = line.length;
const isToken = (cline, cpos, ...chars) => {
Expand Down Expand Up @@ -124,7 +126,13 @@ const splitTabsToTitleAndContent = content => {
return tc;
};

const cleanTheCodeTag = content => {
const cleanTheCodeTag = (content, indented) => {
const prepend = (line, indent) => {
if (indent) {
return ' ' + line;
}
return line;
};
const contents = content.split(/(<pre>)(.*?)(<\/pre>)/gms);
let inCodeBlock = false;
const cleanContents = contents.map(c => {
Expand All @@ -139,7 +147,7 @@ const cleanTheCodeTag = content => {
if (inCodeBlock) {
return c.replace(/\n/g, '<br />');
}
return c;
return prepend(c, indented);
});
return cleanContents.join('');
};
Expand All @@ -148,32 +156,36 @@ 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 indented = false;
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 (c.match(/(\t|\s{4})<!--DOCUSAURUS_CODE_TABS-->/)) {
indented = true;
return false;
}
if (
c.match(
/<!--END_DOCUSAURUS_CODE_TABS-->|<!--DOCUSAURUS_CODE_TABS-->/,
) ||
(indented &&
c.match(
/(\t|\s{4})(<!--END_DOCUSAURUS_CODE_TABS-->|<!--DOCUSAURUS_CODE_TABS-->)/,
))
) {
return false;
}
return true;
});
const codeTabsMarkdownBlock = renderToStaticMarkup(
<CodeTabsMarkdownBlock>
{splitTabsToTitleAndContent(c)}
{splitTabsToTitleAndContent(contents, indented)}
</CodeTabsMarkdownBlock>,
);
return cleanTheCodeTag(codeTabsMarkdownBlock);
}
return c;
});

return renderResult.join('');
return cleanTheCodeTag(codeTabsMarkdownBlock, indented);
},
);
}

render() {
Expand Down
29 changes: 29 additions & 0 deletions packages/docusaurus-1.x/lib/core/__tests__/__fixtures__/split-tab_doc1.md
View file
Original file line number Diff line number Diff line change
@@ -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-->
31 changes: 31 additions & 0 deletions packages/docusaurus-1.x/lib/core/__tests__/__fixtures__/split-tab_doc2.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
1. Doc
<!--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
127 changes: 79 additions & 48 deletions packages/docusaurus-1.x/lib/core/__tests__/split-tab.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,59 +11,86 @@ process.cwd = () => `${__dirname}/__fixtures__/website`;
const React = require('react');
const {configure, mount} = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
const fs = require('fs');
const _ = require('lodash');
const Doc = require('../Doc.js');

configure({adapter: new Adapter()});

describe('when code tabs are used correctly', () => {
let props;
// clear unique id counter
_.uniqueId = _.runInContext().uniqueId;
const props = {
content: fs.readFileSync(
`${__dirname}/__fixtures__/split-tab_doc1.md`,
'utf-8',
),
metadata: {},
config: {},
};
let mountedDoc;
const docPage = () => {
if (!mountedDoc) {
mountedDoc = mount(<Doc {...props} />);
}
return mountedDoc;
};
beforeEach(() => {
props = {
content: `
<!--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-->
`,
metadata: {},
config: {},
};
mountedDoc = undefined;
const page = docPage();
it('renders tabs correctly', () => {
const node = page.getDOMNode();
const firstTab = node.querySelector('[data-tab$="-content-2"]').textContent;
expect('JavaScript').toEqual(firstTab);
const secondTab = node.querySelector('[data-tab$="-content-3"]')
.textContent;
expect('Python').toEqual(secondTab);
const thirdTab = node.querySelector('[data-tab$="-content-4"]').textContent;
expect('C').toEqual(thirdTab);
const fourthTab = node.querySelector('[data-tab$="-content-5"]')
.textContent;
expect('Pascal').toEqual(fourthTab);
});
it('renders content correctly', () => {
const node = page.getDOMNode();
const firstContent = node.querySelector('[id$="-content-2"] code')
.textContent;
expect("console.log('Hello, world!');").toEqual(firstContent);
const secondContent = node.querySelector('[id$="-content-3"] code')
.textContent;
expect("print('Hello, world!')").toEqual(secondContent);
const thirdContent = node.querySelector('[id$="-content-4"] code')
.textContent;
expect(
'#include <stdio.h>int main() { printf("Hello World!"); return 0;}',
).toEqual(thirdContent);
const fourthContent = node.querySelector('[id$="-content-5"] code')
.textContent;
expect("program HelloWorld;begin WriteLn('Hello, world!');end.").toEqual(
fourthContent,
);
});
});

describe('when code tab is used in a list', () => {
// clear unique id counter
_.uniqueId = _.runInContext().uniqueId;
const props = {
content: fs.readFileSync(
`${__dirname}/__fixtures__/split-tab_doc2.md`,
'utf-8',
),
metadata: {},
config: {},
};
let mountedDoc;
const docPage = () => {
if (!mountedDoc) {
mountedDoc = mount(<Doc {...props} />);
}
return mountedDoc;
};
const page = docPage();
it('renders tabs correctly', () => {
const node = docPage().getDOMNode();
const node = page.getDOMNode();
const firstTab = node.querySelector('[data-tab$="-content-2"]').textContent;
expect('JavaScript').toEqual(firstTab);
const secondTab = node.querySelector('[data-tab$="-content-3"]')
Expand All @@ -76,17 +103,21 @@ end.
expect('Pascal').toEqual(fourthTab);
});
it('renders content correctly', () => {
const node = docPage().getDOMNode();
const firstContent = node.querySelector('[id$="-content-7"]').textContent;
expect("console.log('Hello, world!');\n").toEqual(firstContent);
const secondContent = node.querySelector('[id$="-content-8"]').textContent;
expect("print('Hello, world!')\n").toEqual(secondContent);
const thirdContent = node.querySelector('[id$="-content-9"]').textContent;
const node = page.getDOMNode();
const firstContent = node.querySelector('[id$="-content-2"] code')
.textContent;
expect("console.log('Hello, world!');").toEqual(firstContent);
const secondContent = node.querySelector('[id$="-content-3"] code')
.textContent;
expect("print('Hello, world!')").toEqual(secondContent);
const thirdContent = node.querySelector('[id$="-content-4"] code')
.textContent;
expect(
'#include <stdio.h>int main() { printf("Hello World!"); return 0;}\n',
'#include <stdio.h>int main() { printf("Hello World!"); return 0;}',
).toEqual(thirdContent);
const fourthContent = node.querySelector('[id$="-content-10"]').textContent;
expect("program HelloWorld;begin WriteLn('Hello, world!');end.\n").toEqual(
const fourthContent = node.querySelector('[id$="-content-5"] code')
.textContent;
expect("program HelloWorld;begin WriteLn('Hello, world!');end.").toEqual(
fourthContent,
);
});
Expand Down
Loading

0 comments on commit 20ba2f2

Please sign in to comment.