@readme/markdown 6.52.1 → 6.53.0

package/components/Anchor.jsx

@@ -86,3 +86,5 @@ AnchorWithContext.sanitize = sanitizeSchema => {
 };
 
 module.exports = AnchorWithContext;
+
+AnchorWithContext.getHref = getHref;

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

@@ -9203,6 +9203,7 @@ AnchorWithContext.sanitize = function (sanitizeSchema) {
 };
 
 module.exports = AnchorWithContext;
+AnchorWithContext.getHref = getHref;
 
 /***/ }),
 
@@ -9504,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); }; }
 
@@ -9551,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,
@@ -9590,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'
@@ -9628,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({})]),
@@ -9637,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;
 
 /***/ }),
 
@@ -10076,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' : ''
         }));
       }
 
@@ -10096,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, {
@@ -10117,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])
@@ -10136,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;
 
 /***/ }),
 
@@ -27962,6 +27992,7 @@ var options = {
     spacedTable: true,
     paddedTable: true
   },
+  lazyImages: true,
   normalize: true,
   safeMode: false,
   settings: {
@@ -52198,6 +52229,9 @@ var Variable = __webpack_require__(3689);
 
 var Components = __webpack_require__(3354);
 
+var _require2 = __webpack_require__(8447),
+    getHref = _require2.getHref;
+
 var GlossaryItem = Components.GlossaryItem,
     Code = Components.Code,
     Table = Components.Table,
@@ -52229,9 +52263,9 @@ var tableFlattening = __webpack_require__(4625);
 var toPlainText = __webpack_require__(4792); // Processor Option Defaults
 
 
-var _require2 = __webpack_require__(2531),
-    options = _require2.options,
-    parseOptions = _require2.parseOptions;
+var _require3 = __webpack_require__(2531),
+    options = _require3.options,
+    parseOptions = _require3.parseOptions;
 /* Utilities
  */
 
@@ -52263,11 +52297,12 @@ function setup(blocks) {
   return ["".concat(blocks, "\n\n "), opts];
 }
 
-var _require3 = __webpack_require__(3910),
-    calloutIcons = _require3.icons;
+var _require4 = __webpack_require__(3910),
+    calloutIcons = _require4.icons;
 
 var utils = {
   BaseUrlContext: BaseUrlContext,
+  getHref: getHref,
   GlossaryContext: GlossaryItem.GlossaryContext,
   options: options,
   VariablesContext: Variable.VariablesContext,
@@ -52346,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,
@@ -52357,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

@@ -9203,6 +9203,7 @@ AnchorWithContext.sanitize = function (sanitizeSchema) {
 };
 
 module.exports = AnchorWithContext;
+AnchorWithContext.getHref = getHref;
 
 /***/ }),
 
@@ -9504,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); }; }
 
@@ -9551,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,
@@ -9590,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'
@@ -9628,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({})]),
@@ -9637,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;
 
 /***/ }),
 
@@ -10076,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' : ''
         }));
       }
 
@@ -10096,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, {
@@ -10117,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])
@@ -10136,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;
 
 /***/ }),
 
@@ -10784,6 +10814,7 @@ var options = {
     spacedTable: true,
     paddedTable: true
   },
+  lazyImages: true,
   normalize: true,
   safeMode: false,
   settings: {
@@ -34543,6 +34574,9 @@ var Variable = __webpack_require__(3689);
 
 var Components = __webpack_require__(3354);
 
+var _require2 = __webpack_require__(8447),
+    getHref = _require2.getHref;
+
 var GlossaryItem = Components.GlossaryItem,
     Code = Components.Code,
     Table = Components.Table,
@@ -34574,9 +34608,9 @@ var tableFlattening = __webpack_require__(4625);
 var toPlainText = __webpack_require__(4792); // Processor Option Defaults
 
 
-var _require2 = __webpack_require__(2531),
-    options = _require2.options,
-    parseOptions = _require2.parseOptions;
+var _require3 = __webpack_require__(2531),
+    options = _require3.options,
+    parseOptions = _require3.parseOptions;
 /* Utilities
  */
 
@@ -34608,11 +34642,12 @@ function setup(blocks) {
   return ["".concat(blocks, "\n\n "), opts];
 }
 
-var _require3 = __webpack_require__(3910),
-    calloutIcons = _require3.icons;
+var _require4 = __webpack_require__(3910),
+    calloutIcons = _require4.icons;
 
 var utils = {
   BaseUrlContext: BaseUrlContext,
+  getHref: getHref,
   GlossaryContext: GlossaryItem.GlossaryContext,
   options: options,
   VariablesContext: Variable.VariablesContext,
@@ -34691,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,
@@ -34702,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.1",
+  "version": "6.53.0",
   "main": "dist/main.node.js",
   "browser": "dist/main.js",
   "files": [