fix: change getAsset to not return a promise (#3232)

* fix: change getAsset to not return a promise

* fix: update markdown widget per getAsset changes

* test: fix editor component image test

* docs: update getAsset docs

packages/netlify-cms-widget-markdown/src/MarkdownControl/RawEditor.js

@@ -50,18 +50,17 @@ export default class RawEditor extends React.Component {
     }
   }
 
-  handleCopy = async (event, editor) => {
-    event.persist();
+  handleCopy = (event, editor) => {
     const { getAsset, resolveWidget } = this.props;
     const markdown = Plain.serialize(Value.create({ document: editor.value.fragment }));
-    const html = await markdownToHtml(markdown, { getAsset, resolveWidget });
+    const html = markdownToHtml(markdown, { getAsset, resolveWidget });
     setEventTransfer(event, 'text', markdown);
     setEventTransfer(event, 'html', html);
     event.preventDefault();
   };
 
-  handleCut = async (event, editor, next) => {
-    await this.handleCopy(event, editor, next);
+  handleCut = (event, editor, next) => {
+    this.handleCopy(event, editor, next);
     editor.delete();
   };
 

packages/netlify-cms-widget-markdown/src/MarkdownControl/plugins/CopyPasteVisual.js

@@ -5,10 +5,9 @@ import isHotkey from 'is-hotkey';
 import { slateToMarkdown, markdownToSlate, htmlToSlate, markdownToHtml } from '../../serializers';
 
 const CopyPasteVisual = ({ getAsset, resolveWidget }) => {
-  const handleCopy = async (event, editor) => {
-    event.persist();
+  const handleCopy = (event, editor) => {
     const markdown = slateToMarkdown(editor.value.fragment.toJS());
-    const html = await markdownToHtml(markdown, { getAsset, resolveWidget });
+    const html = markdownToHtml(markdown, { getAsset, resolveWidget });
     setEventTransfer(event, 'text', markdown);
     setEventTransfer(event, 'html', html);
     setEventTransfer(event, 'fragment', base64.serializeNode(editor.value.fragment));
@@ -32,8 +31,8 @@ const CopyPasteVisual = ({ getAsset, resolveWidget }) => {
       const doc = Document.fromJSON(ast);
       return editor.insertFragment(doc);
     },
-    async onCopy(event, editor, next) {
-      await handleCopy(event, editor, next);
+    onCopy(event, editor, next) {
+      handleCopy(event, editor, next);
     },
     onCut(event, editor, next) {
       handleCopy(event, editor, next);

packages/netlify-cms-widget-markdown/src/MarkdownPreview.js

@@ -10,43 +10,14 @@ class MarkdownPreview extends React.Component {
     value: PropTypes.string,
   };
 
-  subscribed = true;
-
-  state = {
-    html: null,
-  };
-
-  async _renderHtml() {
-    const { value, getAsset, resolveWidget } = this.props;
-    if (value) {
-      const html = await markdownToHtml(value, { getAsset, resolveWidget });
-      if (this.subscribed) {
-        this.setState({ html });
-      }
-    }
-  }
-
-  componentDidMount() {
-    this._renderHtml();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.value !== this.props.value || prevProps.getAsset !== this.props.getAsset) {
-      this._renderHtml();
-    }
-  }
-
-  componentWillUnmount() {
-    this.subscribed = false;
-  }
-
   render() {
-    const { html } = this.state;
-
-    if (html === null) {
+    const { value, getAsset, resolveWidget } = this.props;
+    if (value === null) {
       return null;
     }
 
+    const html = markdownToHtml(value, { getAsset, resolveWidget });
+
     return <WidgetPreviewContainer dangerouslySetInnerHTML={{ __html: html }} />;
   }
 }

packages/netlify-cms-widget-markdown/src/serializers/index.js

@@ -148,13 +148,13 @@ export const remarkToMarkdown = obj => {
 /**
  * Convert Markdown to HTML.
  */
-export const markdownToHtml = async (markdown, { getAsset, resolveWidget } = {}) => {
+export const markdownToHtml = (markdown, { getAsset, resolveWidget } = {}) => {
   const mdast = markdownToRemark(markdown);
 
-  const hast = await unified()
+  const hast = unified()
     .use(remarkToRehypeShortcodes, { plugins: getEditorComponents(), getAsset, resolveWidget })
     .use(remarkToRehype, { allowDangerousHTML: true })
-    .run(mdast);
+    .runSync(mdast);
 
   const html = unified()
     .use(rehypeToHtml, {

packages/netlify-cms-widget-markdown/src/serializers/remarkRehypeShortcodes.js

@@ -12,15 +12,15 @@ import u from 'unist-builder';
 export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWidget }) {
   return transform;
 
-  async function transform(root) {
-    const transformedChildren = await Promise.all(map(root.children, processShortcodes));
+  function transform(root) {
+    const transformedChildren = map(root.children, processShortcodes);
     return { ...root, children: transformedChildren };
   }
 
   /**
    * Mapping function to transform nodes that contain shortcodes.
    */
-  async function processShortcodes(node) {
+  function processShortcodes(node) {
     /**
      * If the node doesn't contain shortcode data, return the original node.
      */
@@ -38,7 +38,7 @@ export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWid
      * an HTML string or a React component. If a React component is returned,
      * render it to an HTML string.
      */
-    const value = await getPreview(plugin, shortcodeData);
+    const value = getPreview(plugin, shortcodeData);
     const valueHtml = typeof value === 'string' ? value : renderToString(value);
 
     /**
@@ -52,7 +52,7 @@ export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWid
   /**
    * Retrieve the shortcode preview component.
    */
-  async function getPreview(plugin, shortcodeData) {
+  function getPreview(plugin, shortcodeData) {
     const { toPreview, widget, fields } = plugin;
     if (toPreview) {
       return toPreview(shortcodeData, getAsset, fields);