From c689b03799c777e1cdae51e75731870accabbd2d Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 1 Apr 2022 00:53:28 +0530
Subject: [PATCH] fix: line wrap respects indentation

---
 .../helpers/editor/codemirror.ts              |  5 ++--
 .../editor/extensions/IndentedLineWrap.ts     | 27 +++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 packages/hoppscotch-app/helpers/editor/extensions/IndentedLineWrap.ts

diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index a93c459c4..9f2b1a7ee 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/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] : []
         ),
       })
     }
diff --git a/packages/hoppscotch-app/helpers/editor/extensions/IndentedLineWrap.ts b/packages/hoppscotch-app/helpers/editor/extensions/IndentedLineWrap.ts
new file mode 100644
index 000000000..5ad2519cb
--- /dev/null
+++ b/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,
+]