feat: playground default fold (#816)

client/src/pages/play/Constants.ts

@@ -0,0 +1,10 @@
+export const DEFAULT_CODE_VALUE = `POST /v2/vectordb/databases/describe
+{
+  "dbName": "default"
+}
+
+POST /v2/vectordb/databases/list
+
+POST /v2/vectordb/collections/list`;
+
+export const DEFAULT_FOLD_LINE_RANGES = [{ lineFrom: 2, LineTo: 4 }];

client/src/pages/play/hooks/use-codemirror.ts

@@ -33,12 +33,19 @@ import {
   completionKeymap,
 } from '@codemirror/autocomplete';
 import { lintKeymap } from '@codemirror/lint';
+import {
+  DEFAULT_CODE_VALUE,
+  DEFAULT_FOLD_LINE_RANGES,
+} from '@/pages/play/Constants';
 
 import {
   lineNumbers,
   highlightActiveLineGutter,
 } from '../language/extensions/gutter';
-import { customFoldGutter } from '../language/extensions/fold';
+import {
+  customFoldGutter,
+  foldByLineRanges,
+} from '../language/extensions/fold';
 
 const basicSetup = () => [
   lineNumbers(),
@@ -107,6 +114,10 @@ export const useCodeMirror = (props: UseCodeMirrorProps) => {
         state: startState,
         parent: container,
       });
+
+      if (value === DEFAULT_CODE_VALUE) {
+        foldByLineRanges(editorView, DEFAULT_FOLD_LINE_RANGES);
+      }
       setView(editorView);
     }
 

client/src/pages/play/language/extensions/fold.ts

@@ -1,5 +1,22 @@
-import { foldService, syntaxTree } from '@codemirror/language';
-import { EditorState } from '@codemirror/state';
+import { foldEffect, foldService, syntaxTree } from '@codemirror/language';
+import { EditorState, StateEffect } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+export const foldByLineRanges = (
+  view: EditorView,
+  lineRanges: Array<{ lineFrom: number; LineTo: number }>
+) => {
+  const effects = [];
+  const { state } = view;
+
+  for (const { lineFrom, LineTo } of lineRanges) {
+    const lineStart = state.doc.line(lineFrom).from + 1;
+    const lineEnd = state.doc.line(LineTo).to - 1;
+    effects.push(foldEffect.of({ from: lineStart, to: lineEnd }));
+  }
+
+  view.dispatch({ effects });
+};
 
 export const customFoldGutter = () => {
   return foldService.of(