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

package/components/Image/index.tsx

@@ -11,10 +11,10 @@ interface ImageProps {
   title?: string;
   width?: string;
   lazy?: boolean;
+  children?: [React.ReactElement];
 }
 
 const Image = (Props: ImageProps) => {
-  const [lightbox, setLightbox] = React.useState(false);
   const {
     align = '',
     alt = '',
@@ -26,8 +26,11 @@ const Image = (Props: ImageProps) => {
     title = '',
     width = 'auto',
     lazy = false,
+    children,
   } = Props;
 
+  const [lightbox, setLightbox] = React.useState(false);
+
   if (className === 'emoji') {
     return <img src={src} width={width} height={height} title={title} alt={alt} loading={lazy ? 'lazy' : 'eager'} />;
   }
@@ -76,7 +79,7 @@ const Image = (Props: ImageProps) => {
               alt={alt}
               loading={lazy ? 'lazy' : 'eager'}
             />
-            <figcaption>{caption}</figcaption>
+            <figcaption>{children || caption}</figcaption>
           </figure>
         </span>
       </span>

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

@@ -10,6 +10,7 @@ interface ImageProps {
     title?: string;
     width?: string;
     lazy?: boolean;
+    children?: [React.ReactElement];
 }
 declare const Image: (Props: ImageProps) => React.JSX.Element;
 export default Image;

package/dist/main.js

@@ -14444,8 +14444,8 @@ 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 [lightbox, setLightbox] = external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState(false);
-    const { align = '', alt = '', border = false, caption, className = '', height = 'auto', src, title = '', width = 'auto', lazy = false, } = Props;
     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' });
     }
@@ -14476,7 +14476,7 @@ const Image = (Props) => {
             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)))));
+                    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 },
@@ -48550,31 +48550,168 @@ const embedTransformer = () => {
 };
 /* harmony default export */ const transform_embeds = (embedTransformer);
 
+;// CONCATENATED MODULE: ./processor/utils.ts
+/**
+ * Formats the hProperties of a node as a string, so they can be compiled back into JSX/MDX.
+ * This currently sets all the values to a string since we process/compile the MDX on the fly
+ * through the editor, and it'll throw errors over malformed JSX. TODO: fix this.
+ *
+ * @template T
+ * @param {Node} node
+ * @returns {string} formatted hProperties as JSX attributes
+ */
+const formatHProps = (node) => {
+    const hProps = getHProps(node);
+    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.
+ *
+ * @template T
+ * @param {Node} node
+ * @returns {T} hProperties
+ */
+const getHProps = (node) => {
+    var _a;
+    const hProps = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties) || {};
+    return hProps;
+};
+/**
+ * Returns array of hProperty keys.
+ *
+ * @template T
+ * @param {Node} node
+ * @returns {Array} array of hProperty keys
+ */
+const getHPropKeys = (node) => {
+    const hProps = getHProps(node);
+    return Object.keys(hProps) || [];
+};
+/**
+ * Gets the attributes of an MDX element and returns them as an object of hProperties.
+ *
+ * @template T
+ * @param {(MdxJsxFlowElement | MdxJsxTextElement)} jsx
+ * @returns {T} object of hProperties
+ */
+const getAttrs = (jsx) => jsx.attributes.reduce((memo, attr) => {
+    if ('name' in attr) {
+        memo[attr.name] = attr.value;
+    }
+    return memo;
+}, {});
+/**
+ * Gets the children of an MDX element and returns them as an array of Text nodes.
+ * Currently only being used by the HTML Block component, which only expects a single text node.
+ *
+ * @template T
+ * @param {(MdxJsxFlowElement | MdxJsxTextElement)} jsx
+ * @returns {Array} array of child text nodes
+ */
+const getChildren = (jsx) => jsx.children.reduce((memo, child, i) => {
+    memo[i] = {
+        type: 'text',
+        value: child.value,
+        position: child.position,
+    };
+    return memo;
+}, []);
+/**
+ * Tests if a node is an MDX element.
+ * TODO: Make this more extensible to all types of nodes. isElement(node, 'type' or ['type1', 'type2']), say
+ *
+ * @param {Node} node
+ * @returns {(node is MdxJsxFlowElement | MdxJsxTextElement)}
+ */
+const isMDXElement = (node) => {
+    return ['mdxJsxFlowElement', 'mdxJsxTextElement'].includes(node.type);
+};
+/**
+ * Takes an HTML string and formats it for display in the editor. Removes leading/trailing newlines
+ * and unindents the HTML.
+ *
+ * @param {string} html
+ * @returns {string} formatted HTML
+ */
+const formatHTML = (html) => {
+    // Remove leading/trailing backticks if present, since they're used to keep the HTML 
+    // from being parsed prematurely
+    if (html.startsWith('`') && html.endsWith('`')) {
+        html = html.slice(1, -1);
+    }
+    // Removes the leading/trailing newlines
+    const cleaned = html.replace(/^\s*\n|\n\s*$/g, '');
+    // // Get the number of spaces in the first line to determine the tab size
+    // const tab = cleaned.match(/^\s*/)[0].length;
+    // // Remove the first indentation level from each line 
+    // const tabRegex = new RegExp(`^\\s{${tab}}`, 'gm');
+    // const unindented = cleaned.replace(tabRegex, '');
+    return cleaned;
+};
+/**
+ * Reformat HTML for the markdown/mdx by adding an indentation to each line. This assures that the
+ * HTML is indentend properly within the HTMLBlock component when rendered in the markdown/mdx.
+ *
+ * @param {string} html
+ * @param {number} [indent=2]
+ * @returns {string} re-formatted HTML
+ */
+const reformatHTML = (html, indent = 2) => {
+    // Remove leading/trailing newlines
+    const cleaned = html.replace(/^\s*\n|\n\s*$/g, '');
+    // // Create a tab/indent with the specified number of spaces
+    // const tab = ' '.repeat(indent);
+    // // Indent each line of the HTML (converts to an array, indents each line, then joins back)
+    // const indented = cleaned.split('\n').map((line: string) => `${tab}${line}`).join('\n');
+    return cleaned;
+};
+
 ;// CONCATENATED MODULE: ./processor/transform/images.ts
 
 
