fix: h1 anchor rendering

packages/api-explorer/__tests__/Doc.test.jsx

@@ -25,6 +25,7 @@ const props = {
   oauth: false,
   onAuthChange: () => {},
   setLanguage: () => {},
+  onDocRender: () => {},
   suggestedEdits: false,
   tryItMetrics: () => {},
 };
@@ -36,7 +37,7 @@ function assertDocElements(component, doc) {
 }
 
 test('should output a div', () => {
-  const doc = shallow(<Doc {...props} />);
+  const doc = shallow(<Doc {...props} rendered={true} />);
 
   doc.setState({ showEndpoint: true });
 
@@ -67,6 +68,8 @@ test('should render straight away if `appearance.splitReferenceDocs` is true', (
 
 test('should render a manual endpoint', () => {
   const myProps = JSON.parse(JSON.stringify(props));
+  const onRender = () => {};
+
   myProps.doc.swagger.path = '/nonexistant';
   myProps.doc.api.examples = {
     codes: [],
@@ -89,6 +92,7 @@ test('should render a manual endpoint', () => {
       appearance={{
         splitReferenceDocs: true,
       }}
+      onDocRender={onRender}
     />
   );
 
@@ -105,6 +109,8 @@ test('should work without a doc.swagger/doc.path/oas', () => {
       language="node"
       oauth={false}
       onAuthChange={() => {}}
+      onDocRender={() => {}}
+      rendered={true}
       setLanguage={() => {}}
       suggestedEdits
       tryItMetrics={() => {}}
@@ -128,6 +134,8 @@ test('should still display `Content` with column-style layout', () => {
       language="node"
       oauth={false}
       onAuthChange={() => {}}
+      onDocRender={() => {}}
+      rendered={true}
       setLanguage={() => {}}
       suggestedEdits
       tryItMetrics={() => {}}

packages/api-explorer/__tests__/index.test.jsx

@@ -307,3 +307,11 @@ describe('auth', () => {
     expect(explorer.state('auth')).toStrictEqual({ api_key: '7890', petstore_auth: '123456' });
   });
 });
+
+describe('onDocRender()', () => {
+  it('should set a key to true if passed', () => {
+    const explorer = mount(<ApiExplorer {...props} />);
+    explorer.instance().onDocRender('123');
+    expect(explorer.state('docRenderMap')['123']).toBe(true);
+  });
+});

packages/api-explorer/src/Doc.jsx

@@ -232,6 +232,7 @@ class Doc extends React.Component {
 
   renderEndpoint() {
     const { doc } = this.props;
+    this.props.onDocRender(doc.slug);
 
     return (
       <EndpointErrorBoundary>
@@ -336,7 +337,7 @@ class Doc extends React.Component {
         </div>
 
         {renderEndpoint()}
-
+        {!this.props.rendered && <Content body={doc.body} flags={this.props.flags} isThreeColumn />}
         {
           // TODO maybe we dont need to do this with a hidden input now
           // cos we can just pass it around?
@@ -370,6 +371,7 @@ Doc.propTypes = {
         codes: PropTypes.arrayOf(PropTypes.shape({})),
       }),
     }),
+    body: PropTypes.string,
     excerpt: PropTypes.string,
     slug: PropTypes.string.isRequired,
     swagger: PropTypes.shape({
@@ -394,7 +396,9 @@ Doc.propTypes = {
   oas: PropTypes.shape({}),
   oauth: PropTypes.bool.isRequired,
   onAuthChange: PropTypes.func.isRequired,
+  onDocRender: PropTypes.func.isRequired,
   onGroupChange: PropTypes.func.isRequired,
+  rendered: PropTypes.bool,
   setLanguage: PropTypes.func.isRequired,
   suggestedEdits: PropTypes.bool.isRequired,
   tryItMetrics: PropTypes.func.isRequired,
@@ -415,6 +419,7 @@ Doc.defaultProps = {
   lazy: true,
   Logs: undefined,
   oas: {},
+  rendered: false,
   user: {},
 };
 

packages/api-explorer/src/index.jsx

@@ -23,6 +23,7 @@ class ApiExplorer extends React.Component {
     this.getDefaultLanguage = this.getDefaultLanguage.bind(this);
     this.changeSelected = this.changeSelected.bind(this);
     this.onAuthChange = this.onAuthChange.bind(this);
+    this.onDocRender = this.onDocRender.bind(this);
 
     this.state = {
       auth: getAuth(this.props.variables.user, this.props.oasFiles),
@@ -32,6 +33,7 @@ class ApiExplorer extends React.Component {
         selected: '',
         changeSelected: this.changeSelected,
       },
+      docRenderMap: {},
     };
 
     this.onGroupChange = this.onGroupChange.bind(this);
@@ -109,6 +111,16 @@ class ApiExplorer extends React.Component {
     });
   }
 
+  onDocRender(slug) {
+    if (!(slug in this.state.docRenderMap)) {
+      this.setState(prevState => {
+        const docRenderMap = { ...prevState.docRenderMap };
+        docRenderMap[slug] = true;
+        return { docRenderMap };
+      });
+    }
+  }
+
   isLazy(index) {
     if (this.props.dontLazyLoad) return false;
     return this.lazyHash[index];
@@ -197,7 +209,9 @@ class ApiExplorer extends React.Component {
                         oas={this.getOas(doc)}
                         oauth={this.props.oauth}
                         onAuthChange={this.onAuthChange}
+                        onDocRender={this.onDocRender}
                         onGroupChange={this.onGroupChange}
+                        rendered={this.state.docRenderMap[doc.slug]}
                         setLanguage={this.setLanguage}
                         suggestedEdits={this.props.suggestedEdits}
                         tryItMetrics={this.props.tryItMetrics}