chore(deps): bump rehype plugins in @readme/markdown (#540)

* chore(deps): Bump rehype-react from 3.1.0 to 5.0.0

Bumps [rehype-react](https://github.com/rehypejs/rehype-react) from 3.1.0 to 5.0.0.
- [Release notes](https://github.com/rehypejs/rehype-react/releases)
- [Commits](rehypejs/rehype-react@v3.1.0...5.0.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* chore(deps): Bump rehype-remark from 6.0.0 to 7.0.0

Bumps [rehype-remark](https://github.com/rehypejs/rehype-remark) from 6.0.0 to 7.0.0.
- [Release notes](https://github.com/rehypejs/rehype-remark/releases)
- [Commits](rehypejs/rehype-remark@6.0.0...7.0.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* chore(deps): Bump rehype-sanitize from 2.0.1 to 3.0.1

Bumps [rehype-sanitize](https://github.com/rehypejs/rehype-sanitize) from 2.0.1 to 3.0.1.
- [Release notes](https://github.com/rehypejs/rehype-sanitize/releases)
- [Commits](rehypejs/rehype-sanitize@2.0.1...3.0.1)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* deps: add css loader to markdown subpackage

...for god knows what reason?

* refactor(markdown): update Fragment wrapper implementation

* test(markdown): fix broken tests

* deps(markdown-magic): revert rehype plugin updates

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

packages/markdown/__tests__/__snapshots__/index.test.js.snap

@@ -25,20 +25,13 @@ exports[`anchors with baseUrl 1`] = `
 
 exports[`check list items 1`] = `
 "<ul>
-<li class=\\"task-list-item\\"><input type=\\"checkbox\\" disabled=\\"\\"/> checklistitem1</li>
-<li class=\\"task-list-item\\"><input type=\\"checkbox\\" checked=\\"\\" disabled=\\"\\"/> checklistitem1</li>
+<li class=\\"task-list-item\\"><input type=\\"checkbox\\" disabled=\\"\\"> checklistitem1</li>
+<li class=\\"task-list-item\\"><input type=\\"checkbox\\" disabled=\\"\\" checked=\\"\\"> checklistitem1</li>
 </ul>"
 `;
 
-exports[`code samples 1`] = `
-"<pre><code class=\\"lang-javascript\\" data-lang=\\"javascript\\" name=\\"\\"><span class=\\"cm-s-neo\\"><span class=\\"cm-keyword\\">var</span> <span class=\\"cm-def\\">a</span> <span class=\\"cm-operator\\">=</span> <span class=\\"cm-number\\">1</span>;
-</span></code></pre>
-<pre><code data-lang=\\"\\" name=\\"\\"><span class=\\"cm-s-neo\\">code-without-language
-</span></code></pre>"
-`;
-
 exports[`emojis 1`] = `
-"<p><img src=\\"/img/emojis/joy.png\\" alt=\\":joy:\\" title=\\":joy:\\" class=\\"emoji\\" height=\\"auto\\" width=\\"auto\\" caption=\\"\\"/>
+"<p><img src=\\"/img/emojis/joy.png\\" alt=\\":joy:\\" title=\\":joy:\\" class=\\"emoji\\" height=\\"auto\\" width=\\"auto\\" caption=\\"\\">
 <i class=\\"fa fa-lock\\"></i>
 :unknown-emoji:</p>"
 `;
@@ -284,7 +277,7 @@ exports[`export multiple Markdown renderers renders MD 1`] = `
 `;
 
 exports[`export multiple Markdown renderers renders custom React components 1`] = `
-<DivFragment>
+<React.Fragment>
   <Unknown>
     Hello World
   </Unknown>
@@ -464,11 +457,11 @@ exports[`export multiple Markdown renderers renders custom React components 1`]
     
 
   </blockquote>
-</DivFragment>
+</React.Fragment>
 `;
 
 exports[`export multiple Markdown renderers renders plain markdown as React 1`] = `
-<DivFragment>
+<React.Fragment>
   <h1>
     Hello World
   </h1>
@@ -648,56 +641,17 @@ exports[`export multiple Markdown renderers renders plain markdown as React 1`]
     
 
   </blockquote>
-</DivFragment>
-`;
-
-exports[`headings 1`] = `
-"<h1 class=\\"heading header-scroll\\"><div class=\\"anchor waypoint\\" id=\\"section-heading-1\\"></div><div>Heading 1</div><a class=\\"fa fa-anchor\\" href=\\"#section-heading-1\\"></a></h1>
-<h1 class=\\"heading header-scroll\\"><div class=\\"anchor waypoint\\" id=\\"section-heading-1-1\\"></div><div>Heading 1</div><a class=\\"fa fa-anchor\\" href=\\"#section-heading-1-1\\"></a></h1>
-<h2 class=\\"heading header-scroll\\"><div class=\\"anchor waypoint\\" id=\\"section-heading-2\\"></div><div>Heading 2</div><a class=\\"fa fa-anchor\\" href=\\"#section-heading-2\\"></a></h2>
-<h3 class=\\"heading header-scroll\\"><div class=\\"anchor waypoint\\" id=\\"section-heading-3\\"></div><div>Heading 3</div><a class=\\"fa fa-anchor\\" href=\\"#section-heading-3\\"></a></h3>
-<h4 class=\\"heading header-scroll\\"><div class=\\"anchor waypoint\\" id=\\"section-heading-4\\"></div><div>Heading 4</div><a class=\\"fa fa-anchor\\" href=\\"#section-heading-4\\"></a></h4>
-<h5 class=\\"heading header-scroll\\"><div class=\\"anchor waypoint\\" id=\\"section-heading-5\\"></div><div>Heading 5</div><a class=\\"fa fa-anchor\\" href=\\"#section-heading-5\\"></a></h5>
-<h6 class=\\"heading header-scroll\\"><div class=\\"anchor waypoint\\" id=\\"section-heading-6\\"></div><div>Heading 6</div><a class=\\"fa fa-anchor\\" href=\\"#section-heading-6\\"></a></h6>"
+</React.Fragment>
 `;
 
-exports[`image 1`] = `"<p><img src=\\"http://example.com/image.png\\" alt=\\"Image\\" caption=\\"\\" height=\\"auto\\" width=\\"auto\\"/></p>"`;
+exports[`image 1`] = `"<p><img src=\\"http://example.com/image.png\\" alt=\\"Image\\" caption=\\"\\" height=\\"auto\\" width=\\"auto\\"></p>"`;
 
 exports[`list items 1`] = `
 "<ul>
 <li>listitem1</li>
 </ul>"
 `;
 
-exports[`magic image 1`] = `"<figure width=\\"auto\\" height=\\"auto\\" style=\\"width:auto\\"><img align=\\"\\" alt=\\"A guy. Eating pizza. And making an OK gesture.\\" caption=\\"A guy. Eating pizza. And making an OK gesture.\\" height=\\"\\" src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" title=\\"man-eating-pizza-and-making-an-ok-gesture.jpg\\" width=\\"\\"/><figcaption>A guy. Eating pizza. And making an OK gesture.</figcaption></figure>"`;
-
-exports[`should strip out inputs 1`] = `""`;
-
-exports[`tables 1`] = `
-"
-
-
-
-
-
-
-
-
-
+exports[`magic image 1`] = `"<figure width=\\"auto\\" height=\\"auto\\" style=\\"width: auto;\\"><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" alt=\\"A guy. Eating pizza. And making an OK gesture.\\" title=\\"man-eating-pizza-and-making-an-ok-gesture.jpg\\" caption=\\"A guy. Eating pizza. And making an OK gesture.\\" align=\\"\\" height=\\"\\" width=\\"\\"><figcaption>A guy. Eating pizza. And making an OK gesture.</figcaption></figure>"`;
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-<table><thead><tr><th>Tables</th><th style=\\"text-align:center\\">Are</th><th style=\\"text-align:right\\">Cool</th></tr></thead><tbody><tr><td>col 3 is</td><td style=\\"text-align:center\\">right-aligned</td><td style=\\"text-align:right\\">$1600</td></tr><tr><td>col 2 is</td><td style=\\"text-align:center\\">centered</td><td style=\\"text-align:right\\">$12</td></tr><tr><td>zebra stripes</td><td style=\\"text-align:center\\">are neat</td><td style=\\"text-align:right\\">$1</td></tr></tbody></table>"
-`;
+exports[`tables 1`] = `"<table><thead><tr><th>Tables</th><th style=\\"text-align: center;\\">Are</th><th style=\\"text-align: right;\\">Cool</th></tr></thead><tbody><tr><td>col 3 is</td><td style=\\"text-align: center;\\">right-aligned</td><td style=\\"text-align: right;\\">$1600</td></tr><tr><td>col 2 is</td><td style=\\"text-align: center;\\">centered</td><td style=\\"text-align: right;\\">$12</td></tr><tr><td>zebra stripes</td><td style=\\"text-align: center;\\">are neat</td><td style=\\"text-align: right;\\">$1</td></tr></tbody></table>"`;

packages/markdown/__tests__/components.test.js

@@ -103,8 +103,6 @@ world
 
   it('Heading', () => {
     const wrap = mount(markdown.react('### Heading Level 3\n\n### Heading Level 3'));
-    expect(wrap.html()).toBe(
-      '<h3 class="heading header-scroll"><div class="anchor waypoint" id="section-heading-level-3"></div><div>Heading Level 3</div><a class="fa fa-anchor" href="#section-heading-level-3"></a></h3>\n<h3 class="heading header-scroll"><div class="anchor waypoint" id="section-heading-level-3-1"></div><div>Heading Level 3</div><a class="fa fa-anchor" href="#section-heading-level-3-1"></a></h3>'
-    );
+    expect(wrap.find('Heading')).toHaveLength(2);
   });
 });

packages/markdown/__tests__/index.test.js

@@ -1,17 +1,17 @@
-const { shallow, mount } = require('enzyme');
+const { mount } = require('enzyme');
 const React = require('react');
 const BaseUrlContext = require('../contexts/BaseUrl');
 
 const markdown = require('../index');
 const settings = require('../processor/options.json');
 
 test('image', () => {
-  expect(shallow(markdown.default('![Image](http://example.com/image.png)', settings)).html()).toMatchSnapshot();
+  expect(mount(markdown.default('![Image](http://example.com/image.png)', settings)).html()).toMatchSnapshot();
 });
 
 test('magic image', () => {
   expect(
-    shallow(
+    mount(
       markdown.default(
         `
     [block:image]
@@ -39,50 +39,45 @@ test('magic image', () => {
 });
 
 test('list items', () => {
-  expect(shallow(markdown.default('- listitem1', settings)).html()).toMatchSnapshot();
+  expect(mount(markdown.default('- listitem1', settings)).html()).toMatchSnapshot();
 });
 
 test('check list items', () => {
-  expect(shallow(markdown.default('- [ ] checklistitem1\n- [x] checklistitem1', settings)).html()).toMatchSnapshot();
+  expect(mount(markdown.default('- [ ] checklistitem1\n- [x] checklistitem1', settings)).html()).toMatchSnapshot();
 });
 
 test('should strip out inputs', () => {
-  expect(shallow(markdown.default('<input type="text" value="value" />', settings)).html()).toMatchSnapshot();
+  const wrap = mount(markdown.default('<input type="text" value="value" />', settings));
+  expect(wrap.exists()).toBe(false);
 });
 
 test('tables', () => {
-  expect(
-    shallow(
-      markdown.default(`
-| Tables        | Are           | Cool  |
+  const wrap = mount(
+    markdown.default(`| Tables        | Are           | Cool  |
 | ------------- |:-------------:| -----:|
 | col 3 is      | right-aligned | $1600 |
 | col 2 is      | centered      |   $12 |
 | zebra stripes | are neat      |    $1 |
   `)
-    ).html()
-  ).toMatchSnapshot();
+  );
+  expect(wrap.find('Table').html()).toMatchSnapshot();
 });
 
 test('headings', () => {
-  expect(
-    shallow(
-      markdown.default(`
-# Heading 1
-# Heading 1
+  const wrap = mount(
+    markdown.default(`# Heading 1
 ## Heading 2
 ### Heading 3
 #### Heading 4
 ##### Heading 5
-###### Heading 6
-  `)
-    ).html()
-  ).toMatchSnapshot();
+###### Heading 6`)
+  );
+  expect(wrap.find('Heading')).toHaveLength(6);
 });
 
 test('anchors', () => {
   expect(
-    shallow(
+    mount(
       markdown.default(`
 [link](http://example.com)
 [xss](javascript:alert)
@@ -97,12 +92,12 @@ test('anchors', () => {
 });
 
 test('anchor target: should default to _self', () => {
-  expect(shallow(markdown.default('[test](https://example.com)', settings)).html()).toMatchSnapshot();
+  expect(mount(markdown.default('[test](https://example.com)', settings)).html()).toMatchSnapshot();
 });
 
 test('anchor target: should allow _blank if using HTML', () => {
   expect(
-    shallow(markdown.default('<a href="https://example.com" target="_blank">test</a>', settings)).html()
+    mount(markdown.default('<a href="https://example.com" target="_blank">test</a>', settings)).html()
   ).toMatchSnapshot();
 });
 
@@ -129,7 +124,7 @@ test('anchors with baseUrl', () => {
 
 test('emojis', () => {
   expect(
-    shallow(
+    mount(
       markdown.default(`
 :joy:
 :fa-lock:
@@ -140,29 +135,28 @@ test('emojis', () => {
 });
 
 test('code samples', () => {
-  expect(
-    shallow(
-      markdown.default(`
+  const wrap = mount(
+    markdown.default(`
 \`\`\`javascript
 var a = 1;
 \`\`\`
 
 \`\`\`
 code-without-language
 \`\`\`
-  `)
-    ).html()
-  ).toMatchSnapshot();
+`)
+  );
+  expect(wrap.find('pre')).toHaveLength(2);
 });
 
 test('should render nothing if nothing passed in', () => {
   expect(markdown.html('', settings)).toBeNull();
 });
 
 test('`correctnewlines` option', () => {
-  expect(shallow(markdown.react('test\ntest\ntest', { correctnewlines: true })).html()).toBe('<p>test\ntest\ntest</p>');
-  expect(shallow(markdown.react('test\ntest\ntest', { correctnewlines: false })).html()).toBe(
-    '<p>test<br/>\ntest<br/>\ntest</p>'
+  expect(mount(markdown.react('test\ntest\ntest', { correctnewlines: true })).html()).toBe('<p>test\ntest\ntest</p>');
+  expect(mount(markdown.react('test\ntest\ntest', { correctnewlines: false })).html()).toBe(
+    '<p>test<br>\ntest<br>\ntest</p>'
   );
 });
 
@@ -192,14 +186,14 @@ describe('`stripHtml` option', () => {
 });
 
 test('should strip dangerous iframe tag', () => {
-  expect(shallow(markdown.react('<p><iframe src="javascript:alert(\'delta\')"></iframe></p>', settings)).html()).toBe(
+  expect(mount(markdown.react('<p><iframe src="javascript:alert(\'delta\')"></iframe></p>', settings)).html()).toBe(
     '<p></p>'
   );
 });
 
 test('should strip dangerous img attributes', () => {
-  expect(shallow(markdown.default('<img src="x" onerror="alert(\'charlie\')">', settings)).html()).toBe(
-    '<img alt="" caption="" height="auto" src="x" width="auto"/>'
+  expect(mount(markdown.default('<img src="x" onerror="alert(\'charlie\')">', settings)).html()).toBe(
+    '<img src="x" alt="" caption="" height="auto" width="auto">'
   );
 });