@readme/markdown 15.8.0 → 15.9.0

package/components/HTMLBlock/index.tsx

@@ -38,8 +38,8 @@ const HTMLBlock = ({ children = '', html: htmlProp, runScripts, safeMode: safeMo
   const [cleanedHtml, exec] = extractScripts(html);
 
   useEffect(() => {
-    if (typeof window !== 'undefined' && typeof runScripts === 'boolean' && runScripts) exec();
-  }, [runScripts, exec]);
+    if (typeof window !== 'undefined' && typeof runScripts === 'boolean' && runScripts && !safeMode) exec();
+  }, [runScripts, safeMode, exec]);
 
   if (nonStringChildren) {
     // Fail soft: a non-string child (e.g. JSX that wasn't serialized back to a

package/dist/main.js

@@ -11423,7 +11423,7 @@ module.exports = function () {
 
 /***/ },
 
-/***/ 9607
+/***/ 9171
 (module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -12156,9 +12156,9 @@ const HTMLBlock = ({ children = '', html: htmlProp, runScripts, safeMode: safeMo
     const safeMode = typeof safeModeRaw !== 'boolean' ? safeModeRaw === 'true' : safeModeRaw;
     const [cleanedHtml, exec] = extractScripts(html);
     (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
-        if (typeof window !== 'undefined' && typeof runScripts === 'boolean' && runScripts)
+        if (typeof window !== 'undefined' && typeof runScripts === 'boolean' && runScripts && !safeMode)
             exec();
-    }, [runScripts, exec]);
+    }, [runScripts, safeMode, exec]);
     if (nonStringChildren) {
         // Fail soft: a non-string child (e.g. JSX that wasn't serialized back to a
         // raw string) should never throw, so render the child nodes directly
@@ -103888,6 +103888,32 @@ const mdxComponentHandlers = {
     [NodeTypes.htmlBlock]: htmlBlockHandler,
 };
 
+;// ./processor/plugin/safe-mode-html-blocks.ts
+
+
+/**
+ * Whether a tag name renders through the `HTMLBlock` component. Mirrors the
+ * separator-agnostic, case-insensitive lookup in `getComponentName` and the
+ * rehype-react component map, so `html-block`, `HTMLBlock`, `HtmlBlock` and
+ * `htmlblock` all match.
+ */
+const isHtmlBlockTag = (tagName) => toPascalCase(tagName).toLowerCase() === 'htmlblock';
+/**
+ * Forces `safeMode` on every element that renders through `HTMLBlock` so it is
+ * shown as escaped text instead of injected.
+ *
+ * Runs last, so it sees every producer of the element — `[block:html]`,
+ * `<HTMLBlock>` with a template body or an `html` attribute, and a literal
+ * `<html-block>` — and it is unconditional so an author-supplied
+ * `safeMode="false"` can't opt out.
+ */
+const enforceSafeModeHtmlBlocks = () => tree => {
+    visit(tree, 'element', node => {
+        if (isHtmlBlockTag(node.tagName))
+            node.properties.safeMode = 'true';
+    });
+};
+
 ;// ./processor/transform/mdxish/anchor-to-jsx.ts
 
 
@@ -106195,7 +106221,7 @@ const parseApiHeaderTitle = (text) => {
  * Transform a magicBlock node into final MDAST nodes.
  */
 function transformMagicBlock(blockType, data, rawValue, options = {}) {
-    const { compatibilityMode = false, hardBreaks = true, safeMode = false } = options;
+    const { compatibilityMode = false, hardBreaks = true } = options;
     // Handle empty data by returning placeholder nodes for known block types
     // This allows the editor to show appropriate placeholder UI instead of nothing
     if (Object.keys(data).length < 1) {
@@ -106413,7 +106439,7 @@ function transformMagicBlock(blockType, data, rawValue, options = {}) {
                 wrapPinnedBlocks({
                     data: {
                         hName: 'html-block',
-                        hProperties: { html: htmlJson.html, runScripts: compatibilityMode, safeMode },
+                        hProperties: { html: htmlJson.html, runScripts: compatibilityMode },
                     },
                     type: 'html-block',
                 }, data),
@@ -106673,6 +106699,80 @@ const mdxishHtmlBlocks = () => tree => {
 };
 /* harmony default export */ const mdxish_html_blocks = (mdxishHtmlBlocks);
 
+;// ./processor/transform/mdxish/tables/cell-width.ts
+
+
+// Key must follow `{` or `,` so `minWidth`/`maxWidth` don't match on their suffix
+const STYLE_OBJECT_WIDTH_REGEX = /[{,]\s*["']?width["']?\s*:\s*(?:"([^"]*)"|'([^']*)'|([^,}]+))/i;
+// First colon only, so `url(http://…)` values stay intact
+const CSS_DECLARATION_REGEX = /:(.*)/s;
+const UNITLESS_NUMBER_REGEX = /^\d+(?:\.\d+)?$/;
+// HTML reads a `width` attribute as a leading number plus optional `%`, ignoring the rest
+const HTML_DIMENSION_REGEX = /^\s*(\d+(?:\.\d+)?)\s*(%?)/;
+/** Bare numbers are pixels. A value carrying declaration separators is not a single width. */
+const normalizeWidth = (value) => {
+    if (typeof value === 'number')
+        return `${value}px`;
+    if (typeof value !== 'string' || !value.trim())
+        return null;
+    const trimmed = value.trim();
+    if (/[;:{}]/.test(trimmed))
+        return null;
+    return UNITLESS_NUMBER_REGEX.test(trimmed) ? `${trimmed}px` : trimmed;
+};
+const widthFromAttribute = (value) => {
+    if (typeof value === 'number')
+        return `${value}px`;
+    if (typeof value !== 'string')
+        return null;
+    const match = HTML_DIMENSION_REGEX.exec(value);
+    return match ? `${match[1]}${match[2] || 'px'}` : null;
+};
+const cssPropertyNames = (style) => style
+    .split(';')
+    .map(declaration => declaration.split(CSS_DECLARATION_REGEX)[0].trim().toLowerCase())
+    .filter(Boolean);
+/** Handles a CSS declaration list and a style object safe mode left as a string (`{ width: "30%" }`). */
+const widthFromStyleString = (style) => {
+    const trimmed = style.trim();
+    if (trimmed.startsWith('{')) {
+        return STYLE_OBJECT_WIDTH_REGEX.exec(trimmed)?.slice(1).find(Boolean);
+    }
+    return trimmed
+        .split(';')
+        .map(declaration => declaration.split(CSS_DECLARATION_REGEX))
+        .find(([property]) => property.trim().toLowerCase() === 'width')?.[1];
+};
+/** Accepts `style={{ width }}`, `style="width: …"` and the hand-authored `width="…"`. */
+const getCellWidth = (cell) => {
+    const { style, width } = getAttrs(cell);
+    let styleWidth;
+    if (style_object_to_css_isPlainObject(style)) {
+        styleWidth = style.width;
+    }
+    else if (typeof style === 'string') {
+        styleWidth = widthFromStyleString(style);
+    }
+    return normalizeWidth(styleWidth) ?? widthFromAttribute(width);
+};
+/** True when the cell's attributes state nothing but its width, which mdast can carry. */
+const hasOnlyWidthAttributes = (cell) => {
+    if (cell.attributes.length === 0)
+        return false;
+    const { style } = getAttrs(cell);
+    return cell.attributes.every(attribute => {
+        if (!('name' in attribute))
+            return false;
+        if (attribute.name === 'width')
+            return true;
+        if (attribute.name !== 'style')
+            return false;
+        if (style_object_to_css_isPlainObject(style))
+            return Object.keys(style).every(key => key === 'width');
+        return typeof style === 'string' && cssPropertyNames(style).every(property => property === 'width');
+    });
+};
+
 ;// ./processor/transform/mdxish/mdxish-jsx-to-mdast.ts
 
 
@@ -106680,6 +106780,7 @@ const mdxishHtmlBlocks = () => tree => {
 
 
 
+
 function toImageAlign(value) {
     if (value === 'left' || value === 'center' || value === 'right') {
         return value;
@@ -107121,10 +107222,40 @@ const wrapBareCellsInRow = (node) => {
     });
 };
 /**
- * Converts a JSX <Table> element to an MDAST table node with alignment.
- * Returns null for header-less tables since MDAST always promotes the first row to <thead>.
+ * A lowercase <table> reaches here only because `mdxishTables` kept it as JSX for its
+ * attributes. Widths on first-row cells are the one attribute mdast can carry; anything
+ * else stays JSX so it still renders.
+ */
+const lowercaseTableIsConvertible = (jsx) => {
+    if (jsx.attributes.length > 0)
+        return false;
+    const headerCells = new Set();
+    let headerRowSeen = false;
+    let convertible = true;
+    visit(jsx, isMDXElement, (child) => {
+        if (child.name === 'tr' && !headerRowSeen) {
+            headerRowSeen = true;
+            visit(child, mdxish_jsx_to_mdast_isTableCell, cell => {
+                headerCells.add(cell);
+            });
+        }
+        if (child.name === null || !tableTags.has(child.name) || child.attributes.length === 0)
+            return;
+        if (!headerCells.has(child) || !hasOnlyWidthAttributes(child) || getCellWidth(child) === null) {
+            convertible = false;
+        }
+    });
+    return convertible;
+};
+/**
+ * Converts a JSX <Table>, or a lowercase <table> carrying only widths, to an MDAST table
+ * node with alignment and widths. Returns null for header-less tables since MDAST always
+ * promotes the first row to <thead>.
  */
 const transformTable = (jsx) => {
+    const isLowercase = jsx.name === 'table';
+    if (isLowercase && !lowercaseTableIsConvertible(jsx))
+        return null;
     wrapBareCellsInRow(jsx);
     let hasThead = false;
     visit(jsx, isMDXElement, (child) => {
@@ -107136,6 +107267,7 @@ const transformTable = (jsx) => {
     const { align: alignAttr } = getAttrs(jsx);
     const align = Array.isArray(alignAttr) ? alignAttr : null;
     const rows = [];
+    const widths = [];
     visit(jsx, isMDXElement, (child) => {
         if (child.name !== 'thead' && child.name !== 'tbody')
             return;
@@ -107143,6 +107275,7 @@ const transformTable = (jsx) => {
             if (row.name !== 'tr')
                 return;
             const cells = [];
+            const isHeaderRow = rows.length === 0;
             visit(row, mdxish_jsx_to_mdast_isTableCell, (cell) => {
                 const parsedChildren = unwrapSoleParagraph(cell.children);
                 cells.push({
@@ -107150,6 +107283,8 @@ const transformTable = (jsx) => {
                     children: parsedChildren,
                     position: cell.position,
                 });
+                if (isHeaderRow)
+                    widths.push(getCellWidth(cell));
             });
             rows.push({
                 type: 'tableRow',
@@ -107162,11 +107297,16 @@ const transformTable = (jsx) => {
     const alignArray = align && columnCount > 0
         ? align.slice(0, columnCount).concat(Array.from({ length: Math.max(0, columnCount - align.length) }, () => null))
         : Array.from({ length: columnCount }, () => null);
+    const data = {
+        ...(isLowercase && { lowercaseTable: true }),
+        ...(widths.some(Boolean) && { widths }),
+    };
     return {
         type: 'table',
         align: alignArray,
         position: jsx.position,
         children: rows,
+        ...(Object.keys(data).length > 0 && { data }),
     };
 };
 /**
@@ -107196,6 +107336,7 @@ const COMPONENT_MAP = {
     figure: transformFigure,
     Recipe: transformRecipe,
     Table: transformTable,
+    table: transformTable,
 };
 /**
  * Transform mdxJsxFlowElement nodes, magic block nodes, and HTML figure elements
@@ -107671,6 +107812,28 @@ const restoreBooleanProperties = () => tree => {
 };
 
 
+;// ./processor/transform/mdxish/tables/cell-style.ts
+/** `left` is the browser default, so it's omitted. Lowercase tables get the HTML string form. */
+const cellStyle = (align, width = null, { html = false } = {}) => {
+    if (html) {
+        if (!width)
+            return null;
+        return { type: 'mdxJsxAttribute', name: 'style', value: `width: ${width}` };
+    }
+    const declarations = [];
+    if (align && align !== 'left')
+        declarations.push(`textAlign: ${JSON.stringify(align)}`);
+    if (width)
+        declarations.push(`width: ${JSON.stringify(width)}`);
+    if (declarations.length === 0)
+        return null;
+    return {
+        type: 'mdxJsxAttribute',
+        name: 'style',
+        value: { type: 'mdxJsxAttributeValueExpression', value: `{ ${declarations.join(', ')} }` },
+    };
+};
+
 ;// ./processor/transform/mdxish/tables/gfm-cell-normalization.ts
 /** `<br />` is the only line break a GFM pipe cell can carry, since cells are single-line. */
 const createLineBreak = () => ({
@@ -107709,19 +107872,8 @@ const normalizeCellChildrenForGfm = (cell) => normalizeNodes(cell.children);
 
 
 
+
 const SELF_CLOSING_JSX_REGEX = /^\s*<[A-Z][^>]*\/>\s*$/;
-const mdxish_tables_to_jsx_alignToStyle = (align) => {
-    if (!align || align === 'left')
-        return null;
-    return {
-        type: 'mdxJsxAttribute',
-        name: 'style',
-        value: {
-            type: 'mdxJsxAttributeValueExpression',
-            value: `{ textAlign: "${align}" }`,
-        },
-    };
-};
 const mdxish_tables_to_jsx_isTableCell = (node) => ['tableHead', 'tableCell'].includes(node.type);
 const mdxish_tables_to_jsx_isLiteral = (node) => 'value' in node;
 /**
@@ -107777,12 +107929,17 @@ const mdxishTablesToJsx = () => tree => {
             gfmCells.push([cell, normalized]);
             return undefined;
         });
-        const stayLowercase = table.data?.lowercaseTable === true;
+        const widths = table.data?.widths ?? [];
+        const hasWidths = widths.some(Boolean);
+        // Lowercase cells can carry a width but not an alignment, so an aligned table becomes <Table>
+        const hasAlignment = table.align.some(align => align && align !== 'left');
+        const stayLowercase = table.data?.lowercaseTable === true && !hasAlignment;
         // 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 
+        // 2. The original table is not lowercase HTML <table>, because we want to
         // preserve original tables as much as possible
-        if (!requiresJsxTable && !stayLowercase) {
+        // 3. No column has a width, which GFM can't express
+        if (!requiresJsxTable && !stayLowercase && !hasWidths) {
             gfmCells.forEach(([cell, children]) => {
                 cell.children = children;
             });
@@ -107794,7 +107951,8 @@ const mdxishTablesToJsx = () => tree => {
         if (!headerRow)
             return;
         visit(table, mdxish_tables_to_jsx_isTableCell, flattenBreaksToNewlines);
-        const styles = table.align.map(mdxish_tables_to_jsx_alignToStyle);
+        const headerStyles = table.align.map((align, i) => cellStyle(align, widths[i] ?? null, { html: stayLowercase }));
+        const bodyStyles = table.align.map(align => cellStyle(align, null, { html: stayLowercase }));
         const head = {
             attributes: [],
             type: 'mdxJsxFlowElement',
@@ -107810,7 +107968,7 @@ const mdxishTablesToJsx = () => tree => {
                             type: 'mdxJsxFlowElement',
                             name: 'th',
                             children: cell.children,
-                            ...(styles[cellIndex] && { attributes: [styles[cellIndex]] }),
+                            ...(headerStyles[cellIndex] && { attributes: [headerStyles[cellIndex]] }),
                         };
                     }),
                 },
@@ -107830,7 +107988,7 @@ const mdxishTablesToJsx = () => tree => {
                             type: 'mdxJsxFlowElement',
                             name: 'td',
                             children: cell.children,
-                            ...(styles[cellIndex] && { attributes: [styles[cellIndex]] }),
+                            ...(bodyStyles[cellIndex] && { attributes: [bodyStyles[cellIndex]] }),
                         };
                     }),
                 };
@@ -108116,6 +108274,7 @@ function loadComponents() {
 
 
 
+
 
 
 const defaultTransformers = [
@@ -108271,7 +108430,8 @@ function mdxish(mdContent, opts = {}) {
         .use(rehypeMdxishComponents, {
         components,
         processMarkdown: (markdown) => mdxish(markdown, opts),
-    });
+    })
+        .use(safeMode ? enforceSafeModeHtmlBlocks : undefined); // Force safeMode on every HTMLBlock; runs last so every producer is covered
     const vfile = new VFile({ value: parserReadyContent });
     const mdast = processor.parse(parserReadyContent);
     const hast = processor.runSync(mdast, vfile);
@@ -109243,7 +109403,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__(9607);
+/******/ 	let __webpack_exports__ = __webpack_require__(9171);
 /******/ 	
 /******/ 	return __webpack_exports__;
 /******/ })()