@readme/markdown 6.75.0-beta.34 → 6.75.0-beta.35

package/components/Callout/index.tsx

@@ -23,20 +23,20 @@ const themes: Record<string, string> = {
 };
 
 const Callout = (props: Props) => {
-  const { attributes, children, icon, heading } = props;
+  const { attributes, children, icon } = props;
 
   let theme = props.theme || themes[icon] || 'default';
+  const [heading, ...body] = Array.isArray(children) ? children : [children];
+  const empty = !heading.props.children;
 
   return (
     // @ts-ignore
     <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
-      {heading && (
-        <h3 className={`callout-heading${heading ? '' : ' empty'}`}>
-          <span className="callout-icon">{icon}</span>
-          {heading}
-        </h3>
-      )}
-      {children}
+      <h3 className={`callout-heading${empty ? ' empty' : ''}`}>
+        <span className="callout-icon">{icon}</span>
+        {!empty && heading}
+      </h3>
+      {body}
     </blockquote>
   );
 };

package/dist/main.js

@@ -60974,15 +60974,17 @@ const themes = {
     '\u26A0': 'warn',
 };
 const Callout = (props) => {
-    const { attributes, children, icon, heading } = props;
+    const { attributes, children, icon } = props;
     let theme = props.theme || themes[icon] || 'default';
+    const [heading, ...body] = Array.isArray(children) ? children : [children];
+    const empty = !heading.props.children;
     return (
     // @ts-ignore
     external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("blockquote", Object.assign({}, attributes, { className: `callout callout_${theme}`, theme: icon }),
-        heading && (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("h3", { className: `callout-heading${heading ? '' : ' empty'}` },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("h3", { className: `callout-heading${empty ? ' empty' : ''}` },
             external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("span", { className: "callout-icon" }, icon),
-            heading)),
-        children));
+            !empty && heading),
+        body));
 };
 /* harmony default export */ const components_Callout = (Callout);
 
