RDMD Next

packages/api-explorer/src/index.jsx

@@ -2,7 +2,6 @@ const React = require('react');
 const Cookie = require('js-cookie');
 const PropTypes = require('prop-types');
 const extensions = require('@readme/oas-extensions');
-const VariablesContext = require('@readme/variable/contexts/Variables');
 const OauthContext = require('@readme/variable/contexts/Oauth');
 const SelectedAppContext = require('@readme/variable/contexts/SelectedApp');
 
@@ -173,15 +172,14 @@ class ApiExplorer extends React.Component {
     });
 
     /* eslint-disable global-require */
-    let BaseUrlContext;
-    let GlossaryTermsContext;
-    if (this.props.useNewMarkdownEngine) {
-      BaseUrlContext = require('@readme/markdown/contexts/BaseUrl');
-      GlossaryTermsContext = require('@readme/markdown/contexts/GlossaryTerms');
-    } else {
-      BaseUrlContext = require('@readme/markdown-magic/contexts/BaseUrl');
-      GlossaryTermsContext = require('@readme/markdown-magic/contexts/GlossaryTerms');
-    }
+    const BaseUrlContext = require('@readme/markdown-magic/contexts/BaseUrl');
+    const VariablesContext = require('@readme/variable/contexts/Variables');
+    const GlossaryTermsContext = require('@readme/markdown-magic/contexts/GlossaryTerms');
+
+    const { utils } = require('@readme/markdown');
+    const NewBaseUrlContext = utils.BaseUrlContext;
+    const NewVariablesContext = utils.VariablesContext;
+    const NewGlossaryTermsContext = utils.GlossaryContext;
     /* eslint-enable global-require */
 
     return (
@@ -192,38 +190,44 @@ class ApiExplorer extends React.Component {
         >
           {docs.map((doc, index) => (
             <VariablesContext.Provider key={index} value={this.props.variables}>
-              <OauthContext.Provider value={this.props.oauth}>
-                <GlossaryTermsContext.Provider value={this.props.glossaryTerms}>
-                  <BaseUrlContext.Provider value={this.props.baseUrl.replace(/\/$/, '')}>
-                    <SelectedAppContext.Provider value={this.state.selectedApp}>
-                      <Doc
-                        key={doc._id}
-                        appearance={this.props.appearance}
-                        auth={this.state.auth}
-                        baseUrl={this.props.baseUrl.replace(/\/$/, '')}
-                        doc={doc}
-                        flags={this.props.flags}
-                        group={this.state.group}
-                        groups={this.groups}
-                        language={this.state.language}
-                        lazy={this.isLazy(index)}
-                        Logs={this.props.Logs}
-                        maskErrorMessages={this.props.maskErrorMessages}
-                        oas={this.getOas(doc)}
-                        oauth={this.props.oauth}
-                        onAuthChange={this.onAuthChange}
-                        onAuthGroupChange={this.onAuthGroupChange}
-                        onError={this.props.onError}
-                        setLanguage={this.setLanguage}
-                        suggestedEdits={this.props.suggestedEdits}
-                        tryItMetrics={this.props.tryItMetrics}
-                        useNewMarkdownEngine={this.props.useNewMarkdownEngine}
-                        user={this.props.variables.user}
-                      />
-                    </SelectedAppContext.Provider>
-                  </BaseUrlContext.Provider>
-                </GlossaryTermsContext.Provider>
-              </OauthContext.Provider>
+              <NewVariablesContext.Provider key={index} value={this.props.variables}>
+                <OauthContext.Provider value={this.props.oauth}>
+                  <GlossaryTermsContext.Provider value={this.props.glossaryTerms}>
+                    <NewGlossaryTermsContext.Provider value={this.props.glossaryTerms}>
+                      <BaseUrlContext.Provider value={this.props.baseUrl.replace(/\/$/, '')}>
+                        <NewBaseUrlContext.Provider value={this.props.baseUrl.replace(/\/$/, '')}>
+                          <SelectedAppContext.Provider value={this.state.selectedApp}>
+                            <Doc
+                              key={doc._id}
+                              appearance={this.props.appearance}
+                              auth={this.state.auth}
+                              baseUrl={this.props.baseUrl.replace(/\/$/, '')}
+                              doc={doc}
+                              flags={this.props.flags}
+                              group={this.state.group}
+                              groups={this.groups}
+                              language={this.state.language}
+                              lazy={this.isLazy(index)}
+                              Logs={this.props.Logs}
+                              maskErrorMessages={this.props.maskErrorMessages}
+                              oas={this.getOas(doc)}
+                              oauth={this.props.oauth}
+                              onAuthChange={this.onAuthChange}
+                              onAuthGroupChange={this.onAuthGroupChange}
+                              onError={this.props.onError}
+                              setLanguage={this.setLanguage}
+                              suggestedEdits={this.props.suggestedEdits}
+                              tryItMetrics={this.props.tryItMetrics}
+                              useNewMarkdownEngine={this.props.useNewMarkdownEngine}
+                              user={this.props.variables.user}
+                            />
+                          </SelectedAppContext.Provider>
+                        </NewBaseUrlContext.Provider>
+                      </BaseUrlContext.Provider>
+                    </NewGlossaryTermsContext.Provider>
+                  </GlossaryTermsContext.Provider>
+                </OauthContext.Provider>
+              </NewVariablesContext.Provider>
             </VariablesContext.Provider>
           ))}
         </div>

packages/api-explorer/style/markdown-overrides.scss

@@ -24,7 +24,7 @@
         color: #bbbec1;
         p { color: inherit !important }
         > .CodeTabs, > pre {
-          filter: invert(.9) !important;
+          filter: var(--md-code-text, invert(0.9)); /* ¡hacksaurz! */
         }
       }
     }

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

