Support superscript and subscript (#34)

You can have superscript and subscript text in Google Docs, but this app would previously remove the formatting. We now keep it in place, even if it outputs unfortunately verbose markup: most Markdown flavors have no markup for superscript or subscript, so we output HTML tags, e.g:

    This<sub>is subscripted</sub> and this<sup>is superscripted</sup> text.

This also updates most of our Rehype and Unified dependencies (they offer some new utilities and fixes that make this feature easier to implement). I did *not* update Remark here, though, since it has some major changes in v8 that need more careful review (really, I should have some tests).

Fixes #33.

index.js

@@ -1,18 +1,32 @@
 import fixGoogleHtml from './lib/fix-google-html';
 // rehype-dom-parse is a lightweight version of rehype-parse that leverages
 // browser APIs -- reduces bundle size by ~200 kB!
-// const parse = require('rehype-dom-parse').default;
 import parse from 'rehype-dom-parse';
+import { all } from 'rehype-remark';
 import rehype2remarkWithSpaces from './lib/rehype-to-remark-with-spaces';
 import stringify from 'remark-stringify';
 import { unified } from 'unified';
 
 
+function preserveTagAndConvertContents (h, node) {
+  return [
+    h(node, 'html', `<${node.tagName}>`),
+    ...all(h, node),
+    h(node, 'html', `</${node.tagName}>`)
+  ];
+}
+
 const processor = unified()
   .use(parse)
   .use(fixGoogleHtml)
   // .use(require('./lib/log-tree').default)
-  .use(rehype2remarkWithSpaces)
+  .use(rehype2remarkWithSpaces, {
+    handlers: {
+      // Preserve sup/sub markup; most Markdowns have no markup for it.
+      sub: preserveTagAndConvertContents,
+      sup: preserveTagAndConvertContents
+    }
+  })
   .use(stringify, {listItemIndent: '1'});
 
 function convertToMarkdown (html) {

lib/fix-google-html.js

@@ -102,7 +102,7 @@ export function fixNestedLists (node) {
 
 /**
  * Google Docs does italics/bolds/etc on <span>s with style attributes, but
- * rehype-remark does pick up on those well. Instead, transform them into
+ * rehype-remark does not pick up on those. Instead, transform them into
  * `em`, `strong`, etc. elements.
  * 
  * @param {RehypeNode} node Fix the tree below this node
@@ -116,6 +116,11 @@ export function unInlineStyles (node) {
     if (/font-weight:\s*(bold|700)/.test(style)) {
       wrapChildren(node, hast('strong'));
     }
+    if (/vertical-align:\s*super/.test(style)) {
+      wrapChildren(node, hast('sup'));
+    } else if (/vertical-align:\s*sub/.test(style)) {
+      wrapChildren(node, hast('sub'));
+    }
   });
 }
 

lib/rehype-to-remark-with-spaces.js

@@ -1,4 +1,4 @@
-const rehype2remark = require('rehype-remark');
+import rehypeRemark from 'rehype-remark';
 
 /**
  * The official rehype-remark plugin gets a little aggeressive with removing
@@ -33,7 +33,7 @@ export default function rehype2remarkWithSpaces () {
     }
   }
 
-  const convert = rehype2remark.apply(this, arguments);
+  const convert = rehypeRemark.apply(this, arguments);
   return function (tree, file) {
     preserveInitialSpaces(tree);
     const markdownTree = convert.apply(this, [tree, file]);