diff --git a/__tests__/__snapshots__/flavored-parsers.test.js.snap b/__tests__/__snapshots__/flavored-parsers.test.js.snap
index 95ef39ac6..a593aa689 100644
--- a/__tests__/__snapshots__/flavored-parsers.test.js.snap
+++ b/__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 [
diff --git a/__tests__/browser/ci/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-callout-tests-without-surprises-1-snap.png b/__tests__/browser/ci/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-callout-tests-without-surprises-1-snap.png
new file mode 100644
index 000000000..857ea886e
Binary files /dev/null and b/__tests__/browser/ci/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-callout-tests-without-surprises-1-snap.png differ
diff --git a/__tests__/browser/markdown.test.js b/__tests__/browser/markdown.test.js
index 800891d47..04cb12bb6 100644
--- a/__tests__/browser/markdown.test.js
+++ b/__tests__/browser/markdown.test.js
@@ -11,6 +11,7 @@ describe('visual regression tests', () => {
const docs = [
'callouts',
+ 'calloutTests',
'codeBlocks',
'embeds',
'features',
diff --git a/__tests__/flavored-parsers.test.js b/__tests__/flavored-parsers.test.js
index 03549ddaa..7ddcf8f09 100644
--- a/__tests__/flavored-parsers.test.js
+++ b/__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 =
diff --git a/__tests__/flavored-parsers/__snapshots__/callouts.test.js.snap b/__tests__/flavored-parsers/__snapshots__/callouts.test.js.snap
new file mode 100644
index 000000000..774396e43
--- /dev/null
+++ b/__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": "",
+ },
+ Object {
+ "type": "text",
+ "value": "With html!",
+ },
+ Object {
+ "type": "html",
+ "value": "",
+ },
+ ],
+ "type": "paragraph",
+ },
+ ],
+ "data": Object {
+ "hName": "rdme-callout",
+ "hProperties": Object {
+ "icon": "ℹ",
+ "theme": "default",
+ "title": "️ Info Callout",
+ "value": "With html!",
+ },
+ },
+ "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",
+}
+`;
diff --git a/__tests__/flavored-parsers/callouts.test.js b/__tests__/flavored-parsers/callouts.test.js
new file mode 100644
index 000000000..382d45d37
--- /dev/null
+++ b/__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
+>
+> With html!
+ `;
+
+ expect(mdast(text)).toMatchSnapshot();
+ });
+ });
+});
diff --git a/docs/callout-tests.md b/docs/callout-tests.md
new file mode 100644
index 000000000..6c0ce91f2
--- /dev/null
+++ b/docs/callout-tests.md
@@ -0,0 +1,9 @@
+---
+title: "Callouts Tests"
+slug: "callouts-tests"
+hidden: true
+---
+
+> 👍 Success
+>
+> Vitae reprehenderit at aliquid error voluptates eum dignissimos.
diff --git a/example/Fixtures/docs.js b/example/Fixtures/docs.js
index f9164b807..12a34c35d 100644
--- a/example/Fixtures/docs.js
+++ b/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,
diff --git a/processor/parse/flavored/callout.js b/processor/parse/flavored/callout.js
index 4f0bfc142..a5791a357 100644
--- a/processor/parse/flavored/callout.js
+++ b/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];