fix: fix major search performance due to wrong marker element

fixes #1109
Redocly · Mar 16, 2020 · 8c053cc · 8c053cc
1 parent 7608800
commit 8c053cc
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 10 deletions.
diff --git a/src/components/ApiInfo/ApiInfo.tsx b/src/components/ApiInfo/ApiInfo.tsx
@@ -100,7 +100,7 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
               )) ||
                 null}
             </StyledMarkdownBlock>
-            <Markdown source={store.spec.info.description} />
+            <Markdown source={store.spec.info.description} data-role="redoc-description" />
             {externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
           </MiddlePanel>
         </Row>

diff --git a/src/components/Markdown/Markdown.tsx b/src/components/Markdown/Markdown.tsx
@@ -17,18 +17,20 @@ export type MarkdownProps = BaseMarkdownProps &
   StylingMarkdownProps & {
     source: string;
     className?: string;
+    'data-role'?: string;
   };
 
 export class Markdown extends React.Component<MarkdownProps> {
   render() {
-    const { source, inline, compact, className } = this.props;
+    const { source, inline, compact, className, 'data-role': dataRole } = this.props;
     const renderer = new MarkdownRenderer();
     return (
       <SanitizedMarkdownHTML
         html={renderer.renderMd(source)}
         inline={inline}
         compact={compact}
         className={className}
+        data-role={dataRole}
       />
     );
   }

diff --git a/src/components/Markdown/SanitizedMdBlock.tsx b/src/components/Markdown/SanitizedMdBlock.tsx
@@ -10,7 +10,7 @@ const StyledMarkdownSpan = StyledMarkdownBlock.withComponent('span');
 const sanitize = (untrustedSpec, html) => (untrustedSpec ? DOMPurify.sanitize(html) : html);
 
 export function SanitizedMarkdownHTML(
-  props: StylingMarkdownProps & { html: string; className?: string },
+  props: StylingMarkdownProps & { html: string; className?: string; 'data-role'?: string },
 ) {
   const Wrap = props.inline ? StyledMarkdownSpan : StyledMarkdownBlock;
 
@@ -22,6 +22,7 @@ export function SanitizedMarkdownHTML(
           dangerouslySetInnerHTML={{
             __html: sanitize(options.untrustedSpec, props.html),
           }}
+          data-role={props['data-role']}
           {...props}
         />
       )}

diff --git a/src/services/AppStore.ts b/src/services/AppStore.ts
@@ -18,6 +18,8 @@ import {
   SECURITY_DEFINITIONS_JSX_NAME,
 } from '../utils/openapi';
 
+import { IS_BROWSER } from '../utils';
+
 export interface StoreState {
   menu: {
     activeItemIdx: number;
@@ -134,16 +136,16 @@ export class AppStore {
 
     const elements: Element[] = [];
     for (let i = start; i < end; i++) {
-      let elem = this.menu.getElementAt(i);
+      const elem = this.menu.getElementAt(i);
       if (!elem) {
         continue;
       }
-      if (this.menu.flatItems[i].type === 'section') {
-        elem = elem.parentElement!.parentElement;
-      }
-      if (elem) {
-        elements.push(elem);
-      }
+      elements.push(elem);
+    }
+
+    if (idx === -1 && IS_BROWSER) {
+      const $description = document.querySelector('[data-role="redoc-description"]');
+      if ($description) elements.push($description);
     }
 
     this.marker.addOnly(elements);