@readme/markdown 6.75.0-beta.65 → 6.75.0-beta.66

package/components/Image/index.tsx

@@ -16,7 +16,7 @@ interface ImageProps {
 
 const Image = (Props: ImageProps) => {
   const {
-    align = '',
+    align = 'center',
     alt = '',
     border = false,
     caption,
@@ -25,7 +25,7 @@ const Image = (Props: ImageProps) => {
     src,
     title = '',
     width = 'auto',
-    lazy = false,
+    lazy = true,
     children,
   } = Props;
 
@@ -60,55 +60,53 @@ const Image = (Props: ImageProps) => {
 
   if (caption) {
     return (
-      <span
-        aria-label={alt}
-        className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
-        onClick={toggle}
-        onKeyDown={handleKeyDown}
-        role={'button'}
-        tabIndex={0}
-      >
-        <span className="lightbox-inner">
-          <figure>
+      <figure>
+        <span
+          aria-label={alt}
+          className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
+          onClick={toggle}
+          onKeyDown={handleKeyDown}
+          role={'button'}
+          tabIndex={0}
+        >
+          <span className="lightbox-inner">
             <img
               src={src}
               width={width}
               height={height}
               title={title}
-              className={`img img-align-center ${border ? 'border' : ''}`}
+              className={`img img-align-center${border ? ' border' : ''}`}
               alt={alt}
               loading={lazy ? 'lazy' : 'eager'}
             />
             <figcaption>{children || caption}</figcaption>
-          </figure>
+          </span>
         </span>
-      </span>
+      </figure>
     );
   }
 
   return (
-    <p>
-      <span
-        aria-label={alt}
-        className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
-        onClick={toggle}
-        onKeyDown={handleKeyDown}
-        role={'button'}
-        tabIndex={0}
-      >
-        <span className="lightbox-inner">
-          <img
-            src={src}
-            width={width}
-            height={height}
-            title={title}
-            className={`img img-align-${align} ${border ? 'border' : ''}`}
-            alt={alt}
-            loading={lazy ? 'lazy' : 'eager'}
-          />
-        </span>
+    <span
+      aria-label={alt}
+      className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
+      onClick={toggle}
+      onKeyDown={handleKeyDown}
+      role={'button'}
+      tabIndex={0}
+    >
+      <span className="lightbox-inner">
+        <img
+          src={src}
+          width={width}
+          height={height}
+          title={title}
+          className={`img img-align-${align}${border ? ' border' : ''}`}
+          alt={alt}
+          loading={lazy ? 'lazy' : 'eager'}
+        />
       </span>
-    </p>
+    </span>
   );
 };
 

package/dist/main.js

@@ -14444,7 +14444,7 @@ const CreateHeading = (depth) => (props) => external_amd_react_commonjs_react_co
 ;// CONCATENATED MODULE: ./components/Image/index.tsx
 
 const Image = (Props) => {
-    const { align = '', alt = '', border = false, caption, className = '', height = 'auto', src, title = '', width = 'auto', lazy = false, children, } = Props;
+    const { align = 'center', alt = '', border = false, caption, className = '', height = 'auto', src, title = '', width = 'auto', lazy = true, children, } = Props;
     const [lightbox, setLightbox] = external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState(false);
     if (className === 'emoji') {
         return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("img", { src: src, width: width, height: height, title: title, alt: alt, loading: lazy ? 'lazy' : 'eager' });
@@ -14472,16 +14472,15 @@ const Image = (Props) => {
         setLightbox(!lightbox);
     };
     if (caption) {
-        return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { "aria-label": alt, className: `img lightbox ${lightbox ? 'open' : 'closed'}`, onClick: toggle, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
-            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { className: "lightbox-inner" },
-                external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("figure", null,
-                    external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("img", { src: src, width: width, height: height, title: title, className: `img img-align-center ${border ? 'border' : ''}`, alt: alt, loading: lazy ? 'lazy' : 'eager' }),
+        return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("figure", null,
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { "aria-label": alt, className: `img lightbox ${lightbox ? 'open' : 'closed'}`, onClick: toggle, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
+                external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { className: "lightbox-inner" },
+                    external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("img", { src: src, width: width, height: height, title: title, className: `img img-align-center${border ? ' border' : ''}`, alt: alt, loading: lazy ? 'lazy' : 'eager' }),
                     external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("figcaption", null, children || caption)))));
     }
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("p", null,
-        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { "aria-label": alt, className: `img lightbox ${lightbox ? 'open' : 'closed'}`, onClick: toggle, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
-            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { className: "lightbox-inner" },
-                external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("img", { src: src, width: width, height: height, title: title, className: `img img-align-${align} ${border ? 'border' : ''}`, alt: alt, loading: lazy ? 'lazy' : 'eager' })))));
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { "aria-label": alt, className: `img lightbox ${lightbox ? 'open' : 'closed'}`, onClick: toggle, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { className: "lightbox-inner" },
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("img", { src: src, width: width, height: height, title: title, className: `img img-align-${align}${border ? ' border' : ''}`, alt: alt, loading: lazy ? 'lazy' : 'eager' }))));
 };
 /* harmony default export */ const components_Image = (Image);
 