@@ -61431,26 +61433,20 @@ const callouts_regex = `^(${emoji_regex().source}|⚠)(\\s+|$)`;
 const calloutTransformer = () => {
     return (tree) => {
         visit(tree, 'blockquote', (node) => {
-            try {
-                if (!(node.children[0].type === 'paragraph' && node.children[0].children[0].type === 'text'))
-                    return;
-                const startText = node.children[0].children[0].value;
-                const [match, icon] = startText.match(callouts_regex) || [];
-                if (icon && match) {
-                    const heading = startText.slice(match.length);
-                    node.children.shift();
-                    node.type = NodeTypes.callout;
-                    node.data = {
-                        hName: 'Callout',
-                        hProperties: {
-                            heading,
-                            icon,
-                        },
-                    };
-                }
-            }
-            catch (e) {
-                console.log(e);
+            if (!(node.children[0].type === 'paragraph' && node.children[0].children[0].type === 'text'))
+                return;
+            const startText = node.children[0].children[0].value;
+            const [match, icon] = startText.match(callouts_regex) || [];
+            if (icon && match) {
+                const heading = startText.slice(match.length);
+                node.children[0].children[0].value = heading;
+                node.type = NodeTypes.callout;
+                node.data = {
+                    hName: 'Callout',
+                    hProperties: {
+                        icon,
+                    },
+                };
             }
         });
     };
@@ -78515,10 +78511,12 @@ const gemojiTransformer = () => (tree) => {
 
 ;// CONCATENATED MODULE: ./processor/transform/readme-components.ts
 
+
+
 const readme_components_types = {
-    Callout: 'rdme-callout',
+    Callout: NodeTypes['callout'],
     Code: 'code',
-    CodeTabs: 'code-tabs',
+    CodeTabs: NodeTypes['codeTabs'],
     Image: 'image',
     Table: 'table',
     tr: 'tableRow',
@@ -78531,6 +78529,7 @@ const attributes = (jsx) => jsx.attributes.reduce((memo, attr) => {
     return memo;
 }, {});
 const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
+    var _a;
     if (node.name in components)
         return;
     if (node.name === 'Code') {
@@ -78572,6 +78571,21 @@ const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
         };
         parent.children[index] = mdNode;
     }
+    else if (node.name === 'Callout') {
+        const { heading, icon } = attributes(node);
+        const child = mdast(heading);
+        // @ts-ignore
+        const mdNode = {
+            children: [(_a = child === null || child === void 0 ? void 0 : child.children) === null || _a === void 0 ? void 0 : _a[0], ...node.children].filter(Boolean),
+            type: NodeTypes.callout,
+            data: {
+                hName: node.name,
+                hProperties: { icon },
+            },
+            position: node.position,
+        };
+        parent.children[index] = mdNode;
+    }
     else if (node.name in readme_components_types) {
         const hProperties = attributes(node);
         // @ts-ignore
@@ -78609,9 +78623,29 @@ const readmeComponents = (opts) => () => tree => {
 
 /* harmony default export */ const transform = ([callouts, code_tabs, transform_embeds, gemoji_]);
 
-;// CONCATENATED MODULE: ./processor/compile/gemoji.ts
-const gemoji_gemoji = (node) => `:${node.name}:`;
-/* harmony default export */ const compile_gemoji = (gemoji_gemoji);
+;// CONCATENATED MODULE: ./processor/compile/callout.ts
+
+const callout = (node, _, state, info) => {
+    const tracker = state.createTracker(info);
+    const exit = state.enter(NodeTypes.callout);
+    state.join.push(() => 0);
+    const value = state.containerFlow(node, tracker.current());
+    state.join.pop();
+    exit();
+    let lines = value.split('\n');
+    if (lines.length > 1) {
+        const [first, ...rest] = lines;
+        lines = [first, '', ...rest];
+    }
+    let content = lines
+        .map((line, index) => (index > 0 ? `>${line.length > 0 ? ' ' : ''}${line}` : line))
+        .join('\n');
+    if (content.match(/^[^\n]/))
+        content = ' ' + content;
+    const block = `> ${node.data.hProperties.icon}${content}`;
+    return block;
+};
+/* harmony default export */ const compile_callout = (callout);
 
 ;// CONCATENATED MODULE: ./processor/compile/code-tabs.ts
 
@@ -78637,6 +78671,10 @@ const embed_embed = (node) => {
 };
 /* harmony default export */ const compile_embed = (embed_embed);
 
+;// CONCATENATED MODULE: ./processor/compile/gemoji.ts
+const gemoji_gemoji = (node) => `:${node.name}:`;
+/* harmony default export */ const compile_gemoji = (gemoji_gemoji);
+
 ;// CONCATENATED MODULE: ./processor/compile/html-block.ts
 const htmlBlock = (node) => {
     const html = node.data.hProperties.html;
@@ -78662,10 +78700,12 @@ const compile_image_image = (node) => {
 
 
 
+
 function compilers() {
     const data = this.data();
     const toMarkdownExtensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
     const handlers = {
+        [NodeTypes.callout]: compile_callout,
         [NodeTypes.emoji]: compile_gemoji,
         [NodeTypes.codeTabs]: compile_code_tabs,
         [NodeTypes.embed]: compile_embed,
@@ -78674,7 +78714,6 @@ function compilers() {
     };
     toMarkdownExtensions.push({ extensions: [{ handlers }] });
 }
-;
 /* harmony default export */ const processor_compile = (compilers);
 
 ;// CONCATENATED MODULE: ./errors/mdx-syntax-error.ts
@@ -78749,7 +78788,7 @@ const reactProcessor = (opts = {}) => {
 };
 const index_compile = (text, opts = {}) => {
     try {
-        return String(compileSync(text, Object.assign({ outputFormat: 'function-body', providerImportSource: '#', remarkPlugins }, opts))).replace(/await import\(_resolveDynamicMdxSpecifier\('react'\)\)/, 'arguments[0].imports.React');
+        return String(compileSync(text, Object.assign({ outputFormat: 'function-body', providerImportSource: '#', remarkPlugins }, opts))).replace(/await import\(_resolveDynamicMdxSpecifier\(('react'|"react")\)\)/, 'arguments[0].imports.React');
     }
     catch (error) {
         console.error(error);

package/dist/main.node.js

@@ -58257,15 +58257,17 @@ const themes = {
     '\u26A0': 'warn',
 };
 const Callout = (props) => {
-    const { attributes, children, icon, heading } = props;
+    const { attributes, children, icon } = props;
     let theme = props.theme || themes[icon] || 'default';
+    const [heading, ...body] = Array.isArray(children) ? children : [children];
+    const empty = !heading.props.children;
     return (
     // @ts-ignore
     react.createElement("blockquote", Object.assign({}, attributes, { className: `callout callout_${theme}`, theme: icon }),
-        heading && (react.createElement("h3", { className: `callout-heading${heading ? '' : ' empty'}` },
+        react.createElement("h3", { className: `callout-heading${empty ? ' empty' : ''}` },
             react.createElement("span", { className: "callout-icon" }, icon),
-            heading)),
-        children));
+            !empty && heading),
+        body));
 };
 /* harmony default export */ const components_Callout = (Callout);
 
@@ -63591,26 +63593,20 @@ const callouts_regex = `^(${emoji_regex().source}|⚠)(\\s+|$)`;
 const calloutTransformer = () => {
     return (tree) => {
         visit(tree, 'blockquote', (node) => {
-            try {
-                if (!(node.children[0].type === 'paragraph' && node.children[0].children[0].type === 'text'))
-                    return;
-                const startText = node.children[0].children[0].value;
-                const [match, icon] = startText.match(callouts_regex) || [];
-                if (icon && match) {
-                    const heading = startText.slice(match.length);
-                    node.children.shift();
-                    node.type = NodeTypes.callout;
-                    node.data = {
-                        hName: 'Callout',
-                        hProperties: {
-                            heading,
-                            icon,
-                        },
-                    };
-                }
-            }
-            catch (e) {
-                console.log(e);
+            if (!(node.children[0].type === 'paragraph' && node.children[0].children[0].type === 'text'))
+                return;
+            const startText = node.children[0].children[0].value;
+            const [match, icon] = startText.match(callouts_regex) || [];
+            if (icon && match) {
+                const heading = startText.slice(match.length);
+                node.children[0].children[0].value = heading;
+                node.type = NodeTypes.callout;
+                node.data = {
+                    hName: 'Callout',
+                    hProperties: {
+                        icon,
+                    },
+                };
             }
         });
     };
@@ -80675,10 +80671,12 @@ const gemojiTransformer = () => (tree) => {
 
 ;// CONCATENATED MODULE: ./processor/transform/readme-components.ts
 
+
+
 const readme_components_types = {
-    Callout: 'rdme-callout',
+    Callout: NodeTypes['callout'],
     Code: 'code',
-    CodeTabs: 'code-tabs',
+    CodeTabs: NodeTypes['codeTabs'],
     Image: 'image',
     Table: 'table',
     tr: 'tableRow',
@@ -80691,6 +80689,7 @@ const attributes = (jsx) => jsx.attributes.reduce((memo, attr) => {
     return memo;
 }, {});
 const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
+    var _a;
     if (node.name in components)
         return;
     if (node.name === 'Code') {
@@ -80732,6 +80731,21 @@ const coerceJsxToMd = ({ components = {} } = {}) => (node, index, parent) => {
         };
         parent.children[index] = mdNode;
     }
+    else if (node.name === 'Callout') {
+        const { heading, icon } = attributes(node);
+        const child = mdast(heading);
+        // @ts-ignore
+        const mdNode = {
+            children: [(_a = child === null || child === void 0 ? void 0 : child.children) === null || _a === void 0 ? void 0 : _a[0], ...node.children].filter(Boolean),
+            type: NodeTypes.callout,
+            data: {
+                hName: node.name,
+                hProperties: { icon },
+            },
+            position: node.position,
+        };
+        parent.children[index] = mdNode;
+    }
     else if (node.name in readme_components_types) {
         const hProperties = attributes(node);
         // @ts-ignore
@@ -80769,9 +80783,29 @@ const readmeComponents = (opts) => () => tree => {
 
 /* harmony default export */ const transform = ([callouts, code_tabs, transform_embeds, gemoji_]);
 
-;// CONCATENATED MODULE: ./processor/compile/gemoji.ts
-const gemoji_gemoji = (node) => `:${node.name}:`;
-/* harmony default export */ const compile_gemoji = (gemoji_gemoji);
+;// CONCATENATED MODULE: ./processor/compile/callout.ts
+
+const callout = (node, _, state, info) => {
+    const tracker = state.createTracker(info);
+    const exit = state.enter(NodeTypes.callout);
+    state.join.push(() => 0);
+    const value = state.containerFlow(node, tracker.current());
+    state.join.pop();
+    exit();
+    let lines = value.split('\n');
+    if (lines.length > 1) {
+        const [first, ...rest] = lines;
+        lines = [first, '', ...rest];
+    }
+    let content = lines
+        .map((line, index) => (index > 0 ? `>${line.length > 0 ? ' ' : ''}${line}` : line))
+        .join('\n');
+    if (content.match(/^[^\n]/))
+        content = ' ' + content;
+    const block = `> ${node.data.hProperties.icon}${content}`;
+    return block;
+};
+/* harmony default export */ const compile_callout = (callout);
 
 ;// CONCATENATED MODULE: ./processor/compile/code-tabs.ts
 
@@ -80797,6 +80831,10 @@ const embed_embed = (node) => {
 };
 /* harmony default export */ const compile_embed = (embed_embed);
 
+;// CONCATENATED MODULE: ./processor/compile/gemoji.ts
+const gemoji_gemoji = (node) => `:${node.name}:`;
+/* harmony default export */ const compile_gemoji = (gemoji_gemoji);
+
 ;// CONCATENATED MODULE: ./processor/compile/html-block.ts
 const htmlBlock = (node) => {
     const html = node.data.hProperties.html;
@@ -80822,10 +80860,12 @@ const compile_image_image = (node) => {
 
 
 
+
 function compilers() {
     const data = this.data();
     const toMarkdownExtensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
     const handlers = {
+        [NodeTypes.callout]: compile_callout,
         [NodeTypes.emoji]: compile_gemoji,
         [NodeTypes.codeTabs]: compile_code_tabs,
         [NodeTypes.embed]: compile_embed,
@@ -80834,7 +80874,6 @@ function compilers() {
     };
     toMarkdownExtensions.push({ extensions: [{ handlers }] });
 }
-;
 /* harmony default export */ const processor_compile = (compilers);
 
 ;// CONCATENATED MODULE: ./errors/mdx-syntax-error.ts
@@ -80909,7 +80948,7 @@ const reactProcessor = (opts = {}) => {
 };
 const index_compile = (text, opts = {}) => {
     try {
-        return String(compileSync(text, Object.assign({ outputFormat: 'function-body', providerImportSource: '#', remarkPlugins }, opts))).replace(/await import\(_resolveDynamicMdxSpecifier\('react'\)\)/, 'arguments[0].imports.React');
+        return String(compileSync(text, Object.assign({ outputFormat: 'function-body', providerImportSource: '#', remarkPlugins }, opts))).replace(/await import\(_resolveDynamicMdxSpecifier\(('react'|"react")\)\)/, 'arguments[0].imports.React');
     }
     catch (error) {
         console.error(error);

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

@@ -0,0 +1,3 @@
+import { Callout } from '../../types';
+declare const callout: (node: Callout, _: any, state: any, info: any) => string;
+export default callout;

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