Merge pull request #242 from GeekyAnts/staging

Staging

Author: rayan1810

src/new-components/MainContent.tsx

@@ -124,7 +124,7 @@ const SubMainContent2 = React.memo(({ props }: any) => {
         {/*  */}
         <VStack>
           {!isLatestVersionSlug(activeVersion) && <Badge rounded="4" flexDir="row" alignSelf='flex-start'>version: {activeVersion}</Badge>}
-          <Heading mb="6" size="xl" _dark={{ color: "coolGray.50" }}>
+          <Heading nativeID="DocSearch-h1" mb="6" size="xl" _dark={{ color: "coolGray.50" }}>
             {frontMatter && frontMatter.title
               ? frontMatter.title
               : pages.currentPage.title}

src/new-components/markdown-components/CodeBlock/Playground.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import LiveCodeEditorScope from "./LiveCodeEditorScope";
 import { getParsedCode, addExportsToCode } from "./utils";
 import {
@@ -48,6 +48,7 @@ export const Playground = ({ children, ...props }: any) => {
   const [parsedCode, setParsedCode] = React.useState(getParsedCode(children));
   // const [parsedCode, setParsedCode] = React.useState(children);
   const [copied, setCopied] = React.useState(false);
+  const formRef = useRef(null)
 
   const { onCopy } = useClipboard();
 
@@ -71,7 +72,7 @@ export const Playground = ({ children, ...props }: any) => {
 
   function submitExpoForm() {
     // @ts-ignore
-    document.getElementById("expo-form")?.submit();
+    formRef.current?.submit();
   }
   return (
     <LiveProvider
@@ -153,7 +154,7 @@ export const Playground = ({ children, ...props }: any) => {
               action={SNACK_URL}
               method="POST"
               target="_blank"
-              id="expo-form"
+              ref={formRef}
             >
               <input
                 type="hidden"

src/new-components/markdown-components/Heading1.tsx

@@ -5,6 +5,6 @@ import { getHeadingMeta } from "../../utils";
 export const Heading1 = ({ children }: any) => {
   const [content, id] = getHeadingMeta(children);
   return (
-    <Heading fontSize="3xl" color={useColorModeValue("gray.700", "gray.300")} />
+    <Heading nativeID="DocSearch-h1" fontSize="3xl" color={useColorModeValue("gray.700", "gray.300")} />
   );
 };

src/new-components/markdown-components/Heading2.tsx

@@ -11,6 +11,7 @@ export const Heading2 = ({ children }: any) => {
       {({ isHovered }) => {
         return (
           <HStack alignItems="center" space="2">
+            <Heading display="none" nativeID="DocSearch-h2" >{content}</Heading>
             <Heading
               fontSize="2xl"
               _dark={{ color: "gray.300" }}

src/new-components/markdown-components/Heading3.tsx

@@ -10,6 +10,7 @@ export const Heading3 = ({ children }: any) => {
       {({ isHovered }) => {
         return (
           <HStack alignItems="center" space="2">
+            <Heading display="none" nativeID="DocSearch-h3" >{content}</Heading>
             <Heading
               fontSize="xl"
               fontWeight="normal"

src/new-components/markdown-components/Heading4.tsx

@@ -5,14 +5,17 @@ import { getHeadingMeta } from "../../utils";
 export const Heading4 = ({ children }: any) => {
   const [content, id] = getHeadingMeta(children);
   return (
-    <Heading
-      my="2"
-      fontSize="md"
-      color={useColorModeValue("gray.700", "gray.300")}
-      // @ts-ignore
-      nativeID={id}
-    >
-      {content}
-    </Heading>
+    <>
+      <Heading display="none" nativeID="DocSearch-h4" >{content}</Heading>
+      <Heading
+        my="2"
+        fontSize="md"
+        color={useColorModeValue("gray.700", "gray.300")}
+        // @ts-ignore
+        nativeID={id}
+      >
+        {content}
+      </Heading>
+    </>
   );
 };

src/new-components/markdown-components/Heading5.tsx

@@ -3,15 +3,18 @@ import { Heading, useColorModeValue } from "native-base";
 import { getHeadingMeta } from "../../utils";
 
 export const Heading5 = ({ children }: any) => {
-  const [content,id] = getHeadingMeta(children);
+  const [content, id] = getHeadingMeta(children);
   return (
-    <Heading
-      fontSize="md"
-      color={useColorModeValue("gray.700", "gray.300")}
-      // @ts-ignore
-      nativeID={id}
-    >
-      {content}
-    </Heading>
+    <>
+      <Heading display="none" nativeID="DocSearch-h5" >{content}</Heading>
+      <Heading
+        fontSize="md"
+        color={useColorModeValue("gray.700", "gray.300")}
+        // @ts-ignore
+        nativeID={id}
+      >
+        {content}
+      </Heading>
+    </>
   );
 };