diff --git a/frontend/src/Components/Markdown/InlineMarkdown.js b/frontend/src/Components/Markdown/InlineMarkdown.js new file mode 100644 index 000000000..2d7df776f --- /dev/null +++ b/frontend/src/Components/Markdown/InlineMarkdown.js @@ -0,0 +1,44 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; +import Link from 'Components/Link/Link'; + +class InlineMarkdown extends Component { + + // + // Render + + render() { + const { + className, + data + } = this.props; + + // For now only replace links + const markdownBlocks = []; + if (data) { + const matches = data.matchAll(/\[(.+?)\]\((.+?)\)/g); + let endIndex = 0; + + for (const match of matches) { + if (match.index > endIndex) { + markdownBlocks.push(data.substr(endIndex, match.index - endIndex)); + } + markdownBlocks.push({match[1]}); + endIndex = match.index + match[0].length; + } + + if (endIndex !== data.length) { + markdownBlocks.push(data.substr(endIndex, data.length - endIndex)); + } + } + + return {markdownBlocks}; + } +} + +InlineMarkdown.propTypes = { + className: PropTypes.string, + data: PropTypes.string +}; + +export default InlineMarkdown; diff --git a/frontend/src/System/Status/About/About.js b/frontend/src/System/Status/About/About.js index d04e8b99e..7403a6cc8 100644 --- a/frontend/src/System/Status/About/About.js +++ b/frontend/src/System/Status/About/About.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import titleCase from 'Utilities/String/titleCase'; import FieldSet from 'Components/FieldSet'; +import InlineMarkdown from 'Components/Markdown/InlineMarkdown'; import DescriptionList from 'Components/DescriptionList/DescriptionList'; import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem'; import StartTime from './StartTime'; @@ -42,7 +43,7 @@ class About extends Component { packageVersion && {packageVersion} {' by '} : packageVersion)} /> }