Merge pull request #215 from rakutentech/feature/anchor-url

Fixes #211 and #212 where anchor link and markdown indentation didn't work as intended

Author: kevincobain2000

src/LaravelRequestDocs.php

@@ -295,7 +295,7 @@ public function lrdDocComment(string $docComment): string
             }
             if ($counter == 1 && !Str::contains($comment, '@lrd')) {
                 if (Str::startsWith($comment, '*')) {
-                    $comment = trim(substr($comment, 1));
+                    $comment = substr($comment, 1);
                 }
                 // remove first character from string
                 $lrdComment .= $comment . "\n";

tests/mocks/lrd-response.json

@@ -27,7 +27,7 @@
                 "nullable|integer|min:1|max:100"
             ]
         },
-        "doc_block": "#Hello markdown\n## Documentation for /my route\n",
+        "doc_block": " #Hello markdown\n ## Documentation for /my route\n",
         "responses": [
             "200",
             "400",
@@ -69,7 +69,7 @@
                 "nullable|integer|min:1|max:100"
             ]
         },
-        "doc_block": "#Hello markdown\n## Documentation for /my route\n",
+        "doc_block": " #Hello markdown\n ## Documentation for /my route\n",
         "responses": [
             "200",
             "400",
@@ -111,7 +111,7 @@
                 "nullable|integer|min:1|max:100"
             ]
         },
-        "doc_block": "#Hello markdown\n## Documentation for /my route\n",
+        "doc_block": " #Hello markdown\n ## Documentation for /my route\n",
         "responses": [
             "200",
             "400",
@@ -153,7 +153,7 @@
                 "nullable|integer|min:1|max:100"
             ]
         },
-        "doc_block": "#Hello markdown\n## Documentation for /my route\n",
+        "doc_block": " #Hello markdown\n ## Documentation for /my route\n",
         "responses": [
             "200",
             "400",

ui/src/components/ApiAction.tsx

@@ -145,6 +145,8 @@ export default function ApiAction(props: Props) {
                     // do nothing
                 }
 
+                const wasDataWrapped = (data && data._lrd)
+
                 if (data && data._lrd && data._lrd.queries) {
                     const sqlQueries = data._lrd.queries.map((query: any) => {
                         return "Connection: "
@@ -174,12 +176,12 @@ export default function ApiAction(props: Props) {
                     })
                 }
                 if (isJson) {
-                    if (data?.data) {
+                    if (wasDataWrapped && data?.data) {
                         setResponseData(JSON.stringify(data?.data, null, 2))
                     } else {
                         setResponseData(JSON.stringify(data, null, 2))
                     }
-                    
+
                 } else {
                     setResponseData(dataString)
                 }

ui/src/components/App.tsx

@@ -59,6 +59,18 @@ export default function App() {
         generateDocs(api)
     }, [])
 
+    const scrollToAnchorOnHistory = () => {
+        // get the anchor link and scroll to it
+        const anchor = window.location.hash;
+        if (anchor) {
+            const anchorId = anchor.replace('#', '');
+            const element = document.getElementById(anchorId);
+            if (element) {
+                element.scrollIntoView();
+            }
+        }
+    }
+
     const generateDocs = (url: string) => {
         setSendingRequest(true)
         const response = fetch(url);
@@ -75,6 +87,9 @@ export default function App() {
                 setLrdDocsJson(lrdDocsJson)
                 setLrdDocsJsonCopy(lrdDocsJson)
                 setSendingRequest(false)
+                setTimeout(() => {
+                    scrollToAnchorOnHistory()
+                }, 10) // greater than 1 is fine
             }).catch((error) => {
                 setError(error.message)
                 setSendingRequest(false)

ui/src/components/Sidebar.tsx

@@ -28,7 +28,11 @@ export default function Sidebar(props: Props) {
                                 </li>
                             )}
                             <li>
-                                <AnchorLink href={'#' + lrdDocsItem.http_method + lrdDocsItem.uri} className="flex flex-row px-0 py-1">
+                                <AnchorLink href={'#' + lrdDocsItem.http_method + lrdDocsItem.uri}
+                                    onClick={() => {
+                                        window.history.pushState({}, '', '#' + lrdDocsItem.http_method + lrdDocsItem.uri);
+                                    }}
+                                    className="flex flex-row px-0 py-1">
                                         <span className={`method-${lrdDocsItem.http_method} uppercase text-xs w-12 p-0 flex flex-row-reverse`}>
                                             {lrdDocsItem.http_method}
                                         </span>