Remove marked dependency and update components to use new markdown

packages/api-explorer/__tests__/block-types/Image.test.jsx

@@ -54,6 +54,6 @@ describe('Image', () => {
         .find('figcaption')
         .render()
         .text(),
-    ).toBe('doggo\n');
+    ).toBe('doggo');
   });
 });

packages/api-explorer/__tests__/block-types/Parameters.test.jsx

@@ -39,6 +39,6 @@ describe('Parameters', () => {
         .find('div.td')
         .render()
         .text(),
-    ).toBe('arbitrary\n');
+    ).toBe('arbitrary');
   });
 });

packages/api-explorer/__tests__/block-types/__snapshots__/CallOut.test.jsx.snap

@@ -1,12 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render body 1`] = `
-"<p>body</p>
-"
-`;
+exports[`should render body 1`] = `"<div><p>body</p></div>"`;
 
 exports[`should render markdown in body 1`] = `
-"<h1 class=\\"header-scroll\\"><div class=\\"anchor waypoint\\" id=\\"section-heading\\"></div>heading<a class=\\"fa fa-anchor\\" href=\\"#section-heading\\"></a></h1>
-<p><code>test</code></p>
-"
+"<div><h1 class=\\"header-scroll\\"><div class=\\"anchor waypoint\\" id=\\"section-heading\\"></div>heading<a class=\\"fa fa-anchor\\" href=\\"#section-heading\\"></a></h1>
+<p><code><span class=\\"cm-s-neo\\">test</span></code></p></div>"
 `;

packages/api-explorer/__tests__/form-components/DescriptionField.test.jsx

@@ -10,6 +10,6 @@ test('should parse description as markdown', () => {
   expect(
     shallow(<DescriptionField description={actual} />)
       .html()
-      .indexOf(markdown(actual)) > 1,
+      .indexOf(shallow(markdown(actual)).html()) > 1,
   ).toBe(true);
 });

packages/api-explorer/package.json

@@ -12,7 +12,6 @@
     "httpsnippet": "^1.16.5",
     "js-cookie": "^2.1.4",
     "lodash.kebabcase": "^4.1.1",
-    "marked": "github:readmeio/marked",
     "prop-types": "^15.5.10",
     "react": "^16.2.0",
     "react-jsonschema-form": "^1.0.0",

packages/api-explorer/src/block-types/CallOut.jsx

@@ -36,15 +36,10 @@ const CallOut = ({ block, flags }) => {
           <Icon type={block.data.type} />
         </span>
       )}
-      {/* eslint-disable react/no-danger */}
       {block.data &&
       block.data.body && (
-        <div
-          className="callout-body"
-          dangerouslySetInnerHTML={{ __html: markdown(block.data.body, flags) }}
-        />
+        <div className="callout-body">{markdown(block.data.body, flags)}</div>
       )}
-      {/* eslint-enable react/no-danger */}
     </div>
   );
 };

packages/api-explorer/src/block-types/Image.jsx

@@ -23,8 +23,7 @@ const ImageBlock = ({ block, flags }) => {
               </a>
             </figure>
             {image.caption && (
-              // eslint-disable-next-line react/no-danger
-              <figcaption dangerouslySetInnerHTML={{ __html: markdown(image.caption, flags) }} />
+              <figcaption>{markdown(image.caption, flags)}</figcaption>
             )}
           </div>
         )}

packages/api-explorer/src/block-types/Parameters.jsx

@@ -26,9 +26,7 @@ const Parameters = ({ block, flags }) => {
         <div
           className="td"
           key={c}
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: markdown(block.data.data[`${r}-${c}`] || '', flags) }}
-        />,
+        >{markdown(block.data.data[`${r}-${c}`] || '', flags)}</div>,
       );
     }
     return tdCells;

packages/api-explorer/src/block-types/TextArea.jsx

@@ -1,39 +1,9 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const markdown = require('../lib/markdown');
-const sanitizeSchema = require('hast-util-sanitize/lib/github.json');
-const Variable = require('../Variable');
-const variableParser = require('../lib/markdown/variable-parser.js');
-
-sanitizeSchema.tagNames.push('readme-variable');
-sanitizeSchema.attributes['readme-variable'] = ['variable'];
-
-const remark = require('remark');
-const reactRenderer = require('remark-react');
-
-function renderMarkdown(text) {
-  return remark()
-    .use(variableParser)
-    .use(reactRenderer, {
-      sanitize: sanitizeSchema,
-      remarkReactComponents: {
-        'readme-variable': function({ variable }) {
-          return (
-            <Variable
-              k={variable}
-              value={[{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }]}
-              defaults={[]}
-              oauth={false}
-            />
-          );
-        },
-      },
-    })
-    .processSync(text).contents;
-}
 
 const Textarea = ({ block, flags }) => {
-  return <div className="magic-block-textarea">{renderMarkdown(block.text)}</div>;
+  return <div className="magic-block-textarea">{markdown(block.text, flags)}</div>;
 };
 
 Textarea.propTypes = {

packages/api-explorer/src/form-components/DescriptionField.jsx

@@ -15,9 +15,7 @@ function DescriptionField(props) {
       <p
         id={id}
         className="field-description"
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: markdown(description) }}
-      />
+      >{markdown(description)}</p>
     );
   }
   return (

packages/api-explorer/src/lib/markdown/index.js

@@ -27,40 +27,12 @@ sanitizeSchema.ancestors.input = ['li'];
 // This is for our custom link formats
 sanitizeSchema.protocols.href.push('doc', 'ref', 'blog', 'page');
 
-const marked = require('marked');
 const Emoji = require('./emojis.js').emoji;
 const syntaxHighlighter = require('@readme/syntax-highlighter');
-const sanitizer = require('./sanitizer');
-const renderer = require('./renderer');
-
-const emojis = new Emoji();
 
 const Variable = require('../../Variable');
 
 module.exports = function markdown(text, opts = {}) {
-  marked.setOptions({
-    sanitize: true,
-    preserveNumbering: true,
-    renderer,
-    emoji(emojiText) {
-      const emoji = emojiText.replace(/[^-_+a-zA-Z0-9]/g, '').toLowerCase();
-      if (emoji.substr(0, 3) === 'fa-') {
-        return `<i class="fa ${emoji}"></i>`;
-      }
-      if (emojis.is(emoji)) {
-        return `<img src="/img/emojis/${emoji}.png" alt=":${emoji}+:" title=":${emoji}:" class="emoji" align="absmiddle" height="20" width="20">`;
-      }
-      return `:${emoji}:`;
-    },
-    highlight: syntaxHighlighter,
-    gfm: true,
-    breaks: !opts.correctnewlines,
-    // By default we don't wanna strip any tags
-    // so we use our sanitizer and not the built in
-    // which just calls `escape()`
-    sanitizer: opts.stripHtml ? undefined : sanitizer,
-  });
-
   function heading(level) {
     return function (props) {
       const id = `section-${props.children[0].toLowerCase().replace(/[^\w]+/g, '-')}`
@@ -156,6 +128,4 @@ module.exports = function markdown(text, opts = {}) {
       },
     })
     .processSync(text).contents;
-
-  return marked(text);
 };