@@ -1,9 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Components Embed 1`] = `"<div class=\\"embed\\"><a href=\\"https://gist.github.com/chaddy81/f852004d6d1510eec1f6\\" rel=\\"noopener noreferrer\\" style=\\"display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none;\\" target=\\"_blank\\"><b style=\\"color: rgb(51, 51, 51);\\">View Embed:</b> <span style=\\"opacity: 0.75;\\">https://gist.github.com/chaddy81/f852004d6d1510eec1f6</span></a></div>"`;
-
-exports[`Components Multi Code Block 1`] = `
-"<div class=\\"CodeTabs\\"><div class=\\"CodeTabs-toolbar\\"><button type=\\"button\\">Text</button><button type=\\"button\\" class=\\"CodeTabs_active\\">Text</button></div><div class=\\"CodeTabs-inner\\"><pre><code data-lang=\\"\\" name=\\"\\"><span class=\\"cm-s-neo\\">hello
-</span></code></pre><pre class=\\"CodeTabs_active\\"><code data-lang=\\"\\" name=\\"\\"><span class=\\"cm-s-neo\\">world
-</span></code></pre></div></div>"
-`;

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

@@ -96,18 +96,10 @@ exports[`Parse ReadMe-Flavored Markdown Syntax Single Block 1`] = `
 Object {
   "children": Array [
     Object {
-      "className": "tab-panel",
-      "data": Object {
-        "hName": "code",
-        "hProperties": Object {
-          "lang": "javascript",
-          "meta": "multiple.js",
-        },
-      },
       "lang": "javascript",
-      "meta": "multiple.js",
+      "meta": "single.js",
       "type": "code",
-      "value": "console.log('a multi-file code block');",
+      "value": "console.log('a single-file code block');",
     },
     Object {
       "children": Array [

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

@@ -37,13 +37,17 @@ exports[`emojis 1`] = `
 
 exports[`export multiple Markdown renderers allows complex compact headings 1`] = `
 "<h1 id=\\"basic-text\\">Basic Text</h1>
+<div id=\\"section-basic-text\\"></div>
 <h2 id=\\"-oh-noes\\">🙀 oh noes!</h2>
+<div id=\\"section--oh-noes\\"></div>
 <h3 id=\\"6-oh-no\\"><strong>6</strong>. Oh No</h3>
+<div id=\\"section-6-oh-no\\"></div>
 <p>Lorem ipsum dolor!</p>"
 `;
 
 exports[`export multiple Markdown renderers renders HTML 1`] = `
 "<h1 id=\\"hello-world\\">Hello World</h1>
+<div id=\\"section-hello-world\\"></div>
 
 
 
@@ -92,6 +96,11 @@ exports[`export multiple Markdown renderers renders custom React components 1`]
   </Unknown>
 
 
+  <div
+    id="section-hello-world"
+  />
+
+
 
 
 
@@ -288,6 +297,19 @@ Object {
     Object {
       "type": "text",
       "value": "
+",
+    },
+    Object {
+      "children": Array [],
+      "properties": Object {
+        "id": "section-hello-world",
+      },
+      "tagName": "div",
+      "type": "element",
+    },
+    Object {
+      "type": "text",
+      "value": "
 
 
 
@@ -815,6 +837,11 @@ exports[`export multiple Markdown renderers renders plain markdown as React 1`]
   </h1>
 
 
+  <div
+    id="section-hello-world"
+  />
+
+
 
 
 
@@ -992,14 +1019,19 @@ exports[`export multiple Markdown renderers renders plain markdown as React 1`]
 </React.Fragment>
 `;
 
