@readme/markdown 15.5.2 → 15.7.0

package/dist/processor/transform/mdxish/images-to-jsx.d.ts

@@ -0,0 +1,10 @@
+import type { Transform } from 'mdast-util-from-markdown';
+/**
+ * Serializes the three image shapes a parsed document carries. An image that picked up readme
+ * attributes has no markdown spelling left and goes out as `<Image>`, a plain one stays
+ * `![alt](src)`.
+ *
+ * Order matters: `figure` unwraps into the `image` its caption belongs to, so it runs first.
+ */
+declare const imagesToJsx: () => Transform;
+export default imagesToJsx;

package/dist/processor/transform/mdxish/unwrap-pins.d.ts

@@ -0,0 +1,9 @@
+import type { Transform } from 'mdast-util-from-markdown';
+/**
+ * A `sidebar: true` magic block (e.g. `[block:code]`) parses into an `rdme-pin` wrapper via
+ * `wrapPinnedBlocks`, and remark-stringify throws on any node type without a handler. The mdxish
+ * dialect has no spelling for a pin, so the wrapper serializes as its content instead — the same
+ * (lossy) unwrap `readmeToMdx` has always done, trading the `sidebar` flag for not crashing.
+ */
+declare const unwrapPins: () => Transform;
+export default unwrapPins;

package/dist/render-fixture.node.js

@@ -19045,7 +19045,7 @@ module.exports = function () {
 
 /***/ },
 
-/***/ 9743
+/***/ 5072
 (module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -101217,6 +101217,8 @@ const processTableNode = (node, index, parent, documentPosition) => {
         type: 'table',
         position,
         children,
+        // Remember the author's spelling so the serializer can write `<table>` back instead of `<Table>`
+        ...(node.name === 'table' && { data: { lowercaseTable: true } }),
     };
     parent.children[index] = mdNode;
 };
@@ -116819,7 +116821,7 @@ const rehypeToc = ({ components = {} }) => {
         });
     };
 };
-const MAX_DEPTH = 2;
+const MAX_DEPTH = 3;
 /**
  * Get the depth of a heading element based on its tag name.
  *
@@ -124215,6 +124217,111 @@ const generateSlugForHeadings = () => (tree) => {
 };
 /* harmony default export */ const heading_slugs = (generateSlugForHeadings);
 