-const imageTransformer = () => {
-    return (tree) => {
-        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);
-        });
-    };
+
+
+const imageTransformer = () => (tree) => {
+    visit(tree, 'paragraph', (node, i, parent) => {
+        var _a;
+        // check if inline 
+        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,
+            children: [],
+            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);
+    });
+    const isImage = (node) => node.name === 'Image';
+    visit(tree, isImage, (node) => {
+        const attrs = getAttrs(node);
+        if (attrs.caption) {
+            node.children = lib_mdast(attrs.caption).children;
+        }
+    });
+    return tree;
 };
 /* harmony default export */ const transform_images = (imageTransformer);
 
@@ -65564,6 +65701,7 @@ const gemojiTransformer = () => (tree) => {
 
 ;// CONCATENATED MODULE: ./processor/transform/inject-components.ts
 
+
 const inject = ({ components } = {}) => (node, index, parent) => {
     if (!(node.name in components))
         return;
@@ -65571,140 +65709,23 @@ const inject = ({ components } = {}) => (node, index, parent) => {
     parent.children.splice(index, children.length, ...children);
 };
 const injectComponents = (opts) => () => tree => {
-    visit(tree, 'mdxJsxFlowElement', inject(opts));
-    visit(tree, 'mdxJsxTextElement', inject(opts));
+    visit(tree, isMDXElement, inject(opts));
     return tree;
 };
 /* harmony default export */ const inject_components = (injectComponents);
 
-;// CONCATENATED MODULE: ./processor/utils.ts
-/**
- * Formats the hProperties of a node as a string, so they can be compiled back into JSX/MDX.
- * This currently sets all the values to a string since we process/compile the MDX on the fly
- * through the editor, and it'll throw errors over malformed JSX. TODO: fix this.
- *
- * @template T
- * @param {Node} node
- * @returns {string} formatted hProperties as JSX attributes
- */
-const formatHProps = (node) => {
-    const hProps = getHProps(node);
-    const hPropKeys = getHPropKeys(node);
-    return hPropKeys.map(key => `${key}="${hProps[key]}"`).join(' ');
-};
-/**
- * Returns the hProperties of a node.
- *
- * @template T
- * @param {Node} node
- * @returns {T} hProperties
- */
-const getHProps = (node) => {
-    var _a;
-    const hProps = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties) || {};
-    return hProps;
-};
-/**
- * Returns array of hProperty keys.
- *
- * @template T
- * @param {Node} node
- * @returns {Array} array of hProperty keys
- */
-const getHPropKeys = (node) => {
-    const hProps = getHProps(node);
-    return Object.keys(hProps) || [];
-};
-/**
- * Gets the attributes of an MDX element and returns them as an object of hProperties.
- *
- * @template T
- * @param {(MdxJsxFlowElement | MdxJsxTextElement)} jsx
- * @returns {T} object of hProperties
- */
-const getAttrs = (jsx) => jsx.attributes.reduce((memo, attr) => {
-    if ('name' in attr) {
-        memo[attr.name] = attr.value;
-    }
-    return memo;
-}, {});
-/**
- * Gets the children of an MDX element and returns them as an array of Text nodes.
- * Currently only being used by the HTML Block component, which only expects a single text node.
- *
- * @template T
- * @param {(MdxJsxFlowElement | MdxJsxTextElement)} jsx
- * @returns {Array} array of child text nodes
- */
-const getChildren = (jsx) => jsx.children.reduce((memo, child, i) => {
-    memo[i] = {
-        type: 'text',
-        value: child.value,
-        position: child.position,
-    };
-    return memo;
-}, []);
-/**
- * Tests if a node is an MDX element.
- * TODO: Make this more extensible to all types of nodes. isElement(node, 'type' or ['type1', 'type2']), say
- *
- * @param {Node} node
- * @returns {(node is MdxJsxFlowElement | MdxJsxTextElement)}
- */
-const isMDXElement = (node) => {
-    return ['mdxJsxFlowElement', 'mdxJsxTextElement'].includes(node.type);
-};
-/**
- * Takes an HTML string and formats it for display in the editor. Removes leading/trailing newlines
- * and unindents the HTML.
- *
- * @param {string} html
- * @returns {string} formatted HTML
- */
-const formatHTML = (html) => {
-    // Remove leading/trailing backticks if present, since they're used to keep the HTML 
-    // from being parsed prematurely
-    if (html.startsWith('`') && html.endsWith('`')) {
-        html = html.slice(1, -1);
-    }
-    // Removes the leading/trailing newlines
-    const cleaned = html.replace(/^\s*\n|\n\s*$/g, '');
-    // // Get the number of spaces in the first line to determine the tab size
-    // const tab = cleaned.match(/^\s*/)[0].length;
-    // // Remove the first indentation level from each line 
-    // const tabRegex = new RegExp(`^\\s{${tab}}`, 'gm');
-    // const unindented = cleaned.replace(tabRegex, '');
-    return cleaned;
-};
-/**
- * Reformat HTML for the markdown/mdx by adding an indentation to each line. This assures that the
- * HTML is indentend properly within the HTMLBlock component when rendered in the markdown/mdx.
- *
- * @param {string} html
- * @param {number} [indent=2]
- * @returns {string} re-formatted HTML
- */
-const reformatHTML = (html, indent = 2) => {
-    // Remove leading/trailing newlines
-    const cleaned = html.replace(/^\s*\n|\n\s*$/g, '');
-    // // Create a tab/indent with the specified number of spaces
-    // const tab = ' '.repeat(indent);
-    // // Indent each line of the HTML (converts to an array, indents each line, then joins back)
-    // const indented = cleaned.split('\n').map((line: string) => `${tab}${line}`).join('\n');
-    return cleaned;
-};
-
 ;// 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'],
-    ImageBlock: NodeTypes['image-block'],
+    ImageBlock: NodeTypes.imageBlock,
     HTMLBlock: NodeTypes.htmlBlock,
     Table: 'table',
     Variable: NodeTypes['variable'],
@@ -65737,6 +65758,7 @@ const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
         const mdNode = {
             alt,
             position,
+            children: attrs.caption ? lib_mdast(attrs.caption).children : node.children,
             title,
             type: NodeTypes.imageBlock,
             url: url || attrs.src,
@@ -94376,6 +94398,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;
+};
+
+
 
 
 
@@ -94394,6 +94429,17 @@ 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, alt, title } = _a, image = compatibility_rest(_a, ["align", "width", "src", "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 });
+    return `<Image ${formatProps(attributes)} />`;
+};
 const compatibility = (node) => {
     var _a, _b;
     switch (node.type) {
@@ -94407,6 +94453,11 @@ const compatibility = (node) => {
             return compatibility_html(node);
         case 'escape':
             return `\\${node.value}`;
+        case 'figure':
+            return figureToImageBlock(node);
+        case 'embed':
+            const attributes = formatHProps(node);
+            return `<Embed ${attributes} />`;
         default:
             throw new Error('Unhandled node type!');
     }
@@ -94440,7 +94491,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,8 +14334,8 @@ 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 [lightbox, setLightbox] = external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState(false);
-    const { align = '', alt = '', border = false, caption, className = '', height = 'auto', src, title = '', width = 'auto', lazy = false, } = Props;
     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' });
     }
@@ -14366,7 +14366,7 @@ const Image = (Props) => {
             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)))));
