fix: html in callouts

__tests__/__snapshots__/flavored-parsers.test.js.snap

@@ -1,43 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Parse RDMD Syntax Callouts 1`] = `
-Object {
-  "children": Array [
-    Object {
-      "children": Array [
-        Object {
-          "children": Array [
-            Object {
-              "type": "text",
-              "value": "️ Info Callout",
-            },
-          ],
-          "type": "paragraph",
-        },
-      ],
-      "data": Object {
-        "hName": "rdme-callout",
-        "hProperties": Object {
-          "icon": "ℹ",
-          "theme": "default",
-          "title": "️ Info Callout",
-          "value": "",
-        },
-      },
-      "type": "rdme-callout",
-    },
-    Object {
-      "lang": null,
-      "meta": null,
-      "type": "code",
-      "value": ">
-> Lorem ipsum dolor  sit amet consectetur adipisicing elit.",
-    },
-  ],
-  "type": "root",
-}
-`;
-
 exports[`Parse RDMD Syntax Code Blocks Single Code Block 1`] = `
 Object {
   "children": Array [

__tests__/browser/markdown.test.js

@@ -11,6 +11,7 @@ describe('visual regression tests', () => {
 
     const docs = [
       'callouts',
+      'calloutTests',
       'codeBlocks',
       'embeds',
       'features',

__tests__/flavored-parsers.test.js

@@ -17,13 +17,6 @@ const process = (text, opts = options) =>
     .parse(text);
 
 describe('Parse RDMD Syntax', () => {
-  it('Callouts', () => {
-    const text = `> ℹ️ Info Callout
-    >
-    > Lorem ipsum dolor  sit amet consectetur adipisicing elit.`;
-    expect(process(text)).toMatchSnapshot();
-  });
-
   describe('Code Blocks', () => {
     it('Tabbed Code Block', () => {
       const text =

__tests__/flavored-parsers/__snapshots__/callouts.test.js.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Parse RDMD Callouts edge cases renders html inside a callout 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "children": Array [
+        Object {
+          "children": Array [
+            Object {
+              "type": "text",
+              "value": "️ Info Callout",
+            },
+          ],
+          "type": "paragraph",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "type": "html",
+              "value": "<span>",
+            },
+            Object {
+              "type": "text",
+              "value": "With html!",
+            },
+            Object {
+              "type": "html",
+              "value": "</span>",
+            },
+          ],
+          "type": "paragraph",
+        },
+      ],
+      "data": Object {
+        "hName": "rdme-callout",
+        "hProperties": Object {
+          "icon": "ℹ",
+          "theme": "default",
+          "title": "️ Info Callout",
+          "value": "<span>With html!</span>",
+        },
+      },
+      "type": "rdme-callout",
+    },
+  ],
+  "type": "root",
+}
+`;
+
+exports[`Parse RDMD Callouts renders an info callout 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "children": Array [
+        Object {
+          "children": Array [
+            Object {
+              "type": "text",
+              "value": "️ Info Callout",
+            },
+          ],
+          "type": "paragraph",
+        },
+        Object {
+          "children": Array [
+            Object {
+              "type": "text",
+              "value": "Lorem ipsum dolor  sit amet consectetur adipisicing elit.",
+            },
+          ],
+          "type": "paragraph",
+        },
+      ],
+      "data": Object {
+        "hName": "rdme-callout",
+        "hProperties": Object {
+          "icon": "ℹ",
+          "theme": "default",
+          "title": "️ Info Callout",
+          "value": "Lorem ipsum dolor  sit amet consectetur adipisicing elit.",
+        },
+      },
+      "type": "rdme-callout",
+    },
+  ],
+  "type": "root",
+}
+`;

__tests__/flavored-parsers/callouts.test.js

@@ -0,0 +1,24 @@
+import { mdast } from '../../index';
+
+describe('Parse RDMD Callouts', () => {
+  it('renders an info callout', () => {
+    const text = `
+> ℹ️ Info Callout
+>
+> Lorem ipsum dolor  sit amet consectetur adipisicing elit.`;
+
+    expect(mdast(text)).toMatchSnapshot();
+  });
+
+  describe('edge cases', () => {
+    it('renders html inside a callout', () => {
+      const text = `
+> ℹ️ Info Callout
+>
+> <span>With html!</span>
+      `;
+
+      expect(mdast(text)).toMatchSnapshot();
+    });
+  });
+});

docs/callout-tests.md

@@ -0,0 +1,9 @@
+---
+title: "Callouts Tests"
+slug: "callouts-tests"
+hidden: true
+---
+
+> 👍 Success
+> 
+> <a href="http://www.google.com">Vitae</a> <span>reprehenderit</span> at aliquid error voluptates eum dignissimos.

example/Fixtures/docs.js

@@ -7,6 +7,7 @@ import images from '../../docs/images.md';
 import lists from '../../docs/lists.md';
 import tables from '../../docs/tables.md';
 
+import calloutTests from '../../docs/callout-tests.md';
 import codeBlockTests from '../../docs/code-block-tests.md';
 import tableOfContentsTests from '../../docs/table-of-contents-tests.md';
 import varsTest from '../../docs/variable-tests.md';
@@ -22,6 +23,7 @@ const fixtureMap = Object.entries({
   headings,
   images,
   features,
+  calloutTests,
   codeBlockTests,
   tableOfContentsTests,
   varsTest,

processor/parse/flavored/callout.js

@@ -8,7 +8,7 @@ function tokenizer(eat, value) {
   let [match, icon, title = '', text] = rgx.exec(value);
 
   icon = icon.trim();
-  text = text.replace(/>(?:(\n)|(\s)?)/g, '$1').trim();
+  text = text.replace(/^>(?:(\n)|(\s)?)/gm, '$1').trim();
   title = title.trim();
 
   const style = {
@@ -22,7 +22,6 @@ function tokenizer(eat, value) {
     '\uD83D\uDED1': 'error',
     '\u2049\uFE0F': 'error',
     '\u203C\uFE0F': 'error',
-    // prettier-ignore
     '\u2139\uFE0F': 'info',
     '\u26A0': 'warn',
   }[icon];