+;// ./processor/transform/mdxish/images-to-jsx.ts
+/* unused harmony import specifier */ var images_to_jsx_toMarkdown;
+/* unused harmony import specifier */ var images_to_jsx_visit;
+/* unused harmony import specifier */ var images_to_jsx_NodeTypes;
+/* unused harmony import specifier */ var images_to_jsx_INLINE_ONLY_PARENT_TYPES;
+/* unused harmony import specifier */ var images_to_jsx_toAttributes;
+
+
+
+
+
+const IMAGE_ATTRS = (/* unused pure expression or super */ null && (['align', 'alt', 'border', 'caption', 'className', 'height', 'lazy', 'src', 'title', 'width']));
+/** The three attributes markdown's `![alt](src "title")` can carry. Anything else forces JSX. */
+const PLAIN_IMAGE_ATTRS = (/* unused pure expression or super */ null && (['alt', 'src', 'title']));
+const EMOJI_COLONS = /^:(.*):$/;
+const hasExtra = (attributes) => attributes.some(attr => !PLAIN_IMAGE_ATTRS.includes(attr.name));
+const toImageJsx = (attributes, children = []) => ({
+    type: 'mdxJsxFlowElement',
+    name: 'Image',
+    attributes,
+    children,
+});
+/**
+ * An `image` is phrasing content, but the nodes it replaces here (`image-block`, and a plain
+ * `[block:image]`) sit where flow content belongs. `mdast-util-to-markdown` picks a block separator
+ * from the two node types around it and has no rule for phrasing-next-to-flow, so it emits none and
+ * glues the image to whatever follows (`![a](src)# Heading`), which then cascades through the rest
+ * of the document. Wrapping restores a block for it to join against.
+ */
+const placeImage = (parent, index, image) => {
+    const wrapped = { type: 'paragraph', children: [image] };
+    parent.children[index] = images_to_jsx_INLINE_ONLY_PARENT_TYPES.has(parent.type) ? image : wrapped;
+};
+/**
+ * Serializes the three image shapes a parsed document carries. An image that picked up readme
+ * attributes has no markdown spelling left and goes out as `<Image>`, a plain one stays
+ * `![alt](src)`.
+ *
+ * Order matters: `figure` unwraps into the `image` its caption belongs to, so it runs first.
+ */
+const imagesToJsx = () => tree => {
+    images_to_jsx_visit(tree, images_to_jsx_NodeTypes.figure, (node, index, parent) => {
+        if (!parent || index === undefined)
+            return;
+        const [image, caption] = node.children;
+        const { align, className, width } = image.data.hProperties;
+        parent.children[index] = toImageJsx(images_to_jsx_toAttributes({ ...image, align, width, ...(className === 'border' && { border: true }), src: image.src || image.url }, IMAGE_ATTRS), 
+        // The caption stays a child rather than a pre-serialized `caption` attribute, so readme nodes
+        // inside it (emoji, variables, glossary) reach their own handlers instead of the bare
+        // `toMarkdown` in `compatibility.figureToImageBlock`, which throws on them.
+        caption.children);
+    });
+    images_to_jsx_visit(tree, 'image', (n, index, parent) => {
+        const node = n;
+        if (!parent || index === undefined)
+            return undefined;
+        const hProperties = node.data?.hProperties;
+        // A `:joy:`-style shortcode round-trips as a gemoji rather than the image it parsed into.
+        if (hProperties?.className === 'emoji' && node.title) {
+            const emoji = {
+                type: images_to_jsx_NodeTypes.emoji,
+                name: node.title.replace(EMOJI_COLONS, '$1'),
+                value: node.title,
+            };
+            parent.children[index] = emoji;
+            return undefined;
+        }
+        if (hProperties) {
+            const attributes = images_to_jsx_toAttributes({ ...node, ...hProperties, src: node.url }, IMAGE_ATTRS);
+            if (hasExtra(attributes)) {
+                parent.children[index] = toImageJsx(attributes);
+                return undefined;
+            }
+        }
+        // An attribute-less `[block:image]` parses straight to an `image` in a flow slot, so it needs
+        // the same wrap. Editor images always arrive inside a paragraph and are left alone.
+        if (images_to_jsx_INLINE_ONLY_PARENT_TYPES.has(parent.type))
+            return undefined;
+        placeImage(parent, index, node);
+        // Step over the paragraph just created, or the visitor walks back into the same image.
+        return [(/* inlined export .SKIP */"skip"), index + 1];
+    });
+    images_to_jsx_visit(tree, images_to_jsx_NodeTypes.imageBlock, (node, index, parent) => {
+        if (!parent || index === undefined)
+            return;
+        // An image-block keeps its caption as children, so it has to be re-serialized back into the
+        // `caption` attribute before the node is replaced.
+        const captionChildren = node.children ?? [];
+        const caption = captionChildren.length ? images_to_jsx_toMarkdown({ type: 'root', children: captionChildren }).trim() : '';
+        const attributes = images_to_jsx_toAttributes({ ...node, ...node.data.hProperties, ...(caption && { caption }) }, IMAGE_ATTRS);
+        if (hasExtra(attributes)) {
+            parent.children[index] = toImageJsx(attributes);
+            return;
+        }
+        placeImage(parent, index, {
+            type: 'image',
+            url: node.src,
+            ...(node.title && { title: node.title }),
+            ...(node.alt && { alt: node.alt }),
+        });
+    });
+    return tree;
+};
+/* harmony default export */ const images_to_jsx = ((/* unused pure expression or super */ null && (imagesToJsx)));
+
 // EXTERNAL MODULE: ./node_modules/@readme/variable/dist/index.js
 var variable_dist = __webpack_require__(4355);
 var variable_dist_default = /*#__PURE__*/__webpack_require__.n(variable_dist);
@@ -127485,13 +127592,22 @@ const mdxishTablesToJsx = () => tree => {
             gfmCells.push([cell, normalized]);
             return undefined;
         });