+                    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 },
@@ -50003,31 +50003,168 @@ const embedTransformer = () => {
 };
 /* harmony default export */ const transform_embeds = (embedTransformer);
 
+;// CONCATENATED MODULE: ./processor/utils.ts
+/**
+ * Formats the hProperties of a node as a string, so they can be compiled back into JSX/MDX.
+ * This currently sets all the values to a string since we process/compile the MDX on the fly
+ * through the editor, and it'll throw errors over malformed JSX. TODO: fix this.
+ *
+ * @template T
+ * @param {Node} node
+ * @returns {string} formatted hProperties as JSX attributes
+ */
+const formatHProps = (node) => {
+    const hProps = getHProps(node);
+    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.
+ *
+ * @template T
+ * @param {Node} node
+ * @returns {T} hProperties
+ */
+const getHProps = (node) => {
+    var _a;
+    const hProps = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties) || {};
+    return hProps;
+};
+/**
+ * Returns array of hProperty keys.
+ *
+ * @template T
+ * @param {Node} node
+ * @returns {Array} array of hProperty keys
+ */
+const getHPropKeys = (node) => {
+    const hProps = getHProps(node);
+    return Object.keys(hProps) || [];
+};
+/**
+ * Gets the attributes of an MDX element and returns them as an object of hProperties.
+ *
+ * @template T
+ * @param {(MdxJsxFlowElement | MdxJsxTextElement)} jsx
+ * @returns {T} object of hProperties
+ */
+const getAttrs = (jsx) => jsx.attributes.reduce((memo, attr) => {
+    if ('name' in attr) {
+        memo[attr.name] = attr.value;
+    }
+    return memo;
+}, {});
+/**
+ * Gets the children of an MDX element and returns them as an array of Text nodes.
+ * Currently only being used by the HTML Block component, which only expects a single text node.
+ *
+ * @template T
+ * @param {(MdxJsxFlowElement | MdxJsxTextElement)} jsx
+ * @returns {Array} array of child text nodes
+ */
+const utils_getChildren = (jsx) => jsx.children.reduce((memo, child, i) => {
+    memo[i] = {
+        type: 'text',
+        value: child.value,
+        position: child.position,
+    };
+    return memo;
+}, []);
+/**
+ * Tests if a node is an MDX element.
+ * TODO: Make this more extensible to all types of nodes. isElement(node, 'type' or ['type1', 'type2']), say
+ *
+ * @param {Node} node
+ * @returns {(node is MdxJsxFlowElement | MdxJsxTextElement)}
+ */
+const isMDXElement = (node) => {
+    return ['mdxJsxFlowElement', 'mdxJsxTextElement'].includes(node.type);
+};
+/**
+ * Takes an HTML string and formats it for display in the editor. Removes leading/trailing newlines
+ * and unindents the HTML.
+ *
+ * @param {string} html
+ * @returns {string} formatted HTML
+ */
+const formatHTML = (html) => {
+    // Remove leading/trailing backticks if present, since they're used to keep the HTML 
+    // from being parsed prematurely
+    if (html.startsWith('`') && html.endsWith('`')) {
+        html = html.slice(1, -1);
+    }
+    // Removes the leading/trailing newlines
+    const cleaned = html.replace(/^\s*\n|\n\s*$/g, '');
+    // // Get the number of spaces in the first line to determine the tab size
+    // const tab = cleaned.match(/^\s*/)[0].length;
+    // // Remove the first indentation level from each line 
+    // const tabRegex = new RegExp(`^\\s{${tab}}`, 'gm');
+    // const unindented = cleaned.replace(tabRegex, '');
+    return cleaned;
+};
+/**
+ * Reformat HTML for the markdown/mdx by adding an indentation to each line. This assures that the
+ * HTML is indentend properly within the HTMLBlock component when rendered in the markdown/mdx.
+ *
+ * @param {string} html
+ * @param {number} [indent=2]
+ * @returns {string} re-formatted HTML
+ */
+const reformatHTML = (html, indent = 2) => {
+    // Remove leading/trailing newlines
+    const cleaned = html.replace(/^\s*\n|\n\s*$/g, '');
+    // // Create a tab/indent with the specified number of spaces
+    // const tab = ' '.repeat(indent);
+    // // Indent each line of the HTML (converts to an array, indents each line, then joins back)
+    // const indented = cleaned.split('\n').map((line: string) => `${tab}${line}`).join('\n');
+    return cleaned;
+};
+
 ;// CONCATENATED MODULE: ./processor/transform/images.ts
 
 
