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

package/components/CardsGrid/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import './style.scss';
+
+const Card = ({ children }) => <div className="Card">{children}</div>;
+
+const CardsGrid = ({ columns = 2, children }) => {
+  columns = columns >= 2 ? columns : 2;
+  return (
+    <div className="CardsGrid" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
+      {React.Children.map(children, e => (
+        <Card>{e}</Card>
+      ))}
+    </div>
+  );
+};
+
+export default CardsGrid;

package/components/CardsGrid/style.scss

@@ -0,0 +1,12 @@
+.CardsGrid {
+  display: grid;
+  gap: 20px;
+
+  .Card {
+    padding: 10px;
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(black, 0.1);
+    border-radius: 5px;
+    box-shadow: 0 1px 2px #{rgba(black, 0.05)}, 0 2px 5px #{rgba(black, 0.02)};
+  }
+}

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/components/index.ts

@@ -1,5 +1,6 @@
 export { default as Anchor } from './Anchor';
 export { default as Callout } from './Callout';
+export { default as Cards } from './CardsGrid';
 export { default as Code } from './Code';
 export { default as CodeTabs } from './CodeTabs';
 export { default as Embed } from './Embed';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import './style.scss';
+declare const CardsGrid: ({ columns, children }: {
+    columns?: number;
+    children: any;
+}) => React.JSX.Element;
+export default CardsGrid;

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/components/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Anchor } from './Anchor';
 export { default as Callout } from './Callout';
+export { default as Cards } from './CardsGrid';
 export { default as Code } from './Code';
 export { default as CodeTabs } from './CodeTabs';
 export { default as Embed } from './Embed';

package/dist/main.css

@@ -1,3 +1,4 @@
+.CardsGrid{display:grid;gap:20px}.CardsGrid .Card{padding:10px;backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,.1);border-radius:5px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05),0 2px 5px rgba(0, 0, 0, 0.02)}
 /* BASICS */
 
 .CodeMirror {

package/dist/main.js

@@ -13984,6 +13984,7 @@ __webpack_require__.r(components_namespaceObject);
 __webpack_require__.d(components_namespaceObject, {
   Anchor: () => (components_Anchor),
   Callout: () => (components_Callout),
+  Cards: () => (components_CardsGrid),
   Code: () => (components_Code),
   CodeTabs: () => (components_CodeTabs),
   Embed: () => (components_Embed),
@@ -14211,6 +14212,16 @@ const Callout = (props) => {
 };
 /* harmony default export */ const components_Callout = (Callout);
 
+;// CONCATENATED MODULE: ./components/CardsGrid/index.tsx
+
+
+const Card = ({ children }) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Card" }, children);
+const CardsGrid = ({ columns = 2, children }) => {
+    columns = columns >= 2 ? columns : 2;
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "CardsGrid", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` } }, external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().Children.map(children, e => (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Card, null, e)))));
+};
+/* harmony default export */ const components_CardsGrid = (CardsGrid);
+
 // EXTERNAL MODULE: ./node_modules/copy-to-clipboard/index.js
 var copy_to_clipboard = __webpack_require__(7965);
 var copy_to_clipboard_default = /*#__PURE__*/__webpack_require__.n(copy_to_clipboard);
@@ -14387,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);
@@ -14509,6 +14521,7 @@ function TableOfContents({ children }) {
 
 
 
+
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.to-primitive.js
 var es_symbol_to_primitive = __webpack_require__(6611);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.filter.js
@@ -65564,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
 
@@ -65599,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',
@@ -65640,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);
@@ -93448,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);
 
@@ -94459,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

@@ -8997,6 +8997,7 @@ __webpack_require__.r(components_namespaceObject);
 __webpack_require__.d(components_namespaceObject, {
   Anchor: () => (components_Anchor),
   Callout: () => (components_Callout),
+  Cards: () => (components_CardsGrid),
   Code: () => (components_Code),
   CodeTabs: () => (components_CodeTabs),
   Embed: () => (components_Embed),
@@ -9157,6 +9158,16 @@ const Callout = (props) => {
 };
 /* harmony default export */ const components_Callout = (Callout);
 
+;// CONCATENATED MODULE: ./components/CardsGrid/index.tsx
+
+
+const Card = ({ children }) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "Card" }, children);
+const CardsGrid = ({ columns = 2, children }) => {
+    columns = columns >= 2 ? columns : 2;
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "CardsGrid", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` } }, external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().Children.map(children, e => (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Card, null, e)))));
+};
+/* harmony default export */ const components_CardsGrid = (CardsGrid);
+
 // EXTERNAL MODULE: ./node_modules/copy-to-clipboard/index.js
 var copy_to_clipboard = __webpack_require__(965);
 var copy_to_clipboard_default = /*#__PURE__*/__webpack_require__.n(copy_to_clipboard);
@@ -14277,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);
@@ -14399,6 +14411,7 @@ function TableOfContents({ children }) {
 
 
 
+
 ;// CONCATENATED MODULE: ./options.js
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -67017,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
 
@@ -67052,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',
@@ -67093,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);
@@ -94901,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);
 
@@ -95912,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.58",
+  "version": "6.75.0-beta.60",
   "main": "dist/main.node.js",
   "types": "dist/index.d.ts",
   "browser": "dist/main.js",