replace remark with unified for docs and extensibility

package.json

@@ -101,7 +101,6 @@
     "dateformat": "^1.0.12",
     "deep-equal": "^1.0.1",
     "fuzzy": "^0.1.1",
-    "hast-util-to-html": "^3.0.0",
     "history": "^2.1.2",
     "immutability-helper": "^2.0.0",
     "immutable": "^3.7.6",
@@ -113,7 +112,6 @@
     "lodash": "^4.13.1",
     "markup-it": "^2.0.0",
     "material-design-icons": "^3.0.1",
-    "mdast-util-to-hast": "^2.4.0",
     "moment": "^2.11.2",
     "netlify-auth-js": "^0.5.5",
     "normalize.css": "^4.2.0",
@@ -159,14 +157,17 @@
     "redux-notifications": "^2.1.1",
     "redux-optimist": "^0.0.2",
     "redux-thunk": "^1.0.3",
-    "remark": "6",
+    "rehype-stringify": "^3.0.0",
     "remark-html": "^6.0.0",
+    "remark-parse": "^3.0.1",
+    "remark-rehype": "^2.0.0",
     "selection-position": "^1.0.0",
     "semaphore": "^1.0.5",
     "slate": "^0.14.14",
     "slate-drop-or-paste-images": "^0.2.0",
     "slug": "^0.9.1",
     "textarea-caret-position": "^0.1.1",
+    "unified": "^6.1.4",
     "unist-util-visit": "^1.1.1",
     "uuid": "^2.0.3",
     "whatwg-fetch": "^1.0.0"

src/components/MarkupItReactRenderer/index.js

@@ -1,16 +1,10 @@
 import React, { PropTypes } from "react";
-import Remark from "remark";
-import toHAST from "mdast-util-to-hast";
-import hastToHTML from "hast-util-to-html";
+import unified from 'unified';
+import markdown from 'remark-parse';
+import rehype from 'remark-rehype';
+import html from 'rehype-stringify';
 import registry from "../../lib/registry";
 
-// Setup Remark.
-const remark = new Remark({
-  commonmark: true,
-  footnotes: true,
-  pedantic: true,
-});
-
 export default class MarkupItReactRenderer extends React.Component {
   constructor(props) {
     super(props);
@@ -22,11 +16,12 @@ export default class MarkupItReactRenderer extends React.Component {
   }
 
   render() {
-    const { value } = this.props;
-    const mdast = remark.parse(value);
-    const hast = toHAST(mdast, { allowDangerousHTML: true });
-    const html = hastToHTML(hast, { allowDangerousHTML: true });
-    return <div dangerouslySetInnerHTML={{ __html: html }} />; // eslint-disable-line react/no-danger
+    const doc = unified()
+      .use(markdown, { commonmark: true, footnotes: true, pedantic: true })
+      .use(rehype, { allowDangerousHTML: true })
+      .use(html, { allowDangerousHTML: true })
+      .processSync(this.props.value);
+    return <div dangerouslySetInnerHTML={{ __html: doc }} />; // eslint-disable-line react/no-danger
   }
 }
 

src/components/Widgets/MarkdownControlElements/VisualEditor/parser.js

@@ -4,22 +4,16 @@
   https://github.com/ProseMirror/prosemirror-markdown/blob/master/src/from_markdown.js
 */
 
-import Remark from "remark";
-const visit = require("unist-util-visit");
-const { Mark } = require("prosemirror-model");
+import unified from 'unified';
+import markdown from 'remark-parse';
+import visit from 'unist-util-visit';
+import { Mark } from 'prosemirror-model';
 
 let schema;
 let plugins
 let activeMarks = Mark.none;
 let textsArray = [];
 
-// Setup Remark.
-const remark = new Remark({
-  commonmark: true,
-  footnotes: true,
-  pedantic: true,
-});
-
 const processMdastNode = node => {
   if (node.type === "root") {
     const content = node.children.map(childNode => processMdastNode(childNode));
@@ -139,25 +133,28 @@ const processMdastNode = node => {
     activeMarks = mark.removeFromSet(activeMarks);
     return;
   }
-
-  return doc;
 };
 
 const compileMarkdownToProseMirror = src => {
-  // console.log(src);
   // Clear out any old state.
   let activeMarks = Mark.none;
   let textsArray = [];
 
-  const mdast = remark.parse(src);
-  const doc = processMdastNode(mdast);
-  return doc;
+  const result = unified()
+    .use(markdown, { commonmark: true, footnotes: true, pedantic: true })
+    .parse(src);
+
+  const output = unified()
+    .use(() => processMdastNode)
+    .runSync(result);
+
+  return output;
 };
 
-module.exports = (s, p) => {
-  //console.log(s)
-  //console.log(s.nodes.code_block.create({ params: { language: 'javascript' } }))
+const parser = (s, p) => {
   schema = s;
   plugins = p;
   return compileMarkdownToProseMirror;
 };
+
+export default parser;