@readme/markdown 7.2.0 → 7.2.1

package/dist/enums.d.ts

@@ -3,6 +3,8 @@ export declare enum NodeTypes {
     codeTabs = "code-tabs",
     embedBlock = "embed-block",
     emoji = "gemoji",
+    figcaption = "figcaption",
+    figure = "figure",
     glossary = "readme-glossary-item",
     htmlBlock = "html-block",
     i = "i",

package/dist/main.js

@@ -47737,6 +47737,8 @@ var NodeTypes;
     NodeTypes["codeTabs"] = "code-tabs";
     NodeTypes["embedBlock"] = "embed-block";
     NodeTypes["emoji"] = "gemoji";
+    NodeTypes["figcaption"] = "figcaption";
+    NodeTypes["figure"] = "figure";
     NodeTypes["glossary"] = "readme-glossary-item";
     NodeTypes["htmlBlock"] = "html-block";
     NodeTypes["i"] = "i";
@@ -47983,6 +47985,19 @@ const reformatHTML = (html, indent = 2) => {
     // const indented = cleaned.split('\n').map((line: string) => `${tab}${line}`).join('\n');
     return cleaned;
 };
+const toAttributes = (object, keys = []) => {
+    let attributes = [];
+    Object.entries(object).forEach(([name, value]) => {
+        if (keys.length > 0 && !keys.includes(name))
+            return;
+        attributes.push({
+            type: 'mdxJsxAttribute',
+            name,
+            value: value,
+        });
+    });
+    return attributes;
+};
 
 ;// CONCATENATED MODULE: ./processor/transform/images.ts
 
@@ -47992,10 +48007,8 @@ const reformatHTML = (html, indent = 2) => {
 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')
+        // 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 = {
@@ -65219,6 +65232,8 @@ const readmeComponents = (opts) => () => tree => {
 ;// CONCATENATED MODULE: ./processor/transform/readme-to-mdx.ts
 
 
+
+const imageAttrs = ['align', 'alt', 'caption', 'border', 'src', 'title', 'width', 'lazy', 'className'];
 const readmeToMdx = () => tree => {
     // Unwrap pinned nodes, replace rdme-pin with its child node
     visit(tree, 'rdme-pin', (node, i, parent) => {
@@ -65226,22 +65241,56 @@ const readmeToMdx = () => tree => {
         parent.children.splice(i, 1, newNode);
     });
     visit(tree, NodeTypes.tutorialTile, (tile, index, parent) => {
-        const attributes = ['backgroundColor', 'emoji', 'id', 'link', 'slug', 'title'].map(name => {
-            const value = tile[name];
-            delete tile[name];
-            return {
-                type: 'mdxJsxAttribute',
-                name,
-                value,
-            };
-        });
         parent.children.splice(index, 1, {
             type: 'mdxJsxFlowElement',
             name: 'TutorialTile',
-            attributes,
+            attributes: toAttributes(tile, ['backgroundColor', 'emoji', 'id', 'link', 'slug', 'title']),
             children: [],
         });
     });
+    visit(tree, 'figure', (figure, index, parent) => {
+        const [image, caption] = figure.children;
+        parent.children.splice(index, 1, {
+            type: 'mdxJsxFlowElement',
+            name: 'Image',
+            attributes: toAttributes(image, imageAttrs),
+            children: caption.children,
+        });
+    });
+    const hasExtra = (attributes) => !!attributes.find(attr => !['alt', 'src', 'title'].includes(attr.name));
+    visit(tree, 'image', (image, index, parent) => {
+        if (!('data' in image))
+            return;
+        const attributes = toAttributes(image.data.hProperties, imageAttrs);
+        if (hasExtra(attributes)) {
+            parent.children.splice(index, 1, {
+                type: 'mdxJsxFlowElement',
+                name: 'Image',
+                attributes,
+                children: [],
+            });
+        }
+    });
+    visit(tree, NodeTypes.imageBlock, (image, index, parent) => {
+        const attributes = toAttributes(image.data.hProperties, imageAttrs);
+        if (hasExtra(attributes)) {
+            parent.children.splice(index, 1, {
+                type: 'mdxJsxFlowElement',
+                name: 'Image',
+                attributes,
+                children: [],
+            });
+        }
+        else {
+            parent.children.splice(index, 1, {
+                type: 'image',
+                children: [],
+                url: image.url,
+                title: image.title,
+                alt: image.alt,
+            });
+        }
+    });
     return tree;
 };
 /* harmony default export */ const readme_to_mdx = (readmeToMdx);
@@ -82657,24 +82706,6 @@ ${reformatHTML(html)}
 };
 /* harmony default export */ const html_block = (htmlBlock);
 
-;// CONCATENATED MODULE: ./processor/compile/image.ts
-
-const compile_image_image = (node) => {
-    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);
-
 ;// CONCATENATED MODULE: ./node_modules/hast-util-from-parse5/node_modules/hastscript/lib/create-h.js
 /**
  * @typedef {import('hast').Element} Element
@@ -93871,7 +93902,12 @@ const compatibility = (node) => {
 /* harmony default export */ const compile_compatibility = (compatibility);
 
 ;// CONCATENATED MODULE: ./processor/compile/variable.ts
-const variable = (node) => `{user.${node.data.hProperties.name}}`;
+const variable = (node) => {
+    // @note: coming from RDMD, it's set as `variable`. But when mdx is parsed,
+    // it's set as `name`
+    const name = node.data.hProperties.variable || node.data.hProperties.name;
+    return `{user.${name}}`;
+};
 /* harmony default export */ const compile_variable = (variable);
 
 ;// CONCATENATED MODULE: ./processor/compile/index.ts
@@ -93883,7 +93919,6 @@ const variable = (node) => `{user.${node.data.hProperties.name}}`;
 
 
 
-
 function compilers() {
     const data = this.data();
     const toMarkdownExtensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
@@ -93894,7 +93929,6 @@ function compilers() {
         [NodeTypes.emoji]: compile_gemoji,
         [NodeTypes.glossary]: compile_compatibility,
         [NodeTypes.htmlBlock]: html_block,
-        [NodeTypes.imageBlock]: compile_image,
         [NodeTypes.reusableContent]: compile_compatibility,
         [NodeTypes.variable]: compile_variable,
         embed: compile_compatibility,
@@ -93924,8 +93958,8 @@ const mdx_mdx = (tree, { hast = false } = {}) => {
         .use(div)
         .use(readme_to_mdx)
         .use(tables_to_jsx)
-        .use(remarkStringify)
-        .use(processor_compile);
+        .use(processor_compile)
+        .use(remarkStringify);
     return processor.stringify(processor.runSync(tree));
 };
 /* harmony default export */ const lib_mdx = (mdx_mdx);

package/dist/main.node.js

@@ -48724,6 +48724,8 @@ var NodeTypes;
     NodeTypes["codeTabs"] = "code-tabs";
     NodeTypes["embedBlock"] = "embed-block";
     NodeTypes["emoji"] = "gemoji";
+    NodeTypes["figcaption"] = "figcaption";
+    NodeTypes["figure"] = "figure";
     NodeTypes["glossary"] = "readme-glossary-item";
     NodeTypes["htmlBlock"] = "html-block";
     NodeTypes["i"] = "i";
@@ -48970,6 +48972,19 @@ const reformatHTML = (html, indent = 2) => {
     // const indented = cleaned.split('\n').map((line: string) => `${tab}${line}`).join('\n');
     return cleaned;
 };
+const toAttributes = (object, keys = []) => {
+    let attributes = [];
+    Object.entries(object).forEach(([name, value]) => {
+        if (keys.length > 0 && !keys.includes(name))
+            return;
+        attributes.push({
+            type: 'mdxJsxAttribute',
+            name,
+            value: value,
+        });
+    });
+    return attributes;
+};
 
 ;// CONCATENATED MODULE: ./processor/transform/images.ts
 
@@ -48979,10 +48994,8 @@ const reformatHTML = (html, indent = 2) => {
 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')
+        // 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 = {
@@ -66206,6 +66219,8 @@ const readmeComponents = (opts) => () => tree => {
 ;// CONCATENATED MODULE: ./processor/transform/readme-to-mdx.ts
 
 
+
+const imageAttrs = ['align', 'alt', 'caption', 'border', 'src', 'title', 'width', 'lazy', 'className'];
 const readmeToMdx = () => tree => {
     // Unwrap pinned nodes, replace rdme-pin with its child node
     visit(tree, 'rdme-pin', (node, i, parent) => {
@@ -66213,22 +66228,56 @@ const readmeToMdx = () => tree => {
         parent.children.splice(i, 1, newNode);
     });
     visit(tree, NodeTypes.tutorialTile, (tile, index, parent) => {
-        const attributes = ['backgroundColor', 'emoji', 'id', 'link', 'slug', 'title'].map(name => {
-            const value = tile[name];
-            delete tile[name];
-            return {
-                type: 'mdxJsxAttribute',
-                name,
-                value,
-            };
-        });
         parent.children.splice(index, 1, {
             type: 'mdxJsxFlowElement',
             name: 'TutorialTile',
-            attributes,
+            attributes: toAttributes(tile, ['backgroundColor', 'emoji', 'id', 'link', 'slug', 'title']),
             children: [],
         });
     });
+    visit(tree, 'figure', (figure, index, parent) => {
+        const [image, caption] = figure.children;
+        parent.children.splice(index, 1, {
+            type: 'mdxJsxFlowElement',
+            name: 'Image',
+            attributes: toAttributes(image, imageAttrs),
+            children: caption.children,
+        });
+    });
+    const hasExtra = (attributes) => !!attributes.find(attr => !['alt', 'src', 'title'].includes(attr.name));
+    visit(tree, 'image', (image, index, parent) => {
+        if (!('data' in image))
+            return;
+        const attributes = toAttributes(image.data.hProperties, imageAttrs);
+        if (hasExtra(attributes)) {
+            parent.children.splice(index, 1, {
+                type: 'mdxJsxFlowElement',
+                name: 'Image',
+                attributes,
+                children: [],
+            });
+        }
+    });
+    visit(tree, NodeTypes.imageBlock, (image, index, parent) => {
+        const attributes = toAttributes(image.data.hProperties, imageAttrs);
+        if (hasExtra(attributes)) {
+            parent.children.splice(index, 1, {
+                type: 'mdxJsxFlowElement',
+                name: 'Image',
+                attributes,
+                children: [],
+            });
+        }
+        else {
+            parent.children.splice(index, 1, {
+                type: 'image',
+                children: [],
+                url: image.url,
+                title: image.title,
+                alt: image.alt,
+            });
+        }
+    });
     return tree;
 };
 /* harmony default export */ const readme_to_mdx = (readmeToMdx);
@@ -83644,24 +83693,6 @@ ${reformatHTML(html)}
 };
 /* harmony default export */ const html_block = (htmlBlock);
 
-;// CONCATENATED MODULE: ./processor/compile/image.ts
-
-const compile_image_image = (node) => {
-    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);
-
 ;// CONCATENATED MODULE: ./node_modules/hast-util-from-parse5/node_modules/hastscript/lib/create-h.js
 /**
  * @typedef {import('hast').Element} Element
@@ -94858,7 +94889,12 @@ const compatibility = (node) => {
 /* harmony default export */ const compile_compatibility = (compatibility);
 
 ;// CONCATENATED MODULE: ./processor/compile/variable.ts
-const variable = (node) => `{user.${node.data.hProperties.name}}`;
+const variable = (node) => {
+    // @note: coming from RDMD, it's set as `variable`. But when mdx is parsed,
+    // it's set as `name`
+    const name = node.data.hProperties.variable || node.data.hProperties.name;
+    return `{user.${name}}`;
+};
 /* harmony default export */ const compile_variable = (variable);
 
 ;// CONCATENATED MODULE: ./processor/compile/index.ts
@@ -94870,7 +94906,6 @@ const variable = (node) => `{user.${node.data.hProperties.name}}`;
 
 
 
-
 function compilers() {
     const data = this.data();
     const toMarkdownExtensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
@@ -94881,7 +94916,6 @@ function compilers() {
         [NodeTypes.emoji]: compile_gemoji,
         [NodeTypes.glossary]: compile_compatibility,
         [NodeTypes.htmlBlock]: html_block,
-        [NodeTypes.imageBlock]: compile_image,
         [NodeTypes.reusableContent]: compile_compatibility,
         [NodeTypes.variable]: compile_variable,
         embed: compile_compatibility,
@@ -94911,8 +94945,8 @@ const mdx_mdx = (tree, { hast = false } = {}) => {
         .use(transform_div)
         .use(readme_to_mdx)
         .use(tables_to_jsx)
-        .use(remarkStringify)
-        .use(processor_compile);
+        .use(processor_compile)
+        .use(remarkStringify);
     return processor.stringify(processor.runSync(tree));
 };
 /* harmony default export */ const lib_mdx = (mdx_mdx);

package/dist/processor/utils.d.ts

@@ -1,5 +1,6 @@
 import { Node } from 'mdast';
 import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx';
+import { MdxJsxAttribute } from 'mdast-util-mdx-jsx';
 /**
  * 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
@@ -75,3 +76,4 @@ export declare const formatHTML: (html: string) => string;
  * @returns {string} re-formatted HTML
  */
 export declare const reformatHTML: (html: string, indent?: number) => string;
+export declare const toAttributes: (object: Record<string, any>, keys?: string[]) => MdxJsxAttribute[];

package/package.json

@@ -2,7 +2,7 @@
   "name": "@readme/markdown",
   "description": "ReadMe's React-based Markdown parser",
   "author": "Rafe Goldberg <rafe@readme.io>",
-  "version": "7.2.0",
+  "version": "7.2.1",
   "main": "dist/main.node.js",
   "types": "dist/index.d.ts",
   "browser": "dist/main.js",

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

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