-const imageTransformer = () => {
-    return (tree) => {
-        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);
-        });
-    };
+
+
+const imageTransformer = () => (tree) => {
+    visit(tree, 'paragraph', (node, i, parent) => {
+        var _a;
+        // check if inline 
+        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,
+            children: [],
+            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);
+    });
+    const isImage = (node) => node.name === 'Image';
+    visit(tree, isImage, (node) => {
+        const attrs = getAttrs(node);
+        if (attrs.caption) {
+            node.children = lib_mdast(attrs.caption).children;
+        }
+    });
+    return tree;
 };
 /* harmony default export */ const transform_images = (imageTransformer);
 
@@ -67017,6 +67154,7 @@ const gemojiTransformer = () => (tree) => {
 
 ;// CONCATENATED MODULE: ./processor/transform/inject-components.ts
 
+
 const inject = ({ components } = {}) => (node, index, parent) => {
     if (!(node.name in components))
         return;
@@ -67024,140 +67162,23 @@ const inject = ({ components } = {}) => (node, index, parent) => {
     parent.children.splice(index, children.length, ...children);
 };
 const injectComponents = (opts) => () => tree => {
-    visit(tree, 'mdxJsxFlowElement', inject(opts));
-    visit(tree, 'mdxJsxTextElement', inject(opts));
+    visit(tree, isMDXElement, inject(opts));
     return tree;
 };
 /* harmony default export */ const inject_components = (injectComponents);
 
-;// CONCATENATED MODULE: ./processor/utils.ts
-/**
- * Formats the hProperties of a node as a string, so they can be compiled back into JSX/MDX.
- * This currently sets all the values to a string since we process/compile the MDX on the fly
- * through the editor, and it'll throw errors over malformed JSX. TODO: fix this.
- *
- * @template T
- * @param {Node} node
- * @returns {string} formatted hProperties as JSX attributes
- */
-const formatHProps = (node) => {
-    const hProps = getHProps(node);
-    const hPropKeys = getHPropKeys(node);
-    return hPropKeys.map(key => `${key}="${hProps[key]}"`).join(' ');
-};
-/**
- * Returns the hProperties of a node.
- *
- * @template T
- * @param {Node} node
- * @returns {T} hProperties
- */
-const getHProps = (node) => {
-    var _a;
-    const hProps = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties) || {};
-    return hProps;
-};
-/**
- * Returns array of hProperty keys.
- *
- * @template T
- * @param {Node} node
- * @returns {Array} array of hProperty keys
- */
-const getHPropKeys = (node) => {
-    const hProps = getHProps(node);
-    return Object.keys(hProps) || [];
-};
-/**
- * Gets the attributes of an MDX element and returns them as an object of hProperties.
- *
- * @template T
- * @param {(MdxJsxFlowElement | MdxJsxTextElement)} jsx
- * @returns {T} object of hProperties
- */
-const getAttrs = (jsx) => jsx.attributes.reduce((memo, attr) => {
-    if ('name' in attr) {
-        memo[attr.name] = attr.value;
-    }
-    return memo;
-}, {});
-/**
- * Gets the children of an MDX element and returns them as an array of Text nodes.
- * Currently only being used by the HTML Block component, which only expects a single text node.
- *
- * @template T
- * @param {(MdxJsxFlowElement | MdxJsxTextElement)} jsx
- * @returns {Array} array of child text nodes
- */
-const utils_getChildren = (jsx) => jsx.children.reduce((memo, child, i) => {
-    memo[i] = {
-        type: 'text',
-        value: child.value,
-        position: child.position,
-    };
-    return memo;
-}, []);
-/**
- * Tests if a node is an MDX element.
- * TODO: Make this more extensible to all types of nodes. isElement(node, 'type' or ['type1', 'type2']), say
- *
- * @param {Node} node
- * @returns {(node is MdxJsxFlowElement | MdxJsxTextElement)}
- */
-const isMDXElement = (node) => {
-    return ['mdxJsxFlowElement', 'mdxJsxTextElement'].includes(node.type);
-};
-/**
- * Takes an HTML string and formats it for display in the editor. Removes leading/trailing newlines
- * and unindents the HTML.
- *
- * @param {string} html
- * @returns {string} formatted HTML
- */
-const formatHTML = (html) => {
-    // Remove leading/trailing backticks if present, since they're used to keep the HTML 
-    // from being parsed prematurely
-    if (html.startsWith('`') && html.endsWith('`')) {
-        html = html.slice(1, -1);
-    }
-    // Removes the leading/trailing newlines
-    const cleaned = html.replace(/^\s*\n|\n\s*$/g, '');
-    // // Get the number of spaces in the first line to determine the tab size
-    // const tab = cleaned.match(/^\s*/)[0].length;
-    // // Remove the first indentation level from each line 
-    // const tabRegex = new RegExp(`^\\s{${tab}}`, 'gm');
-    // const unindented = cleaned.replace(tabRegex, '');
-    return cleaned;
-};
-/**
- * Reformat HTML for the markdown/mdx by adding an indentation to each line. This assures that the
- * HTML is indentend properly within the HTMLBlock component when rendered in the markdown/mdx.
- *
- * @param {string} html
- * @param {number} [indent=2]
- * @returns {string} re-formatted HTML
- */
-const reformatHTML = (html, indent = 2) => {
-    // Remove leading/trailing newlines
-    const cleaned = html.replace(/^\s*\n|\n\s*$/g, '');
-    // // Create a tab/indent with the specified number of spaces
-    // const tab = ' '.repeat(indent);
-    // // Indent each line of the HTML (converts to an array, indents each line, then joins back)
-    // const indented = cleaned.split('\n').map((line: string) => `${tab}${line}`).join('\n');
-    return cleaned;
-};
-
 ;// 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'],
-    ImageBlock: NodeTypes['image-block'],
+    ImageBlock: NodeTypes.imageBlock,
     HTMLBlock: NodeTypes.htmlBlock,
     Table: 'table',
     Variable: NodeTypes['variable'],
@@ -67190,6 +67211,7 @@ const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
         const mdNode = {
             alt,
             position,
+            children: attrs.caption ? lib_mdast(attrs.caption).children : node.children,
             title,
             type: NodeTypes.imageBlock,
             url: url || attrs.src,
@@ -95829,6 +95851,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;
+};
+
+
 
 
 
@@ -95847,6 +95882,17 @@ 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, alt, title } = _a, image = compatibility_rest(_a, ["align", "width", "src", "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 });
+    return `<Image ${formatProps(attributes)} />`;
+};
 const compatibility = (node) => {
     var _a, _b;
     switch (node.type) {
@@ -95860,6 +95906,11 @@ const compatibility = (node) => {
             return compatibility_html(node);
         case 'escape':
             return `\\${node.value}`;
+        case 'figure':
+            return figureToImageBlock(node);
+        case 'embed':
+            const attributes = formatHProps(node);
+            return `<Embed ${attributes} />`;
         default:
             throw new Error('Unhandled node type!');
     }
@@ -95893,7 +95944,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/transform/images.d.ts

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

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