Decorate comment text to add @username links and scratch-domain links

src/lib/decorate-text.jsx

@@ -5,26 +5,71 @@ const reactStringReplace = require('react-string-replace');
  * Helper method that replaces @mentions and #hashtags in plain text
  *
  * @param  {string} text string to convert
- * @return {string}            string with links for @mentions and #hashtags
+ * @param  {?object} opts options object of boolean flags, defaults to all true
+ * @property {boolean} opts.hashtag If #hashtags should be converted to search links
+ * @property {boolean} opts.usernames If @usernames should be converted to /users/username links
+ * @property {boolean} opts.scratchLinks If scratch-domain links should be converted to <a> links
+ * @return {Array} Array with strings and react components for links
  */
-module.exports = text => {
-    let replacedText;
+module.exports = (text, opts) => {
+    opts = opts || {
+        usernames: true,
+        hashtags: true,
+        scratchLinks: true
+    };
+
+    let replacedText = [text];
 
     // Match @-mentions (username is alphanumeric, underscore and dash)
-    replacedText = reactStringReplace(text, /@([\w-]+)/g, (match, i) => (
+    if (opts.usernames) {
+        replacedText = reactStringReplace(replacedText, /@([\w-]+)/g, (match, i) => (
             <a
                 href={`/users/${match}`}
                 key={match + i}
             >@{match}</a>
         ));
+    }
 
     // Match hashtags
+    if (opts.hashtags) {
         replacedText = reactStringReplace(replacedText, /(#[\w-]+)/g, (match, i) => (
             <a
                 href={`/search/projects?q=${match}`}
                 key={match + i}
             >{match}</a>
         ));
+    }
+
+    // Match scratch links
+    /*
+        Ported from the python...
+        "Oh boy a giant regex!" Said nobody ever.
+        (^|\s)(https?://(?:[\w-]+\.)*scratch\.mit\.edu(?:/(?:\S*[\w:/#[\]@\$&\'()*+=])?)?(?![^?!,:;\w\s]\S))
+        (^|\s)
+            Only begin capturing after a space, or at the beginning of a word
+        https?
+            URLs beginning with http or https
+        ://(?:[\w-]+\.)*scratch\.mit\.edu
+            allow *.scratch.mit.edu urls
+        (?:/...)?
+            optionally followed by a slash
+        (?:\S*[\w:/#[\]@\$&\'()*+=])?
+            optionally that slash is followed by anything that's not a space, until
+            that string is followed by URL-valid characters that aren't punctuation
+        (?![^?!,:;\w\s]\S))
+            Don't capture if this string is embedded in another string (e.g., the
+            beginning of a non-scratch URL), but allow punctuation
+    */
+    if (opts.scratchLinks) {
+        // eslint-disable-next-line max-len
+        const linkRegexp = /((?:^|\s)https?:\/\/(?:[\w-]+\.)*(?:scratch\.mit\.edu|scratch-wiki\.info)(?:\/(?:\S*[\w:/#[\]@$&'()*+=])?)?(?![^?!,:;\w\s]\S))/g;
+        replacedText = reactStringReplace(replacedText, linkRegexp, (match, i) => (
+            <a
+                href={match}
+                key={match + i}
+            >{match}</a>
+        ));
+    }
 
     return replacedText;
 };

src/views/preview/comment/comment.jsx

@@ -11,6 +11,7 @@ const FormattedMessage = require('react-intl').FormattedMessage;
 const ComposeComment = require('./compose-comment.jsx');
 const DeleteCommentModal = require('../../../components/modal/comments/delete-comment.jsx');
 const ReportCommentModal = require('../../../components/modal/comments/report-comment.jsx');
+const decorateText = require('../../../lib/decorate-text.jsx');
 
 require('./comment.scss');
 
@@ -101,6 +102,16 @@ class Comment extends React.Component {
 
         const visible = visibility === 'visible';
 
+        let commentText = content;
+        if (replyUsername) {
+            commentText = `@${replyUsername} ${commentText}`;
+        }
+        commentText = decorateText(commentText, {
+            scratchLinks: true,
+            usernames: true,
+            hashtags: false
+        });
+
         return (
             <div
                 className="flex-row comment"
@@ -167,13 +178,17 @@ class Comment extends React.Component {
                           */}
 
                         <span className="comment-content">
-                            {replyUsername && (
-                                <a href={`/users/${replyUsername}`}>@{replyUsername}&nbsp;</a>
-                            )}
+                            {commentText.map(fragment => {
+                                if (typeof fragment === 'string') {
+                                    return (
                                         <EmojiText
                                             as="span"
-                                text={content}
+                                            text={fragment}
                                         />
+                                    );
+                                }
+                                return fragment;
+                            })}
                         </span>
                         <FlexRow className="comment-bottom-row">
                             <span className="comment-time">

src/views/preview/presentation.jsx

@@ -238,7 +238,11 @@ const PreviewPresentation = ({
                                             value={projectInfo.instructions}
                                         /> :
                                         <div className="project-description">
-                                            {decorateText(projectInfo.instructions)}
+                                            {decorateText(projectInfo.instructions, {
+                                                usernames: true,
+                                                hashtags: true,
+                                                scratchLinks: false
+                                            })}
                                         </div>
                                     }
                                 </FlexRow>
@@ -270,7 +274,11 @@ const PreviewPresentation = ({
                                             value={projectInfo.description}
                                         /> :
                                         <div className="project-description last">
-                                            {decorateText(projectInfo.description)}
+                                            {decorateText(projectInfo.description, {
+                                                usernames: true,
+                                                hashtags: true,
+                                                scratchLinks: false
+                                            })}
                                         </div>
                                     }
                                 </FlexRow>