Support for allOf and a host of small improvements and bug fixes

README.md

@@ -10,6 +10,7 @@ This repo consists of the following npm modules:
 
 - [@readme/api-explorer](https://npm.im/@readme/api-explorer) - the React components that make up the explorer
 - [@readme/markdown](https://npm.im/@readme/markdown) - the markdown parser
+- [@readme/markdown-magic](https://npm.im/@readme/markdown-magic) - the legacy "magic block"-based markdown parser
 - [@readme/oas-extensions](https://npm.im/@readme/oas-extensions) - an exported object of our [OAS extensions](https://docs.readme.com/docs/swagger-extensions)
 - [@readme/oas-to-har](https://npm.im/@readme/oas-to-har) - utility to transform an OAS operation into a HAR representation
 - [@readme/syntax-highlighter](https://npm.im/@readme/syntax-highlighter) - the syntax highlighter in use on ReadMe

example/src/Demo.jsx

@@ -14,58 +14,101 @@ require('../../example/swagger-files/response-schemas.json');
 
 require('../../packages/api-logs/main.css');
 
-function Demo({ fetchSwagger, status, docs, oas, oauth }) {
-  return (
-    <div>
-      <div className="api-list-header">
-        <ApiList fetchSwagger={fetchSwagger} />
-        <pre>{status.join('\n')}</pre>
+class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      brokenExplorerState: false,
+      maskErrorMessages: false,
+    };
+
+    this.toggleBrokenState = this.toggleBrokenState.bind(this);
+    this.toggleErrorMasking = this.toggleErrorMasking.bind(this);
+  }
+
+  toggleErrorMasking(e) {
+    this.setState({ maskErrorMessages: e.target.checked });
+    this.forceUpdate();
+  }
+
+  toggleBrokenState(e) {
+    this.setState({ brokenExplorerState: e.target.checked });
+    this.forceUpdate();
+  }
+
+  render() {
+    const { fetchSwagger, status, docs, oas, oauth } = this.props;
+    const { brokenExplorerState, maskErrorMessages } = this.state;
+
+    const additionalProps = {};
+    if (!brokenExplorerState) {
+      additionalProps.oasFiles = {
+        'api-setting': Object.assign(extensions.defaults, oas),
+      };
+    }
+
+    return (
+      <div>
+        <div className="api-list-header">
+          <ApiList fetchSwagger={fetchSwagger} />
+
+          {status.length > 0 ? (
+            <pre>{status.join('\n')}</pre>
+          ) : (
+            <p>
+              <input checked={maskErrorMessages} onChange={this.toggleErrorMasking} type="checkbox" /> Mask error
+              messages? &nbsp;
+              <input checked={brokenExplorerState} onChange={this.toggleBrokenState} type="checkbox" /> Show fully
+              broken state
+            </p>
+          )}
+        </div>
+
+        {status.length === 0 && (
+          <ApiExplorer
+            {...additionalProps}
+            // Uncomment this in for column layout
+            // appearance={{ referenceLayout: 'column' }}
+            appearance={{ referenceLayout: 'row' }}
+            // Uncomment this if you want to test enterprise-structured URLs
+            // baseUrl={'/child/v1.0'}
+            baseUrl="/"
+            // To test the top level error boundary, uncomment this
+            // docs={[null, null]}
+            docs={docs}
+            // We only really set this to `true` for testing sites for errors using puppeteer
+            dontLazyLoad={false}
+            flags={{ correctnewlines: false }}
+            glossaryTerms={[{ term: 'apiKey', definition: 'This is a definition' }]}
+            Logs={Logs}
+            maskErrorMessages={maskErrorMessages}
+            oauth={oauth}
+            suggestedEdits
+            variables={{
+              // Uncomment this to test without logs
+              // user: {}
+              // Uncomment this to test with logs
+              // user: {
+              //   keys: [
+              //     { id: 'someid', name: 'project1', apiKey: '123' },
+              //     { id: 'anotherid', name: 'project2', apiKey: '456' },
+              //   ],
+              // },
+              // Uncomment this to test without keys array
+              // user: { user: '123456', pass: 'abc', apiKey: '123456' },
+              user: {
+                keys: [
+                  { id: 'asdfghjkl', name: 'project1', apiKey: '123', user: 'user1', pass: 'pass1' },
+                  { id: 'zxcvbnm', name: 'project2', apiKey: '456', user: 'user2', pass: 'pass2' },
+                ],
+              },
+              defaults: [],
+            }}
+          />
+        )}
       </div>
-      {status.length === 0 && (
-        <ApiExplorer
-          // Uncomment this in for column layout
-          // appearance={{ referenceLayout: 'column' }}
-          appearance={{ referenceLayout: 'row' }}
-          // Uncomment this if you want to test enterprise-structured URLs
-          // baseUrl={'/child/v1.0'}
-          baseUrl="/"
-          // To test the top level error boundary, uncomment this
-          // docs={[null, null]}
-          docs={docs}
-          // We only really set this to `true` for testing sites for errors using puppeteer
-          dontLazyLoad={false}
-          flags={{ correctnewlines: false }}
-          glossaryTerms={[{ term: 'apiKey', definition: 'This is a definition' }]}
-          Logs={Logs}
-          oasFiles={{
-            'api-setting': Object.assign(extensions.defaults, oas),
-          }}
-          oauth={oauth}
-          suggestedEdits
-          variables={{
-            // Uncomment this to test without logs
-            // user: {}
-            // Uncomment this to test with logs
-            // user: {
-            //   keys: [
-            //     { id: 'someid', name: 'project1', apiKey: '123' },
-            //     { id: 'anotherid', name: 'project2', apiKey: '456' },
-            //   ],
-            // },
-            // Uncomment this to test without keys array
-            // user: { user: '123456', pass: 'abc', apiKey: '123456' },
-            user: {
-              keys: [
-                { id: 'asdfghjkl', name: 'project1', apiKey: '123', user: 'user1', pass: 'pass1' },
-                { id: 'zxcvbnm', name: 'project2', apiKey: '456', user: 'user2', pass: 'pass2' },
-              ],
-            },
-            defaults: [],
-          }}
-        />
-      )}
-    </div>
-  );
+    );
+  }
 }
 
 Demo.propTypes = {