feat: support text_mode collapse recursive

Author: cahierchen

src/lib/components/modes/JSONEditorRoot.svelte

@@ -238,7 +238,7 @@
     if (refTreeMode) {
       return refTreeMode.collapse(path, recursive)
     } else if (refTextMode) {
-      return refTextMode.collapse(path)
+      return refTextMode.collapse(path, recursive)
     } else {
       throw new Error(`Method collapse is not available in mode "${mode}"`)
     }

src/lib/components/modes/textmode/TextMode.svelte

@@ -286,23 +286,28 @@
     }
   }
 
-  export function collapse(path: JSONPath) {
+  export function collapse(path: JSONPath, recursive: boolean) {
     if (!codeMirrorView) {
       return
     }
 
     try {
       if (path && path.length > 0) {
-        // Find the text location of the given JSON path
-        const { from } = findTextLocation(normalization.escapeValue(text), path)
-
-        if (from !== undefined) {
-          // Set selection to the position we want to fold
-          codeMirrorView.dispatch({
-            selection: { anchor: from, head: from }
-          })
-          // Use CodeMirror's foldCode command for specific path
-          foldCode(codeMirrorView)
+        if (recursive) {
+          // Recursively fold all nested objects and arrays
+          collapseRecursively(path)
+        } else {
+          // Find the text location of the given JSON path
+          const { from } = findTextLocation(normalization.escapeValue(text), path)
+
+          if (from !== undefined && from !== 0) {
+            // Set selection to the position we want to fold
+            codeMirrorView.dispatch({
+              selection: { anchor: from, head: from }
+            })
+            // Use CodeMirror's foldCode command for specific path
+            foldCode(codeMirrorView)
+          }
         }
       } else {
         foldAll(codeMirrorView)
@@ -311,6 +316,66 @@
       onError(err as Error)
     }
   }
+  function findFoldableLocations(
+    foldableLocations: number[],
+    currentValue: unknown,
+    currentPath: JSONPath
+  ) {
+    if (currentValue && typeof currentValue === 'object' && currentValue !== null) {
+      const { from } = findTextLocation(normalization.escapeValue(text), currentPath)
+      if (from !== undefined && from !== 0) {
+        foldableLocations.push(from)
+      }
+
+      // Recursively check nested objects and arrays
+      if (Array.isArray(currentValue)) {
+        currentValue.forEach((item, index) => {
+          findFoldableLocations(foldableLocations, item, currentPath.concat(String(index)))
+        })
+      } else {
+        Object.keys(currentValue as Record<string, unknown>).forEach((key) => {
+          findFoldableLocations(
+            foldableLocations,
+            (currentValue as Record<string, unknown>)[key],
+            currentPath.concat(key)
+          )
+        })
+      }
+    }
+    return foldableLocations
+  }
+
+  function collapseRecursively(path: JSONPath) {
+    try {
+      const json = parser.parse(text)
+
+      // Get the value at the specified path
+      let value = json
+      for (const segment of path) {
+        if (value && typeof value === 'object' && value !== null && segment in value) {
+          value = (value as Record<string, unknown>)[segment]
+        } else {
+          return
+        }
+      }
+      // Find all foldable locations that need to be collapsed
+      const foldableLocations: number[] = []
+      findFoldableLocations(foldableLocations, value, path)
+      // Sort locations in reverse order to fold from deepest to shallowest
+      // This prevents issues with position changes after folding
+      foldableLocations.sort((a, b) => b - a)
+
+      // Fold each location
+      foldableLocations.forEach((location) => {
+        codeMirrorView.dispatch({
+          selection: { anchor: location, head: location }
+        })
+        foldCode(codeMirrorView)
+      })
+    } catch (err) {
+      onError(err as Error)
+    }
+  }
 
   export function expand(path: JSONPath, callback: OnExpand = expandSelf) {
     if (!codeMirrorView) {

src/routes/examples/expand_collapse/+page.svelte

@@ -20,7 +20,7 @@
   }
 
   function collapseObject() {
-    refJsonEditor.collapse(['object'])
+    refJsonEditor.collapse(['object'], true)
   }
 
   function expandArray() {
@@ -49,7 +49,7 @@
 
 <p>
   <button type="button" onclick={expandObject}>Expand object</button>
-  <button type="button" onclick={collapseObject}>Collapse object</button>
+  <button type="button" onclick={collapseObject}>Collapse object recursive</button>
   <button type="button" onclick={expandArray}>Expand array</button>
   <button type="button" onclick={collapseArray}>Collapse array</button>
 </p>