@utrecht/web-component-library-stencil 1.0.0-alpha.16 → 1.0.0-alpha.160

package/dist/collection/node_modules/@storybook/ui/node_modules/markdown-to-jsx/index.js

@@ -0,0 +1,1603 @@
+/* @jsx h */
+/**
+ * markdown-to-jsx@6 is a fork of [simple-markdown v0.2.2](https://github.com/Khan/simple-markdown)
+ * from Khan Academy. Thank you Khan devs for making such an awesome and extensible
+ * parsing infra... without it, half of the optimizations here wouldn't be feasible. 🙏🏼
+ */
+import React from 'react';
+import unquote from 'unquote';
+
+/** TODO: Drop for React 16? */
+const ATTRIBUTE_TO_JSX_PROP_MAP = {
+  accesskey: 'accessKey',
+  allowfullscreen: 'allowFullScreen',
+  allowtransparency: 'allowTransparency',
+  autocomplete: 'autoComplete',
+  autofocus: 'autoFocus',
+  autoplay: 'autoPlay',
+  cellpadding: 'cellPadding',
+  cellspacing: 'cellSpacing',
+  charset: 'charSet',
+  class: 'className',
+  classid: 'classId',
+  colspan: 'colSpan',
+  contenteditable: 'contentEditable',
+  contextmenu: 'contextMenu',
+  crossorigin: 'crossOrigin',
+  enctype: 'encType',
+  for: 'htmlFor',
+  formaction: 'formAction',
+  formenctype: 'formEncType',
+  formmethod: 'formMethod',
+  formnovalidate: 'formNoValidate',
+  formtarget: 'formTarget',
+  frameborder: 'frameBorder',
+  hreflang: 'hrefLang',
+  inputmode: 'inputMode',
+  keyparams: 'keyParams',
+  keytype: 'keyType',
+  marginheight: 'marginHeight',
+  marginwidth: 'marginWidth',
+  maxlength: 'maxLength',
+  mediagroup: 'mediaGroup',
+  minlength: 'minLength',
+  novalidate: 'noValidate',
+  radiogroup: 'radioGroup',
+  readonly: 'readOnly',
+  rowspan: 'rowSpan',
+  spellcheck: 'spellCheck',
+  srcdoc: 'srcDoc',
+  srclang: 'srcLang',
+  srcset: 'srcSet',
+  tabindex: 'tabIndex',
+  usemap: 'useMap',
+};
+
+const namedCodesToUnicode = {
+  amp: '\u0026',
+  apos: '\u0027',
+  gt: '\u003e',
+  lt: '\u003c',
+  nbsp: '\u00a0',
+  quot: '\u201c',
+};
+
+const DO_NOT_PROCESS_HTML_ELEMENTS = ['style', 'script'];
+
+/**
+ * the attribute extractor regex looks for a valid attribute name,
+ * followed by an equal sign (whitespace around the equal sign is allowed), followed
+ * by one of the following:
+ *
+ * 1. a single quote-bounded string, e.g. 'foo'
+ * 2. a double quote-bounded string, e.g. "bar"
+ * 3. an interpolation, e.g. {something}
+ *
+ * JSX can be be interpolated into itself and is passed through the compiler using
+ * the same options and setup as the current run.
+ *
+ * <Something children={<SomeOtherThing />} />
+ *                      ==================
+ *                              ↳ children: [<SomeOtherThing />]
+ *
+ * Otherwise, interpolations are handled as strings or simple booleans
+ * unless HTML syntax is detected.
+ *
+ * <Something color={green} disabled={true} />
+ *                   =====            ====
+ *                     ↓                ↳ disabled: true
+ *                     ↳ color: "green"
+ *
+ * Numbers are not parsed at this time due to complexities around int, float,
+ * and the upcoming bigint functionality that would make handling it unwieldy.
+ * Parse the string in your component as desired.
+ *
+ * <Something someBigNumber={123456789123456789} />
+ *                           ==================
+ *                                   ↳ someBigNumber: "123456789123456789"
+ */
+const ATTR_EXTRACTOR_R = /([-A-Z0-9_:]+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|(?:\{((?:\\.|{[^}]*?}|[^}])*)\})))?/gi;
+
+/** TODO: Write explainers for each of these */
+
+const AUTOLINK_MAILTO_CHECK_R = /mailto:/i;
+const BLOCK_END_R = /\n{2,}$/;
+const BLOCKQUOTE_R = /^( *>[^\n]+(\n[^\n]+)*\n*)+\n{2,}/;
+const BLOCKQUOTE_TRIM_LEFT_MULTILINE_R = /^ *> ?/gm;
+const BREAK_LINE_R = /^ {2,}\n/;
+const BREAK_THEMATIC_R = /^(?:( *[-*_]) *){3,}(?:\n *)+\n/;
+const CODE_BLOCK_FENCED_R = /^\s*(`{3,}|~{3,}) *(\S+)? *\n([\s\S]+?)\s*\1 *(?:\n *)+\n?/;
+const CODE_BLOCK_R = /^(?: {4}[^\n]+\n*)+(?:\n *)+\n?/;
+const CODE_INLINE_R = /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/;
+const CONSECUTIVE_NEWLINE_R = /^(?:\n *)*\n/;
+const CR_NEWLINE_R = /\r\n?/g;
+const FOOTNOTE_R = /^\[\^([^\]]+)](:.*)\n/;
+const FOOTNOTE_REFERENCE_R = /^\[\^([^\]]+)]/;
+const FORMFEED_R = /\f/g;
+const GFM_TASK_R = /^\s*?\[(x|\s)\]/;
+const HEADING_R = /^ *(#{1,6}) *([^\n]+)\n{0,2}/;
+const HEADING_SETEXT_R = /^([^\n]+)\n *(=|-){3,} *(?:\n *)+\n/;
+
+/**
+ * Explanation:
+ *
+ * 1. Look for a starting tag, preceeded by any amount of spaces
+ *    ^ *<
+ *
+ * 2. Capture the tag name (capture 1)
+ *    ([^ >/]+)
+ *
+ * 3. Ignore a space after the starting tag and capture the attribute portion of the tag (capture 2)
+ *     ?([^>]*)\/{0}>
+ *
+ * 4. Ensure a matching closing tag is present in the rest of the input string
+ *    (?=[\s\S]*<\/\1>)
+ *
+ * 5. Capture everything until the matching closing tag -- this might include additional pairs
+ *    of the same tag type found in step 2 (capture 3)
+ *    ((?:[\s\S]*?(?:<\1[^>]*>[\s\S]*?<\/\1>)*[\s\S]*?)*?)<\/\1>
+ *
+ * 6. Capture excess newlines afterward
+ *    \n*
+ */
+const HTML_BLOCK_ELEMENT_R = /^ *(?!<[a-z][^ >/]* ?\/>)<([a-z][^ >/]*) ?([^>]*)\/{0}>\n?(\s*(?:<\1[^>]*?>[\s\S]*?<\/\1>|(?!<\1)[\s\S])*?)<\/\1>\n*/i;
+
+const HTML_CHAR_CODE_R = /&([a-z]+);/g;
+
+const HTML_COMMENT_R = /^<!--.*?-->/;
+
+/**
+ * borrowed from React 15(https://github.com/facebook/react/blob/894d20744cba99383ffd847dbd5b6e0800355a5c/src/renderers/dom/shared/HTMLDOMPropertyConfig.js)
+ */
+const HTML_CUSTOM_ATTR_R = /^(data|aria|x)-[a-z_][a-z\d_.-]*$/;
+
+const HTML_SELF_CLOSING_ELEMENT_R = /^ *<([a-z][a-z0-9:]*)(?:\s+((?:<.*?>|[^>])*))?\/?>(?!<\/\1>)(\s*\n)?/i;
+const INTERPOLATION_R = /^\{.*\}$/;
+const LINK_AUTOLINK_BARE_URL_R = /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/;
+const LINK_AUTOLINK_MAILTO_R = /^<([^ >]+@[^ >]+)>/;
+const LINK_AUTOLINK_R = /^<([^ >]+:\/[^ >]+)>/;
+const LIST_ITEM_END_R = / *\n+$/;
+const LIST_LOOKBEHIND_R = /(?:^|\n)( *)$/;
+const CAPTURE_LETTER_AFTER_HYPHEN = /-([a-z])?/gi;
+const NP_TABLE_R = /^(.*\|?.*)\n *(\|? *[-:]+ *\|[-| :]*)\n((?:.*\|.*\n)*)\n?/;
+const PARAGRAPH_R = /^((?:[^\n]|\n(?! *\n))+)(?:\n *)+\n/;
+const REFERENCE_IMAGE_OR_LINK = /^\[([^\]]*)\]:\s*(\S+)\s*("([^"]*)")?/;
+const REFERENCE_IMAGE_R = /^!\[([^\]]*)\] ?\[([^\]]*)\]/;
+const REFERENCE_LINK_R = /^\[([^\]]*)\] ?\[([^\]]*)\]/;
+const SQUARE_BRACKETS_R = /(\[|\])/g;
+const SHOULD_RENDER_AS_BLOCK_R = /(\n|^[-*]\s|^#|^ {2,}|^-{2,}|^>\s)/;
+const TAB_R = /\t/g;
+const TABLE_SEPARATOR_R = /^ *\| */;
+const TABLE_TRIM_PIPES = /(^ *\||\| *$)/g;
+const TABLE_CELL_END_TRIM = / *$/;
+const TABLE_CENTER_ALIGN = /^ *:-+: *$/;
+const TABLE_LEFT_ALIGN = /^ *:-+ *$/;
+const TABLE_RIGHT_ALIGN = /^ *-+: *$/;
+
+const TEXT_BOLD_R = /^([*_])\1((?:\[.*?\][([].*?[)\]]|<.*?>(?:.*?<.*?>)?|`.*?`|~+.*?~+|.)*?)\1\1(?!\1)/;
+const TEXT_EMPHASIZED_R = /^([*_])((?:\[.*?\][([].*?[)\]]|<.*?>(?:.*?<.*?>)?|`.*?`|~+.*?~+|.)*?)\1(?!\1)/;
+const TEXT_STRIKETHROUGHED_R = /^~~((?:\[.*?\]|<.*?>(?:.*?<.*?>)?|`.*?`|.)*?)~~/;
+
+const TEXT_ESCAPED_R = /^\\([^0-9A-Za-z\s])/;
+const TEXT_PLAIN_R = /^[\s\S]+?(?=[^0-9A-Z\s\u00c0-\uffff&;.()'"]|\d+\.|\n\n| {2,}\n|\w+:\S|$)/i;
+const TRIM_NEWLINES_AND_TRAILING_WHITESPACE_R = /(^\n+|\n+$|\s+$)/g;
+
+const HTML_LEFT_TRIM_AMOUNT_R = /^([ \t]*)/;
+
+const UNESCAPE_URL_R = /\\([^0-9A-Z\s])/gi;
+
+// recognize a `*` `-`, `+`, `1.`, `2.`... list bullet
+const LIST_BULLET = '(?:[*+-]|\\d+\\.)';
+
+// recognize the start of a list item:
+// leading space plus a bullet plus a space (`   * `)
+const LIST_ITEM_PREFIX = '( *)(' + LIST_BULLET + ') +';
+const LIST_ITEM_PREFIX_R = new RegExp('^' + LIST_ITEM_PREFIX);
+
+// recognize an individual list item:
+//  * hi
+//    this is part of the same item
+//
+//    as is this, which is a new paragraph in the same item
+//
+//  * but this is not part of the same item
+const LIST_ITEM_R = new RegExp(
+  LIST_ITEM_PREFIX +
+    '[^\\n]*(?:\\n' +
+    '(?!\\1' +
+    LIST_BULLET +
+    ' )[^\\n]*)*(\\n|$)',
+  'gm'
+);
+
+// check whether a list item has paragraphs: if it does,
+// we leave the newlines at the end
+const LIST_R = new RegExp(
+  '^( *)(' +
+    LIST_BULLET +
+    ') ' +
+    '[\\s\\S]+?(?:\\n{2,}(?! )' +
+    '(?!\\1' +
+    LIST_BULLET +
+    ' (?!' +
+    LIST_BULLET +
+    ' ))\\n*' +
+    // the \\s*$ here is so that we can parse the inside of nested
+    // lists, where our content might end before we receive two `\n`s
+    '|\\s*\\n*$)'
+);
+
+const LINK_INSIDE = '(?:\\[[^\\]]*\\]|[^\\[\\]]|\\](?=[^\\[]*\\]))*';
+const LINK_HREF_AND_TITLE =
+  '\\s*<?((?:[^\\s\\\\]|\\\\.)*?)>?(?:\\s+[\'"]([\\s\\S]*?)[\'"])?\\s*';
+
+const LINK_R = new RegExp(
+  '^\\[(' + LINK_INSIDE + ')\\]\\(' + LINK_HREF_AND_TITLE + '\\)'
+);
+
+const IMAGE_R = new RegExp(
+  '^!\\[(' + LINK_INSIDE + ')\\]\\(' + LINK_HREF_AND_TITLE + '\\)'
+);
+
+const BLOCK_SYNTAXES = [
+  BLOCKQUOTE_R,
+  CODE_BLOCK_R,
+  CODE_BLOCK_FENCED_R,
+  HEADING_R,
+  HEADING_SETEXT_R,
+  HTML_BLOCK_ELEMENT_R,
+  HTML_COMMENT_R,
+  HTML_SELF_CLOSING_ELEMENT_R,
+  LIST_ITEM_R,
+  LIST_R,
+  NP_TABLE_R,
+  PARAGRAPH_R,
+];
+
+function containsBlockSyntax(input) {
+  return BLOCK_SYNTAXES.some(r => r.test(input));
+}
+
+// based on https://stackoverflow.com/a/18123682/1141611
+// not complete, but probably good enough
+function slugify(str) {
+  return str
+    .replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g, 'a')
+    .replace(/[çÇ]/g, 'c')
+    .replace(/[ðÐ]/g, 'd')
+    .replace(/[ÈÉÊËéèêë]/g, 'e')
+    .replace(/[ÏïÎîÍíÌì]/g, 'i')
+    .replace(/[Ññ]/g, 'n')
+    .replace(/[øØœŒÕõÔôÓóÒò]/g, 'o')
+    .replace(/[ÜüÛûÚúÙù]/g, 'u')
+    .replace(/[ŸÿÝý]/g, 'y')
+    .replace(/[^a-z0-9- ]/gi, '')
+    .replace(/ /gi, '-')
+    .toLowerCase();
+}
+
+function parseTableAlignCapture(alignCapture) {
+  if (TABLE_RIGHT_ALIGN.test(alignCapture)) {
+    return 'right';
+  } else if (TABLE_CENTER_ALIGN.test(alignCapture)) {
+    return 'center';
+  } else if (TABLE_LEFT_ALIGN.test(alignCapture)) {
+    return 'left';
+  }
+
+  return null;
+}
+
+function parseTableRow(source, parse, state) {
+  const prevInTable = state.inTable;
+  state.inTable = true;
+  const tableRow = parse(source.trim(), state);
+  state.inTable = prevInTable;
+
+  let cells = [[]];
+  tableRow.forEach(function(node, i) {
+    if (node.type === 'tableSeparator') {
+      // Filter out empty table separators at the start/end:
+        if (i !== 0 && i !== tableRow.length - 1) {
+          // Split the current row:
+          cells.push([]);
+        }
+    } else {
+      if (node.type === 'text' && (
+        tableRow[i + 1] == null ||
+        tableRow[i + 1].type === 'tableSeparator'
+      )) {
+        node.content = node.content.replace(TABLE_CELL_END_TRIM, "");
+      }
+      cells[cells.length - 1].push(node);
+    }
+  });
+  return cells;
+}
+
+function parseTableAlign(source /*, parse, state*/) {
+  const alignText = source
+    .replace(TABLE_TRIM_PIPES, '')
+    .split('|');
+
+  return alignText.map(parseTableAlignCapture);
+}
+
+function parseTableCells(source, parse, state) {
+  const rowsText = source
+    .trim()
+    .split('\n');
+
+  return rowsText.map(function(rowText) {
+      return parseTableRow(rowText, parse, state);
+  });
+}
+
+function parseTable(capture, parse, state) {
+  state.inline = true;
+  const header = parseTableRow(capture[1], parse, state);
+  const align = parseTableAlign(capture[2], parse, state);
+  const cells = parseTableCells(capture[3], parse, state);
+  state.inline = false;
+
+  return {
+    align: align,
+    cells: cells,
+    header: header,
+    type: 'table',
+  };
+}
+
+function getTableStyle(node, colIndex) {
+  return node.align[colIndex] == null
+    ? {}
+    : {
+        textAlign: node.align[colIndex],
+      };
+}
+
+/** TODO: remove for react 16 */
+function normalizeAttributeKey(key) {
+  const hyphenIndex = key.indexOf('-');
+
+  if (hyphenIndex !== -1 && key.match(HTML_CUSTOM_ATTR_R) === null) {
+    key = key.replace(CAPTURE_LETTER_AFTER_HYPHEN, function(_, letter) {
+      return letter.toUpperCase();
+    });
+  }
+
+  return key;
+}
+
+function attributeValueToJSXPropValue(key, value) {
+  if (key === 'style') {
+    return value.split(/;\s?/).reduce(function(styles, kvPair) {
+      const key = kvPair.slice(0, kvPair.indexOf(':'));
+
+      // snake-case to camelCase
+      // also handles PascalCasing vendor prefixes
+      const camelCasedKey = key.replace(/(-[a-z])/g, substr =>
+        substr[1].toUpperCase()
+      );
+
+      // key.length + 1 to skip over the colon
+      styles[camelCasedKey] = kvPair.slice(key.length + 1).trim();
+
+      return styles;
+    }, {});
+  } else if (key === 'href') {
+    return sanitizeUrl(value)
+  } else if (value.match(INTERPOLATION_R)) {
+    // return as a string and let the consumer decide what to do with it
+    value = value.slice(1, value.length - 1);
+  }
+
+  if (value === 'true') {
+    return true;
+  } else if (value === 'false') {
+    return false;
+  }
+
+  return value;
+}
+
+function normalizeWhitespace(source) {
+  return source
+    .replace(CR_NEWLINE_R, '\n')
+    .replace(FORMFEED_R, '')
+    .replace(TAB_R, '    ');
+}
+
+/**
+ * Creates a parser for a given set of rules, with the precedence
+ * specified as a list of rules.
+ *
+ * @rules: an object containing
+ * rule type -> {match, order, parse} objects
+ * (lower order is higher precedence)
+ * (Note: `order` is added to defaultRules after creation so that
+ *  the `order` of defaultRules in the source matches the `order`
+ *  of defaultRules in terms of `order` fields.)
+ *
+ * @returns The resulting parse function, with the following parameters:
+ *   @source: the input source string to be parsed
+ *   @state: an optional object to be threaded through parse
+ *     calls. Allows clients to add stateful operations to
+ *     parsing, such as keeping track of how many levels deep
+ *     some nesting is. For an example use-case, see passage-ref
+ *     parsing in src/widgets/passage/passage-markdown.jsx
+ */
+function parserFor(rules) {
+  // Sorts rules in order of increasing order, then
+  // ascending rule name in case of ties.
+  let ruleList = Object.keys(rules);
+
+  /* istanbul ignore next */
+  if (process.env.NODE_ENV !== 'production') {
+    ruleList.forEach(function(type) {
+      let order = rules[type].order;
+      if (
+        process.env.NODE_ENV !== 'production' &&
+        (typeof order !== 'number' || !isFinite(order))
+      ) {
+        console.warn(
+          'markdown-to-jsx: Invalid order for rule `' + type + '`: ' + order
+        );
+      }
+    });
+  }
+
+  ruleList.sort(function(typeA, typeB) {
+    let orderA = rules[typeA].order;
+    let orderB = rules[typeB].order;
+
+    // First sort based on increasing order
+    if (orderA !== orderB) {
+      return orderA - orderB;
+
+      // Then based on increasing unicode lexicographic ordering
+    } else if (typeA < typeB) {
+      return -1;
+    }
+
+    return 1;
+  });
+
+  function nestedParse(source, state) {
+    let result = [];
+
+    // We store the previous capture so that match functions can
+    // use some limited amount of lookbehind. Lists use this to
+    // ensure they don't match arbitrary '- ' or '* ' in inline
+    // text (see the list rule for more information).
+    let prevCapture = '';
+    while (source) {
+      let i = 0;
+      while (i < ruleList.length) {
+        const ruleType = ruleList[i];
+        const rule = rules[ruleType];
+        const capture = rule.match(source, state, prevCapture);
+
+        if (capture) {
+          const currCaptureString = capture[0];
+          source = source.substring(currCaptureString.length);
+          const parsed = rule.parse(capture, nestedParse, state);
+
+          // We also let rules override the default type of
+          // their parsed node if they would like to, so that
+          // there can be a single output function for all links,
+          // even if there are several rules to parse them.
+          if (parsed.type == null) {
+            parsed.type = ruleType;
+          }
+
+          result.push(parsed);
+
+          prevCapture = currCaptureString;
+          break;
+        }
+
+        i++;
+      }
+    }
+
+    return result;
+  }
+
+  return function outerParse(source, state) {
+    return nestedParse(normalizeWhitespace(source), state);
+  };
+}
+
+// Creates a match function for an inline scoped or simple element from a regex
+function inlineRegex(regex) {
+  return function match(source, state) {
+    if (state.inline) {
+      return regex.exec(source);
+    } else {
+      return null;
+    }
+  };
+}
+
+// basically any inline element except links
+function simpleInlineRegex(regex) {
+  return function match(source, state) {
+    if (state.inline || state.simple) {
+      return regex.exec(source);
+    } else {
+      return null;
+    }
+  };
+}
+
+// Creates a match function for a block scoped element from a regex
+function blockRegex(regex) {
+  return function match(source, state) {
+    if (state.inline || state.simple) {
+      return null;
+    } else {
+      return regex.exec(source);
+    }
+  };
+}
+
+// Creates a match function from a regex, ignoring block/inline scope
+function anyScopeRegex(regex) {
+  return function match(source /*, state*/) {
+    return regex.exec(source);
+  };
+}
+
+function reactFor(outputFunc) {
+  return function nestedReactOutput(ast, state) {
+    state = state || {};
+    if (Array.isArray(ast)) {
+      const oldKey = state.key;
+      const result = [];
+
+      // map nestedOutput over the ast, except group any text
+      // nodes together into a single string output.
+      let lastWasString = false;
+
+      for (let i = 0; i < ast.length; i++) {
+        state.key = i;
+
+        const nodeOut = nestedReactOutput(ast[i], state);
+        const isString = typeof nodeOut === 'string';
+
+        if (isString && lastWasString) {
+          result[result.length - 1] += nodeOut;
+        } else {
+          result.push(nodeOut);
+        }
+
+        lastWasString = isString;
+      }
+
+      state.key = oldKey;
+
+      return result;
+    }
+
+    return outputFunc(ast, nestedReactOutput, state);
+  };
+}
+
+function sanitizeUrl(url) {
+  try {
+    const decoded = decodeURIComponent(url)
+      .replace(/[^A-Za-z0-9/:]/g, '');
+
+    if (decoded.match(/^\s*(javascript|vbscript|data):/i)) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn(
+          'Anchor URL contains an unsafe JavaScript/VBScript/data expression, it will not be rendered.',
+          decoded
+        );
+      }
+
+      return null;
+    }
+  } catch (e) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        'Anchor URL could not be decoded due to malformed syntax or characters, it will not be rendered.',
+        url
+      );
+    }
+
+    // decodeURIComponent sometimes throws a URIError
+    // See `decodeURIComponent('a%AFc');`
+    // http://stackoverflow.com/questions/9064536/javascript-decodeuricomponent-malformed-uri-exception
+    return null;
+  }
+
+  return url;
+}
+
+function unescapeUrl(rawUrlString) {
+  return rawUrlString.replace(UNESCAPE_URL_R, '$1');
+}
+
+/**
+ * Everything inline, including links.
+ */
+function parseInline(parse, content, state) {
+  const isCurrentlyInline = state.inline || false;
+  const isCurrentlySimple = state.simple || false;
+  state.inline = true;
+  state.simple = true;
+  const result = parse(content, state);
+  state.inline = isCurrentlyInline;
+  state.simple = isCurrentlySimple;
+  return result;
+}
+
+/**
+ * Anything inline that isn't a link.
+ */
+function parseSimpleInline(parse, content, state) {
+  const isCurrentlyInline = state.inline || false;
+  const isCurrentlySimple = state.simple || false;
+  state.inline = false;
+  state.simple = true;
+  const result = parse(content, state);
+  state.inline = isCurrentlyInline;
+  state.simple = isCurrentlySimple;
+  return result;
+}
+
+function parseBlock(parse, content, state) {
+  state.inline = false;
+  return parse(content + '\n\n', state);
+}
+
+function parseCaptureInline(capture, parse, state) {
+  return {
+    content: parseInline(parse, capture[1], state),
+  };
+}
+
+function captureNothing() {
+  return {};
+}
+
+function renderNothing() {
+  return null;
+}
+
+function ruleOutput(rules) {
+  return function nestedRuleOutput(ast, outputFunc, state) {
+    return rules[ast.type].react(ast, outputFunc, state);
+  };
+}
+
+function cx(...args) {
+  return args.filter(Boolean).join(' ');
+}
+
+function get(src, path, fb) {
+  let ptr = src;
+  const frags = path.split('.');
+
+  while (frags.length) {
+    ptr = ptr[frags[0]];
+
+    if (ptr === undefined) break;
+    else frags.shift();
+  }
+
+  return ptr || fb;
+}
+
+function getTag(tag, overrides) {
+  const override = get(overrides, tag);
+
+  if (!override) return tag;
+
+  return typeof override === 'function' || (typeof override === 'object' && 'render' in override)
+    ? override
+    : get(overrides, `${tag}.component`, tag);
+}
+
+/**
+ * anything that must scan the tree before everything else
+ */
+const PARSE_PRIORITY_MAX = 1;
+
+/**
+ * scans for block-level constructs
+ */
+const PARSE_PRIORITY_HIGH = 2;
+
+/**
+ * inline w/ more priority than other inline
+ */
+const PARSE_PRIORITY_MED = 3;
+
+/**
+ * inline elements
+ */
+const PARSE_PRIORITY_LOW = 4;
+
+/**
+ * bare text and stuff that is considered leftovers
+ */
+const PARSE_PRIORITY_MIN = 5;
+
+export function compiler(markdown, options) {
+  options = options || {};
+  options.overrides = options.overrides || {};
+  options.slugify = options.slugify || slugify;
+  options.namedCodesToUnicode = options.namedCodesToUnicode 
+    ? {...namedCodesToUnicode, ...options.namedCodesToUnicode}
+    : namedCodesToUnicode;
+
+  const createElementFn = options.createElement || React.createElement;
+
+  // eslint-disable-next-line no-unused-vars
+  function h(tag, props, ...children) {
+    const overrideProps = get(options.overrides, `${tag}.props`, {});
+
+    return createElementFn(
+      getTag(tag, options.overrides),
+      {
+        ...props,
+        ...overrideProps,
+        className:
+          cx(props && props.className, overrideProps.className) || undefined,
+      },
+      ...children
+    );
+  }
+
+  function compile(input) {
+    let inline = false;
+
+    if (options.forceInline) {
+      inline = true;
+    } else if (!options.forceBlock) {
+      /**
+       * should not contain any block-level markdown like newlines, lists, headings,
+       * thematic breaks, blockquotes, tables, etc
+       */
+      inline = SHOULD_RENDER_AS_BLOCK_R.test(input) === false;
+    }
+
+    const arr = emitter(
+      parser(
+        inline
+          ? input
+          : `${input.replace(TRIM_NEWLINES_AND_TRAILING_WHITESPACE_R, '')}\n\n`,
+        { inline }
+      )
+    );
+
+    let jsx;
+    if (arr.length > 1) {
+      jsx = inline ? <span key="outer">{arr}</span> : <div key="outer">{arr}</div>;
+    } else if (arr.length === 1) {
+      jsx = arr[0];
+
+      // TODO: remove this for React 16
+      if (typeof jsx === 'string') {
+        jsx = <span key="outer">{jsx}</span>;
+      }
+    } else {
+      // TODO: return null for React 16
+      jsx = <span key="outer" />;
+    }
+
+    return jsx;
+  }
+
+  function attrStringToMap(str) {
+    const attributes = str.match(ATTR_EXTRACTOR_R);
+
+    return attributes
+      ? attributes.reduce(function(map, raw, index) {
+          const delimiterIdx = raw.indexOf('=');
+
+          if (delimiterIdx !== -1) {
+            const key = normalizeAttributeKey(
+              raw.slice(0, delimiterIdx)
+            ).trim();
+            const value = unquote(raw.slice(delimiterIdx + 1).trim());
+
+            const mappedKey = ATTRIBUTE_TO_JSX_PROP_MAP[key] || key;
+            const normalizedValue = (map[
+              mappedKey
+            ] = attributeValueToJSXPropValue(key, value));
+
+            if (
+              HTML_BLOCK_ELEMENT_R.test(normalizedValue) ||
+              HTML_SELF_CLOSING_ELEMENT_R.test(normalizedValue)
+            ) {
+              map[mappedKey] = React.cloneElement(
+                compile(normalizedValue.trim()),
+                { key: index }
+              );
+            }
+          } else if (raw !== 'style') {
+            map[ATTRIBUTE_TO_JSX_PROP_MAP[raw] || raw] = true;
+          }
+
+          return map;
+        }, {})
+      : undefined;
+  }
+
+  function stripHtmlComments(html) {
+    return html.replace(/<!--[\s\S]*?(?:-->)/g, '')
+  }
+
+  /* istanbul ignore next */
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof markdown !== 'string') {
+      throw new Error(`markdown-to-jsx: the first argument must be
+                             a string`);
+    }
+
+    if (
+      Object.prototype.toString.call(options.overrides) !== '[object Object]'
+    ) {
+      throw new Error(`markdown-to-jsx: options.overrides (second argument property) must be
+                             undefined or an object literal with shape:
+                             {
+                                htmltagname: {
+                                    component: string|ReactComponent(optional),
+                                    props: object(optional)
+                                }
+                             }`);
+    }
+  }
+
+  const footnotes = [];
+  const refs = {};
+
+  /**
+   * each rule's react() output function goes through our custom h() JSX pragma;
+   * this allows the override functionality to be automatically applied
+   */
+  const rules = {
+    blockQuote: {
+      match: blockRegex(BLOCKQUOTE_R),
+      order: PARSE_PRIORITY_HIGH,
+      parse(capture, parse, state) {
+        return {
+          content: parse(
+            capture[0].replace(BLOCKQUOTE_TRIM_LEFT_MULTILINE_R, ''),
+            state
+          ),
+        };
+      },
+      react(node, output, state) {
+        return (
+          <blockquote key={state.key}>{output(node.content, state)}</blockquote>
+        );
+      },
+    },
+
+    breakLine: {
+      match: anyScopeRegex(BREAK_LINE_R),
+      order: PARSE_PRIORITY_HIGH,
+      parse: captureNothing,
+      react(_, __, state) {
+        return <br key={state.key} />;
+      },
+    },
+
+    breakThematic: {
+      match: blockRegex(BREAK_THEMATIC_R),
+      order: PARSE_PRIORITY_HIGH,
+      parse: captureNothing,
+      react(_, __, state) {
+        return <hr key={state.key} />;
+      },
+    },
+
+    codeBlock: {
+      match: blockRegex(CODE_BLOCK_R),
+      order: PARSE_PRIORITY_MAX,
+      parse(capture /*, parse, state*/) {
+        let content = capture[0].replace(/^ {4}/gm, '').replace(/\n+$/, '');
+        return {
+          content: content,
+          lang: undefined,
+        };
+      },
+
+      react(node, output, state) {
+        return (
+          <pre key={state.key}>
+            <code className={node.lang ? `lang-${node.lang}` : ''}>
+              {node.content}
+            </code>
+          </pre>
+        );
+      },
+    },
+
+    codeFenced: {
+      match: blockRegex(CODE_BLOCK_FENCED_R),
+      order: PARSE_PRIORITY_MAX,
+      parse(capture /*, parse, state*/) {
+        return {
+          content: capture[3],
+          lang: capture[2] || undefined,
+          type: 'codeBlock',
+        };
+      },
+    },
+
+    codeInline: {
+      match: simpleInlineRegex(CODE_INLINE_R),
+      order: PARSE_PRIORITY_LOW,
+      parse(capture /*, parse, state*/) {
+        return {
+          content: capture[2],
+        };
+      },
+      react(node, output, state) {
+        return <code key={state.key}>{node.content}</code>;
+      },
+    },
+
+    /**
+     * footnotes are emitted at the end of compilation in a special <footer> block
+     */
+    footnote: {
+      match: blockRegex(FOOTNOTE_R),
+      order: PARSE_PRIORITY_MAX,
+      parse(capture /*, parse, state*/) {
+        footnotes.push({
+          footnote: capture[2],
+          identifier: capture[1],
+        });
+
+        return {};
+      },
+      react: renderNothing,
+    },
+
+    footnoteReference: {
+      match: inlineRegex(FOOTNOTE_REFERENCE_R),
+      order: PARSE_PRIORITY_HIGH,
+      parse(capture /*, parse*/) {
+        return {
+          content: capture[1],
+          target: `#${options.slugify(capture[1])}`,
+        };
+      },
+      react(node, output, state) {
+        return (
+          <a key={state.key} href={sanitizeUrl(node.target)}>
+            <sup key={state.key}>{node.content}</sup>
+          </a>
+        );
+      },
+    },
+
+    gfmTask: {
+      match: inlineRegex(GFM_TASK_R),
+      order: PARSE_PRIORITY_HIGH,
+      parse(capture /*, parse, state*/) {
+        return {
+          completed: capture[1].toLowerCase() === 'x',
+        };
+      },
+      react(node, output, state) {
+        return (
+          <input
+            checked={node.completed}
+            key={state.key}
+            readOnly
+            type="checkbox"
+          />
+        );
+      },
+    },
+
+    heading: {
+      match: blockRegex(HEADING_R),
+      order: PARSE_PRIORITY_HIGH,
+      parse(capture, parse, state) {
+        return {
+          content: parseInline(parse, capture[2], state),
+          id: options.slugify(capture[2]),
+          level: capture[1].length,
+        };
+      },
+      react(node, output, state) {
+        const Tag = `h${node.level}`;
+        return (
+          <Tag id={node.id} key={state.key}>
+            {output(node.content, state)}
+          </Tag>
+        );
+      },
+    },
+
+    headingSetext: {
+      match: blockRegex(HEADING_SETEXT_R),
+      order: PARSE_PRIORITY_MAX,
+      parse(capture, parse, state) {
+        return {
+          content: parseInline(parse, capture[1], state),
+          level: capture[2] === '=' ? 1 : 2,
+          type: 'heading',
+        };
+      },
+    },
+
+    htmlComment: {
+      match: anyScopeRegex(HTML_COMMENT_R),
+      order: PARSE_PRIORITY_HIGH,
+      parse() {
+        return {};
+      },
+      react: renderNothing,
+    },
+
+    image: {
+      match: simpleInlineRegex(IMAGE_R),
+      order: PARSE_PRIORITY_HIGH,
+      parse(capture /*, parse, state*/) {
+        return {
+          alt: capture[1],
+          target: unescapeUrl(capture[2]),
+          title: capture[3],
+        };
+      },
+      react(node, output, state) {
+        return (
+          <img
+            key={state.key}
+            alt={node.alt || undefined}
+            title={node.title || undefined}
+            src={sanitizeUrl(node.target)}
+          />
+        );
+      },
+    },
+
+    link: {
+      match: inlineRegex(LINK_R, false),
+      order: PARSE_PRIORITY_LOW,
+      parse(capture, parse, state) {
+        return {
+          content: parseSimpleInline(parse, capture[1], state),
+          target: unescapeUrl(capture[2]),
+          title: capture[3],
+        };
+      },
+      react(node, output, state) {
+        return (
+          <a key={state.key} href={sanitizeUrl(node.target)} title={node.title}>
+            {output(node.content, state)}
+          </a>
+        );
+      },
+    },
+
+    // https://daringfireball.net/projects/markdown/syntax#autolink
+    linkAngleBraceStyleDetector: {
+      match: inlineRegex(LINK_AUTOLINK_R),
+      order: PARSE_PRIORITY_MAX,
+      parse(capture /*, parse, state*/) {
+        return {
+          content: [
+            {
+              content: capture[1],
+              type: 'text',
+            },
+          ],
+          target: capture[1],
+          type: 'link',
+        };
+      },
+    },
+
+    linkBareUrlDetector: {
+      match: inlineRegex(LINK_AUTOLINK_BARE_URL_R),
+      order: PARSE_PRIORITY_MAX,
+      parse(capture /*, parse, state*/) {
+        return {
+          content: [
+            {
+              content: capture[1],
+              type: 'text',
+            },
+          ],
+          target: capture[1],
+          title: undefined,
+          type: 'link',
+        };
+      },
+    },
+
+    linkMailtoDetector: {
+      match: inlineRegex(LINK_AUTOLINK_MAILTO_R),
+      order: PARSE_PRIORITY_MAX,
+      parse(capture /*, parse, state*/) {
+        let address = capture[1];
+        let target = capture[1];
+
+        // Check for a `mailto:` already existing in the link:
+        if (!AUTOLINK_MAILTO_CHECK_R.test(target)) {
+          target = 'mailto:' + target;
+        }
+
+        return {
+          content: [
+            {
+              content: address.replace('mailto:', ''),
+              type: 'text',
+            },
+          ],
+          target: target,
+          type: 'link',
+        };
+      },
+    },
+
+    list: {
+      match(source, state, prevCapture) {
+        // We only want to break into a list if we are at the start of a
+        // line. This is to avoid parsing "hi * there" with "* there"
+        // becoming a part of a list.
+        // You might wonder, "but that's inline, so of course it wouldn't
+        // start a list?". You would be correct! Except that some of our
+        // lists can be inline, because they might be inside another list,
+        // in which case we can parse with inline scope, but need to allow
+        // nested lists inside this inline scope.
+        const isStartOfLine = LIST_LOOKBEHIND_R.exec(prevCapture);
+        const isListBlock = state._list || !state.inline;
+
+        if (isStartOfLine && isListBlock) {
+          source = isStartOfLine[1] + source;
+
+          return LIST_R.exec(source);
+        } else {
+          return null;
+        }
+      },
+      order: PARSE_PRIORITY_HIGH,
+      parse(capture, parse, state) {
+        const bullet = capture[2];
+        const ordered = bullet.length > 1;
+        const start = ordered ? +bullet : undefined;
+        const items = capture[0]
+          // recognize the end of a paragraph block inside a list item:
+          // two or more newlines at end end of the item
+          .replace(BLOCK_END_R, '\n')
+          .match(LIST_ITEM_R);
+
+        let lastItemWasAParagraph = false;
+        const itemContent = items.map(function(item, i) {
+          // We need to see how far indented the item is:
+          const space = LIST_ITEM_PREFIX_R.exec(item)[0].length;
+
+          // And then we construct a regex to "unindent" the subsequent
+          // lines of the items by that amount:
+          const spaceRegex = new RegExp('^ {1,' + space + '}', 'gm');
+
+          // Before processing the item, we need a couple things
+          const content = item
+            // remove indents on trailing lines:
+            .replace(spaceRegex, '')
+            // remove the bullet:
+            .replace(LIST_ITEM_PREFIX_R, '');
+
+          // Handling "loose" lists, like:
+          //
+          //  * this is wrapped in a paragraph
+          //
+          //  * as is this
+          //
+          //  * as is this
+          const isLastItem = i === items.length - 1;
+          const containsBlocks = content.indexOf('\n\n') !== -1;
+
+          // Any element in a list is a block if it contains multiple
+          // newlines. The last element in the list can also be a block
+          // if the previous item in the list was a block (this is
+          // because non-last items in the list can end with \n\n, but
+          // the last item can't, so we just "inherit" this property
+          // from our previous element).
+          const thisItemIsAParagraph =
+            containsBlocks || (isLastItem && lastItemWasAParagraph);
+          lastItemWasAParagraph = thisItemIsAParagraph;
+
+          // backup our state for restoration afterwards. We're going to
+          // want to set state._list to true, and state.inline depending
+          // on our list's looseness.
+          const oldStateInline = state.inline;
+          const oldStateList = state._list;
+          state._list = true;
+
+          // Parse inline if we're in a tight list, or block if we're in
+          // a loose list.
+          let adjustedContent;
+          if (thisItemIsAParagraph) {
+            state.inline = false;
+            adjustedContent = content.replace(LIST_ITEM_END_R, '\n\n');
+          } else {
+            state.inline = true;
+            adjustedContent = content.replace(LIST_ITEM_END_R, '');
+          }
+
+          const result = parse(adjustedContent, state);
+
+          // Restore our state before returning
+          state.inline = oldStateInline;
+          state._list = oldStateList;
+
+          return result;
+        });
+
+        return {
+          items: itemContent,
+          ordered: ordered,
+          start: start,
+        };
+      },
+      react(node, output, state) {
+        const Tag = node.ordered ? 'ol' : 'ul';
+
+        return (
+          <Tag key={state.key} start={node.start}>
+            {node.items.map(function generateListItem(item, i) {
+              return <li key={i}>{output(item, state)}</li>;
+            })}
+          </Tag>
+        );
+      },
+    },
+
+    newlineCoalescer: {
+      match: blockRegex(CONSECUTIVE_NEWLINE_R),
+      order: PARSE_PRIORITY_LOW,
+      parse: captureNothing,
+      react(/*node, output, state*/) {
+        return '\n';
+      },
+    },
+
+    paragraph: {
+      match: blockRegex(PARAGRAPH_R),
+      order: PARSE_PRIORITY_LOW,
+      parse: parseCaptureInline,
+      react(node, output, state) {
+        return <p key={state.key}>{output(node.content, state)}</p>;
+      },
+    },
+
+    ref: {
+      match: inlineRegex(REFERENCE_IMAGE_OR_LINK),
+      order: PARSE_PRIORITY_MAX,
+      parse(capture /*, parse*/) {
+        refs[capture[1]] = {
+          target: capture[2],
+          title: capture[4],
+        };
+
+        return {};
+      },
+      react: renderNothing,
+    },
+
+    refImage: {
+      match: simpleInlineRegex(REFERENCE_IMAGE_R),
+      order: PARSE_PRIORITY_MAX,
+      parse(capture) {
+        return {
+          alt: capture[1] || undefined,
+          ref: capture[2],
+        };
+      },
+      react(node, output, state) {
+        return (
+          <img
+            key={state.key}
+            alt={node.alt}
+            src={sanitizeUrl(refs[node.ref].target)}
+            title={refs[node.ref].title}
+          />
+        );
+      },
+    },
+
+    refLink: {
+      match: inlineRegex(REFERENCE_LINK_R),
+      order: PARSE_PRIORITY_MAX,
+      parse(capture, parse, state) {
+        return {
+          content: parse(capture[1], state),
+          fallbackContent: parse(capture[0].replace(SQUARE_BRACKETS_R, '\\$1'), state),
+          ref: capture[2],
+        };
+      },
+      react(node, output, state) {
+        return refs[node.ref] ? (
+          <a
+            key={state.key}
+            href={sanitizeUrl(refs[node.ref].target)}
+            title={refs[node.ref].title}
+          >
+            {output(node.content, state)}
+          </a>
+        ) : <span key={state.key}>{output(node.fallbackContent, state)}</span>;
+      },
+    },
+
+    table: {
+      match: blockRegex(NP_TABLE_R),
+      order: PARSE_PRIORITY_HIGH,
+      parse: parseTable,
+      react(node, output, state) {
+        return (
+          <table key={state.key}>
+            <thead>
+              <tr>
+                {node.header.map(function generateHeaderCell(content, i) {
+                  return (
+                    <th key={i} style={getTableStyle(node, i)}>
+                      {output(content, state)}
+                    </th>
+                  );
+                })}
+              </tr>
+            </thead>
+
+            <tbody>
+              {node.cells.map(function generateTableRow(row, i) {
+                return (
+                  <tr key={i}>
+                    {row.map(function generateTableCell(content, c) {
+                      return (
+                        <td key={c} style={getTableStyle(node, c)}>
+                          {output(content, state)}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        );
+      },
+    },
+
+    tableSeparator: {
+      match: function(source, state) {
+        if (!state.inTable) {
+            return null;
+        }
+        return TABLE_SEPARATOR_R.exec(source);
+      },
+      order: PARSE_PRIORITY_HIGH,
+      parse: function() {
+          return { type: 'tableSeparator' };
+      },
+      // These shouldn't be reached, but in case they are, be reasonable:
+      react() { return ' | '; }
+    },
+
+    text: {
+      // Here we look for anything followed by non-symbols,
+      // double newlines, or double-space-newlines
+      // We break on any symbol characters so that this grammar
+      // is easy to extend without needing to modify this regex
+      match: anyScopeRegex(TEXT_PLAIN_R),
+      order: PARSE_PRIORITY_MIN,
+      parse(capture /*, parse, state*/) {
+        return {
+          content: capture[0]
+            // nbsp -> unicode equivalent for named chars
+            .replace(HTML_CHAR_CODE_R, (full, inner) => {
+              return options.namedCodesToUnicode[inner]
+                ? options.namedCodesToUnicode[inner]
+                : full;
+            }),
+        };
+      },
+      react(node /*, output, state*/) {
+        return node.content;
+      },
+    },
+
+    textBolded: {
+      match: simpleInlineRegex(TEXT_BOLD_R),
+      order: PARSE_PRIORITY_MED,
+      parse(capture, parse, state) {
+        return {
+          // capture[1] -> the syntax control character
+          // capture[2] -> inner content
+          content: parse(capture[2], state),
+        };
+      },
+      react(node, output, state) {
+        return <strong key={state.key}>{output(node.content, state)}</strong>;
+      },
+    },
+
+    textEmphasized: {
+      match: simpleInlineRegex(TEXT_EMPHASIZED_R),
+      order: PARSE_PRIORITY_LOW,
+      parse(capture, parse, state) {
+        return {
+          // capture[1] -> opening * or _
+          // capture[2] -> inner content
+          content: parse(capture[2], state),
+        };
+      },
+      react(node, output, state) {
+        return <em key={state.key}>{output(node.content, state)}</em>;
+      },
+    },
+
+    textEscaped: {
+      // We don't allow escaping numbers, letters, or spaces here so that
+      // backslashes used in plain text still get rendered. But allowing
+      // escaping anything else provides a very flexible escape mechanism,
+      // regardless of how this grammar is extended.
+      match: simpleInlineRegex(TEXT_ESCAPED_R),
+      order: PARSE_PRIORITY_HIGH,
+      parse(capture /*, parse, state*/) {
+        return {
+          content: capture[1],
+          type: 'text',
+        };
+      },
+    },
+
+    textStrikethroughed: {
+      match: simpleInlineRegex(TEXT_STRIKETHROUGHED_R),
+      order: PARSE_PRIORITY_LOW,
+      parse: parseCaptureInline,
+      react(node, output, state) {
+        return <del key={state.key}>{output(node.content, state)}</del>;
+      },
+    },
+  };
+
+  // Object.keys(rules).forEach(key => {
+  //     let { match, parse } = rules[key];
+
+  //     rules[key].match = (...args) => {
+  //         const start = performance.now();
+  //         const result = match(...args);
+  //         const delta = performance.now() - start;
+
+  //         if (delta > 5)
+  //             console.warn(
+  //                 `Slow match for ${key}: ${delta.toFixed(3)}ms, input: ${
+  //                     args[0]
+  //                 }`
+  //             );
+
+  //         return result;
+  //     };
+
+  //     rules[key].parse = (...args) => {
+  //         const start = performance.now();
+  //         const result = parse(...args);
+  //         const delta = performance.now() - start;
+
+  //         if (delta > 5)
+  //             console.warn(`Slow parse for ${key}: ${delta.toFixed(3)}ms`);
+
+  //         console.log(`${key}:parse`, `${delta.toFixed(3)}ms`, args[0]);
+
+  //         return result;
+  //     };
+  // });
+
+  if (options.disableParsingRawHTML !== true) {
+    rules.htmlBlock = {
+      /**
+       * find the first matching end tag and process the interior
+       */
+      match: anyScopeRegex(HTML_BLOCK_ELEMENT_R),
+      order: PARSE_PRIORITY_HIGH,
+      parse(capture, parse, state) {
+        const [, whitespace] = capture[3].match(HTML_LEFT_TRIM_AMOUNT_R);
+        const trimmer = new RegExp(`^${whitespace}`, 'gm');
+        const trimmed = capture[3].replace(trimmer, '');
+
+        const parseFunc = containsBlockSyntax(trimmed)
+          ? parseBlock
+          : parseInline;
+
+        const tagName = capture[1].toLowerCase();
+        const noInnerParse =
+          DO_NOT_PROCESS_HTML_ELEMENTS.indexOf(tagName) !== -1;
+
+        return {
+          attrs: attrStringToMap(capture[2]),
+          /**
+           * if another html block is detected within, parse as block,
+           * otherwise parse as inline to pick up any further markdown
+           */
+          content: noInnerParse ? capture[3] : parseFunc(parse, trimmed, state),
+
+          noInnerParse,
+
+          tag: noInnerParse ? tagName : capture[1]
+        };
+      },
+      react(node, output, state) {
+        return (
+          <node.tag key={state.key} {...node.attrs}>
+            {node.noInnerParse ? node.content : output(node.content, state)}
+          </node.tag>
+        );
+      },
+    }
+
+    rules.htmlSelfClosing = {
+      /**
+       * find the first matching end tag and process the interior
+       */
+      match: anyScopeRegex(HTML_SELF_CLOSING_ELEMENT_R),
+      order: PARSE_PRIORITY_HIGH,
+      parse(capture /*, parse, state*/) {
+        return {
+          attrs: attrStringToMap(capture[2] || ''),
+          tag: capture[1],
+        };
+      },
+      react(node, output, state) {
+        return <node.tag {...node.attrs} key={state.key} />;
+      },
+    };
+  }
+
+  const parser = parserFor(rules);
+  const emitter = reactFor(ruleOutput(rules));
+
+  const jsx = compile(stripHtmlComments(markdown));
+
+  if (footnotes.length) {
+    jsx.props.children.push(
+      <footer key="footer">
+        {footnotes.map(function createFootnote(def) {
+          return (
+            <div id={options.slugify(def.identifier)} key={def.identifier}>
+              {def.identifier}
+              {emitter(parser(def.footnote, { inline: true }))}
+            </div>
+          );
+        })}
+      </footer>
+    );
+  }
+
+  return jsx;
+}
+
+/**
+ * A simple HOC for easy React use. Feed the markdown content as a direct child
+ * and the rest is taken care of automatically.
+ *
+ * @param  {String}   options.children   must be a string
+ * @param  {Object}   options.options    markdown-to-jsx options (arg 2 of the compiler)
+ *
+ * @return {ReactElement} the compiled JSX
+ */
+
+export default function Markdown({ children, options, ...props }) {
+  return React.cloneElement(compiler(children, options), props);
+}
+
+if (process.env.NODE_ENV !== 'production') {
+  const PropTypes = require('prop-types');
+
+  Markdown.propTypes = {
+    children: PropTypes.string.isRequired,
+    options: PropTypes.object,
+  };
+}