@@ -94430,16 +94429,23 @@ const compatibility_html = (node) => {
     return xml.replace(/<html.*<body>(.*)<\/body><\/html>/ms, '$1');
 };
 const figureToImageBlock = (node) => {
-    const _a = node.children.find((child) => child.type === 'image'), { align, width, src, alt, title } = _a, image = compatibility_rest(_a, ["align", "width", "src", "alt", "title"]);
+    const _a = node.children.find((child) => child.type === 'image'), { align, width, src, url, alt, title } = _a, image = compatibility_rest(_a, ["align", "width", "src", "url", "alt", "title"]);
     const { className } = image.data.hProperties;
     const figcaption = node.children.find((child) => child.type === 'figcaption');
-    const caption = figcaption ? toMarkdown({
-        type: 'paragraph',
-        children: figcaption.children,
-    }).trim() : null;
-    const attributes = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (align && { align })), (alt && { alt })), (className && { border: className === 'border' })), (caption && { caption })), (title && { title })), (width && { width })), { src });
+    const caption = figcaption
+        ? toMarkdown({
+            type: 'paragraph',
+            children: figcaption.children,
+        }).trim()
+        : null;
+    const attributes = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (align && { align })), (alt && { alt })), (className && { border: className === 'border' })), (caption && { caption })), (title && { title })), (width && { width })), { src: src || url });
     return `<Image ${formatProps(attributes)} />`;
 };
