@readme/markdown 6.75.0-beta.62 → 6.75.0-beta.64

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 },
@@ -48474,7 +48474,8 @@ const calloutTransformer = () => {
 ;// CONCATENATED MODULE: ./processor/transform/code-tabs.ts
 
 
-const codeTabsTransformer = () => tree => {
+const isCode = (node) => (node === null || node === void 0 ? void 0 : node.type) === 'code';
+const codeTabsTransformer = () => (tree) => {
     visit(tree, 'code', (node) => {
         const { lang, meta, value } = node;
         node.data = {
@@ -48489,7 +48490,7 @@ const codeTabsTransformer = () => tree => {
         let walker = index + 1;
         while (walker <= length) {
             const sibling = parent.children[walker];
-            if ((sibling === null || sibling === void 0 ? void 0 : sibling.type) !== 'code')
+            if (!isCode(sibling))
                 break;
             const olderSibling = parent.children[walker - 1];
             if (olderSibling.position.end.offset + sibling.position.start.column !== sibling.position.start.offset)
@@ -48549,31 +48550,159 @@ 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);
+    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/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);
 
@@ -65563,6 +65692,7 @@ const gemojiTransformer = () => (tree) => {
 
 ;// CONCATENATED MODULE: ./processor/transform/inject-components.ts
 
+
 const inject = ({ components } = {}) => (node, index, parent) => {
     if (!(node.name in components))
         return;
@@ -65570,140 +65700,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'],
@@ -65736,6 +65749,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,
@@ -65851,26 +65865,39 @@ const readmeToMdx = () => tree => {
 
 ;// CONCATENATED MODULE: ./processor/transform/variables.ts
 
-const variables = () => tree => {
+
+const variables = ({ asMdx } = { asMdx: true }) => tree => {
     visit(tree, (node, index, parent) => {
         if (!['mdxFlowExpression', 'mdxTextExpression'].includes(node.type) || !('value' in node))
             return;
         const match = node.value.match(/^user\.(?<value>.*)$/);
         if (!match)
             return;
-        let variable = {
-            type: 'mdxJsxTextElement',
-            name: 'Variable',
-            attributes: [
-                {
-                    type: 'mdxJsxAttribute',
-                    name: 'name',
-                    value: match.groups.value,
+        let variable = asMdx
+            ? {
+                type: 'mdxJsxTextElement',
+                name: 'Variable',
+                attributes: [
+                    {
+                        type: 'mdxJsxAttribute',
+                        name: 'name',
+                        value: match.groups.value,
+                    },
+                ],
+                children: [],
+                position: node.position,
+            }
+            : {
+                type: NodeTypes.variable,
+                data: {
+                    hName: 'Variable',
+                    hProperties: {
+                        name: match.groups.value,
+                    },
                 },
-            ],
-            children: [],
-            position: node.position,
-        };
+                value: `{${node.value}}`,
+                position: node.position,
+            };
         parent.children.splice(index, 1, variable);
     });
     return tree;
@@ -65888,14 +65915,7 @@ const variables = () => tree => {
 
 
 
-/* harmony default export */ const transform = ([
-    callouts,
-    code_tabs,
-    transform_embeds,
-    transform_images,
-    gemoji_,
-    transform_variables,
-]);
+/* harmony default export */ const transform = ([callouts, code_tabs, transform_embeds, transform_images, gemoji_]);
 
 ;// CONCATENATED MODULE: ./lib/ast-processor.ts
 
@@ -65907,6 +65927,7 @@ const remarkPlugins = [remarkFrontmatter, remarkGfm, ...transform];
 const astProcessor = (opts = { components: {} }) => remark()
     .use(remarkMdx)
     .use(remarkPlugins)
+    .use(transform_variables, { asMdx: false })
     .use(readme_components({ components: opts.components }));
 /* harmony default export */ const ast_processor = (astProcessor);
 
@@ -78547,7 +78568,7 @@ var compile_rest = (undefined && undefined.__rest) || function (s, e) {
 
 
 
-const compile_remarkPlugins = [remarkFrontmatter, remarkGfm, ...transform];
+const compile_remarkPlugins = [remarkFrontmatter, remarkGfm, ...transform, transform_variables];
 const compile_compile = (text, _a = {}) => {
     var { components } = _a, opts = compile_rest(_a, ["components"]);
     try {

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 },
@@ -49927,7 +49927,8 @@ const calloutTransformer = () => {
 ;// CONCATENATED MODULE: ./processor/transform/code-tabs.ts
 
 
-const codeTabsTransformer = () => tree => {
+const isCode = (node) => (node === null || node === void 0 ? void 0 : node.type) === 'code';
+const codeTabsTransformer = () => (tree) => {
     visit(tree, 'code', (node) => {
         const { lang, meta, value } = node;
         node.data = {
@@ -49942,7 +49943,7 @@ const codeTabsTransformer = () => tree => {
         let walker = index + 1;
         while (walker <= length) {
             const sibling = parent.children[walker];
-            if ((sibling === null || sibling === void 0 ? void 0 : sibling.type) !== 'code')
+            if (!isCode(sibling))
                 break;
             const olderSibling = parent.children[walker - 1];
             if (olderSibling.position.end.offset + sibling.position.start.column !== sibling.position.start.offset)
@@ -50002,31 +50003,159 @@ 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);
+    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/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);
 
@@ -67016,6 +67145,7 @@ const gemojiTransformer = () => (tree) => {
 
 ;// CONCATENATED MODULE: ./processor/transform/inject-components.ts
 
+
 const inject = ({ components } = {}) => (node, index, parent) => {
     if (!(node.name in components))
         return;
@@ -67023,140 +67153,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'],
@@ -67189,6 +67202,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,
@@ -67304,26 +67318,39 @@ const readmeToMdx = () => tree => {
 
 ;// CONCATENATED MODULE: ./processor/transform/variables.ts
 
-const variables = () => tree => {
+
+const variables = ({ asMdx } = { asMdx: true }) => tree => {
     visit(tree, (node, index, parent) => {
         if (!['mdxFlowExpression', 'mdxTextExpression'].includes(node.type) || !('value' in node))
             return;
         const match = node.value.match(/^user\.(?<value>.*)$/);
         if (!match)
             return;
-        let variable = {
-            type: 'mdxJsxTextElement',
-            name: 'Variable',
-            attributes: [
-                {
-                    type: 'mdxJsxAttribute',
-                    name: 'name',
-                    value: match.groups.value,
+        let variable = asMdx
+            ? {
+                type: 'mdxJsxTextElement',
+                name: 'Variable',
+                attributes: [
+                    {
+                        type: 'mdxJsxAttribute',
+                        name: 'name',
+                        value: match.groups.value,
+                    },
+                ],
+                children: [],
+                position: node.position,
+            }
+            : {
+                type: NodeTypes.variable,
+                data: {
+                    hName: 'Variable',
+                    hProperties: {
+                        name: match.groups.value,
+                    },
                 },
-            ],
-            children: [],
-            position: node.position,
-        };
+                value: `{${node.value}}`,
+                position: node.position,
+            };
         parent.children.splice(index, 1, variable);
     });
     return tree;
@@ -67341,14 +67368,7 @@ const variables = () => tree => {
 
 
 
-/* harmony default export */ const transform = ([
-    callouts,
-    code_tabs,
-    transform_embeds,
-    transform_images,
-    gemoji_,
-    transform_variables,
-]);
+/* harmony default export */ const transform = ([callouts, code_tabs, transform_embeds, transform_images, gemoji_]);
 
 ;// CONCATENATED MODULE: ./lib/ast-processor.ts
 
@@ -67360,6 +67380,7 @@ const remarkPlugins = [remarkFrontmatter, remarkGfm, ...transform];
 const astProcessor = (opts = { components: {} }) => remark()
     .use(remarkMdx)
     .use(remarkPlugins)
+    .use(transform_variables, { asMdx: false })
     .use(readme_components({ components: opts.components }));
 /* harmony default export */ const ast_processor = (astProcessor);
 
@@ -80000,7 +80021,7 @@ var compile_rest = (undefined && undefined.__rest) || function (s, e) {
 
 
 
-const compile_remarkPlugins = [remarkFrontmatter, remarkGfm, ...transform];
+const compile_remarkPlugins = [remarkFrontmatter, remarkGfm, ...transform, transform_variables];
 const compile_compile = (text, _a = {}) => {
     var { components } = _a, opts = compile_rest(_a, ["components"]);
     try {

package/dist/processor/transform/code-tabs.d.ts

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

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/transform/variables.d.ts

@@ -1,3 +1,5 @@
 import { Transform } from 'mdast-util-from-markdown';
-declare const variables: () => Transform;
+declare const variables: ({ asMdx }?: {
+    asMdx: boolean;
+}) => Transform;
 export default variables;

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