@readme/markdown 6.59.0 → 6.60.0

package/components/CodeTabs/index.jsx

@@ -3,7 +3,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 
 const CodeTabs = props => {
-  const { attributes, children, theme } = props;
+  const { children, theme } = props;
 
   function handleClick({ target }, index) {
     const $wrap = target.parentElement.parentElement;
@@ -18,8 +18,7 @@ const CodeTabs = props => {
   }
 
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <div {...attributes} className={`CodeTabs CodeTabs_initial theme-${theme}`}>
+    <div className={`CodeTabs CodeTabs_initial theme-${theme}`}>
       <div className="CodeTabs-toolbar">
         {children.map(({ props: pre }, i) => {
           const { meta, lang } = pre.children[0].props;
@@ -37,18 +36,14 @@ const CodeTabs = props => {
 };
 
 CodeTabs.propTypes = {
-  attributes: PropTypes.shape({}),
   children: PropTypes.arrayOf(PropTypes.any).isRequired,
   theme: PropTypes.string,
 };
 
-CodeTabs.defaultProps = {
-  attributes: null,
-};
-
 function CreateCodeTabs({ theme }) {
   // eslint-disable-next-line react/display-name
   return props => <CodeTabs {...props} theme={theme} />;
 }
 
 module.exports = CreateCodeTabs;
+module.exports.CodeTabs = CodeTabs;

package/dist/main.js

@@ -8229,8 +8229,7 @@ var _require = __webpack_require__(3752),
 var PropTypes = __webpack_require__(5697);
 var React = __webpack_require__(4466);
 var CodeTabs = function CodeTabs(props) {
-  var attributes = props.attributes,
-    children = props.children,
+  var children = props.children,
     theme = props.theme;
   function handleClick(_ref, index) {
     var target = _ref.target;
@@ -8244,39 +8243,31 @@ var CodeTabs = function CodeTabs(props) {
     codeblocks[index].classList.add('CodeTabs_active');
     target.classList.add('CodeTabs_active');
   }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    React.createElement("div", _extends({}, attributes, {
-      className: "CodeTabs CodeTabs_initial theme-".concat(theme)
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "CodeTabs-toolbar"
-    }, children.map(function (_ref2, i) {
-      var pre = _ref2.props;
-      var _pre$children$0$props = pre.children[0].props,
-        meta = _pre$children$0$props.meta,
-        lang = _pre$children$0$props.lang;
-      /* istanbul ignore next */
-      return /*#__PURE__*/React.createElement("button", {
-        key: i,
-        onClick: function onClick(e) {
-          return handleClick(e, i);
-        },
-        type: "button"
-      }, meta || "".concat(!lang ? 'Text' : uppercase(lang)));
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "CodeTabs-inner"
-    }, children))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: "CodeTabs CodeTabs_initial theme-".concat(theme)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "CodeTabs-toolbar"
+  }, children.map(function (_ref2, i) {
+    var pre = _ref2.props;
+    var _pre$children$0$props = pre.children[0].props,
+      meta = _pre$children$0$props.meta,
+      lang = _pre$children$0$props.lang;
+    /* istanbul ignore next */
+    return /*#__PURE__*/React.createElement("button", {
+      key: i,
+      onClick: function onClick(e) {
+        return handleClick(e, i);
+      },
+      type: "button"
+    }, meta || "".concat(!lang ? 'Text' : uppercase(lang)));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "CodeTabs-inner"
+  }, children));
 };
 CodeTabs.propTypes = {
-  attributes: PropTypes.shape({}),
   children: PropTypes.arrayOf(PropTypes.any).isRequired,
   theme: PropTypes.string
 };
-CodeTabs.defaultProps = {
-  attributes: null
-};
 function CreateCodeTabs(_ref3) {
   var theme = _ref3.theme;
   // eslint-disable-next-line react/display-name
@@ -8287,6 +8278,7 @@ function CreateCodeTabs(_ref3) {
   };
 }
 module.exports = CreateCodeTabs;
+module.exports.CodeTabs = CodeTabs;
 
 /***/ }),
 
@@ -9023,6 +9015,23 @@ module.exports = React.createContext([]);
 
 /***/ }),
 
+/***/ 5894:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var React = __webpack_require__(4466);
+var _require = __webpack_require__(6553),
+  CodeTabs = _require.CodeTabs;
+var createElement = function createElement(type, props) {
+  var rdmdType = type === 'div' && (props === null || props === void 0 ? void 0 : props.className) === 'code-tabs' ? CodeTabs : 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__) => {
 
@@ -24853,11 +24862,14 @@ var _require = __webpack_require__(7589),
   imgSizeByWidth = _require.imgSizeByWidth;
 var compileImage = function compileImage(image) {
   var _ref = image.data.hProperties || {},
+    align = _ref.align,
     className = _ref.className,
     width = _ref.width;
-  var img = _objectSpread(_objectSpread({
+  var img = _objectSpread(_objectSpread(_objectSpread({
     image: [image.url, image.title, image.alt]
-  }, width && {
+  }, align && {
+    align: align
+  }), width && {
     sizing: imgSizeByWidth[width]
   }), className === 'border' && {
     border: true
@@ -24943,9 +24955,10 @@ module.exports = function ImageCompiler() {
 
     // Use magic block instead of markdown when there are certain defined properties we can't store in markdown
     var _ref = ((_node$data2 = node.data) === null || _node$data2 === void 0 ? void 0 : _node$data2.hProperties) || {},
+      align = _ref.align,
       className = _ref.className,
       width = _ref.width;
-    var useMagicBlock = Boolean(width) || (className === null || className === void 0 ? void 0 : className.length);
+    var useMagicBlock = Boolean(width) || (className === null || className === void 0 ? void 0 : className.length) || Boolean(align);
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
@@ -25446,7 +25459,10 @@ function tokenizer(eat, value) {
     type: 'code-tabs',
     className: 'tabs',
     data: {
-      hName: 'code-tabs'
+      hName: 'div',
+      hProperties: {
+        className: ['code-tabs']
+      }
     },
     children: kids
   });
@@ -25840,7 +25856,9 @@ function tokenize(_ref) {
               title: title,
               alt: alt || ('caption' in img ? img.caption : ''),
               data: {
-                hProperties: _objectSpread({
+                hProperties: _objectSpread(_objectSpread({}, img.align && {
+                  align: img.align
+                }), {}, {
                   className: img.border ? 'border' : ''
                 }, img.sizing && {
                   width: imgWidthBySize[img.sizing]
@@ -26754,25 +26772,32 @@ const visit =
 
 var singleCodeTabs = function singleCodeTabs() {
   return function (tree) {
-    return visit(tree, function (node, index, parent) {
+    visit(tree, function (node, index, parent) {
       if (node.type === 'code' && (node.lang || node.meta) && parent.type !== 'code-tabs') {
-        node.data = {
-          hName: 'code',
-          hProperties: {
-            meta: node.meta,
-            lang: node.lang
+        Object.assign(node, {
+          className: 'tab-panel',
+          data: {
+            hName: 'code',
+            hProperties: {
+              meta: node.meta,
+              lang: node.lang
+            }
           }
-        };
+        });
         parent.children[index] = {
           type: 'code-tabs',
           className: 'tabs',
           data: {
-            hName: 'code-tabs'
+            hName: 'div',
+            hProperties: {
+              className: ['code-tabs']
+            }
           },
           children: [node]
         };
       }
     });
+    return tree;
   };
 };
 /* harmony default export */ const single_code_tabs = (singleCodeTabs);
@@ -26800,7 +26825,7 @@ var createSchema = function createSchema() {
   }
   schema.tagNames.push('rdme-pin');
   schema.tagNames.push('rdme-embed');
-  schema.attributes['rdme-embed'] = ['url', 'provider', 'html', 'title', 'href', 'iframe', 'width', 'height', 'image', 'favicon'];
+  schema.attributes['rdme-embed'] = ['url', 'provider', 'html', 'title', 'href', 'iframe', 'width', 'height', 'image', 'favicon', 'align'];
   schema.attributes.a = ['href', 'title', 'class', 'className', 'download'];
   schema.tagNames.push('figure');
   schema.tagNames.push('figcaption');
@@ -50514,6 +50539,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__(1593));
 var customCompilers = Object.values(__webpack_require__(9647));
 var registerCustomComponents = __webpack_require__(1264);
@@ -50656,10 +50682,8 @@ function reactProcessor() {
   opts = _setup8[1];
   var _opts3 = opts,
     sanitize = _opts3.sanitize;
-  return htmlProcessor(_objectSpread({
-    sanitize: sanitize
-  }, opts)).use(sectionAnchorId).use(rehypeReact, {
-    createElement: React.createElement,
+  return htmlProcessor(_objectSpread({}, opts)).use(sectionAnchorId).use(rehypeReact, {
+    createElement: createElement,
     Fragment: React.Fragment,
     components: _objectSpread({
       'code-tabs': CodeTabs(opts),

package/dist/main.node.js

@@ -8229,8 +8229,7 @@ var _require = __webpack_require__(6841),
 var PropTypes = __webpack_require__(5697);
 var React = __webpack_require__(4466);
 var CodeTabs = function CodeTabs(props) {
-  var attributes = props.attributes,
-    children = props.children,
+  var children = props.children,
     theme = props.theme;
   function handleClick(_ref, index) {
     var target = _ref.target;
@@ -8244,39 +8243,31 @@ var CodeTabs = function CodeTabs(props) {
     codeblocks[index].classList.add('CodeTabs_active');
     target.classList.add('CodeTabs_active');
   }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    React.createElement("div", _extends({}, attributes, {
-      className: "CodeTabs CodeTabs_initial theme-".concat(theme)
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "CodeTabs-toolbar"
-    }, children.map(function (_ref2, i) {
-      var pre = _ref2.props;
-      var _pre$children$0$props = pre.children[0].props,
-        meta = _pre$children$0$props.meta,
-        lang = _pre$children$0$props.lang;
-      /* istanbul ignore next */
-      return /*#__PURE__*/React.createElement("button", {
-        key: i,
-        onClick: function onClick(e) {
-          return handleClick(e, i);
-        },
-        type: "button"
-      }, meta || "".concat(!lang ? 'Text' : uppercase(lang)));
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "CodeTabs-inner"
-    }, children))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: "CodeTabs CodeTabs_initial theme-".concat(theme)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "CodeTabs-toolbar"
+  }, children.map(function (_ref2, i) {
+    var pre = _ref2.props;
+    var _pre$children$0$props = pre.children[0].props,
+      meta = _pre$children$0$props.meta,
+      lang = _pre$children$0$props.lang;
+    /* istanbul ignore next */
+    return /*#__PURE__*/React.createElement("button", {
+      key: i,
+      onClick: function onClick(e) {
+        return handleClick(e, i);
+      },
+      type: "button"
+    }, meta || "".concat(!lang ? 'Text' : uppercase(lang)));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "CodeTabs-inner"
+  }, children));
 };
 CodeTabs.propTypes = {
-  attributes: PropTypes.shape({}),
   children: PropTypes.arrayOf(PropTypes.any).isRequired,
   theme: PropTypes.string
 };
-CodeTabs.defaultProps = {
-  attributes: null
-};
 function CreateCodeTabs(_ref3) {
   var theme = _ref3.theme;
   // eslint-disable-next-line react/display-name
@@ -8287,6 +8278,7 @@ function CreateCodeTabs(_ref3) {
   };
 }
 module.exports = CreateCodeTabs;
+module.exports.CodeTabs = CodeTabs;
 
 /***/ }),
 
@@ -9023,6 +9015,23 @@ module.exports = React.createContext([]);
 
 /***/ }),
 
+/***/ 5894:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var React = __webpack_require__(4466);
+var _require = __webpack_require__(6553),
+  CodeTabs = _require.CodeTabs;
+var createElement = function createElement(type, props) {
+  var rdmdType = type === 'div' && (props === null || props === void 0 ? void 0 : props.className) === 'code-tabs' ? CodeTabs : 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__) => {
 
@@ -9654,11 +9663,14 @@ var _require = __webpack_require__(7589),
   imgSizeByWidth = _require.imgSizeByWidth;
 var compileImage = function compileImage(image) {
   var _ref = image.data.hProperties || {},
+    align = _ref.align,
     className = _ref.className,
     width = _ref.width;
-  var img = _objectSpread(_objectSpread({
+  var img = _objectSpread(_objectSpread(_objectSpread({
     image: [image.url, image.title, image.alt]
-  }, width && {
+  }, align && {
+    align: align
+  }), width && {
     sizing: imgSizeByWidth[width]
   }), className === 'border' && {
     border: true
@@ -9744,9 +9756,10 @@ module.exports = function ImageCompiler() {
 
     // Use magic block instead of markdown when there are certain defined properties we can't store in markdown
     var _ref = ((_node$data2 = node.data) === null || _node$data2 === void 0 ? void 0 : _node$data2.hProperties) || {},
+      align = _ref.align,
       className = _ref.className,
       width = _ref.width;
-    var useMagicBlock = Boolean(width) || (className === null || className === void 0 ? void 0 : className.length);
+    var useMagicBlock = Boolean(width) || (className === null || className === void 0 ? void 0 : className.length) || Boolean(align);
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
@@ -10226,7 +10239,10 @@ function tokenizer(eat, value) {
     type: 'code-tabs',
     className: 'tabs',
     data: {
-      hName: 'code-tabs'
+      hName: 'div',
+      hProperties: {
+        className: ['code-tabs']
+      }
     },
     children: kids
   });
@@ -10607,7 +10623,9 @@ function tokenize(_ref) {
               title: title,
               alt: alt || ('caption' in img ? img.caption : ''),
               data: {
-                hProperties: _objectSpread({
+                hProperties: _objectSpread(_objectSpread({}, img.align && {
+                  align: img.align
+                }), {}, {
                   className: img.border ? 'border' : ''
                 }, img.sizing && {
                   width: imgWidthBySize[img.sizing]
@@ -11521,25 +11539,32 @@ const visit =
 
 var singleCodeTabs = function singleCodeTabs() {
   return function (tree) {
-    return visit(tree, function (node, index, parent) {
+    visit(tree, function (node, index, parent) {
       if (node.type === 'code' && (node.lang || node.meta) && parent.type !== 'code-tabs') {
-        node.data = {
-          hName: 'code',
-          hProperties: {
-            meta: node.meta,
-            lang: node.lang
+        Object.assign(node, {
+          className: 'tab-panel',
+          data: {
+            hName: 'code',
+            hProperties: {
+              meta: node.meta,
+              lang: node.lang
+            }
           }
-        };
+        });
         parent.children[index] = {
           type: 'code-tabs',
           className: 'tabs',
           data: {
-            hName: 'code-tabs'
+            hName: 'div',
+            hProperties: {
+              className: ['code-tabs']
+            }
           },
           children: [node]
         };
       }
     });
+    return tree;
   };
 };
 /* harmony default export */ const single_code_tabs = (singleCodeTabs);
@@ -11567,7 +11592,7 @@ var createSchema = function createSchema() {
   }
   schema.tagNames.push('rdme-pin');
   schema.tagNames.push('rdme-embed');
-  schema.attributes['rdme-embed'] = ['url', 'provider', 'html', 'title', 'href', 'iframe', 'width', 'height', 'image', 'favicon'];
+  schema.attributes['rdme-embed'] = ['url', 'provider', 'html', 'title', 'href', 'iframe', 'width', 'height', 'image', 'favicon', 'align'];
   schema.attributes.a = ['href', 'title', 'class', 'className', 'download'];
   schema.tagNames.push('figure');
   schema.tagNames.push('figcaption');
@@ -34775,6 +34800,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);
@@ -34917,10 +34943,8 @@ function reactProcessor() {
   opts = _setup8[1];
   var _opts3 = opts,
     sanitize = _opts3.sanitize;
-  return htmlProcessor(_objectSpread({
-    sanitize: sanitize
-  }, opts)).use(sectionAnchorId).use(rehypeReact, {
-    createElement: React.createElement,
+  return htmlProcessor(_objectSpread({}, opts)).use(sectionAnchorId).use(rehypeReact, {
+    createElement: createElement,
     Fragment: React.Fragment,
     components: _objectSpread({
       'code-tabs': CodeTabs(opts),

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.59.0",
+  "version": "6.60.0",
   "main": "dist/main.node.js",
   "browser": "dist/main.js",
   "files": [