@readme/markdown 6.75.0-beta.59 → 6.75.0-beta.60

package/components/HTMLBlock/index.tsx

@@ -13,8 +13,10 @@ const extractScripts = (html: string = ''): [string, () => void] => {
   return [cleaned, () => scripts.map(js => window.eval(js))];
 };
 
-const HTMLBlock = ({ children = '', runScripts = false, safeMode = false }) => {
+const HTMLBlock = ({ children = '', runScripts, safeMode = false }) => {
   let html = children;
+  runScripts = typeof runScripts !== 'boolean' ? (runScripts === 'true' ? true : false) : runScripts;
+
   if (typeof html !== 'string') html = renderToStaticMarkup(html);
   const [cleanedHtml, exec] = extractScripts(html);
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const HTMLBlock: ({ children, runScripts, safeMode }: {
     children?: string;
-    runScripts?: boolean;
+    runScripts: any;
     safeMode?: boolean;
 }) => React.JSX.Element;
 export default HTMLBlock;

package/dist/main.js

@@ -14398,8 +14398,9 @@ const extractScripts = (html = '') => {
     const cleaned = html.replace(MATCH_SCRIPT_TAGS, '');
     return [cleaned, () => scripts.map(js => window.eval(js))];
 };
-const HTMLBlock = ({ children = '', runScripts = false, safeMode = false }) => {
+const HTMLBlock = ({ children = '', runScripts, safeMode = false }) => {
     let html = children;
+    runScripts = typeof runScripts !== 'boolean' ? (runScripts === 'true' ? true : false) : runScripts;
     if (typeof html !== 'string')
         html = (0,server_browser/* renderToStaticMarkup */.qV)(html);
     const [cleanedHtml, exec] = extractScripts(html);
@@ -65576,29 +65577,121 @@ const injectComponents = (opts) => () => 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
 
@@ -65611,6 +65704,7 @@ const readme_components_types = {
     EmbedBlock: NodeTypes['embed-block'],
     Glossary: NodeTypes['glossary'],
     ImageBlock: NodeTypes['image-block'],
+    HTMLBlock: NodeTypes.htmlBlock,
     Table: 'table',
     Variable: NodeTypes['variable'],
     td: 'tableCell',
@@ -65652,6 +65746,22 @@ const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
         };
         parent.children[index] = mdNode;
     }
+    else if (node.name === 'HTMLBlock') {
+        const { position } = node;
+        const children = getChildren(node);
+        const { runScripts } = getAttrs(node);
+        const html = formatHTML(children.map(({ value }) => value).join(''));
+        const mdNode = {
+            position,
+            children: [{ type: 'text', value: html }],
+            type: NodeTypes.htmlBlock,
+            data: {
+                hName: 'html-block',
+                hProperties: Object.assign(Object.assign({}, (runScripts && { runScripts })), { html }),
+            },
+        };
+        parent.children[index] = mdNode;
+    }
     else if (node.name === 'Table') {
         const { children, position } = node;
         const { align = [...new Array(node.children.length)].map(() => null) } = getAttrs(node);
@@ -93460,11 +93570,12 @@ const gemoji_gemoji = (node) => `:${node.name}:`;
 /* harmony default export */ const compile_gemoji = (gemoji_gemoji);
 
 ;// CONCATENATED MODULE: ./processor/compile/html-block.ts
+
 const htmlBlock = (node) => {
-    var _a;
-    const html = node.data.hProperties.html;
-    const attributes = Object.keys((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties).map(key => { var _a; return `${key}="${(_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties[key]}"`; }).join(' ');
-    return `<HTMLBlock${attributes && ' ' + attributes}>{\`${html}\`}</HTMLBlock>`;
+    const { runScripts, html } = getHProps(node);
+    return `<HTMLBlock${runScripts != null ? ` runScripts="${runScripts}"` : ''}>{\`
+${reformatHTML(html)}
+\`}</HTMLBlock>`;
 };
 /* harmony default export */ const html_block = (htmlBlock);
 
@@ -94471,7 +94582,7 @@ const makeUseMDXComponents = (more = {}) => {
         map[`h${index + 1}`] = components_Heading((index + 1));
         return map;
     }, {});
-    const components = Object.assign(Object.assign(Object.assign(Object.assign({}, components_namespaceObject), { Variable: (variable_default()), code: components_Code, embed: components_Embed, img: components_Image, table: components_Table, 'code-tabs': components_CodeTabs, 'html-block': components_HTMLBlock, 'embed-block': components_Embed, 'image-block': components_Image, 'table-of-contents': components_TableOfContents }), headings), more);
+    const components = Object.assign(Object.assign(Object.assign(Object.assign({}, components_namespaceObject), { Variable: (variable_default()), code: components_Code, embed: components_Embed, img: components_Image, table: components_Table, 'code-tabs': components_CodeTabs, 'embed-block': components_Embed, 'html-block': components_HTMLBlock, 'image-block': components_Image, 'table-of-contents': components_TableOfContents }), headings), more);
     return () => components;
 };
 const run_run = async (string, _opts = {}) => {

package/dist/main.node.js

@@ -14288,8 +14288,9 @@ const extractScripts = (html = '') => {
     const cleaned = html.replace(MATCH_SCRIPT_TAGS, '');
     return [cleaned, () => scripts.map(js => window.eval(js))];
 };
-const HTMLBlock = ({ children = '', runScripts = false, safeMode = false }) => {
+const HTMLBlock = ({ children = '', runScripts, safeMode = false }) => {
     let html = children;
+    runScripts = typeof runScripts !== 'boolean' ? (runScripts === 'true' ? true : false) : runScripts;
     if (typeof html !== 'string')
         html = (0,server_namespaceObject.renderToStaticMarkup)(html);
     const [cleanedHtml, exec] = extractScripts(html);
@@ -67029,29 +67030,121 @@ const injectComponents = (opts) => () => 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
 
@@ -67064,6 +67157,7 @@ const readme_components_types = {
     EmbedBlock: NodeTypes['embed-block'],
     Glossary: NodeTypes['glossary'],
     ImageBlock: NodeTypes['image-block'],
+    HTMLBlock: NodeTypes.htmlBlock,
     Table: 'table',
     Variable: NodeTypes['variable'],
     td: 'tableCell',
@@ -67105,6 +67199,22 @@ const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
         };
         parent.children[index] = mdNode;
     }
+    else if (node.name === 'HTMLBlock') {
+        const { position } = node;
+        const children = utils_getChildren(node);
+        const { runScripts } = getAttrs(node);
+        const html = formatHTML(children.map(({ value }) => value).join(''));
+        const mdNode = {
+            position,
+            children: [{ type: 'text', value: html }],
+            type: NodeTypes.htmlBlock,
+            data: {
+                hName: 'html-block',
+                hProperties: Object.assign(Object.assign({}, (runScripts && { runScripts })), { html }),
+            },
+        };
+        parent.children[index] = mdNode;
+    }
     else if (node.name === 'Table') {
         const { children, position } = node;
         const { align = [...new Array(node.children.length)].map(() => null) } = getAttrs(node);
@@ -94913,11 +95023,12 @@ const gemoji_gemoji = (node) => `:${node.name}:`;
 /* harmony default export */ const compile_gemoji = (gemoji_gemoji);
 
 ;// CONCATENATED MODULE: ./processor/compile/html-block.ts
+
 const htmlBlock = (node) => {
-    var _a;
-    const html = node.data.hProperties.html;
-    const attributes = Object.keys((_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties).map(key => { var _a; return `${key}="${(_a = node.data) === null || _a === void 0 ? void 0 : _a.hProperties[key]}"`; }).join(' ');
-    return `<HTMLBlock${attributes && ' ' + attributes}>{\`${html}\`}</HTMLBlock>`;
+    const { runScripts, html } = getHProps(node);
+    return `<HTMLBlock${runScripts != null ? ` runScripts="${runScripts}"` : ''}>{\`
+${reformatHTML(html)}
+\`}</HTMLBlock>`;
 };
 /* harmony default export */ const html_block = (htmlBlock);
 
@@ -95924,7 +96035,7 @@ const makeUseMDXComponents = (more = {}) => {
         map[`h${index + 1}`] = components_Heading((index + 1));
         return map;
     }, {});
-    const components = Object.assign(Object.assign(Object.assign(Object.assign({}, components_namespaceObject), { Variable: (dist_default()), code: components_Code, embed: components_Embed, img: components_Image, table: components_Table, 'code-tabs': components_CodeTabs, 'html-block': components_HTMLBlock, 'embed-block': components_Embed, 'image-block': components_Image, 'table-of-contents': components_TableOfContents }), headings), more);
+    const components = Object.assign(Object.assign(Object.assign(Object.assign({}, components_namespaceObject), { Variable: (dist_default()), code: components_Code, embed: components_Embed, img: components_Image, table: components_Table, 'code-tabs': components_CodeTabs, 'embed-block': components_Embed, 'html-block': components_HTMLBlock, 'image-block': components_Image, 'table-of-contents': components_TableOfContents }), headings), more);
     return () => components;
 };
 const run_run = async (string, _opts = {}) => {

package/dist/processor/utils.d.ts

@@ -1,7 +1,70 @@
 import { Node } from 'mdast';
 import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx';
-export declare const formatHProps: <T>(node: Node) => T;
+/**
+ * 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
+ */
+export declare const formatHProps: <T>(node: Node) => string;
+/**
+ * Returns the hProperties of a node.
+ *
+ * @template T
+ * @param {Node} node
+ * @returns {T} hProperties
+ */
 export declare const getHProps: <T>(node: Node) => T;
-export declare const getHPropKeys: <T>(node: Node) => string[] | T;
-export declare const getAttrs: <T>(jsx: MdxJsxFlowElement | MdxJsxTextElement) => T;
+/**
+ * Returns array of hProperty keys.
+ *
+ * @template T
+ * @param {Node} node
+ * @returns {Array} array of hProperty keys
+ */
+export declare const getHPropKeys: <T>(node: Node) => any;
+/**
+ * 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
+ */
+export declare const getAttrs: <T>(jsx: MdxJsxFlowElement | MdxJsxTextElement) => any;
+/**
+ * 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
+ */
+export declare const getChildren: <T>(jsx: MdxJsxFlowElement | MdxJsxTextElement) => any;
+/**
+ * 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)}
+ */
 export declare const isMDXElement: (node: Node) => node is MdxJsxFlowElement | MdxJsxTextElement;
+/**
+ * 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
+ */
+export declare const formatHTML: (html: string) => string;
+/**
+ * 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
+ */
+export declare const reformatHTML: (html: string, indent?: number) => string;

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