@readme/markdown 6.66.0-beta.7 → 6.67.0-beta.1

package/components/Code/index.jsx

@@ -78,7 +78,7 @@ function CreateCode({ copyButtons, theme }) {
 }
 
 Code.propTypes = {
-  children: PropTypes.oneOf(PropTypes.arrayOf(PropTypes.string), PropTypes.string),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
   className: PropTypes.string,
   copyButtons: PropTypes.bool,
   lang: PropTypes.string,

package/components/CodeTabs/index.jsx

@@ -66,7 +66,7 @@ const CodeTabs = props => {
 };
 
 CodeTabs.propTypes = {
-  children: PropTypes.oneOf(PropTypes.arrayOf(PropTypes.any), PropTypes.object),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any), PropTypes.object]),
   theme: PropTypes.string,
 };
 

package/components/Div.jsx

@@ -19,7 +19,7 @@ const Div = ({ components, theme, ...props }) => {
 };
 
 Div.propTypes = {
-  children: PropTypes.oneOf(PropTypes.arrayOf(PropTypes.any), PropTypes.object),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any), PropTypes.object]),
   className: PropTypes.string,
   components: PropTypes.object,
   theme: PropTypes.string.isRequired,

package/dist/main.js

@@ -7625,7 +7625,7 @@ function CreateCode(_ref2) {
   };
 }
 Code.propTypes = {
-  children: PropTypes.oneOf(PropTypes.arrayOf(PropTypes.string), PropTypes.string),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
   className: PropTypes.string,
   copyButtons: PropTypes.bool,
   lang: PropTypes.string,
@@ -7724,7 +7724,7 @@ var CodeTabs = function CodeTabs(props) {
   }, children));
 };
 CodeTabs.propTypes = {
-  children: PropTypes.oneOf(PropTypes.arrayOf(PropTypes.any), PropTypes.object),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any), PropTypes.object]),
   theme: PropTypes.string
 };
 function CreateCodeTabs(_ref3) {
@@ -7776,7 +7776,7 @@ var Div = function Div(_ref) {
   return /*#__PURE__*/React.createElement("div", props);
 };
 Div.propTypes = {
-  children: PropTypes.oneOf(PropTypes.arrayOf(PropTypes.any), PropTypes.object),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any), PropTypes.object]),
   className: PropTypes.string,
   components: PropTypes.object,
   theme: PropTypes.string.isRequired
@@ -8460,6 +8460,36 @@ module.exports = React.createContext([]);
 
 /***/ }),
 
+/***/ 5894:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var React = __webpack_require__(3634);
+var CreateCodeTabs = __webpack_require__(6553);
+
+/*
+ * To get around hast/html sanitation, we pass custom components through using
+ * className's. Then we hijack `React.createElement` so we can render the associated component
+ * instead. If we use a custom `Div` like we do with MDX, `remarkRehype`
+ * inserts an extra root div, and that messes with our styles. Fun!
+ */
+
+var createElement = function createElement(opts) {
+  return (
+    // eslint-disable-next-line react/display-name
+    function (type, props) {
+      // eslint-disable-next-line react/prop-types
+      var rdmdType = type === 'div' && (props === null || props === void 0 ? void 0 : props.className) === 'code-tabs' ? CreateCodeTabs(opts) : type;
+      for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+        children[_key - 2] = arguments[_key];
+      }
+      return React.createElement.apply(React, [rdmdType, props].concat(children));
+    }
+  );
+};
+module.exports = createElement;
+
+/***/ }),
+
 /***/ 1264:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -8552,6 +8582,7 @@ var options = {
   },
   lazyImages: true,
   normalize: true,
+  mdx: false,
   safeMode: false,
   settings: {
     position: false
@@ -9004,6 +9035,8 @@ module.exports = function YamlCompiler() {
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 var _slicedToArray = __webpack_require__(7424);
+var _require = __webpack_require__(2135),
+  insertBlockTokenizerBefore = _require.insertBlockTokenizerBefore;
 var rgx = /^(#{1,6})(?!(?:#|\s))([^\n]+)\n/;
 function tokenizer(eat, value) {
   if (!rgx.test(value)) return true;
@@ -9020,11 +9053,11 @@ function tokenizer(eat, value) {
   });
 }
 function parser() {
-  var Parser = this.Parser;
-  var tokenizers = Parser.prototype.blockTokenizers;
-  var methods = Parser.prototype.blockMethods;
-  tokenizers.compactHeading = tokenizer;
-  methods.splice(methods.indexOf('newline'), 0, 'compactHeading');
+  insertBlockTokenizerBefore.call(this, {
+    name: 'compactHeading',
+    before: 'atxHeading',
+    tokenizer: tokenizer
+  });
 }
 module.exports = parser;
 module.exports.sanitize = function (sanitizeSchema) {
@@ -9244,6 +9277,8 @@ var _setPrototypeOf = __webpack_require__(6015);
 var _slicedToArray = __webpack_require__(7424);
 function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, void 0, groups); }; var _super = RegExp.prototype, _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = new RegExp(re, flags); return _groups.set(_this, groups || _groups.get(re)), _setPrototypeOf(_this, BabelRegExp.prototype); } function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { var i = g[name]; if ("number" == typeof i) groups[name] = result[i];else { for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) { k++; } groups[name] = result[i[k]]; } return groups; }, Object.create(null)); } return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); return result && (result.groups = buildGroups(result, this)), result; }, BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if ("string" == typeof substitution) { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { return "$" + groups[name]; })); } if ("function" == typeof substitution) { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = arguments; return "object" != _typeof(args[args.length - 1]) && (args = [].slice.call(args)).push(buildGroups(args, _this)), substitution.apply(this, args); }); } return _super[Symbol.replace].call(this, str, substitution); }, _wrapRegExp.apply(this, arguments); }
 var decode = __webpack_require__(7574);
