@readme/markdown 6.52.2 → 6.53.0

package/components/Embed/index.jsx

@@ -10,7 +10,7 @@ Favicon.propTypes = {
 
 class Embed extends React.Component {
   render() {
-    const { provider, url, title, html, iframe, image, favicon, ...attrs } = this.props;
+    const { lazy = true, provider, url, title, html, iframe, image, favicon, ...attrs } = this.props;
 
     if (!url) {
       return <div />;
@@ -27,14 +27,14 @@ class Embed extends React.Component {
           <div className="embed-media" dangerouslySetInnerHTML={{ __html: html }}></div>
         ) : (
           <a className="embed-link" href={url} rel="noopener noreferrer" target="_blank">
-            {!image || <img alt={title} className="embed-img" loading="lazy" src={image} />}
+            {!image || <img alt={title} className="embed-img" loading={lazy ? 'lazy' : ''} src={image} />}
             {title ? (
               <div className="embed-body">
                 {!favicon || (
                   <Favicon
                     alt={provider}
                     className="embed-favicon"
-                    loading="lazy"
+                    loading={lazy ? 'lazy' : ''}
                     src={favicon}
                     style={{ float: 'left' }}
                   />
@@ -69,6 +69,7 @@ Embed.propTypes = {
   html: propTypes.string,
   iframe: propTypes.any,
   image: propTypes.string,
+  lazy: propTypes.bool,
   provider: propTypes.string,
   title: propTypes.string,
   url: propTypes.oneOfType([propTypes.string, propTypes.shape({})]),
@@ -79,4 +80,10 @@ Embed.defaultProps = {
   width: '100%',
 };
 
-module.exports = Embed;
+const CreateEmbed =
+  ({ lazyImages }) =>
+  // eslint-disable-next-line react/display-name
+  props =>
+    <Embed {...props} lazy={lazyImages} />;
+
+module.exports = CreateEmbed;

package/components/Image/index.jsx

@@ -64,11 +64,12 @@ class Image extends React.Component {
 
   render() {
     const { props } = this;
-    const { alt } = props;
+    const { alt, lazy = true } = props;
 
     if (this.isEmoji) {
-      return <img {...props} alt={alt} loading="lazy" />;
+      return <img {...props} alt={alt} loading={lazy ? 'lazy' : ''} />;
     }
+
     return (
       <span
         aria-label={alt}
@@ -78,7 +79,7 @@ class Image extends React.Component {
         role={'button'}
         tabIndex={0}
       >
-        <img {...props} alt={alt} loading="lazy" />
+        <img {...props} alt={alt} loading={lazy ? 'lazy' : ''} />
         <Lightbox ref={this.lightbox} {...props} onScroll={() => this.toggle(false)} opened={this.state.lightbox} />
       </span>
     );
@@ -91,6 +92,7 @@ Image.propTypes = {
   caption: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  lazy: PropTypes.bool,
   src: PropTypes.string.isRequired,
   title: PropTypes.string,
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -112,4 +114,10 @@ Image.sanitize = sanitizeSchema => {
   return sanitizeSchema;
 };
 
-module.exports = Image;
+const CreateImage =
+  ({ lazyImages }) =>
+  // eslint-disable-next-line react/display-name
+  props =>
+    <Image lazy={lazyImages} {...props} />;
+
+module.exports = CreateImage;

package/dist/main.js

@@ -9505,7 +9505,7 @@ var _extends = __webpack_require__(7154);
 var _objectWithoutProperties = __webpack_require__(6479);
 
 var _excluded = ["src", "alt"],
-    _excluded2 = ["provider", "url", "title", "html", "iframe", "image", "favicon"];
+    _excluded2 = ["lazy", "provider", "url", "title", "html", "iframe", "image", "favicon"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -9552,6 +9552,8 @@ var Embed = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          _this$props$lazy = _this$props.lazy,
+          lazy = _this$props$lazy === void 0 ? true : _this$props$lazy,
           provider = _this$props.provider,
           url = _this$props.url,
           title = _this$props.title,
@@ -9591,14 +9593,14 @@ var Embed = /*#__PURE__*/function (_React$Component) {
       }, !image || /*#__PURE__*/React.createElement("img", {
         alt: title,
         className: "embed-img",
-        loading: "lazy",
+        loading: lazy ? 'lazy' : '',
         src: image
       }), title ? /*#__PURE__*/React.createElement("div", {
         className: "embed-body"
       }, !favicon || /*#__PURE__*/React.createElement(Favicon, {
         alt: provider,
         className: "embed-favicon",
-        loading: "lazy",
+        loading: lazy ? 'lazy' : '',
         src: favicon,
         style: {
           float: 'left'
@@ -9629,6 +9631,7 @@ Embed.propTypes = {
   html: propTypes.string,
   iframe: propTypes.any,
   image: propTypes.string,
+  lazy: propTypes.bool,
   provider: propTypes.string,
   title: propTypes.string,
   url: propTypes.oneOfType([propTypes.string, propTypes.shape({})]),
@@ -9638,7 +9641,19 @@ Embed.defaultProps = {
   height: '300px',
   width: '100%'
 };
-module.exports = Embed;
+
+var CreateEmbed = function CreateEmbed(_ref2) {
+  var lazyImages = _ref2.lazyImages;
+  return (// eslint-disable-next-line react/display-name
+    function (props) {
+      return /*#__PURE__*/React.createElement(Embed, _extends({}, props, {
+        lazy: lazyImages
+      }));
+    }
+  );
+};
+
+module.exports = CreateEmbed;
 
 /***/ }),
 
@@ -10077,12 +10092,14 @@ var Image = /*#__PURE__*/function (_React$Component) {
       var _this2 = this;
 
       var props = this.props;
-      var alt = props.alt;
+      var alt = props.alt,
+          _props$lazy = props.lazy,
+          lazy = _props$lazy === void 0 ? true : _props$lazy;
 
       if (this.isEmoji) {
         return /*#__PURE__*/React.createElement("img", _extends({}, props, {
           alt: alt,
-          loading: "lazy"
+          loading: lazy ? 'lazy' : ''
         }));
       }
 
@@ -10097,7 +10114,7 @@ var Image = /*#__PURE__*/function (_React$Component) {
         tabIndex: 0
       }, /*#__PURE__*/React.createElement("img", _extends({}, props, {
         alt: alt,
-        loading: "lazy"
+        loading: lazy ? 'lazy' : ''
       })), /*#__PURE__*/React.createElement(Lightbox, _extends({
         ref: this.lightbox
       }, props, {
@@ -10118,6 +10135,7 @@ Image.propTypes = {
   caption: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  lazy: PropTypes.bool,
   src: PropTypes.string.isRequired,
   title: PropTypes.string,
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
@@ -10137,7 +10155,18 @@ Image.sanitize = function (sanitizeSchema) {
   return sanitizeSchema;
 };
 
-module.exports = Image;
+var CreateImage = function CreateImage(_ref) {
+  var lazyImages = _ref.lazyImages;
+  return (// eslint-disable-next-line react/display-name
+    function (props) {
+      return /*#__PURE__*/React.createElement(Image, _extends({
+        lazy: lazyImages
+      }, props));
+    }
+  );
+};
+
+module.exports = CreateImage;
 
 /***/ }),
 
@@ -27963,6 +27992,7 @@ var options = {
     spacedTable: true,
     paddedTable: true
   },
+  lazyImages: true,
   normalize: true,
   safeMode: false,
   settings: {
@@ -52351,7 +52381,7 @@ function reactProcessor() {
       'rdme-callout': Callout,
       'readme-variable': Variable,
       'readme-glossary-item': GlossaryItem,
-      'rdme-embed': Embed,
+      'rdme-embed': Embed(opts),
       'rdme-pin': PinWrap,
       table: Table,
       a: Anchor,
@@ -52362,7 +52392,7 @@ function reactProcessor() {
       h5: Heading(5, count, opts),
       h6: Heading(6, count, opts),
       code: Code(opts),
-      img: Image,
+      img: Image(opts),
       style: Style(opts)
     }, registerCustomComponents(components, sanitize, opts.customComponentPrefix))
   });

package/dist/main.node.js

@@ -9505,7 +9505,7 @@ var _extends = __webpack_require__(7154);
 var _objectWithoutProperties = __webpack_require__(6479);
 
 var _excluded = ["src", "alt"],
-    _excluded2 = ["provider", "url", "title", "html", "iframe", "image", "favicon"];
+    _excluded2 = ["lazy", "provider", "url", "title", "html", "iframe", "image", "favicon"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -9552,6 +9552,8 @@ var Embed = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          _this$props$lazy = _this$props.lazy,
+          lazy = _this$props$lazy === void 0 ? true : _this$props$lazy,
           provider = _this$props.provider,
           url = _this$props.url,
           title = _this$props.title,
@@ -9591,14 +9593,14 @@ var Embed = /*#__PURE__*/function (_React$Component) {
       }, !image || /*#__PURE__*/React.createElement("img", {
         alt: title,
         className: "embed-img",
-        loading: "lazy",
+        loading: lazy ? 'lazy' : '',
         src: image
       }), title ? /*#__PURE__*/React.createElement("div", {
         className: "embed-body"
       }, !favicon || /*#__PURE__*/React.createElement(Favicon, {
         alt: provider,
         className: "embed-favicon",
-        loading: "lazy",
+        loading: lazy ? 'lazy' : '',
         src: favicon,
         style: {
           float: 'left'
@@ -9629,6 +9631,7 @@ Embed.propTypes = {
   html: propTypes.string,
   iframe: propTypes.any,
   image: propTypes.string,
+  lazy: propTypes.bool,
   provider: propTypes.string,
   title: propTypes.string,
   url: propTypes.oneOfType([propTypes.string, propTypes.shape({})]),
@@ -9638,7 +9641,19 @@ Embed.defaultProps = {
   height: '300px',
   width: '100%'
 };
-module.exports = Embed;
+
+var CreateEmbed = function CreateEmbed(_ref2) {
+  var lazyImages = _ref2.lazyImages;
+  return (// eslint-disable-next-line react/display-name
+    function (props) {
+      return /*#__PURE__*/React.createElement(Embed, _extends({}, props, {
+        lazy: lazyImages
+      }));
+    }
+  );
+};
+
+module.exports = CreateEmbed;
 
 /***/ }),
 
@@ -10077,12 +10092,14 @@ var Image = /*#__PURE__*/function (_React$Component) {
       var _this2 = this;
 
       var props = this.props;
-      var alt = props.alt;
+      var alt = props.alt,
+          _props$lazy = props.lazy,
+          lazy = _props$lazy === void 0 ? true : _props$lazy;
 
       if (this.isEmoji) {
         return /*#__PURE__*/React.createElement("img", _extends({}, props, {
           alt: alt,
-          loading: "lazy"
+          loading: lazy ? 'lazy' : ''
         }));
       }
 
@@ -10097,7 +10114,7 @@ var Image = /*#__PURE__*/function (_React$Component) {
         tabIndex: 0
       }, /*#__PURE__*/React.createElement("img", _extends({}, props, {
         alt: alt,
-        loading: "lazy"
+        loading: lazy ? 'lazy' : ''
       })), /*#__PURE__*/React.createElement(Lightbox, _extends({
         ref: this.lightbox
       }, props, {
@@ -10118,6 +10135,7 @@ Image.propTypes = {
   caption: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  lazy: PropTypes.bool,
   src: PropTypes.string.isRequired,
   title: PropTypes.string,
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
@@ -10137,7 +10155,18 @@ Image.sanitize = function (sanitizeSchema) {
   return sanitizeSchema;
 };
 
-module.exports = Image;
+var CreateImage = function CreateImage(_ref) {
+  var lazyImages = _ref.lazyImages;
+  return (// eslint-disable-next-line react/display-name
+    function (props) {
+      return /*#__PURE__*/React.createElement(Image, _extends({
+        lazy: lazyImages
+      }, props));
+    }
+  );
+};
+
+module.exports = CreateImage;
 
 /***/ }),
 
@@ -10785,6 +10814,7 @@ var options = {
     spacedTable: true,
     paddedTable: true
   },
+  lazyImages: true,
   normalize: true,
   safeMode: false,
   settings: {
@@ -34696,7 +34726,7 @@ function reactProcessor() {
       'rdme-callout': Callout,
       'readme-variable': Variable,
       'readme-glossary-item': GlossaryItem,
-      'rdme-embed': Embed,
+      'rdme-embed': Embed(opts),
       'rdme-pin': PinWrap,
       table: Table,
       a: Anchor,
@@ -34707,7 +34737,7 @@ function reactProcessor() {
       h5: Heading(5, count, opts),
       h6: Heading(6, count, opts),
       code: Code(opts),
-      img: Image,
+      img: Image(opts),
       style: Style(opts)
     }, registerCustomComponents(components, sanitize, opts.customComponentPrefix))
   });

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