mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-04 20:57:17 +02:00
5ce85e5b5e
* 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
50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
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;
|