Inline markdown-style link for PackageAuthor

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(<Link key={match.index} to={match[2]}>{match[1]}</Link>);
+        endIndex = match.index + match[0].length;
+      }
+
+      if (endIndex !== data.length) {
+        markdownBlocks.push(data.substr(endIndex, data.length - endIndex));
+      }
+    }
+
+    return <span className={className}>{markdownBlocks}</span>;
+  }
+}
+
+InlineMarkdown.propTypes = {
+  className: PropTypes.string,
+  data: PropTypes.string
+};
+
+export default InlineMarkdown;