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 {
- {this.props.value}
+ {this.props.value}
);
@@ -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 `${fullTag}`;
- }
- else {
- return `${fullTag}`;
- }
- })
-
- // 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, "$1/$2 - Subject $3")
-
- .replace(/\^([0-9]+)/g, function(_, subjectID) {
- if (owner && name) {
- return `${owner}/${name} - Subject ${subjectID}`;
- }
- else {
- return subjectID;
- }
- })
-
- // user mentions : @username
- .replace(/\B@(\b[\w-]+\b)/g, "@$1")
-
- }
-
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("#test");
- });
-
- it('replaces #hashtags inside of html without conflicting with urls', () => {
- let htmlTagLink = markdown.replaceSymbols(`#good \n https://www.zooniverse.org/#/talk/17/1403?page=1&comment=3063
`);
-
- expect(htmlTagLink).to.equal(`#good \n https://www.zooniverse.org/#/talk/17/1403?page=1&comment=3063
`)
- })
-
- it('replaces ^subject mentions with subject links', () =>{
- markdown.getParams = () => {
- return {
- owner: 'test',
- name: 'project'
- };
- };
-
- var subjectLink = markdown.replaceSymbols('^123456');
- expect(subjectLink).to.equal("test/project - Subject 123456");
- });
-
- 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("owner/project-d - Subject 123456");
- });
- });
-
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('Test children
\n');
+ expect(markdownDiv.props.dangerouslySetInnerHTML.__html).to.equal('Test children bar
\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', () =>{