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];