@readme/markdown 6.75.0-beta.64 → 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);
 
@@ -48562,8 +48561,17 @@ const embedTransformer = () => {
  */
 const formatHProps = (node) => {
     const hProps = getHProps(node);
-    const hPropKeys = getHPropKeys(node);
-    return hPropKeys.map(key => `${key}="${hProps[key]}"`).join(' ');
+    return formatProps(hProps);
+};
+/**
+ * Formats an object of props as a string.
+ *
+ * @param {Object} props
+ * @returns {string}
+ */
+const formatProps = (props) => {
+    const keys = Object.keys(props);
+    return keys.map(key => `${key}="${props[key]}"`).join(' ');
 };
 /**
  * Returns the hProperties of a node.
@@ -94389,6 +94397,19 @@ function toXml(tree, options) {
 }
 
 ;// CONCATENATED MODULE: ./processor/compile/compatibility.ts
+var compatibility_rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+
+
 
 
 
@@ -94407,6 +94428,24 @@ const compatibility_html = (node) => {
     const xml = toXml(xast, { closeEmptyElements: true });
     return xml.replace(/<html.*<body>(.*)<\/body><\/html>/ms, '$1');
 };
+const figureToImageBlock = (node) => {
+    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: 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) {
@@ -94420,6 +94459,10 @@ const compatibility = (node) => {
             return compatibility_html(node);
         case 'escape':
             return `\\${node.value}`;
+        case 'figure':
+            return figureToImageBlock(node);
+        case 'embed':
+            return embedToEmbedBlock(node);
         default:
             throw new Error('Unhandled node type!');
     }
@@ -94453,7 +94496,9 @@ function compilers() {
         [NodeTypes.imageBlock]: compile_image,
         [NodeTypes.reusableContent]: compile_compatibility,
         [NodeTypes.variable]: compile_variable,
+        embed: compile_compatibility,
         escape: compile_compatibility,
+        figure: compile_compatibility,
         html: compile_compatibility,
     };
     toMarkdownExtensions.push({ extensions: [{ handlers }] });

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);
 
@@ -50015,8 +50014,17 @@ const embedTransformer = () => {
  */
 const formatHProps = (node) => {
     const hProps = getHProps(node);
-    const hPropKeys = getHPropKeys(node);
-    return hPropKeys.map(key => `${key}="${hProps[key]}"`).join(' ');
+    return formatProps(hProps);
+};
+/**
+ * Formats an object of props as a string.
+ *
+ * @param {Object} props
+ * @returns {string}
+ */
+const formatProps = (props) => {
+    const keys = Object.keys(props);
+    return keys.map(key => `${key}="${props[key]}"`).join(' ');
 };
 /**
  * Returns the hProperties of a node.
@@ -95842,6 +95850,19 @@ function toXml(tree, options) {
 }
 
 ;// CONCATENATED MODULE: ./processor/compile/compatibility.ts
+var compatibility_rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+
+
 
 
 
@@ -95860,6 +95881,24 @@ const compatibility_html = (node) => {
     const xml = toXml(xast, { closeEmptyElements: true });
     return xml.replace(/<html.*<body>(.*)<\/body><\/html>/ms, '$1');
 };
+const figureToImageBlock = (node) => {
+    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: 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) {
@@ -95873,6 +95912,10 @@ const compatibility = (node) => {
             return compatibility_html(node);
         case 'escape':
             return `\\${node.value}`;
+        case 'figure':
+            return figureToImageBlock(node);
+        case 'embed':
+            return embedToEmbedBlock(node);
         default:
             throw new Error('Unhandled node type!');
     }
@@ -95906,7 +95949,9 @@ function compilers() {
         [NodeTypes.imageBlock]: compile_image,
         [NodeTypes.reusableContent]: compile_compatibility,
         [NodeTypes.variable]: compile_variable,
+        embed: compile_compatibility,
         escape: compile_compatibility,
+        figure: compile_compatibility,
         html: compile_compatibility,
     };
     toMarkdownExtensions.push({ extensions: [{ handlers }] });

package/dist/processor/compile/compatibility.d.ts

@@ -1,4 +1,4 @@
-import { Html } from 'mdast';
+import { Html, Image } from 'mdast';
 import { NodeTypes } from '../../enums';
 type CompatNodes = {
     type: NodeTypes.glossary;
@@ -19,9 +19,25 @@ type CompatNodes = {
 } | {
     type: NodeTypes.reusableContent;
     tag: string;
+} | {
+    type: 'embed';
+    data: {
+        hProperties: {
+            [key: string]: string;
+        };
+    };
 } | {
     type: 'escape';
     value: string;
+} | {
+    type: 'figure';
+    children: [Image, {
+        type: 'figcaption';
+        children: [{
+            type: 'text';
+            value: string;
+        }];
+    }];
 } | Html;
 declare const compatibility: (node: CompatNodes) => string;
 export default compatibility;

package/dist/processor/utils.d.ts

@@ -10,6 +10,13 @@ import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx';
  * @returns {string} formatted hProperties as JSX attributes
  */
 export declare const formatHProps: <T>(node: Node) => string;
+/**
+ * Formats an object of props as a string.
+ *
+ * @param {Object} props
+ * @returns {string}
+ */
+export declare const formatProps: (props: Object) => string;
 /**
  * Returns the hProperties of a node.
  *

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