display images inserted through rte

src/components/Widgets/Markdown/MarkdownPreview/index.js

@@ -6,7 +6,7 @@ const MarkdownPreview = ({ value, getAsset }) => {
   if (value === null) {
     return null;
   }
-  const html = remarkToHtml(value);
+  const html = remarkToHtml(value, getAsset);
   return <div style={previewStyle} dangerouslySetInnerHTML={{__html: html}}></div>;
 };
 

src/components/Widgets/Markdown/unified.js

@@ -215,7 +215,7 @@ const remarkShortcodes = ({ plugins }) => {
   }
 };
 
-const remarkToRehypeShortcodes = ({ plugins }) => {
+const remarkToRehypeShortcodes = ({ plugins, getAsset }) => {
   return transform;
 
   function transform(node) {
@@ -225,7 +225,7 @@ const remarkToRehypeShortcodes = ({ plugins }) => {
     }
     const { shortcode, shortcodeData } = node.data;
     const plugin = plugins.get(shortcode);
-    const value = plugin.toPreview(shortcodeData);
+    const value = plugin.toPreview(shortcodeData, getAsset);
     const valueHtml = typeof value === 'string' ? value : renderToString(value);
     return { ...node, value: valueHtml };
   }
@@ -585,9 +585,9 @@ export const slateToRemark = raw => {
   return result;
 };
 
-export const remarkToHtml = mdast => {
+export const remarkToHtml = (mdast, getAsset) => {
   const result = unified()
-    .use(remarkToRehypeShortcodes, { plugins: registry.getEditorComponents() })
+    .use(remarkToRehypeShortcodes, { plugins: registry.getEditorComponents(), getAsset })
     .use(remarkToRehype, { allowDangerousHTML: true })
     .runSync(mdast);
 

src/index.js

@@ -37,7 +37,7 @@ const buildtInPlugins = [{
     alt: match[1],
   },
   toBlock: data => `![${ data.alt }](${ data.image })`,
-  toPreview: data => <img src={data.image} alt={data.alt} />,
+  toPreview: (data, getAsset) => <img src={getAsset(data.image)} alt={data.alt} />,
   pattern: /^!\[([^\]]+)]\(([^)]+)\)$/,
   fields: [{
     label: 'Image',