-exports[`image 1`] = `"<p><img src=\\"http://example.com/image.png\\" alt=\\"Image\\" align=\\"\\" caption=\\"\\" height=\\"auto\\" title=\\"\\" width=\\"auto\\" loading=\\"lazy\\"></p>"`;
+exports[`image 1`] = `"<p><img src=\\"http://example.com/image.png\\" alt=\\"Image\\" align=\\"\\" caption=\\"\\" height=\\"auto\\" title=\\"\\" width=\\"auto\\" loading=\\"lazy\\"><span class=\\"lightbox\\" role=\\"dialog\\"><span class=\\"lightbox-inner\\"><img src=\\"http://example.com/image.png\\" alt=\\"Image\\" align=\\"\\" caption=\\"\\" height=\\"auto\\" title=\\"Click to close...\\" width=\\"auto\\" loading=\\"lazy\\"></span></span></p>"`;
 
 exports[`list items 1`] = `
 "<ul>
 <li>listitem1</li>
 </ul>"
 `;
 
-exports[`magic image 1`] = `"<figure><img 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\\" class=\\"\\" width=\\"100%\\" align=\\"\\" alt=\\"\\" caption=\\"\\" height=\\"auto\\" loading=\\"lazy\\"><figcaption><p>A guy. Eating pizza. And making an OK gesture.</p></figcaption></figure>"`;
+exports[`magic image 1`] = `"<figure><img 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\\" class=\\"\\" width=\\"100%\\" align=\\"\\" alt=\\"\\" caption=\\"\\" height=\\"auto\\" loading=\\"lazy\\"><span class=\\"lightbox\\" role=\\"dialog\\"><span class=\\"lightbox-inner\\"><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" title=\\"Click to close...\\" class=\\"\\" width=\\"100%\\" align=\\"\\" alt=\\"\\" caption=\\"\\" height=\\"auto\\" loading=\\"lazy\\"></span></span><figcaption><p>A guy. Eating pizza. And making an OK gesture.</p></figcaption></figure>"`;
+
+exports[`prefix anchors with section- should add a section- prefix to heading anchors 1`] = `
+"<h1 id=\\"heading\\">heading</h1>
+<div id=\\"section-heading\\"></div>"
+`;
 
 exports[`tables 1`] = `"<div class=\\"rdmd-table\\"><div class=\\"rdmd-table-inner\\"><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></div></div>"`;

packages/markdown/__tests__/components.test.js