+const embedToEmbedBlock = (node) => {
+    const _a = node.data.hProperties, { html } = _a, embed = compatibility_rest(_a, ["html"]);
+    const attributes = Object.assign(Object.assign({}, embed), (html && { html: encodeURIComponent(html) }));
+    return `<Embed ${formatProps(attributes)} />`;
+};
 const compatibility = (node) => {
     var _a, _b;
     switch (node.type) {
@@ -94456,8 +94462,7 @@ const compatibility = (node) => {
         case 'figure':
             return figureToImageBlock(node);
         case 'embed':
-            const attributes = formatHProps(node);
-            return `<Embed ${attributes} />`;
+            return embedToEmbedBlock(node);
         default:
             throw new Error('Unhandled node type!');
     }

package/dist/main.node.js

@@ -14334,7 +14334,7 @@ const CreateHeading = (depth) => (props) => external_amd_react_commonjs_react_co
 ;// CONCATENATED MODULE: ./components/Image/index.tsx
 
 const Image = (Props) => {
-    const { align = '', alt = '', border = false, caption, className = '', height = 'auto', src, title = '', width = 'auto', lazy = false, children, } = Props;
+    const { align = 'center', alt = '', border = false, caption, className = '', height = 'auto', src, title = '', width = 'auto', lazy = true, children, } = Props;
     const [lightbox, setLightbox] = external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState(false);
     if (className === 'emoji') {
         return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("img", { src: src, width: width, height: height, title: title, alt: alt, loading: lazy ? 'lazy' : 'eager' });
@@ -14362,16 +14362,15 @@ const Image = (Props) => {
         setLightbox(!lightbox);
     };
     if (caption) {
-        return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { "aria-label": alt, className: `img lightbox ${lightbox ? 'open' : 'closed'}`, onClick: toggle, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
-            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { className: "lightbox-inner" },
-                external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("figure", null,
-                    external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("img", { src: src, width: width, height: height, title: title, className: `img img-align-center ${border ? 'border' : ''}`, alt: alt, loading: lazy ? 'lazy' : 'eager' }),
+        return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("figure", null,
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { "aria-label": alt, className: `img lightbox ${lightbox ? 'open' : 'closed'}`, onClick: toggle, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
+                external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { className: "lightbox-inner" },
+                    external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("img", { src: src, width: width, height: height, title: title, className: `img img-align-center${border ? ' border' : ''}`, alt: alt, loading: lazy ? 'lazy' : 'eager' }),
                     external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("figcaption", null, children || caption)))));
     }
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("p", null,
-        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { "aria-label": alt, className: `img lightbox ${lightbox ? 'open' : 'closed'}`, onClick: toggle, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
-            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { className: "lightbox-inner" },
-                external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("img", { src: src, width: width, height: height, title: title, className: `img img-align-${align} ${border ? 'border' : ''}`, alt: alt, loading: lazy ? 'lazy' : 'eager' })))));
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { "aria-label": alt, className: `img lightbox ${lightbox ? 'open' : 'closed'}`, onClick: toggle, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { className: "lightbox-inner" },
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("img", { src: src, width: width, height: height, title: title, className: `img img-align-${align}${border ? ' border' : ''}`, alt: alt, loading: lazy ? 'lazy' : 'eager' }))));
 };
 /* harmony default export */ const components_Image = (Image);
 
@@ -95883,16 +95882,23 @@ const compatibility_html = (node) => {
     return xml.replace(/<html.*<body>(.*)<\/body><\/html>/ms, '$1');
 };
 const figureToImageBlock = (node) => {
-    const _a = node.children.find((child) => child.type === 'image'), { align, width, src, alt, title } = _a, image = compatibility_rest(_a, ["align", "width", "src", "alt", "title"]);
+    const _a = node.children.find((child) => child.type === 'image'), { align, width, src, url, alt, title } = _a, image = compatibility_rest(_a, ["align", "width", "src", "url", "alt", "title"]);
     const { className } = image.data.hProperties;
     const figcaption = node.children.find((child) => child.type === 'figcaption');
-    const caption = figcaption ? toMarkdown({
-        type: 'paragraph',
-        children: figcaption.children,
-    }).trim() : null;
-    const attributes = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (align && { align })), (alt && { alt })), (className && { border: className === 'border' })), (caption && { caption })), (title && { title })), (width && { width })), { src });
+    const caption = figcaption
+        ? toMarkdown({
+            type: 'paragraph',
+            children: figcaption.children,
+        }).trim()
+        : null;
+    const attributes = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (align && { align })), (alt && { alt })), (className && { border: className === 'border' })), (caption && { caption })), (title && { title })), (width && { width })), { src: src || url });
     return `<Image ${formatProps(attributes)} />`;
 };
+const embedToEmbedBlock = (node) => {
+    const _a = node.data.hProperties, { html } = _a, embed = compatibility_rest(_a, ["html"]);
+    const attributes = Object.assign(Object.assign({}, embed), (html && { html: encodeURIComponent(html) }));
+    return `<Embed ${formatProps(attributes)} />`;
+};
 const compatibility = (node) => {
     var _a, _b;
     switch (node.type) {
@@ -95909,8 +95915,7 @@ const compatibility = (node) => {
         case 'figure':
             return figureToImageBlock(node);
         case 'embed':
-            const attributes = formatHProps(node);
-            return `<Embed ${attributes} />`;
+            return embedToEmbedBlock(node);
         default:
             throw new Error('Unhandled node type!');
     }

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.75.0-beta.65",
+  "version": "6.75.0-beta.66",
   "main": "dist/main.node.js",
   "types": "dist/index.d.ts",
   "browser": "dist/main.js",