From 61d54ba4a261195995bd8e5c88fae42c0753d018 Mon Sep 17 00:00:00 2001
From: Brian Carstensen <brian.carstensen@gmail.com>
Date: Thu, 13 Aug 2015 12:34:19 -0500
Subject: [PATCH 1/2] Add a start script

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index d5d225c..ce7466e 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "description": "Markdown viewer and editor for the Zooniverse",
   "main": "src/index.js",
   "scripts": {
+    "start": "gulp watch",
     "test": "gulp test",
     "test-sauce": "zuul -- test/**/*.js"
   },

From bcacd90d46af8fc2387f95a38ed7c479157f590d Mon Sep 17 00:00:00 2001
From: Brian Carstensen <brian.carstensen@gmail.com>
Date: Thu, 13 Aug 2015 12:36:56 -0500
Subject: [PATCH 2/2] Remove replaceSymbols method, move responsibility to
 transform prop

---
 src/components/markdown-editor.js |  4 +--
 src/components/markdown.js        | 46 ++------------------------
 test/components/markdown-test.js  | 55 +++++++------------------------
 3 files changed, 16 insertions(+), 89 deletions(-)

diff --git a/src/components/markdown-editor.js b/src/components/markdown-editor.js
index ec358ac..a672aaf 100644
--- a/src/components/markdown-editor.js
+++ b/src/components/markdown-editor.js
@@ -111,7 +111,7 @@ export default class MarkdownEditor extends React.Component {
                     <div className="editor-area">
                         <textarea ref="textarea" className="markdown-editor-input" name={this.props.name} placeholder={this.props.placeholder} value={this.props.value} rows={this.props.rows} cols={this.props.cols} onChange={this.onInputChange.bind(this)} />
 
-                        <Markdown className="markdown-editor-preview">{this.props.value}</Markdown>
+                        <Markdown className="markdown-editor-preview" transform={this.props.transform}>{this.props.value}</Markdown>
                     </div>
                 </div>
         );