@@ -69,23 +69,15 @@ describe('Components', () => {
   });
 
   it('Multi Code Block', () => {
-    const codetabs = `
-
-\`\`\`
-hello
-\`\`\`
-\`\`\`
-world
-\`\`\`
-
-`;
-
-    const rdmd = markdown.react(codetabs);
+    const tabs = '```\nhello\n```\n```php\nworld\n```\n\n';
+    const rdmd = markdown.react(tabs);
     const wrap = mount(rdmd);
 
-    wrap.find('button').last().simulate('click').simulate('click');
+    expect(wrap.find('pre').at(1).getDOMNode().classList).toHaveLength(0);
 
-    expect(wrap.html()).toMatchSnapshot();
+    wrap.find('.CodeTabs-toolbar button').at(1).simulate('click').simulate('click');
+
+    expect(wrap.find('pre').at(1).getDOMNode().classList).toContain('CodeTabs_active');
   });
 
   it('Embed', () => {

packages/markdown/__tests__/flavored-parsers.test.js

@@ -32,8 +32,17 @@ describe('Parse ReadMe-Flavored Markdown Syntax', () => {
   });
 
   it('Single Block', () => {
-    const text = "\n\n```javascript multiple.js\nconsole.log('a multi-file code block');\n```\n\n ";
+    const text = "\n\n```javascript single.js\nconsole.log('a single-file code block');\n```\n\n ";
     const ast = process(text);
     expect(ast).toMatchSnapshot();
   });
+
+  it('When fools just, like, totally disregard newlines...', () => {
+    // See this comment for more...
+    // https://github.com/readmeio/api-explorer/pull/627#discussion_r415420860
+    const md =
+      "\n\n```javascript single.js\nconsole.log('I should be a single code block');\n```\n## I Should be an H3 Tag\n```javascript single.js\nconsole.log('I\\'m also a single code block');\n```\n\n";
+    const ast = process(md);
+    expect(ast.children).toHaveLength(3);
+  });
 });

packages/markdown/__tests__/index.test.js

@@ -189,7 +189,7 @@ test('should strip dangerous iframe tag', () => {
 
 test('should strip dangerous img attributes', () => {
   expect(mount(markdown.default('<img src="x" onerror="alert(\'charlie\')">')).html()).toBe(
-    '<img src="x" align="" alt="" caption="" height="auto" title="" width="auto" loading="lazy">'
+    '<img src="x" align="" alt="" caption="" height="auto" title="" width="auto" loading="lazy"><span class="lightbox" role="dialog"><span class="lightbox-inner"><img src="x" align="" alt="" caption="" height="auto" title="Click to close..." width="auto" loading="lazy"></span></span>'
   );
 });
 
@@ -270,3 +270,9 @@ Lorem ipsum dolor!`;
     expect(markdown.md('')).toBeNull();
   });
 });
+
+describe('prefix anchors with section-', () => {
+  it('should add a section- prefix to heading anchors', () => {
+    expect(markdown.html('# heading')).toMatchSnapshot();
+  });
+});

packages/markdown/__tests__/magic-block-parser.test.js

@@ -30,6 +30,46 @@ test('Blank Magic Blocks', () => {
   { "title": "No Level" }
   [/block]`;
   expect(process(noLevel)).toMatchSnapshot();
+
+  const emptyTable = `[block:parameters]
+  {
+    "data": {},
+    "cols": 3,
+    "rows": 1
+  }
+  [/block]`;
+  expect(process(emptyTable).children).toHaveLength(0);
+
+  const emptyCallout = `[block:callout]
+  {
+    "type": "info",
+    "title": ""
+  }
+  [/block]`;
+  expect(process(emptyCallout).children).toHaveLength(0);
+
+  const emptyCodeTabs = `[block:code]
+  {
+    "codes": [
+      {
+        "code": "",
+        "language": "text"
+      }
+    ]
+  }
+  [/block]`;
+  expect(process(emptyCodeTabs).children).toHaveLength(0);
+
+  const emptyImage = `[block:image]
+  {
+    "images": [
+      {
+        "image": []
+      }
+    ]
+  }
+  [/block]`;
+  expect(process(emptyImage).children).toHaveLength(0);
 });
 
 test('Sanitize Schema', () => {