@readme/markdown 6.75.0-beta.52 → 6.75.0-beta.53

package/components/Embed/index.tsx

@@ -13,24 +13,42 @@ interface EmbedProps {
   lazy?: boolean;
   url: string;
   title: string;
-  provider?: string;
+  providerName?: string;
+  providerUrl?: string;
   html?: string;
   iframe?: boolean;
   image?: string;
   favicon?: string;
+  typeOfEmbed?: string;
 }
 
-const Embed = ({ lazy = true, url, provider, title, html, iframe, image, favicon, ...attrs }: EmbedProps) => {
+const Embed = ({
+  lazy = true,
+  url,
+  html,
+  providerName,
+  providerUrl,
+  title,
+  iframe,
+  image,
+  favicon,
+  ...attrs
+}: EmbedProps) => {
+  if (typeof iframe !== 'boolean') iframe = iframe === 'true';
+  if (html === 'false') html = undefined;
+
   if (iframe) {
     return <iframe {...attrs} src={url} style={{ border: 'none', display: 'flex', margin: 'auto' }} />;
   }
 
-  if (!provider)
-    provider = new URL(url).hostname
+  if (!providerUrl && url)
+    providerUrl = new URL(url).hostname
       .split(/(?:www)?\./)
       .filter(i => i)
       .join('.');
 
+  if (!providerName) providerName = providerUrl;
+
   const classes = ['embed', image ? 'embed_hasImg' : ''];
 
   return (
@@ -40,13 +58,13 @@ const Embed = ({ lazy = true, url, provider, title, html, iframe, image, favicon
       ) : (
         <a className="embed-link" href={url} rel="noopener noreferrer" target="_blank">
           {!image || <img alt={title} className="embed-img" loading={lazy ? 'lazy' : undefined} src={image} />}
-          {title ? (
+          {title && title !== '@embed' ? (
             <div className="embed-body">
-              {!favicon || <Favicon alt={provider} src={favicon} />}
-              {provider && (
+              {!favicon || <Favicon alt={providerName} src={favicon} />}
+              {providerUrl && (
                 <small className="embed-provider">
-                  {provider.search(/^@{1}/) < 0 ? (
-                    provider
+                  {providerUrl.search(/^@{1}/) < 0 ? (
+                    providerName
                   ) : (
                     <code style={{ fontFamily: 'var(--md-code-font, monospace)' }}>{url}</code>
                   )}

package/components/Image/index.tsx

@@ -57,16 +57,16 @@ const Image = (Props: ImageProps) => {
 
   if (caption) {
     return (
-      <figure>
-        <span
-          aria-label={alt}
-          className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
-          onClick={toggle}
-          onKeyDown={handleKeyDown}
-          role={'button'}
-          tabIndex={0}
-        >
-          <span className="lightbox-inner">
+      <span
+        aria-label={alt}
+        className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
+        onClick={toggle}
+        onKeyDown={handleKeyDown}
+        role={'button'}
+        tabIndex={0}
+      >
+        <span className="lightbox-inner">
+          <figure>
             <img
               src={src}
               width={width}
@@ -76,34 +76,36 @@ const Image = (Props: ImageProps) => {
               alt={alt}
               loading={lazy ? 'lazy' : 'eager'}
             />
-          </span>
+            <figcaption>{caption}</figcaption>
+          </figure>
         </span>
-        <figcaption>{caption}</figcaption>
-      </figure>
+      </span>
     );
   }
 
   return (
-    <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'}
-        />
+    <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>
-    </span>
+    </p>
   );
 };
 

package/dist/components/Embed/index.d.ts

@@ -3,11 +3,13 @@ interface EmbedProps {
     lazy?: boolean;
     url: string;
     title: string;
-    provider?: string;
+    providerName?: string;
+    providerUrl?: string;
     html?: string;
     iframe?: boolean;
     image?: string;
     favicon?: string;
+    typeOfEmbed?: string;
 }
-declare const Embed: ({ lazy, url, provider, title, html, iframe, image, favicon, ...attrs }: EmbedProps) => React.JSX.Element;
+declare const Embed: ({ lazy, url, html, providerName, providerUrl, title, iframe, image, favicon, ...attrs }: EmbedProps) => React.JSX.Element;
 export default Embed;

package/dist/enums.d.ts

@@ -1,12 +1,12 @@
 export declare enum NodeTypes {
     callout = "rdme-callout",
     codeTabs = "code-tabs",
-    embed = "embed",
+    embedBlock = "embed-block",
     emoji = "gemoji",
     glossary = "readme-glossary-item",
     htmlBlock = "html-block",
     i = "i",
-    image = "image",
+    imageBlock = "image-block",
     reusableContent = "reusable-content",
     tutorialTile = "tutorial-tile",
     variable = "readme-variable"

package/dist/main.js

@@ -50851,21 +50851,27 @@ const Favicon = (_a) => {
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("img", Object.assign({}, attr, { alt: alt, height: "14", src: src, width: "14" })));
 };
 const Embed = (_a) => {
-    var { lazy = true, url, provider, title, html, iframe, image, favicon } = _a, attrs = __rest(_a, ["lazy", "url", "provider", "title", "html", "iframe", "image", "favicon"]);
+    var { lazy = true, url, html, providerName, providerUrl, title, iframe, image, favicon } = _a, attrs = __rest(_a, ["lazy", "url", "html", "providerName", "providerUrl", "title", "iframe", "image", "favicon"]);
+    if (typeof iframe !== 'boolean')
+        iframe = iframe === 'true';
+    if (html === 'false')
+        html = undefined;
     if (iframe) {
         return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("iframe", Object.assign({}, attrs, { src: url, style: { border: 'none', display: 'flex', margin: 'auto' } }));
     }
-    if (!provider)
-        provider = new URL(url).hostname
+    if (!providerUrl && url)
+        providerUrl = new URL(url).hostname
             .split(/(?:www)?\./)
             .filter(i => i)
             .join('.');
+    if (!providerName)
+        providerName = providerUrl;
     const classes = ['embed', image ? 'embed_hasImg' : ''];
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: classes.join(' ') }, html ? (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "embed-media", dangerouslySetInnerHTML: { __html: html } })) : (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("a", { className: "embed-link", href: url, rel: "noopener noreferrer", target: "_blank" },
         !image || external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("img", { alt: title, className: "embed-img", loading: lazy ? 'lazy' : undefined, src: image }),
-        title ? (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "embed-body" },
-            !favicon || external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Favicon, { alt: provider, src: favicon }),
-            provider && (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("small", { className: "embed-provider" }, provider.search(/^@{1}/) < 0 ? (provider) : (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("code", { style: { fontFamily: 'var(--md-code-font, monospace)' } }, url)))),
+        title && title !== '@embed' ? (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "embed-body" },
+            !favicon || external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Favicon, { alt: providerName, src: favicon }),
+            providerUrl && (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("small", { className: "embed-provider" }, providerUrl.search(/^@{1}/) < 0 ? (providerName) : (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("code", { style: { fontFamily: 'var(--md-code-font, monospace)' } }, url)))),
             external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "embed-title" }, title))) : (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "embed-body" },
             external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("b", null, "View"),
             ": ",
@@ -50990,15 +50996,16 @@ const Image = (Props) => {
         setLightbox(!lightbox);
     };
     if (caption) {
-        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, 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' }),
+                    external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("figcaption", null, 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("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("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' })))));
 };
 /* harmony default export */ const components_Image = (Image);
 
@@ -59518,12 +59525,12 @@ var NodeTypes;
 (function (NodeTypes) {
     NodeTypes["callout"] = "rdme-callout";
     NodeTypes["codeTabs"] = "code-tabs";
-    NodeTypes["embed"] = "embed";
+    NodeTypes["embedBlock"] = "embed-block";
     NodeTypes["emoji"] = "gemoji";
     NodeTypes["glossary"] = "readme-glossary-item";
     NodeTypes["htmlBlock"] = "html-block";
     NodeTypes["i"] = "i";
-    NodeTypes["image"] = "image";
+    NodeTypes["imageBlock"] = "image-block";
     NodeTypes["reusableContent"] = "reusable-content";
     NodeTypes["tutorialTile"] = "tutorial-tile";
     NodeTypes["variable"] = "readme-variable";
@@ -59614,25 +59621,59 @@ const codeTabsTransformer = () => tree => {
 
 const embedTransformer = () => {
     return (tree) => {
-        lib_visit(tree, 'link', (node, _, parent) => {
-            var _a, _b;
-            if (parent.type !== 'paragraph' || parent.children.length > 1 || node.title !== '@embed')
+        lib_visit(tree, 'paragraph', (node, i, parent) => {
+            var _a, _b, _c;
+            const [{ url, title, children = [] }] = node.children;
+            if (title !== '@embed')
                 return;
             const newNode = {
-                type: NodeTypes.embed,
+                type: NodeTypes.embedBlock,
+                label: (_a = children[0]) === null || _a === void 0 ? void 0 : _a.value,
+                title,
+                url,
                 data: {
-                    hProperties: { title: (_b = (_a = node.children[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : node.url, url: node.url, provider: node.url },
-                    hName: 'Embed',
+                    hProperties: {
+                        url,
+                        title: (_c = (_b = children[0]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : title,
+                    },
+                    hName: 'embed',
                 },
                 position: node.position,
-                children: [],
             };
-            parent = newNode;
+            parent.children.splice(i, 1, newNode);
         });
     };
 };
 /* harmony default export */ const transform_embeds = (embedTransformer);
 
+;// CONCATENATED MODULE: ./processor/transform/images.ts
+
+
+const imageTransformer = () => {
+    return (tree) => {
+        lib_visit(tree, 'paragraph', (node, i, parent) => {
+            var _a;
+            // check if inline or already transformed
+            if (parent.type !== 'root' || ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 1 || node.children[0].type !== 'image')
+                return;
+            const [{ alt, url, title }] = node.children;
+            const newNode = {
+                type: NodeTypes.imageBlock,
+                alt,
+                title,
+                url,
+                data: {
+                    hName: 'img',
+                    hProperties: Object.assign(Object.assign(Object.assign({}, (alt && { alt })), { src: url }), (title && { title })),
+                },
+                position: node.position,
+            };
+            parent.children.splice(i, 1, newNode);
+        });
+    };
+};
+/* harmony default export */ const transform_images = (imageTransformer);
+
 ;// CONCATENATED MODULE: ./node_modules/gemoji/index.js
 /**
  * @typedef Gemoji
@@ -76632,33 +76673,54 @@ const injectComponents = (opts) => () => tree => {
 };
 /* harmony default export */ const inject_components = (injectComponents);
 
+;// CONCATENATED MODULE: ./processor/utils.ts
+const formatHProps = (node) => {
+    const hProps = getHProps(node);
+    const hPropKeys = getHPropKeys(node);
+    return hPropKeys.map(key => `${key}="${hProps[key]}"`).join(' ');
+};
+const getHProps = (node) => {
+    var _a;
+    const hProps = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties) || {};
+    return hProps;
+};
+const getHPropKeys = (node) => {
+    const hProps = getHProps(node);
+    return Object.keys(hProps) || [];
+};
+const getAttrs = (jsx) => jsx.attributes.reduce((memo, attr) => {
+    if ('name' in attr) {
+        memo[attr.name] = attr.value;
+    }
+    return memo;
+}, {});
+const isMDXElement = (node) => {
+    return ['mdxJsxFlowElement', 'mdxJsxTextElement'].includes(node.type);
+};
+
 ;// CONCATENATED MODULE: ./processor/transform/readme-components.ts
 
 
+
 const readme_components_types = {
     Callout: NodeTypes['callout'],
     Code: 'code',
     CodeTabs: NodeTypes['codeTabs'],
+    EmbedBlock: NodeTypes['embed-block'],
     Glossary: NodeTypes['glossary'],
-    Image: 'image',
+    ImageBlock: NodeTypes['image-block'],
     Table: 'table',
     Variable: NodeTypes['variable'],
     td: 'tableCell',
     tr: 'tableRow',
     TutorialTile: NodeTypes.tutorialTile,
 };
-const attributes = (jsx) => jsx.attributes.reduce((memo, attr) => {
-    if ('name' in attr) {
-        memo[attr.name] = attr.value;
-    }
-    return memo;
-}, {});
 const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
     if (node.name in components)
         return;
     if (node.name === 'Code') {
         const { position } = node;
-        const { value, lang = null, meta = null } = attributes(node);
+        const { value, lang = null, meta = null } = getAttrs(node);
         const mdNode = {
             lang,
             meta,
@@ -76673,19 +76735,24 @@ const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
     }
     else if (node.name === 'Image') {
         const { position } = node;
-        const { alt = '', url, title = null } = attributes(node);
+        const { alt = '', url, title = null } = getAttrs(node);
+        const attrs = getAttrs(node);
         const mdNode = {
             alt,
             position,
             title,
-            type: 'image',
-            url,
+            type: NodeTypes.imageBlock,
+            url: url || attrs.src,
+            data: {
+                hName: 'img',
+                hProperties: attrs,
+            },
         };
         parent.children[index] = mdNode;
     }
     else if (node.name === 'Table') {
         const { children, position } = node;
-        const { align = [...new Array(node.children.length)].map(() => null) } = attributes(node);
+        const { align = [...new Array(node.children.length)].map(() => null) } = getAttrs(node);
         const mdNode = {
             align,
             type: 'table',
@@ -76696,7 +76763,7 @@ const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
         parent.children[index] = mdNode;
     }
     else if (node.name === 'Callout') {
-        const { icon, empty = false } = attributes(node);
+        const { icon, empty = false } = getAttrs(node);
         // @ts-ignore
         const mdNode = {
             children: node.children,
@@ -76709,23 +76776,31 @@ const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
         };
         parent.children[index] = mdNode;
     }
+    else if (node.name === 'Embed') {
+        const hProperties = getAttrs(node);
+        const mdNode = {
+            type: NodeTypes.embedBlock,
+            title: hProperties.title,
+            data: {
+                hName: 'embed',
+                hProperties,
+            },
+            position: node.position,
+        };
+        parent.children[index] = mdNode;
+    }
     else if (node.name in readme_components_types) {
-        const hProperties = attributes(node);
-        // @ts-ignore
+        const hProperties = getAttrs(node);
         const mdNode = Object.assign(Object.assign({ children: node.children, type: readme_components_types[node.name] }, (['tr', 'td'].includes(node.name)
             ? {}
             : {
-                data: Object.assign({ hName: node.name }, (Object.keys(hProperties).length ? { hProperties } : {})),
+                data: Object.assign({ hName: node.name }, (hProperties !== null && hProperties !== void 0 ? hProperties : hProperties)),
             })), { position: node.position });
         parent.children[index] = mdNode;
     }
 };
 const readmeComponents = (opts) => () => tree => {
-    // @TODO: unist-util-visit does a really good job with types, **but** it
-    // can't seem to infer allowing multiple types passed to the visitor
-    // function. Otherwise, I would have these two function calls be one?
-    lib_visit(tree, 'mdxJsxFlowElement', coerceJsxToMd(opts));
-    lib_visit(tree, 'mdxJsxTextElement', coerceJsxToMd(opts));
+    lib_visit(tree, isMDXElement, coerceJsxToMd(opts));
     lib_visit(tree, 'paragraph', (node, index, parent) => {
         // @ts-ignore
         if (parent.type !== 'tableRow')
@@ -76771,7 +76846,8 @@ const readmeToMdx = () => tree => {
 
 
 
-/* harmony default export */ const transform = ([callouts, code_tabs, transform_embeds, gemoji_]);
+
+/* harmony default export */ const transform = ([callouts, code_tabs, transform_embeds, transform_images, gemoji_]);
 
 ;// CONCATENATED MODULE: ./lib/ast-processor.ts
 
@@ -82888,16 +82964,15 @@ const codeTabs = (node, _, state, info) => {
 /* harmony default export */ const compile_code_tabs = (codeTabs);
 
 ;// CONCATENATED MODULE: ./processor/compile/embed.ts
+
 const embed_embed = (node) => {
-    var _a, _b;
-    const { image, favicon, iframe, title, url } = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties) || {};
-    const complexEmbed = Boolean(image) || Boolean(favicon) || iframe;
-    if (complexEmbed) {
-        const attributes = Object.keys((_b = node.data) === null || _b === void 0 ? void 0 : _b.hProperties).map(key => { var _a; return `${key}="${(_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties[key]}"`; }).join(' ');
-        // TODO: make this a util
+    const attributes = formatHProps(node);
+    const props = getHProps(node);
+    if (node.title !== '@embed') {
         return `<Embed ${attributes} />`;
     }
-    return `[${title}](${url} "@embed")'`;
+    ;
+    return `[${node.label || ''}](${props.url} "${node.title}")`;
 };
 /* harmony default export */ const compile_embed = (embed_embed);
 
@@ -82915,17 +82990,20 @@ const htmlBlock = (node) => {
 /* harmony default export */ const html_block = (htmlBlock);
 
 ;// CONCATENATED MODULE: ./processor/compile/image.ts
+
 const compile_image_image = (node) => {
-    var _a, _b;
-    const { align, className, width } = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties) || {};
-    const complexImage = Boolean(width) || Boolean(className) || Boolean(align);
-    if (complexImage) {
-        const attributes = Object.keys((_b = node.data) === null || _b === void 0 ? void 0 : _b.hProperties)
-            .map(key => { var _a; return `${key}="${(_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties[key]}"`; })
-            .join(' ');
-        return `<Image ${attributes} />`;
+    var _a;
+    const attributes = formatHProps(node);
+    const hProps = getHProps(node);
+    const hPropKeys = getHPropKeys(node);
+    const ImageBlock = `<Image ${attributes} />`;
+    const MDImage = `![${(_a = node.alt) !== null && _a !== void 0 ? _a : ''}](${hProps.src ? hProps.src : node.url}${node.title ? ` "${node.title}")` : ')'}`;
+    if (Boolean(attributes)) {
+        if (hPropKeys.includes('src') && (hPropKeys.includes('width') || hPropKeys.includes('border') || hPropKeys.includes('align'))) {
+            return ImageBlock;
+        }
     }
-    return `![${node.alt}](${node.url}${node.title ? ` "${node.title}")` : ')'}`;
+    return MDImage;
 };
 /* harmony default export */ const compile_image = (compile_image_image);
 
@@ -94101,9 +94179,9 @@ function compilers() {
         [NodeTypes.callout]: compile_callout,
         [NodeTypes.emoji]: compile_gemoji,
         [NodeTypes.codeTabs]: compile_code_tabs,
-        [NodeTypes.embed]: compile_embed,
+        [NodeTypes.embedBlock]: compile_embed,
         [NodeTypes.htmlBlock]: html_block,
-        [NodeTypes.image]: compile_image,
+        [NodeTypes.imageBlock]: compile_image,
         [NodeTypes.variable]: compile_compatibility,
         [NodeTypes.glossary]: compile_compatibility,
         [NodeTypes.reusableContent]: compile_compatibility,
@@ -94257,7 +94335,7 @@ const makeUseMDXComponents = (more = {}) => {
         map[`h${index + 1}`] = components_Heading((index + 1));
         return map;
     }, {});
-    const components = Object.assign(Object.assign(Object.assign(Object.assign({}, components_namespaceObject), { Variable: (variable_default()), code: components_Code, 'code-tabs': components_CodeTabs, 'html-block': components_HTMLBlock, embed: components_Embed, img: components_Image, table: components_Table }), headings), more);
+    const components = Object.assign(Object.assign(Object.assign(Object.assign({}, components_namespaceObject), { Variable: (variable_default()), code: components_Code, embed: components_Embed, img: components_Image, table: components_Table }), headings), more);
     return () => components;
 };
 const run_run = async (string, _opts = {}) => {

package/dist/main.node.js

@@ -47412,21 +47412,27 @@ const Favicon = (_a) => {
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("img", Object.assign({}, attr, { alt: alt, height: "14", src: src, width: "14" })));
 };
 const Embed = (_a) => {
-    var { lazy = true, url, provider, title, html, iframe, image, favicon } = _a, attrs = __rest(_a, ["lazy", "url", "provider", "title", "html", "iframe", "image", "favicon"]);
+    var { lazy = true, url, html, providerName, providerUrl, title, iframe, image, favicon } = _a, attrs = __rest(_a, ["lazy", "url", "html", "providerName", "providerUrl", "title", "iframe", "image", "favicon"]);
+    if (typeof iframe !== 'boolean')
+        iframe = iframe === 'true';
+    if (html === 'false')
+        html = undefined;
     if (iframe) {
         return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("iframe", Object.assign({}, attrs, { src: url, style: { border: 'none', display: 'flex', margin: 'auto' } }));
     }
-    if (!provider)
-        provider = new URL(url).hostname
+    if (!providerUrl && url)
+        providerUrl = new URL(url).hostname
             .split(/(?:www)?\./)
             .filter(i => i)
             .join('.');
+    if (!providerName)
+        providerName = providerUrl;
     const classes = ['embed', image ? 'embed_hasImg' : ''];
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: classes.join(' ') }, html ? (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "embed-media", dangerouslySetInnerHTML: { __html: html } })) : (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("a", { className: "embed-link", href: url, rel: "noopener noreferrer", target: "_blank" },
         !image || external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("img", { alt: title, className: "embed-img", loading: lazy ? 'lazy' : undefined, src: image }),
-        title ? (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "embed-body" },
-            !favicon || external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Favicon, { alt: provider, src: favicon }),
-            provider && (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("small", { className: "embed-provider" }, provider.search(/^@{1}/) < 0 ? (provider) : (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("code", { style: { fontFamily: 'var(--md-code-font, monospace)' } }, url)))),
+        title && title !== '@embed' ? (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "embed-body" },
+            !favicon || external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Favicon, { alt: providerName, src: favicon }),
+            providerUrl && (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("small", { className: "embed-provider" }, providerUrl.search(/^@{1}/) < 0 ? (providerName) : (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("code", { style: { fontFamily: 'var(--md-code-font, monospace)' } }, url)))),
             external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "embed-title" }, title))) : (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "embed-body" },
             external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("b", null, "View"),
             ": ",
@@ -52495,15 +52501,16 @@ const Image = (Props) => {
         setLightbox(!lightbox);
     };
     if (caption) {
-        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, 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("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("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' }),
+                    external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("figcaption", null, 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' })))));
 };
 /* harmony default export */ const components_Image = (Image);
 
@@ -60971,12 +60978,12 @@ var NodeTypes;
 (function (NodeTypes) {
     NodeTypes["callout"] = "rdme-callout";
     NodeTypes["codeTabs"] = "code-tabs";
-    NodeTypes["embed"] = "embed";
+    NodeTypes["embedBlock"] = "embed-block";
     NodeTypes["emoji"] = "gemoji";
     NodeTypes["glossary"] = "readme-glossary-item";
     NodeTypes["htmlBlock"] = "html-block";
     NodeTypes["i"] = "i";
-    NodeTypes["image"] = "image";
+    NodeTypes["imageBlock"] = "image-block";
     NodeTypes["reusableContent"] = "reusable-content";
     NodeTypes["tutorialTile"] = "tutorial-tile";
     NodeTypes["variable"] = "readme-variable";
@@ -61067,25 +61074,59 @@ const codeTabsTransformer = () => tree => {
 
 const embedTransformer = () => {
     return (tree) => {
-        lib_visit(tree, 'link', (node, _, parent) => {
-            var _a, _b;
-            if (parent.type !== 'paragraph' || parent.children.length > 1 || node.title !== '@embed')
+        lib_visit(tree, 'paragraph', (node, i, parent) => {
+            var _a, _b, _c;
+            const [{ url, title, children = [] }] = node.children;
+            if (title !== '@embed')
                 return;
             const newNode = {
-                type: NodeTypes.embed,
+                type: NodeTypes.embedBlock,
+                label: (_a = children[0]) === null || _a === void 0 ? void 0 : _a.value,
+                title,
+                url,
                 data: {
-                    hProperties: { title: (_b = (_a = node.children[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : node.url, url: node.url, provider: node.url },
-                    hName: 'Embed',
+                    hProperties: {
+                        url,
+                        title: (_c = (_b = children[0]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : title,
+                    },
+                    hName: 'embed',
                 },
                 position: node.position,
-                children: [],
             };
-            parent = newNode;
+            parent.children.splice(i, 1, newNode);
         });
     };
 };
 /* harmony default export */ const transform_embeds = (embedTransformer);
 
+;// CONCATENATED MODULE: ./processor/transform/images.ts
+
+
+const imageTransformer = () => {
+    return (tree) => {
+        lib_visit(tree, 'paragraph', (node, i, parent) => {
+            var _a;
+            // check if inline or already transformed
+            if (parent.type !== 'root' || ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 1 || node.children[0].type !== 'image')
+                return;
+            const [{ alt, url, title }] = node.children;
+            const newNode = {
+                type: NodeTypes.imageBlock,
+                alt,
+                title,
+                url,
+                data: {
+                    hName: 'img',
+                    hProperties: Object.assign(Object.assign(Object.assign({}, (alt && { alt })), { src: url }), (title && { title })),
+                },
+                position: node.position,
+            };
+            parent.children.splice(i, 1, newNode);
+        });
+    };
+};
+/* harmony default export */ const transform_images = (imageTransformer);
+
 ;// CONCATENATED MODULE: ./node_modules/gemoji/index.js
 /**
  * @typedef Gemoji
@@ -78085,33 +78126,54 @@ const injectComponents = (opts) => () => tree => {
 };
 /* harmony default export */ const inject_components = (injectComponents);
 
+;// CONCATENATED MODULE: ./processor/utils.ts
+const formatHProps = (node) => {
+    const hProps = getHProps(node);
+    const hPropKeys = getHPropKeys(node);
+    return hPropKeys.map(key => `${key}="${hProps[key]}"`).join(' ');
+};
+const getHProps = (node) => {
+    var _a;
+    const hProps = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties) || {};
+    return hProps;
+};
+const getHPropKeys = (node) => {
+    const hProps = getHProps(node);
+    return Object.keys(hProps) || [];
+};
+const getAttrs = (jsx) => jsx.attributes.reduce((memo, attr) => {
+    if ('name' in attr) {
+        memo[attr.name] = attr.value;
+    }
+    return memo;
+}, {});
+const isMDXElement = (node) => {
+    return ['mdxJsxFlowElement', 'mdxJsxTextElement'].includes(node.type);
+};
+
 ;// CONCATENATED MODULE: ./processor/transform/readme-components.ts
 
 
+
 const readme_components_types = {
     Callout: NodeTypes['callout'],
     Code: 'code',
     CodeTabs: NodeTypes['codeTabs'],
+    EmbedBlock: NodeTypes['embed-block'],
     Glossary: NodeTypes['glossary'],
-    Image: 'image',
+    ImageBlock: NodeTypes['image-block'],
     Table: 'table',
     Variable: NodeTypes['variable'],
     td: 'tableCell',
     tr: 'tableRow',
     TutorialTile: NodeTypes.tutorialTile,
 };
-const attributes = (jsx) => jsx.attributes.reduce((memo, attr) => {
-    if ('name' in attr) {
-        memo[attr.name] = attr.value;
-    }
-    return memo;
-}, {});
 const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
     if (node.name in components)
         return;
     if (node.name === 'Code') {
         const { position } = node;
-        const { value, lang = null, meta = null } = attributes(node);
+        const { value, lang = null, meta = null } = getAttrs(node);
         const mdNode = {
             lang,
             meta,
@@ -78126,19 +78188,24 @@ const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
     }
     else if (node.name === 'Image') {
         const { position } = node;
-        const { alt = '', url, title = null } = attributes(node);
+        const { alt = '', url, title = null } = getAttrs(node);
+        const attrs = getAttrs(node);
         const mdNode = {
             alt,
             position,
             title,
-            type: 'image',
-            url,
+            type: NodeTypes.imageBlock,
+            url: url || attrs.src,
+            data: {
+                hName: 'img',
+                hProperties: attrs,
+            },
         };
         parent.children[index] = mdNode;
     }
     else if (node.name === 'Table') {
         const { children, position } = node;
-        const { align = [...new Array(node.children.length)].map(() => null) } = attributes(node);
+        const { align = [...new Array(node.children.length)].map(() => null) } = getAttrs(node);
         const mdNode = {
             align,
             type: 'table',
@@ -78149,7 +78216,7 @@ const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
         parent.children[index] = mdNode;
     }
     else if (node.name === 'Callout') {
-        const { icon, empty = false } = attributes(node);
+        const { icon, empty = false } = getAttrs(node);
         // @ts-ignore
         const mdNode = {
             children: node.children,
@@ -78162,23 +78229,31 @@ const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
         };
         parent.children[index] = mdNode;
     }
+    else if (node.name === 'Embed') {
+        const hProperties = getAttrs(node);
+        const mdNode = {
+            type: NodeTypes.embedBlock,
+            title: hProperties.title,
+            data: {
+                hName: 'embed',
+                hProperties,
+            },
+            position: node.position,
+        };
+        parent.children[index] = mdNode;
+    }
     else if (node.name in readme_components_types) {
-        const hProperties = attributes(node);
-        // @ts-ignore
+        const hProperties = getAttrs(node);
         const mdNode = Object.assign(Object.assign({ children: node.children, type: readme_components_types[node.name] }, (['tr', 'td'].includes(node.name)
             ? {}
             : {
-                data: Object.assign({ hName: node.name }, (Object.keys(hProperties).length ? { hProperties } : {})),
+                data: Object.assign({ hName: node.name }, (hProperties !== null && hProperties !== void 0 ? hProperties : hProperties)),
             })), { position: node.position });
         parent.children[index] = mdNode;
     }
 };
 const readmeComponents = (opts) => () => tree => {
-    // @TODO: unist-util-visit does a really good job with types, **but** it
-    // can't seem to infer allowing multiple types passed to the visitor
-    // function. Otherwise, I would have these two function calls be one?
-    lib_visit(tree, 'mdxJsxFlowElement', coerceJsxToMd(opts));
-    lib_visit(tree, 'mdxJsxTextElement', coerceJsxToMd(opts));
+    lib_visit(tree, isMDXElement, coerceJsxToMd(opts));
     lib_visit(tree, 'paragraph', (node, index, parent) => {
         // @ts-ignore
         if (parent.type !== 'tableRow')
@@ -78224,7 +78299,8 @@ const readmeToMdx = () => tree => {
 
 
 
-/* harmony default export */ const transform = ([callouts, code_tabs, transform_embeds, gemoji_]);
+
+/* harmony default export */ const transform = ([callouts, code_tabs, transform_embeds, transform_images, gemoji_]);
 
 ;// CONCATENATED MODULE: ./lib/ast-processor.ts
 
@@ -84341,16 +84417,15 @@ const codeTabs = (node, _, state, info) => {
 /* harmony default export */ const compile_code_tabs = (codeTabs);
 
 ;// CONCATENATED MODULE: ./processor/compile/embed.ts
+
 const embed_embed = (node) => {
-    var _a, _b;
-    const { image, favicon, iframe, title, url } = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties) || {};
-    const complexEmbed = Boolean(image) || Boolean(favicon) || iframe;
-    if (complexEmbed) {
-        const attributes = Object.keys((_b = node.data) === null || _b === void 0 ? void 0 : _b.hProperties).map(key => { var _a; return `${key}="${(_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties[key]}"`; }).join(' ');
-        // TODO: make this a util
+    const attributes = formatHProps(node);
+    const props = getHProps(node);
+    if (node.title !== '@embed') {
         return `<Embed ${attributes} />`;
     }
-    return `[${title}](${url} "@embed")'`;
+    ;
+    return `[${node.label || ''}](${props.url} "${node.title}")`;
 };
 /* harmony default export */ const compile_embed = (embed_embed);
 
@@ -84368,17 +84443,20 @@ const htmlBlock = (node) => {
 /* harmony default export */ const html_block = (htmlBlock);
 
 ;// CONCATENATED MODULE: ./processor/compile/image.ts
+
 const compile_image_image = (node) => {
-    var _a, _b;
-    const { align, className, width } = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties) || {};
-    const complexImage = Boolean(width) || Boolean(className) || Boolean(align);
-    if (complexImage) {
-        const attributes = Object.keys((_b = node.data) === null || _b === void 0 ? void 0 : _b.hProperties)
-            .map(key => { var _a; return `${key}="${(_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties[key]}"`; })
-            .join(' ');
-        return `<Image ${attributes} />`;
-    }
-    return `![${node.alt}](${node.url}${node.title ? ` "${node.title}")` : ')'}`;
+    var _a;
+    const attributes = formatHProps(node);
+    const hProps = getHProps(node);
+    const hPropKeys = getHPropKeys(node);
+    const ImageBlock = `<Image ${attributes} />`;
+    const MDImage = `![${(_a = node.alt) !== null && _a !== void 0 ? _a : ''}](${hProps.src ? hProps.src : node.url}${node.title ? ` "${node.title}")` : ')'}`;
+    if (Boolean(attributes)) {
+        if (hPropKeys.includes('src') && (hPropKeys.includes('width') || hPropKeys.includes('border') || hPropKeys.includes('align'))) {
+            return ImageBlock;
+        }
+    }
+    return MDImage;
 };
 /* harmony default export */ const compile_image = (compile_image_image);
 
@@ -95554,9 +95632,9 @@ function compilers() {
         [NodeTypes.callout]: compile_callout,
         [NodeTypes.emoji]: compile_gemoji,
         [NodeTypes.codeTabs]: compile_code_tabs,
-        [NodeTypes.embed]: compile_embed,
+        [NodeTypes.embedBlock]: compile_embed,
         [NodeTypes.htmlBlock]: html_block,
-        [NodeTypes.image]: compile_image,
+        [NodeTypes.imageBlock]: compile_image,
         [NodeTypes.variable]: compile_compatibility,
         [NodeTypes.glossary]: compile_compatibility,
         [NodeTypes.reusableContent]: compile_compatibility,
@@ -95710,7 +95788,7 @@ const makeUseMDXComponents = (more = {}) => {
         map[`h${index + 1}`] = components_Heading((index + 1));
         return map;
     }, {});
-    const components = Object.assign(Object.assign(Object.assign(Object.assign({}, components_namespaceObject), { Variable: (dist_default()), code: components_Code, 'code-tabs': components_CodeTabs, 'html-block': components_HTMLBlock, embed: components_Embed, img: components_Image, table: components_Table }), headings), more);
+    const components = Object.assign(Object.assign(Object.assign(Object.assign({}, components_namespaceObject), { Variable: (dist_default()), code: components_Code, embed: components_Embed, img: components_Image, table: components_Table }), headings), more);
     return () => components;
 };
 const run_run = async (string, _opts = {}) => {

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

@@ -1,3 +1,3 @@
-import type { Embed } from "types";
-declare const embed: (node: Embed) => string;
+import type { EmbedBlock } from "types";
+declare const embed: (node: EmbedBlock) => string;
 export default embed;

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

@@ -1,3 +1,3 @@
-import type { Image } from 'mdast';
-declare const image: (node: Image) => string;
+import type { ImageBlock } from 'types';
+declare const image: (node: ImageBlock) => string;
 export default image;

package/dist/processor/transform/embeds.d.ts

@@ -1,2 +1,3 @@
-declare const embedTransformer: () => (tree: any) => void;
+import { Node } from 'mdast';
+declare const embedTransformer: () => (tree: Node) => void;
 export default embedTransformer;

package/dist/processor/transform/images.d.ts

@@ -0,0 +1,3 @@
+import { Node } from 'mdast';
+declare const imageTransformer: () => (tree: Node) => void;
+export default imageTransformer;

package/dist/processor/utils.d.ts

@@ -0,0 +1,7 @@
+import { Node } from 'mdast';
+import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx';
+export declare const formatHProps: <T>(node: Node) => T;
+export declare const getHProps: <T>(node: Node) => T;
+export declare const getHPropKeys: <T>(node: Node) => string[] | T;
+export declare const getAttrs: <T>(jsx: MdxJsxFlowElement | MdxJsxTextElement) => T;
+export declare const isMDXElement: (node: Node) => node is MdxJsxFlowElement | MdxJsxTextElement;

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