@phenomic/plugin-transform-markdown: allow custom markup

This plugin now use [unified](http://unifiedjs.github.io) directly instead of [remark](https://github.com/wooorm/remark) so we can mix remark with [rehype](https://github.com/wooorm/rehype) to allow custom markup.
This will open up usage of custom react components when rendering markdown tree with a custom mapping.

Closes [#187](#817) Closes [#1098](#1098)

flow/interfaces/shitty-libdefs.js

@@ -0,0 +1,30 @@
+declare module "unified" {
+  declare var exports: any;
+}
+declare module "remark-parse" {
+  declare var exports: any;
+}
+declare module "remark-toc" {
+  declare var exports: any;
+}
+declare module "remark-rehype" {
+  declare var exports: any;
+}
+declare module "rehype-raw" {
+  declare var exports: any;
+}
+declare module "rehype-slug" {
+  declare var exports: any;
+}
+declare module "rehype-autolink-headings" {
+  declare var exports: any;
+}
+declare module "rehype-highlight" {
+  declare var exports: any;
+}
+declare module "rehype-stringify" {
+  declare var exports: any;
+}
+declare module "rehype-react" {
+  declare var exports: any;
+}

packages/plugin-transform-markdown/package.json

@@ -27,12 +27,16 @@
     "hast-util-sanitize": "^1.1.0",
     "lodash.deburr": "^4.1.0",
     "lodash.kebabcase": "^4.1.1",
-    "remark": "^7.0.0",
-    "remark-autolink-headings": "^5.0.0",
-    "remark-html": "^6.0.0",
-    "remark-react": "^4.0.0",
-    "remark-slug": "^4.2.2",
-    "remark-toc": "^4.0.0"
+    "rehype-highlight": "^2.0.1",
+    "rehype-react": "^3.0.0",
+    "rehype-raw": "^2.0.0",
+    "rehype-autolink-headings": "^2.0.0",
+    "rehype-stringify": "^3.0.0",
+    "rehype-slug": "^2.0.0",
+    "remark-parse": "^4.0.0",
+    "remark-toc": "^4.0.0",
+    "remark-rehype": "^2.0.0",
+    "unified": "^6.0.0"
   },
   "peerDependencies": {
     "@phenomic/core": "^1.0.0-alpha.8"

packages/plugin-transform-markdown/src/__tests__/__snapshots__/index.js.snap

@@ -3,11 +3,10 @@
 exports[`should transform markdown as html 1`] = `
 Object {
   "data": Object {
-    "body": "<h2 id=\\"test\\"><a href=\\"#test\\" class=\\"phenomic-HeadingAnchor\\">#</a>Test</h2>
+    "body": "<h2 id=\\"test\\"><a aria-hidden=\\"true\\" href=\\"#test\\"><span class=\\"icon icon-link\\"></span></a>Test</h2>
 <p><a href=\\"href\\">link</a></p>
-<pre><code class=\\"language-js\\">console.log(window)
-</code></pre>
-",
+<pre><code class=\\"hljs language-js\\"><span class=\\"hljs-built_in\\">console</span>.log(<span class=\\"hljs-built_in\\">window</span>)
+</code></pre>",
     "test": "a",
     "test2": "b",
   },