fix: request body does not reset, fix #730 (#749)

* fix: request body does not reset * docs(changeset): fix: request body doesn’t reset on navigating to a request without a body
scalar · Jan 8, 2024 · c171c9d · c171c9d
1 parent c2c9339
commit c171c9d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/.changeset/ninety-pugs-tickle.md b/.changeset/ninety-pugs-tickle.md
@@ -0,0 +1,6 @@
+---
+'@scalar/use-codemirror': patch
+'@scalar/api-client': patch
+---
+
+fix: request body doesn’t reset on navigating to a request without a body
diff --git a/packages/api-client/src/components/ApiClient/Request/RequestBody.vue b/packages/api-client/src/components/ApiClient/Request/RequestBody.vue
@@ -30,11 +30,12 @@ const updateActiveRequest = (value: string) => {
     <template v-else-if="formData && formData.length > 0">
       <Grid :items="formData" />
     </template>
-    <CodeMirror
-      v-else
-      :content="activeRequest.body"
-      :languages="['json']"
-      lineNumbers
-      @change="updateActiveRequest" />
+    <template v-else>
+      <CodeMirror
+        :content="activeRequest.body"
+        :languages="['json']"
+        lineNumbers
+        @change="updateActiveRequest" />
+    </template>
   </CollapsibleSection>
 </template>
diff --git a/packages/use-codemirror/src/components/CodeMirror/CodeMirror.vue b/packages/use-codemirror/src/components/CodeMirror/CodeMirror.vue
@@ -182,9 +182,7 @@ const {
 watch(
   () => props.content,
   () => {
-    if (props.content?.length) {
-      setCodeMirrorContent(props.content)
-    }
+    setCodeMirrorContent(props.content)
   },
 )
 

diff --git a/packages/use-codemirror/src/hooks/useCodeMirror.ts b/packages/use-codemirror/src/hooks/useCodeMirror.ts
@@ -41,7 +41,7 @@ export const useCodeMirror = (
   value: Ref<string>
   codeMirrorRef: Ref<HTMLDivElement | null>
   codeMirror: Ref<EditorView | null>
-  setCodeMirrorContent: (content: string) => void
+  setCodeMirrorContent: (content?: string) => void
   reconfigureCodeMirror: (newExtensions: Extension[]) => void
   restartCodeMirror: (newExtensions: Extension[]) => void
 } => {
@@ -144,7 +144,7 @@ export const useCodeMirror = (
     codeMirror.value?.destroy()
   }
 
-  const setCodeMirrorContent = (newValue: string) => {
+  const setCodeMirrorContent = (newValue?: string) => {
     // Check whether CodeMirror is mounted properly.
     if (!codeMirror.value) {
       return
@@ -155,9 +155,9 @@ export const useCodeMirror = (
       return
     }
 
-    value.value = newValue
+    value.value = newValue ?? ''
 
-    if (codeMirror.value.state.doc.toString() === newValue) {
+    if (codeMirror.value.state.doc.toString() === value.value) {
       // No need to set the CodeMirror content
       return
     }
@@ -171,7 +171,7 @@ export const useCodeMirror = (
       selection: {
         anchor: Math.min(
           codeMirror.value.state.selection.main.anchor,
-          newValue.length,
+          value.value.length,
         ),
       },
     })