@@ -186,6 +186,7 @@ MarkdownEditor.defaultProps = {
     value: '',
     placeholder: '',
     rows: 5,
+    transform: arg => arg,
     onChange: NOOP,
     previewing: null,
     onHelp: NOOP
@@ -194,4 +195,3 @@ MarkdownEditor.defaultProps = {
 MarkdownEditor.initialState = {
     previewing: false
 };
-
diff --git a/src/components/markdown.js b/src/components/markdown.js
index af5fc35..09127b5 100644
--- a/src/components/markdown.js
+++ b/src/components/markdown.js
@@ -2,8 +2,6 @@ import React from "react";
 import MarkdownIt from "markdown-it";
 import MarkdownItContainer from "markdown-it-container";
 import twemoji from 'twemoji';
-import {State} from 'react-router';
-import reactMixin from 'react-mixin';
 
 const markdownIt = new MarkdownIt({linkify: true, breaks: true})
           .use(require('markdown-it-emoji'))
@@ -18,45 +16,6 @@ export default class Markdown extends React.Component {
         return 'Markdown';
     }
 
-    replaceSymbols(input) {
-        // Catch getParams in case we're in a non-routed context like an alert
-        var owner, name;
-        try {
-            ({owner, name} = this.getParams());
-        } catch (_) {
-            owner = null;
-            name = null;
-        }
-
-        return input
-        // hashtags #tagname
-            .replace(/(?!\B[\w+-\/]+\b)\B#(\b[\w+-\/]+\b)/g, function(fullTag, tagName) {
-                if (owner && name) {
-                    return `<a href='#/projects/${owner}/${name}/talk/search?query=${tagName}'>${fullTag}</a>`;
-                }
-                else {
-                    return `<a href='#/talk/search?query=${tagName}'>${fullTag}</a>`;
-                }
-            })
-
-        // subjects in a specific project : @owner-slug/project-slug^subject_id
-        // \b[\w-]+\b is hyphen boundary for slugs
-            .replace(/@(\b[\w-]+\b)\/(\b[\w-]+\b)\^([0-9]+)/g, "<a href='#/projects/$1/$2/talk/subjects/$3'>$1/$2 - Subject $3</a>")
-
-            .replace(/\^([0-9]+)/g, function(_, subjectID) {
-                if (owner && name) {
-                    return `<a href='#/projects/${owner}/${name}/talk/subjects/${subjectID}'>${owner}/${name} - Subject ${subjectID}</a>`;
-                }
-                else {
-                    return subjectID;
-                }
-            })
-
-        // user mentions : @username
-            .replace(/\B@(\b[\w-]+\b)/g, "<a href='#/users/$1'>@$1</a>")
-
-    }
-
     emojify(input) {
         return twemoji.parse(input);
     }
@@ -72,7 +31,7 @@ export default class Markdown extends React.Component {
 
     getHtml() {
         try {
-            return this.replaceSymbols(this.emojify(this.markdownify(this.props.children || this.props.content)));
+            return this.props.transform(this.emojify(this.markdownify(this.props.children || this.props.content)));
         } catch (e) {
             return this.props.children || this.props.content;
         }
@@ -92,7 +51,6 @@ Markdown.defaultProps = {
     tag: 'div',
     content: '',
     inline: false,
+    transform: arg => arg,
     className: ''
 }
-
-reactMixin.onClass(Markdown, State);
diff --git a/test/components/markdown-test.js b/test/components/markdown-test.js
index 103f1fc..9d1801b 100644
--- a/test/components/markdown-test.js
+++ b/test/components/markdown-test.js
@@ -25,48 +25,11 @@ describe('Markdown', () => {
             tag: 'div',
             content: '',
             inline: false,
+            transform: Markdown.defaultProps.transform,
             className: ''
         });
     });
 
-    describe('#replaceSymbols', () => {
-        it('replaces #hashtags with hashtag links', () => {
-            var tagLink = markdown.replaceSymbols('#test');
-            expect(tagLink).to.equal("<a href='#/talk/search?query=test'>#test</a>");
-        });
-
-        it('replaces #hashtags inside of html without conflicting with urls', () => {
-            let htmlTagLink = markdown.replaceSymbols(`<p>#good \n https://www.zooniverse.org/#/talk/17/1403?page=1&comment=3063</p>`);
-
-            expect(htmlTagLink).to.equal(`<p><a href=\'#/talk/search?query=good\'>#good</a> \n https://www.zooniverse.org/#/talk/17/1403?page=1&comment=3063</p>`)
-        })
-
-        it('replaces ^subject mentions with subject links', () =>{
-            markdown.getParams = () => {
-                return {
-                    owner: 'test',
-                    name: 'project'
-                };
-            };
-
-            var subjectLink = markdown.replaceSymbols('^123456');
-            expect(subjectLink).to.equal("<a href='#/projects/test/project/talk/subjects/123456'>test/project - Subject 123456</a>");
-        });
-
-        it('does not format subject Ids when not in a routed context', () =>{
-            markdown.getParams = Function.prototype;
-
-            var subjectLink = markdown.replaceSymbols('^123456');
-            expect(subjectLink).to.equal("123456");
-        });
-
-        it('replaces @ownerslug/project-slug^subject_id mentions with links', () => {
-            var projectSubjectLink = markdown.replaceSymbols('@owner/project-d^123456');
-
-            expect(projectSubjectLink).to.equal("<a href='#/projects/owner/project-d/talk/subjects/123456'>owner/project-d - Subject 123456</a>");
-        });
-    });
-
     describe('#markdownify', () => {
         it('renders markdown', () => {
             var md = markdown.markdownify('# test header');
@@ -83,7 +46,7 @@ describe('Markdown', () => {
         })
 
         it('renders bare child content on error', () => {
-            md.replaceSymbols = () => {
+            md.props.transform = () => {
                 throw new Error("fail")
             }
             let html = md.getHtml()
@@ -94,19 +57,25 @@ describe('Markdown', () => {
     describe('#render', () => {
         var editor, md
         before(() => {
-            editor = React.createElement(Markdown, { className: 'MyComponent', tag: 'div'}, 'Test children')
+            editor = React.createElement(Markdown, {
+              className: 'MyComponent',
+              tag: 'div',
+              transform: (html) => {
+                return html.replace('foo', 'bar');
+              }
+            }, 'Test children foo');
             md = TestUtils.renderIntoDocument(editor);
         })
 
         it('renders', () => {
             var markdownDiv = TestUtils.findRenderedDOMComponentWithTag(md, 'div');
-            expect(markdownDiv.props.dangerouslySetInnerHTML.__html).to.equal('<p>Test children</p>\n');
+            expect(markdownDiv.props.dangerouslySetInnerHTML.__html).to.equal('<p>Test children bar</p>\n');
         });
 
         it('calls getHtml in render', () => {
-            let replaceSymbolsSpy = spy.on(md, 'getHtml')
+            let getHtmlSpy = spy.on(md, 'getHtml')
             md.render()
-            expect(replaceSymbolsSpy).to.have.been.called()
+            expect(getHtmlSpy).to.have.been.called()
         });
 
         it('returns a react component, with customizable tag', () =>{