From fbecc887b85f6fa48c791b7eb26215eeeeffca6d Mon Sep 17 00:00:00 2001
From: Shawn Erquhart <shawn@erquh.art>
Date: Wed, 26 Jul 2017 12:47:32 -0400
Subject: [PATCH] require images to be parsed as shortcodes

---
 src/components/Widgets/Markdown/unified.js | 28 +++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/Widgets/Markdown/unified.js b/src/components/Widgets/Markdown/unified.js
index 139c485d..8f343f03 100644
--- a/src/components/Widgets/Markdown/unified.js
+++ b/src/components/Widgets/Markdown/unified.js
@@ -19,9 +19,6 @@ import hastFromString from 'hast-util-from-string';
 import hastToMdastHandlerAll from 'hast-util-to-mdast/all';
 import { reduce, capitalize } from 'lodash';
 
-// Remove the yaml tokenizer, as the rich text editor doesn't support frontmatter
-delete markdownToRemarkPlugin.Parser.prototype.blockTokenizers.yamlFrontMatter;
-
 const shortcodeAttributePrefix = 'ncp';
 
 /**
@@ -427,12 +424,37 @@ const slateToRemarkPlugin = () => {
   return transform;
 };
 
+/**
+ * Images must be parsed as shortcodes for asset proxying. This plugin converts
+ * MDAST image nodes back to text to allow shortcode pattern matching.
+ */
+const remarkImagesToText = () => {
+  return transform;
+
+  function transform(node) {
+    const children = node.children ? node.children.map(transform) : node.children;
+    if (node.type === 'image') {
+      const alt = node.alt || '';
+      const url = node.url || '';
+      const title = node.title ? ` "${node.title}"` : '';
+      return { type: 'text', value: `![${alt}](${url}${title})` };
+    }
+    return { ...node, children };
+  }
+}
+
 export const markdownToRemark = markdown => {
   const parsed = unified()
     .use(markdownToRemarkPlugin, { fences: true, pedantic: true, footnotes: true, commonmark: true })
+    .use(function() {
+      const { blockMethods } = this.Parser.prototype;
+      // Remove the yaml tokenizer, as the rich text editor doesn't support frontmatter
+      blockMethods.splice(blockMethods.indexOf('yamlFrontMatter'), 1);
+    })
     .parse(markdown);
 
   const result = unified()
+    .use(remarkImagesToText)
     .use(remarkShortcodes, { plugins: registry.getEditorComponents() })
     .runSync(parsed);