-        if (!requiresJsxTable) {
+        const stayLowercase = table.data?.lowercaseTable === true;
+        // We transform to GFM tables if:
+        // 1. If it doesn't contain complex elements that the syntax can't represent
+        // 2. The original table is not lowercase HTML <table>, because we want to 
+        // preserve original tables as much as possible
+        if (!requiresJsxTable && !stayLowercase) {
             gfmCells.forEach(([cell, children]) => {
                 cell.children = children;
             });
             table.type = 'table';
             return;
         }
+        // Nothing to build a JSX table from; leave the empty node to the GFM stringifier.
+        const [headerRow, ...bodyRows] = table.children;
+        if (!headerRow)
+            return;
         mdxish_tables_to_jsx_visit(table, mdxish_tables_to_jsx_isTableCell, flattenBreaksToNewlines);
         const styles = table.align.map(mdxish_tables_to_jsx_alignToStyle);
         const head = {
@@ -127503,7 +127619,7 @@ const mdxishTablesToJsx = () => tree => {
                     attributes: [],
                     type: 'mdxJsxFlowElement',
                     name: 'tr',
-                    children: table.children[0].children.map((cell, cellIndex) => {
+                    children: headerRow.children.map((cell, cellIndex) => {
                         return {
                             attributes: [],
                             type: 'mdxJsxFlowElement',
@@ -127519,7 +127635,7 @@ const mdxishTablesToJsx = () => tree => {
             attributes: [],
             type: 'mdxJsxFlowElement',
             name: 'tbody',
-            children: table.children.splice(1).map(row => {
+            children: bodyRows.map(row => {
                 return {
                     attributes: [],
                     type: 'mdxJsxFlowElement',
@@ -127547,8 +127663,8 @@ const mdxishTablesToJsx = () => tree => {
         ];
         const jsx = {
             type: 'mdxJsxFlowElement',
-            name: 'Table',
-            attributes: table.align.find(a => a) ? attributes : [],
+            name: stayLowercase ? 'table' : 'Table',
+            attributes: !stayLowercase && table.align.find(a => a) ? attributes : [],
             children: [head, body],
         };
         parent.children[index] = jsx;
@@ -127742,7 +127858,9 @@ function loadComponents() {
 }
 
 ;// ./lib/mdxish.ts
+/* unused harmony import specifier */ var mdxish_mdxExpressionToMarkdown;
 /* unused harmony import specifier */ var mdxish_mdxJsxToMarkdown;
+/* unused harmony import specifier */ var mdxish_mdxjsEsmToMarkdown;
 /* unused harmony import specifier */ var mdxish_remarkGfm;
 /* unused harmony import specifier */ var mdxish_remarkStringify;
 /* unused harmony import specifier */ var mdxish_unified;
@@ -127750,7 +127868,13 @@ function loadComponents() {
 /* unused harmony import specifier */ var mdxish_DEFAULT_BULLET;
 /* unused harmony import specifier */ var mdxish_mdxishAnchorToJsx;
 /* unused harmony import specifier */ var mdxish_mdxishCalloutToJsx;
+/* unused harmony import specifier */ var mdxishImagesToJsx;
 /* unused harmony import specifier */ var mdxish_mdxishTablesToJsx;
+/* unused harmony import specifier */ var unwrapPins;
+
+
+
+
 
 
 
@@ -127881,35 +128005,43 @@ function mdxishAstProcessor(mdContent, opts = {}) {
     };
 }
 /**
- * Registers the mdx-jsx serialization extension so remark-stringify
- * can convert JSX nodes (e.g. `<Table>`) to markdown.
+ * Registers serialization for the node types remark-stringify can't write on its own:
+ * JSX elements (e.g. `<Table>`), MDX expressions, and ESM exports.
  */
-function mdxJsxStringify() {
+function mdxStringifyExtensions() {
     const data = this.data();
     const extensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
-    extensions.push({ extensions: [mdxish_mdxJsxToMarkdown()] });
+    extensions.push({ extensions: [mdxish_mdxJsxToMarkdown(), mdxish_mdxExpressionToMarkdown(), mdxish_mdxjsEsmToMarkdown()] });
 }
+const stringifyOptions = (/* unused pure expression or super */ null && ({
+    bullet: mdxish_DEFAULT_BULLET,
+    emphasis: '_',
+    // Escape literal braces in text so they don't parse as (often
+    // unterminated) MDX expressions on the next round trip.
+    unsafe: [
+        { character: '{', inConstruct: 'phrasing' },
+        { character: '}', inConstruct: 'phrasing' },
+    ],
+}));
 /**
  * Serializes an Mdast back into a markdown string.
  */
 function mdxishMdastToMd(mdast) {
     const processor = mdxish_unified()
         .use(mdxish_remarkGfm)
+        // Readme nodes with no markdown spelling go out as JSX, the same tags mdxish re-parses.
         .use(mdxish_mdxishCalloutToJsx)
         .use(mdxish_mdxishTablesToJsx)
         .use(mdxish_mdxishAnchorToJsx)
+        // The rest only a PARSER tree carries.
+        // A `sidebar: true` block parses into an `rdme-pin` wrapper the dialect can't spell.
+        .use(unwrapPins)
+        // Figures, image blocks, and images that picked up readme attributes while parsing.
+        .use(mdxishImagesToJsx)
+        // Handlers for the readme nodes that stay themselves (variables, emoji, html-blocks, lists).
         .use(mdxish_mdxishCompilers)
-        .use(mdxJsxStringify)
-        .use(mdxish_remarkStringify, {
-        bullet: mdxish_DEFAULT_BULLET,
-        emphasis: '_',
-        // Escape literal braces in text so they don't parse as (often
-        // unterminated) MDX expressions on the next round trip.
-        unsafe: [
-            { character: '{', inConstruct: 'phrasing' },
-            { character: '}', inConstruct: 'phrasing' },
-        ],
-    });
+        .use(mdxStringifyExtensions)
+        .use(mdxish_remarkStringify, stringifyOptions);
     return processor.stringify(processor.runSync(mdast));
 }
 /**
@@ -129023,7 +129155,7 @@ module.exports = /*#__PURE__*/JSON.parse('{"*":["about","acceptCharset","accessK
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module used 'module' so it can't be inlined
-/******/ 	let __webpack_exports__ = __webpack_require__(9743);
+/******/ 	let __webpack_exports__ = __webpack_require__(5072);
 /******/ 	module.exports = __webpack_exports__;
 /******/ 	
 /******/ })()