+var _require = __webpack_require__(2135),
+  insertBlockTokenizerBefore = _require.insertBlockTokenizerBefore;
 function tokenizer(eat, value) {
   // eslint-disable-next-line unicorn/no-unsafe-regex
   var TAB_BLOCK_RGXP = /^(?:(?:^|\n)```(?:(?!\n```)[\s\S])*\n```[^\S\n]*){2,}/g;
@@ -9306,11 +9341,11 @@ function tokenizer(eat, value) {
   });
 }
 function parser() {
-  var Parser = this.Parser;
-  var tokenizers = Parser.prototype.blockTokenizers;
-  var methods = Parser.prototype.blockMethods;
-  tokenizers.codeTabs = tokenizer;
-  methods.splice(methods.indexOf('indentedCode') - 1, 0, 'codeTabs');
+  insertBlockTokenizerBefore.call(this, {
+    name: 'codeTabs',
+    before: 'indentedCode',
+    tokenizer: tokenizer
+  });
 }
 module.exports = parser;
 module.exports.sanitize = function (sanitizeSchema) {
@@ -9325,6 +9360,8 @@ module.exports.sanitize = function (sanitizeSchema) {
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 var _slicedToArray = __webpack_require__(7424);
+var _require = __webpack_require__(2135),
+  insertBlockTokenizerBefore = _require.insertBlockTokenizerBefore;
 var rgx = /^\[([^\]]*)\]\((\S*) ["'](@\w+)"\)/;
 function tokenizer(eat, value) {
   if (!rgx.test(value)) return true;
@@ -9364,11 +9401,11 @@ function tokenizer(eat, value) {
   });
 }
 function parser() {
-  var Parser = this.Parser;
-  var tokenizers = Parser.prototype.blockTokenizers;
-  var methods = Parser.prototype.blockMethods;
-  tokenizers.embed = tokenizer;
-  methods.splice(methods.indexOf('newline'), 0, 'embed');
+  insertBlockTokenizerBefore.call(this, {
+    name: 'embed',
+    before: 'blankLine',
+    tokenizer: tokenizer
+  });
 }
 module.exports = parser;
 module.exports.sanitize = function (sanitizeSchema) {
@@ -9383,6 +9420,8 @@ module.exports.sanitize = function (sanitizeSchema) {
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 var Emoji = (__webpack_require__(368)/* .emoji */ .r);
+var _require = __webpack_require__(2135),
+  insertInlineTokenizerBefore = _require.insertInlineTokenizerBefore;
 var emojis = new Emoji();
 var colon = ':';
 function tokenize(eat, value, silent) {
@@ -9429,11 +9468,11 @@ function locate(value, fromIndex) {
 }
 tokenize.locator = locate;
 function parser() {
-  var Parser = this.Parser;
-  var tokenizers = Parser.prototype.inlineTokenizers;
-  var methods = Parser.prototype.inlineMethods;
-  tokenizers.gemoji = tokenize;
-  methods.splice(methods.indexOf('text'), 0, 'gemoji');
+  insertInlineTokenizerBefore.call(this, {
+    name: 'gemoji',
+    before: 'text',
+    tokenizer: tokenize
+  });
 }
 module.exports = parser;
 module.exports.sanitize = function (sanitizeSchema) {
@@ -9573,6 +9612,8 @@ var _slicedToArray = __webpack_require__(7424);
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /* eslint-disable consistent-return */
+var _require = __webpack_require__(2135),
+  insertBlockTokenizerBefore = _require.insertBlockTokenizerBefore;
 var RGXP = /^\[block:(.*)\]([^]+?)\[\/block\]/;
 var WrapPinnedBlocks = function WrapPinnedBlocks(node, json) {
   if (!json.sidebar) return node;
@@ -9856,15 +9897,16 @@ function tokenize(_ref) {
   };
 }
 function parser() {
-  var Parser = this.Parser;
-  var tokenizers = Parser.prototype.blockTokenizers;
-  var methods = Parser.prototype.blockMethods;
-  tokenizers.magicBlocks = tokenize({
+  var tokenizer = tokenize({
     compatibilityMode: this.data('compatibilityMode'),
     safeMode: this.data('safeMode'),
     alwaysThrow: this.data('alwaysThrow')
   });
-  methods.splice(methods.indexOf('newline'), 0, 'magicBlocks');
+  insertBlockTokenizerBefore.call(this, {
+    name: 'magicBlocks',
+    before: 'blankLine',
+    tokenizer: tokenizer
+  });
 }
 module.exports = parser;
 module.exports.sanitize = function (sanitizeSchema) {
@@ -9880,11 +9922,53 @@ module.exports.imgSizeByWidth = imgSizeByWidth;
 
 /***/ }),
 
+/***/ 2135:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "insertBlockTokenizerBefore": () => (/* binding */ insertBlockTokenizerBefore),
+/* harmony export */   "insertInlineTokenizerBefore": () => (/* binding */ insertInlineTokenizerBefore)
+/* harmony export */ });
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4942);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function insertTokenizerBefore(_ref) {
+  var name = _ref.name,
+    before = _ref.before,
+    tokenizer = _ref.tokenizer,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'block' : _ref$type;
+  var Parser = this.Parser;
+  var tokenizers = Parser.prototype["".concat(type, "Tokenizers")];
+  var methods = Parser.prototype["".concat(type, "Methods")];
+  var index = methods.indexOf(before);
+  if (index === -1) {
+    throw new Error("The '".concat(before, "' tokenizer does not exist!"));
+  }
+  tokenizers[name] = tokenizer;
+  methods.splice(index, 0, name);
+}
+function insertBlockTokenizerBefore(args) {
+  insertTokenizerBefore.call(this, args);
+}
+function insertInlineTokenizerBefore(args) {
+  return insertTokenizerBefore.call(this, _objectSpread(_objectSpread({}, args), {}, {
+    type: 'inline'
+  }));
+}
+
+/***/ }),
+
 /***/ 2697:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 var _require = __webpack_require__(1882),
   VARIABLE_REGEXP = _require.VARIABLE_REGEXP;
+var _require2 = __webpack_require__(2135),
+  insertInlineTokenizerBefore = _require2.insertInlineTokenizerBefore;
 function tokenizeVariable(eat, value, silent) {
   // Modifies the regular expression to match from
   // the start of the line
@@ -9928,11 +10012,11 @@ function locate(value, fromIndex) {
 }
 tokenizeVariable.locator = locate;
 function parser() {
-  var Parser = this.Parser;
-  var tokenizers = Parser.prototype.inlineTokenizers;
-  var methods = Parser.prototype.inlineMethods;
-  tokenizers.variable = tokenizeVariable;
-  methods.splice(methods.indexOf('text'), 0, 'variable');
+  insertInlineTokenizerBefore.call(this, {
+    name: 'variable',
+    before: 'text',
+    tokenizer: tokenizeVariable
+  });
 }
 module.exports = parser;
 module.exports.sanitize = function (sanitizeSchema) {
@@ -10082,9 +10166,11 @@ function transformer(ast) {
       return [_objectSpread(_objectSpread({}, node), {}, {
         children: [_objectSpread(_objectSpread({}, node.children[0]), {}, {
           value: valuesToString(header)
-        }), _objectSpread(_objectSpread({}, node.children[1]), {}, {
+        }), body ? _objectSpread(_objectSpread({}, node.children[1]), {}, {
           value: valuesToString(body)
-        })]
+        }) : null].filter(function (x) {
+          return x;
+        })
       })];
     }
     return [node];
@@ -10097,7 +10183,7 @@ module.exports.tableFlattening = transformer;
 
 /***/ }),
 
-/***/ 8192:
+/***/ 3628:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -10106,7 +10192,8 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "singleCodeTabs": () => (/* reexport */ single_code_tabs)
+  "rehypeTransformers": () => (/* binding */ rehypeTransformers),
+  "remarkTransformers": () => (/* binding */ remarkTransformers)
 });
 
 ;// CONCATENATED MODULE: ./node_modules/unist-util-visit/node_modules/unist-util-is/index.js
@@ -10596,7 +10683,7 @@ const visit =
 
 var singleCodeTabs = function singleCodeTabs() {
   return function (tree) {
-    visit(tree, function (node, index, parent) {
+    return visit(tree, function (node, index, parent) {
       if (node.type === 'code' && (node.lang || node.meta) && parent.type !== 'code-tabs') {
         Object.assign(node, {
           className: 'tab-panel',
@@ -10620,14 +10707,48 @@ var singleCodeTabs = function singleCodeTabs() {
           children: [node]
         };
       }
+      return tree;
     });
-    return tree;
   };
 };
 /* harmony default export */ const single_code_tabs = (singleCodeTabs);
+;// CONCATENATED MODULE: ./processor/transform/table-cell-inline-code.js
+
+var rxEscapedPipe = /\\\|/g;
+
+/**
+ * HAST Transformer that finds all inline code nodes within table cells and
+ * unescapes any escaped pipe chars so that the editor outputs them without
+ * escape chars.
+ *
+ * This appears to be a bug with remark-parse < ~8
+ */
+var tableCellInlineCode = function tableCellInlineCode() {
+  return function (tree) {
+    visit(tree, [{
+      tagName: 'th'
+    }, {
+      tagName: 'td'
+    }], function (tableCellNode) {
+      visit(tableCellNode, {
+        tagName: 'code'
+      }, function (inlineCodeNode) {
+        var textNode = inlineCodeNode.children[0];
+        if (rxEscapedPipe.test(textNode.value)) {
+          textNode.value = textNode.value.replace(rxEscapedPipe, '|');
+        }
+      });
+      return SKIP;
+    });
+  };
+};
+/* harmony default export */ const table_cell_inline_code = (tableCellInlineCode);
 ;// CONCATENATED MODULE: ./processor/transform/index.js
 
 
+var remarkTransformers = [single_code_tabs];
+var rehypeTransformers = [table_cell_inline_code];
+
 /***/ }),
 
 /***/ 8229:
@@ -36745,6 +36866,7 @@ var Components = __webpack_require__(3354);
 var _require3 = __webpack_require__(8447),
   getHref = _require3.getHref;
 var BaseUrlContext = __webpack_require__(6785);
+var createElement = __webpack_require__(5894);
 var CustomParsers = Object.values(__webpack_require__(8521));
 var customCompilers = Object.values(__webpack_require__(9647));
 var registerCustomComponents = __webpack_require__(1264);
@@ -36756,7 +36878,9 @@ var _require5 = __webpack_require__(8160),
 var toPlainText = __webpack_require__(4792);
 var sectionAnchorId = __webpack_require__(9620);
 var tableFlattening = __webpack_require__(4625);
-var transformers = Object.values(__webpack_require__(8192));
+var _require6 = __webpack_require__(3628),
+  remarkTransformers = _require6.remarkTransformers,
+  rehypeTransformers = _require6.rehypeTransformers;
 var createSchema = __webpack_require__(8229);
 var Anchor = Components.Anchor,
   Callout = Components.Callout,
@@ -36809,22 +36933,24 @@ var utils = {
  * Core markdown to mdast processor
  */
 function processor() {
+  var _unified$use$use$use$;
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _setup = setup('', opts);
   var _setup2 = (0,slicedToArray/* default */.Z)(_setup, 2);
   opts = _setup2[1];
   var _opts = opts,
     sanitize = _opts.sanitize;
-  return unified().use(remarkParse, opts.markdownOptions).use(opts.mdx ? remarkMdx : function () {}).use(remarkFrontmatter, ['yaml', 'toml']).data('settings', opts.settings).data('compatibilityMode', opts.compatibilityMode).data('alwaysThrow', opts.alwaysThrow).use(!opts.correctnewlines ? remarkBreaks : function () {}).use(CustomParsers.map(function (parser) {
+  return (_unified$use$use$use$ = unified().use(remarkParse, opts.markdownOptions).use(opts.mdx ? remarkMdx : function () {}).use(remarkFrontmatter, ['yaml', 'toml']).data('settings', opts.settings).data('compatibilityMode', opts.compatibilityMode).data('alwaysThrow', opts.alwaysThrow).data('mdx', opts.mdx).use(!opts.correctnewlines ? remarkBreaks : function () {}).use(CustomParsers.map(function (parser) {
     var _parser$sanitize;
     return ((_parser$sanitize = parser.sanitize) === null || _parser$sanitize === void 0 ? void 0 : _parser$sanitize.call(parser, sanitize)) || parser;
-  })).use(transformers).use(remarkSlug).use(remarkDisableTokenizers, opts.disableTokenizers);
+  }))).use.apply(_unified$use$use$use$, (0,toConsumableArray/* default */.Z)(remarkTransformers)).use(remarkSlug).use(remarkDisableTokenizers, opts.disableTokenizers);
 }
 
 /**
  * Full markdown to html processor
  */
 function htmlProcessor() {
+  var _processor$use$use$us;
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _setup3 = setup('', opts);
   var _setup4 = (0,slicedToArray/* default */.Z)(_setup3, 2);
@@ -36850,9 +36976,9 @@ function htmlProcessor() {
    * - sanitize and remove any disallowed attributes
    * - output the hast to a React vdom with our custom components
    */
-  return processor(opts).use(remarkRehype, {
+  return (_processor$use$use$us = processor(opts).use(remarkRehype, {
     allowDangerousHtml: true
-  }).use(rehypeRaw).use(rehypeSanitize, sanitize);
+  }).use(rehypeRaw).use(rehypeSanitize, sanitize)).use.apply(_processor$use$use$us, (0,toConsumableArray/* default */.Z)(rehypeTransformers));
 }
 function plain(text) {
   var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -36863,7 +36989,7 @@ function plain(text) {
   text = _setup6[0];
   opts = _setup6[1];
   var proc = htmlProcessor(opts).use(rehypeReact, {
-    createElement: React.createElement,
+    createElement: createElement(opts),
     Fragment: React.Fragment,
     components: components
   });
@@ -36883,7 +37009,7 @@ var PinWrap = function PinWrap(_ref) {
 
 var reactComponents = function reactComponents(opts) {
   var components = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return _objectSpread({
+  return _objectSpread(_objectSpread({
     'html-block': HTMLBlock(opts),
     'rdme-callout': Callout,
     'readme-variable': Variable,
@@ -36900,11 +37026,12 @@ var reactComponents = function reactComponents(opts) {
     h6: Heading(6, opts),
     code: Code(opts),
     img: Image(opts),
-    style: Style(opts),
+    style: Style(opts)
+  }, opts.mdx ? {
     div: Div({
       'code-tabs': CodeTabs(opts)
     }, opts)
-  }, registerCustomComponents(components, opts.sanitize, opts.customComponentPrefix));
+  } : {}), registerCustomComponents(components, opts.sanitize, opts.customComponentPrefix));
 };
 function reactProcessor() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -36912,11 +37039,14 @@ function reactProcessor() {
   var _setup7 = setup('', opts);
   var _setup8 = (0,slicedToArray/* default */.Z)(_setup7, 2);
   opts = _setup8[1];
-  return htmlProcessor(_objectSpread({}, opts)).use(sectionAnchorId).use(rehypeReact, {
-    createElement: React.createElement,
+  var rdmdComponents = reactComponents(opts, components);
+  var proc = htmlProcessor(_objectSpread({}, opts)).use(sectionAnchorId).use(rehypeReact, {
+    createElement: createElement(opts),
     Fragment: React.Fragment,
-    components: reactComponents(opts, components)
+    components: rdmdComponents
   });
+  proc.components = rdmdComponents;
+  return proc;
 }
 function react(content) {
   var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -36937,12 +37067,12 @@ function react(content) {
     var remarkPlugins = [[remarkFrontmatter, ['yaml', 'toml']], !opts.correctnewlines ? remarkBreaks : function () {}].concat((0,toConsumableArray/* default */.Z)(CustomParsers.map(function (parser) {
       var _parser$sanitize2;
       return ((_parser$sanitize2 = parser.sanitize) === null || _parser$sanitize2 === void 0 ? void 0 : _parser$sanitize2.call(parser, opts.sanitize)) || parser;
-    })), transformers, [remarkSlug, [remarkDisableTokenizers, opts.disableTokenizers]]);
+    })), (0,toConsumableArray/* default */.Z)(remarkTransformers), [remarkSlug, [remarkDisableTokenizers, opts.disableTokenizers]]);
     return /*#__PURE__*/React.createElement(ErrorBoundary, {
       key: content
     }, /*#__PURE__*/React.createElement(Mdx, {
       components: reactComponents(opts, components),
-      rehypePlugins: [sectionAnchorId],
+      rehypePlugins: [sectionAnchorId].concat((0,toConsumableArray/* default */.Z)(rehypeTransformers)),
       remarkPlugins: remarkPlugins
     }, content));
   }

package/dist/main.node.js

@@ -7625,7 +7625,7 @@ function CreateCode(_ref2) {
   };
 }
 Code.propTypes = {
-  children: PropTypes.oneOf(PropTypes.arrayOf(PropTypes.string), PropTypes.string),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
   className: PropTypes.string,
   copyButtons: PropTypes.bool,
   lang: PropTypes.string,
@@ -7724,7 +7724,7 @@ var CodeTabs = function CodeTabs(props) {
   }, children));
 };
 CodeTabs.propTypes = {
-  children: PropTypes.oneOf(PropTypes.arrayOf(PropTypes.any), PropTypes.object),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any), PropTypes.object]),
   theme: PropTypes.string
 };
 function CreateCodeTabs(_ref3) {
@@ -7776,7 +7776,7 @@ var Div = function Div(_ref) {
   return /*#__PURE__*/React.createElement("div", props);
 };
 Div.propTypes = {
-  children: PropTypes.oneOf(PropTypes.arrayOf(PropTypes.any), PropTypes.object),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any), PropTypes.object]),
   className: PropTypes.string,
   components: PropTypes.object,
   theme: PropTypes.string.isRequired
@@ -8460,6 +8460,36 @@ module.exports = React.createContext([]);
 
 /***/ }),
 
+/***/ 5894:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var React = __webpack_require__(3634);
+var CreateCodeTabs = __webpack_require__(6553);
+
+/*
+ * To get around hast/html sanitation, we pass custom components through using
+ * className's. Then we hijack `React.createElement` so we can render the associated component
+ * instead. If we use a custom `Div` like we do with MDX, `remarkRehype`
+ * inserts an extra root div, and that messes with our styles. Fun!
+ */
+
+var createElement = function createElement(opts) {
+  return (
+    // eslint-disable-next-line react/display-name
+    function (type, props) {
+      // eslint-disable-next-line react/prop-types
+      var rdmdType = type === 'div' && (props === null || props === void 0 ? void 0 : props.className) === 'code-tabs' ? CreateCodeTabs(opts) : type;
+      for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+        children[_key - 2] = arguments[_key];
+      }
+      return React.createElement.apply(React, [rdmdType, props].concat(children));
+    }
+  );
+};
+module.exports = createElement;
+
+/***/ }),
+
 /***/ 1264:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -8920,6 +8950,7 @@ var options = {
   },
   lazyImages: true,
   normalize: true,
+  mdx: false,
   safeMode: false,
   settings: {
     position: false
@@ -9372,6 +9403,8 @@ module.exports = function YamlCompiler() {
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 var _slicedToArray = __webpack_require__(7424);
+var _require = __webpack_require__(2135),
+  insertBlockTokenizerBefore = _require.insertBlockTokenizerBefore;
 var rgx = /^(#{1,6})(?!(?:#|\s))([^\n]+)\n/;
 function tokenizer(eat, value) {
   if (!rgx.test(value)) return true;
@@ -9388,11 +9421,11 @@ function tokenizer(eat, value) {
   });
 }
 function parser() {
-  var Parser = this.Parser;
-  var tokenizers = Parser.prototype.blockTokenizers;
-  var methods = Parser.prototype.blockMethods;
-  tokenizers.compactHeading = tokenizer;
-  methods.splice(methods.indexOf('newline'), 0, 'compactHeading');
+  insertBlockTokenizerBefore.call(this, {
+    name: 'compactHeading',
+    before: 'atxHeading',
+    tokenizer: tokenizer
+  });
 }
 module.exports = parser;
 module.exports.sanitize = function (sanitizeSchema) {
@@ -9614,6 +9647,8 @@ var _setPrototypeOf = __webpack_require__(6015);
 var _slicedToArray = __webpack_require__(7424);
 function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, void 0, groups); }; var _super = RegExp.prototype, _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = new RegExp(re, flags); return _groups.set(_this, groups || _groups.get(re)), _setPrototypeOf(_this, BabelRegExp.prototype); } function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { var i = g[name]; if ("number" == typeof i) groups[name] = result[i];else { for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) { k++; } groups[name] = result[i[k]]; } return groups; }, Object.create(null)); } return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); return result && (result.groups = buildGroups(result, this)), result; }, BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if ("string" == typeof substitution) { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { return "$" + groups[name]; })); } if ("function" == typeof substitution) { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = arguments; return "object" != _typeof(args[args.length - 1]) && (args = [].slice.call(args)).push(buildGroups(args, _this)), substitution.apply(this, args); }); } return _super[Symbol.replace].call(this, str, substitution); }, _wrapRegExp.apply(this, arguments); }
 var decode = __webpack_require__(7574);
+var _require = __webpack_require__(2135),
+  insertBlockTokenizerBefore = _require.insertBlockTokenizerBefore;
 function tokenizer(eat, value) {
   // eslint-disable-next-line unicorn/no-unsafe-regex
   var TAB_BLOCK_RGXP = /^(?:(?:^|\n)```(?:(?!\n```)[\s\S])*\n```[^\S\n]*){2,}/g;
@@ -9676,11 +9711,11 @@ function tokenizer(eat, value) {
   });
 }
 function parser() {
-  var Parser = this.Parser;
-  var tokenizers = Parser.prototype.blockTokenizers;
-  var methods = Parser.prototype.blockMethods;
-  tokenizers.codeTabs = tokenizer;
-  methods.splice(methods.indexOf('indentedCode') - 1, 0, 'codeTabs');
+  insertBlockTokenizerBefore.call(this, {
+    name: 'codeTabs',
+    before: 'indentedCode',
+    tokenizer: tokenizer
+  });
 }
 module.exports = parser;
 module.exports.sanitize = function (sanitizeSchema) {
@@ -9695,6 +9730,8 @@ module.exports.sanitize = function (sanitizeSchema) {
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 var _slicedToArray = __webpack_require__(7424);
+var _require = __webpack_require__(2135),
+  insertBlockTokenizerBefore = _require.insertBlockTokenizerBefore;
 var rgx = /^\[([^\]]*)\]\((\S*) ["'](@\w+)"\)/;
 function tokenizer(eat, value) {
   if (!rgx.test(value)) return true;
@@ -9734,11 +9771,11 @@ function tokenizer(eat, value) {
   });
 }
 function parser() {
-  var Parser = this.Parser;
-  var tokenizers = Parser.prototype.blockTokenizers;
-  var methods = Parser.prototype.blockMethods;
-  tokenizers.embed = tokenizer;
-  methods.splice(methods.indexOf('newline'), 0, 'embed');
+  insertBlockTokenizerBefore.call(this, {
+    name: 'embed',
+    before: 'blankLine',
+    tokenizer: tokenizer
+  });
 }
 module.exports = parser;
 module.exports.sanitize = function (sanitizeSchema) {
@@ -9753,6 +9790,8 @@ module.exports.sanitize = function (sanitizeSchema) {
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 var Emoji = (__webpack_require__(368)/* .emoji */ .r);
+var _require = __webpack_require__(2135),
+  insertInlineTokenizerBefore = _require.insertInlineTokenizerBefore;
 var emojis = new Emoji();
 var colon = ':';
 function tokenize(eat, value, silent) {
@@ -9799,11 +9838,11 @@ function locate(value, fromIndex) {
 }
 tokenize.locator = locate;
 function parser() {
-  var Parser = this.Parser;
-  var tokenizers = Parser.prototype.inlineTokenizers;
-  var methods = Parser.prototype.inlineMethods;
-  tokenizers.gemoji = tokenize;
-  methods.splice(methods.indexOf('text'), 0, 'gemoji');
+  insertInlineTokenizerBefore.call(this, {
+    name: 'gemoji',
+    before: 'text',
+    tokenizer: tokenize
+  });
 }
 module.exports = parser;
 module.exports.sanitize = function (sanitizeSchema) {
@@ -9944,6 +9983,8 @@ var _slicedToArray = __webpack_require__(7424);
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /* eslint-disable consistent-return */
+var _require = __webpack_require__(2135),
+  insertBlockTokenizerBefore = _require.insertBlockTokenizerBefore;
 var RGXP = /^\[block:(.*)\]([^]+?)\[\/block\]/;
 var WrapPinnedBlocks = function WrapPinnedBlocks(node, json) {
   if (!json.sidebar) return node;
@@ -10227,15 +10268,16 @@ function tokenize(_ref) {
   };
 }
 function parser() {
-  var Parser = this.Parser;
-  var tokenizers = Parser.prototype.blockTokenizers;
-  var methods = Parser.prototype.blockMethods;
-  tokenizers.magicBlocks = tokenize({
+  var tokenizer = tokenize({
     compatibilityMode: this.data('compatibilityMode'),
     safeMode: this.data('safeMode'),
     alwaysThrow: this.data('alwaysThrow')
   });
-  methods.splice(methods.indexOf('newline'), 0, 'magicBlocks');
+  insertBlockTokenizerBefore.call(this, {
+    name: 'magicBlocks',
+    before: 'blankLine',
+    tokenizer: tokenizer
+  });
 }
 module.exports = parser;
 module.exports.sanitize = function (sanitizeSchema) {
@@ -10251,11 +10293,54 @@ module.exports.imgSizeByWidth = imgSizeByWidth;
 
 /***/ }),
 
+/***/ 2135:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "insertBlockTokenizerBefore": () => (/* binding */ insertBlockTokenizerBefore),
+/* harmony export */   "insertInlineTokenizerBefore": () => (/* binding */ insertInlineTokenizerBefore)
+/* harmony export */ });
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8416);
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function insertTokenizerBefore(_ref) {
+  var name = _ref.name,
+    before = _ref.before,
+    tokenizer = _ref.tokenizer,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'block' : _ref$type;
+  var Parser = this.Parser;
+  var tokenizers = Parser.prototype["".concat(type, "Tokenizers")];
+  var methods = Parser.prototype["".concat(type, "Methods")];
+  var index = methods.indexOf(before);
+  if (index === -1) {
+    throw new Error("The '".concat(before, "' tokenizer does not exist!"));
+  }
+  tokenizers[name] = tokenizer;
+  methods.splice(index, 0, name);
+}
+function insertBlockTokenizerBefore(args) {
+  insertTokenizerBefore.call(this, args);
+}
+function insertInlineTokenizerBefore(args) {
+  return insertTokenizerBefore.call(this, _objectSpread(_objectSpread({}, args), {}, {
+    type: 'inline'
+  }));
+}
+
+/***/ }),
+
 /***/ 2697:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 var _require = __webpack_require__(1882),
   VARIABLE_REGEXP = _require.VARIABLE_REGEXP;
+var _require2 = __webpack_require__(2135),
+  insertInlineTokenizerBefore = _require2.insertInlineTokenizerBefore;
 function tokenizeVariable(eat, value, silent) {
   // Modifies the regular expression to match from
   // the start of the line
@@ -10299,11 +10384,11 @@ function locate(value, fromIndex) {
 }
 tokenizeVariable.locator = locate;
 function parser() {
-  var Parser = this.Parser;
-  var tokenizers = Parser.prototype.inlineTokenizers;
-  var methods = Parser.prototype.inlineMethods;
-  tokenizers.variable = tokenizeVariable;
-  methods.splice(methods.indexOf('text'), 0, 'variable');
+  insertInlineTokenizerBefore.call(this, {
+    name: 'variable',
+    before: 'text',
+    tokenizer: tokenizeVariable
+  });
 }
 module.exports = parser;
 module.exports.sanitize = function (sanitizeSchema) {
@@ -10453,9 +10538,11 @@ function transformer(ast) {
       return [_objectSpread(_objectSpread({}, node), {}, {
         children: [_objectSpread(_objectSpread({}, node.children[0]), {}, {
           value: valuesToString(header)
-        }), _objectSpread(_objectSpread({}, node.children[1]), {}, {
+        }), body ? _objectSpread(_objectSpread({}, node.children[1]), {}, {
           value: valuesToString(body)
-        })]
+        }) : null].filter(function (x) {
+          return x;
+        })
       })];
     }
     return [node];
