Make MarkupItReactRenderer use media proxies when rendering image paths

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', () => {
         <MarkupItReactRenderer
           value="# Title"
           syntax={markdownSyntax}
+          getMedia={getMedia}
         />
       );
       const tree1 = component.html();
@@ -33,6 +38,7 @@ describe('MarkitupReactRenderer', () => {
         <MarkupItReactRenderer
           value="# Title"
           syntax={markdownSyntax}
+          getMedia={getMedia}
         />
       );
       const syntax1 = component.instance().props.syntax;
@@ -77,6 +83,7 @@ Text with **bold** & _em_ elements
           <MarkupItReactRenderer
             value={value}
             syntax={markdownSyntax}
+            getMedia={getMedia}
           />
         );
         expect(component.html()).toMatchSnapshot();
@@ -91,6 +98,7 @@ Text with **bold** & _em_ elements
             <MarkupItReactRenderer
               value={value}
               syntax={markdownSyntax}
+              getMedia={getMedia}
             />
           );
           expect(component.html()).toMatchSnapshot();
@@ -115,6 +123,7 @@ Text with **bold** & _em_ elements
           <MarkupItReactRenderer
             value={value}
             syntax={markdownSyntax}
+            getMedia={getMedia}
           />
         );
         expect(component.html()).toMatchSnapshot();
@@ -134,6 +143,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
           <MarkupItReactRenderer
             value={value}
             syntax={markdownSyntax}
+            getMedia={getMedia}
           />
         );
         expect(component.html()).toMatchSnapshot();
@@ -147,6 +157,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
           <MarkupItReactRenderer
             value={value}
             syntax={markdownSyntax}
+            getMedia={getMedia}
           />
         );
         expect(component.html()).toMatchSnapshot();
@@ -158,6 +169,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
           <MarkupItReactRenderer
             value={value}
             syntax={markdownSyntax}
+            getMedia={getMedia}
           />
         );
         expect(component.html()).toMatchSnapshot();
@@ -172,7 +184,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
 <form action="test">
   <label for="input">
     <input type="checkbox" checked="checked" id="input"/> My label
-  </label> 
+  </label>
   <dl class="test-class another-class" style="width: 100%">
       <dt data-attr="test">Test HTML content</dt>
       <dt>Testing HTML in Markdown</dt>
@@ -185,6 +197,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
           <MarkupItReactRenderer
             value={value}
             syntax={markdownSyntax}
+            getMedia={getMedia}
           />
         );
         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]
         <MarkupItReactRenderer
           value={value}
           syntax={htmlSyntax}
+          getMedia={getMedia}
         />
       );
       expect(component.html()).toMatchSnapshot();

src/components/MarkupItReactRenderer/index.js

@@ -42,11 +42,7 @@ const defaultSchema = {
   [ENTITIES.HARD_BREAK]: 'br',
 };
 
-const notAllowedAttributes = ['loose'];
+const notAllowedAttributes = ['loose', 'image'];
-
-function sanitizeProps(props) {
-  return omit(props, notAllowedAttributes);
-}
 
 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,
 };

src/components/Widgets/MarkdownPreview.js

@@ -24,6 +24,7 @@ const MarkdownPreview = ({ value, getMedia }) => {
         value={value}
         syntax={markdown}
         schema={schema}
+        getMedia={getMedia}
       />
     </div>
   );

src/components/stories/MarkupItReactRenderer.js

@@ -19,16 +19,22 @@ const htmlContent = `
 </ol>
 `;
 
+function getMedia(path) {
+  return path;
+}
+
 storiesOf('MarkupItReactRenderer', module)
   .add('Markdown', () => (
     <MarkupItReactRenderer
       value={mdContent}
       syntax={markdownSyntax}
+      getMedia={getMedia}
     />
 
   )).add('HTML', () => (
     <MarkupItReactRenderer
       value={htmlContent}
       syntax={htmlSyntax}
+      getMedia={getMedia}
     />
   ));