fix: line wrap respects indentation

packages/hoppscotch-app/helpers/editor/codemirror.ts

@@ -40,6 +40,7 @@ import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
 import { basicSetup, baseTheme, baseHighlightStyle } from "./themes/baseTheme"
 import { HoppEnvironmentPlugin } from "./extensions/HoppEnvironment"
+import { IndentedLineWrapPlugin } from "./extensions/IndentedLineWrap"
 // TODO: Migrate from legacy mode
 
 type ExtendedEditorConfig = {
@@ -237,7 +238,7 @@ export function useCodemirror(
       ),
       lineWrapping.of(
         options.extendedEditorConfig.lineWrapping
-          ? [EditorView.lineWrapping]
+          ? [IndentedLineWrapPlugin]
           : []
       ),
       keymap.of([
@@ -324,7 +325,7 @@ export function useCodemirror(
     (newMode) => {
       view.value?.dispatch({
         effects: lineWrapping.reconfigure(
-          newMode ? [EditorView.lineWrapping] : []
+          newMode ? [EditorView.lineWrapping, IndentedLineWrapPlugin] : []
         ),
       })
     }

packages/hoppscotch-app/helpers/editor/extensions/IndentedLineWrap.ts

@@ -0,0 +1,27 @@
+import { EditorView } from "@codemirror/view"
+
+const WrappedLineIndenter = EditorView.updateListener.of((update) => {
+  const view = update.view
+  const charWidth = view.defaultCharacterWidth
+  const lineHeight = view.defaultLineHeight
+  const basePadding = 10
+
+  view.viewportLines((line) => {
+    const domAtPos = view.domAtPos(line.from)
+
+    const lineCount = (line.bottom - line.top) / lineHeight
+
+    if (lineCount <= 1) return
+
+    const belowPadding = basePadding * charWidth
+
+    const node = domAtPos.node as HTMLElement
+    node.style.textIndent = `-${belowPadding - charWidth + 1}px`
+    node.style.paddingLeft = `${belowPadding}px`
+  })
+})
+
+export const IndentedLineWrapPlugin = [
+  EditorView.lineWrapping,
+  WrappedLineIndenter,
+]