@@ -10468,7 +10555,7 @@ module.exports.tableFlattening = transformer;
 
 /***/ }),
 
-/***/ 6676:
+/***/ 2442:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -10477,7 +10564,8 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "singleCodeTabs": () => (/* reexport */ single_code_tabs)
+  "rehypeTransformers": () => (/* binding */ rehypeTransformers),
+  "remarkTransformers": () => (/* binding */ remarkTransformers)
 });
 
 ;// CONCATENATED MODULE: ./node_modules/unist-util-visit/node_modules/unist-util-is/index.js
@@ -10967,7 +11055,7 @@ const visit =
 
 var singleCodeTabs = function singleCodeTabs() {
   return function (tree) {
-    visit(tree, function (node, index, parent) {
+    return visit(tree, function (node, index, parent) {
       if (node.type === 'code' && (node.lang || node.meta) && parent.type !== 'code-tabs') {
         Object.assign(node, {
           className: 'tab-panel',
@@ -10991,14 +11079,48 @@ var singleCodeTabs = function singleCodeTabs() {
           children: [node]
         };
       }
+      return tree;
     });
-    return tree;
   };
 };
 /* harmony default export */ const single_code_tabs = (singleCodeTabs);
+;// CONCATENATED MODULE: ./processor/transform/table-cell-inline-code.js
+
+var rxEscapedPipe = /\\\|/g;
+
+/**
+ * HAST Transformer that finds all inline code nodes within table cells and
+ * unescapes any escaped pipe chars so that the editor outputs them without
+ * escape chars.
+ *
+ * This appears to be a bug with remark-parse < ~8
+ */
+var tableCellInlineCode = function tableCellInlineCode() {
+  return function (tree) {
+    visit(tree, [{
+      tagName: 'th'
+    }, {
+      tagName: 'td'
+    }], function (tableCellNode) {
+      visit(tableCellNode, {
+        tagName: 'code'
+      }, function (inlineCodeNode) {
+        var textNode = inlineCodeNode.children[0];
+        if (rxEscapedPipe.test(textNode.value)) {
+          textNode.value = textNode.value.replace(rxEscapedPipe, '|');
+        }
+      });
+      return SKIP;
+    });
+  };
+};
+/* harmony default export */ const table_cell_inline_code = (tableCellInlineCode);
 ;// CONCATENATED MODULE: ./processor/transform/index.js
 
 
+var remarkTransformers = [single_code_tabs];
+var rehypeTransformers = [table_cell_inline_code];
+
 /***/ }),
 
 /***/ 8229:
@@ -34408,6 +34530,7 @@ var Components = __webpack_require__(3354);
 var _require3 = __webpack_require__(8447),
   getHref = _require3.getHref;
 var BaseUrlContext = __webpack_require__(6785);
+var createElement = __webpack_require__(5894);
 var CustomParsers = Object.values(__webpack_require__(8521));
 var customCompilers = Object.values(__webpack_require__(9647));
 var registerCustomComponents = __webpack_require__(1264);
@@ -34419,7 +34542,9 @@ var _require5 = __webpack_require__(8160),
 var toPlainText = __webpack_require__(4792);
 var sectionAnchorId = __webpack_require__(9620);
 var tableFlattening = __webpack_require__(4625);
-var transformers = Object.values(__webpack_require__(6676));
+var _require6 = __webpack_require__(2442),
+  remarkTransformers = _require6.remarkTransformers,
+  rehypeTransformers = _require6.rehypeTransformers;
 var createSchema = __webpack_require__(8229);
 var Anchor = Components.Anchor,
   Callout = Components.Callout,
@@ -34472,22 +34597,24 @@ var utils = {
  * Core markdown to mdast processor
  */
 function processor() {
+  var _unified$use$use$use$;
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _setup = setup('', opts);
   var _setup2 = slicedToArray_default()(_setup, 2);
   opts = _setup2[1];
   var _opts = opts,
     sanitize = _opts.sanitize;
-  return unified().use(remarkParse, opts.markdownOptions).use(opts.mdx ? remarkMdx : function () {}).use(remarkFrontmatter, ['yaml', 'toml']).data('settings', opts.settings).data('compatibilityMode', opts.compatibilityMode).data('alwaysThrow', opts.alwaysThrow).use(!opts.correctnewlines ? remarkBreaks : function () {}).use(CustomParsers.map(function (parser) {
+  return (_unified$use$use$use$ = unified().use(remarkParse, opts.markdownOptions).use(opts.mdx ? remarkMdx : function () {}).use(remarkFrontmatter, ['yaml', 'toml']).data('settings', opts.settings).data('compatibilityMode', opts.compatibilityMode).data('alwaysThrow', opts.alwaysThrow).data('mdx', opts.mdx).use(!opts.correctnewlines ? remarkBreaks : function () {}).use(CustomParsers.map(function (parser) {
     var _parser$sanitize;
     return ((_parser$sanitize = parser.sanitize) === null || _parser$sanitize === void 0 ? void 0 : _parser$sanitize.call(parser, sanitize)) || parser;
-  })).use(transformers).use(remarkSlug).use(remarkDisableTokenizers, opts.disableTokenizers);
+  }))).use.apply(_unified$use$use$use$, toConsumableArray_default()(remarkTransformers)).use(remarkSlug).use(remarkDisableTokenizers, opts.disableTokenizers);
 }
 
 /**
  * Full markdown to html processor
  */
 function htmlProcessor() {
+  var _processor$use$use$us;
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _setup3 = setup('', opts);
   var _setup4 = slicedToArray_default()(_setup3, 2);
@@ -34513,9 +34640,9 @@ function htmlProcessor() {
    * - sanitize and remove any disallowed attributes
    * - output the hast to a React vdom with our custom components
    */
-  return processor(opts).use(remarkRehype, {
+  return (_processor$use$use$us = processor(opts).use(remarkRehype, {
     allowDangerousHtml: true
-  }).use(rehypeRaw).use(rehypeSanitize, sanitize);
+  }).use(rehypeRaw).use(rehypeSanitize, sanitize)).use.apply(_processor$use$use$us, toConsumableArray_default()(rehypeTransformers));
 }
 function plain(text) {
   var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -34526,7 +34653,7 @@ function plain(text) {
   text = _setup6[0];
   opts = _setup6[1];
   var proc = htmlProcessor(opts).use(rehypeReact, {
-    createElement: React.createElement,
+    createElement: createElement(opts),
     Fragment: React.Fragment,
     components: components
   });
@@ -34546,7 +34673,7 @@ var PinWrap = function PinWrap(_ref) {
 
 var reactComponents = function reactComponents(opts) {
   var components = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return _objectSpread({
+  return _objectSpread(_objectSpread({
     'html-block': HTMLBlock(opts),
     'rdme-callout': Callout,
     'readme-variable': Variable,
@@ -34563,11 +34690,12 @@ var reactComponents = function reactComponents(opts) {
     h6: Heading(6, opts),
     code: Code(opts),
     img: Image(opts),
-    style: Style(opts),
+    style: Style(opts)
+  }, opts.mdx ? {
     div: Div({
       'code-tabs': CodeTabs(opts)
     }, opts)
-  }, registerCustomComponents(components, opts.sanitize, opts.customComponentPrefix));
+  } : {}), registerCustomComponents(components, opts.sanitize, opts.customComponentPrefix));
 };
 function reactProcessor() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -34575,11 +34703,14 @@ function reactProcessor() {
   var _setup7 = setup('', opts);
   var _setup8 = slicedToArray_default()(_setup7, 2);
   opts = _setup8[1];
-  return htmlProcessor(_objectSpread({}, opts)).use(sectionAnchorId).use(rehypeReact, {
-    createElement: React.createElement,
+  var rdmdComponents = reactComponents(opts, components);
+  var proc = htmlProcessor(_objectSpread({}, opts)).use(sectionAnchorId).use(rehypeReact, {
+    createElement: createElement(opts),
     Fragment: React.Fragment,
-    components: reactComponents(opts, components)
+    components: rdmdComponents
   });
+  proc.components = rdmdComponents;
+  return proc;
 }
 function react(content) {
   var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -34600,12 +34731,12 @@ function react(content) {
     var remarkPlugins = [[remarkFrontmatter, ['yaml', 'toml']], !opts.correctnewlines ? remarkBreaks : function () {}].concat(toConsumableArray_default()(CustomParsers.map(function (parser) {
       var _parser$sanitize2;
       return ((_parser$sanitize2 = parser.sanitize) === null || _parser$sanitize2 === void 0 ? void 0 : _parser$sanitize2.call(parser, opts.sanitize)) || parser;
-    })), transformers, [remarkSlug, [remarkDisableTokenizers, opts.disableTokenizers]]);
+    })), toConsumableArray_default()(remarkTransformers), [remarkSlug, [remarkDisableTokenizers, opts.disableTokenizers]]);
     return /*#__PURE__*/React.createElement(ErrorBoundary, {
       key: content
     }, /*#__PURE__*/React.createElement(Mdx, {
       components: reactComponents(opts, components),
-      rehypePlugins: [sectionAnchorId],
+      rehypePlugins: [sectionAnchorId].concat(toConsumableArray_default()(rehypeTransformers)),
       remarkPlugins: remarkPlugins
     }, content));
   }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@readme/markdown",
   "description": "ReadMe's React-based Markdown parser",
   "author": "Rafe Goldberg <rafe@readme.io>",
-  "version": "6.66.0-beta.7",
+  "version": "6.67.0-beta.1",
   "main": "dist/main.node.js",
   "browser": "dist/main.js",
   "files": [