diff --git a/src/components/MarkupItReactRenderer/__tests__/MarkupItReactRenderer.spec.js b/src/components/MarkupItReactRenderer/__tests__/MarkupItReactRenderer.spec.js index cdf49cc5..744d3ecc 100644 --- a/src/components/MarkupItReactRenderer/__tests__/MarkupItReactRenderer.spec.js +++ b/src/components/MarkupItReactRenderer/__tests__/MarkupItReactRenderer.spec.js @@ -10,6 +10,10 @@ import htmlSyntax from 'markup-it/syntaxes/html'; import reInline from 'markup-it/syntaxes/markdown/re/inline'; import MarkupItReactRenderer from '../'; +function getMedia(path) { + return path; +} + describe('MarkitupReactRenderer', () => { describe('basics', () => { it('should re-render properly after a value and syntax update', () => { @@ -17,6 +21,7 @@ describe('MarkitupReactRenderer', () => { ); const tree1 = component.html(); @@ -33,6 +38,7 @@ describe('MarkitupReactRenderer', () => { ); const syntax1 = component.instance().props.syntax; @@ -77,6 +83,7 @@ Text with **bold** & _em_ elements ); expect(component.html()).toMatchSnapshot(); @@ -91,6 +98,7 @@ Text with **bold** & _em_ elements ); expect(component.html()).toMatchSnapshot(); @@ -115,6 +123,7 @@ Text with **bold** & _em_ elements ); expect(component.html()).toMatchSnapshot(); @@ -134,6 +143,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3] ); expect(component.html()).toMatchSnapshot(); @@ -147,6 +157,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3] ); expect(component.html()).toMatchSnapshot(); @@ -158,6 +169,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3] ); expect(component.html()).toMatchSnapshot(); @@ -172,7 +184,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
+
Test HTML content
Testing HTML in Markdown
@@ -185,6 +197,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3] ); expect(component.html()).toMatchSnapshot(); @@ -228,6 +241,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3] value={value} syntax={myMarkdownSyntax} schema={myCustomSchema} + getMedia={getMedia} /> ); expect(component.html()).toMatchSnapshot(); @@ -241,6 +255,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3] ); expect(component.html()).toMatchSnapshot(); diff --git a/src/components/MarkupItReactRenderer/index.js b/src/components/MarkupItReactRenderer/index.js index 8fdfb485..3513c1fd 100644 --- a/src/components/MarkupItReactRenderer/index.js +++ b/src/components/MarkupItReactRenderer/index.js @@ -42,11 +42,7 @@ const defaultSchema = { [ENTITIES.HARD_BREAK]: 'br', }; -const notAllowedAttributes = ['loose']; - -function sanitizeProps(props) { - return omit(props, notAllowedAttributes); -} +const notAllowedAttributes = ['loose', 'image']; export default class MarkupItReactRenderer extends React.Component { @@ -66,6 +62,17 @@ export default class MarkupItReactRenderer extends React.Component { } } + sanitizeProps(props) { + const { getMedia } = this.props; + + if (props.image) { + props = Object.assign({}, props, { src: getMedia(props.image).toString() }); + } + + return omit(props, notAllowedAttributes); + } + + renderToken(schema, token, index = 0, key = '0') { const type = token.get('type'); const data = token.get('data'); @@ -85,7 +92,7 @@ export default class MarkupItReactRenderer extends React.Component { if (nodeType !== null) { let props = { key, token }; if (typeof nodeType !== 'function') { - props = { key, ...sanitizeProps(data.toJS()) }; + props = { key, ...this.sanitizeProps(data.toJS()) }; } // If this is a react element return React.createElement(nodeType, props, children); @@ -108,7 +115,7 @@ export default class MarkupItReactRenderer extends React.Component { render() { - const { value, schema } = this.props; + const { value, schema, getMedia } = this.props; const content = this.parser.toContent(value); return this.renderToken({ ...defaultSchema, ...schema }, content.get('token')); } @@ -121,4 +128,5 @@ MarkupItReactRenderer.propTypes = { PropTypes.string, PropTypes.func, ])), + getMedia: PropTypes.func.isRequired, }; diff --git a/src/components/Widgets/MarkdownPreview.js b/src/components/Widgets/MarkdownPreview.js index 1d55ad3e..456693d7 100644 --- a/src/components/Widgets/MarkdownPreview.js +++ b/src/components/Widgets/MarkdownPreview.js @@ -24,6 +24,7 @@ const MarkdownPreview = ({ value, getMedia }) => { value={value} syntax={markdown} schema={schema} + getMedia={getMedia} /> ); diff --git a/src/components/stories/MarkupItReactRenderer.js b/src/components/stories/MarkupItReactRenderer.js index 07a1f28c..46b9612f 100644 --- a/src/components/stories/MarkupItReactRenderer.js +++ b/src/components/stories/MarkupItReactRenderer.js @@ -19,16 +19,22 @@ const htmlContent = ` `; +function getMedia(path) { + return path; +} + storiesOf('MarkupItReactRenderer', module) .add('Markdown', () => ( )).add('HTML', () => ( ));