From 7e9fc486f2e56c45c78b062517b7ba039ca7e93d Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 15 Nov 2021 16:22:54 +0530
Subject: [PATCH] feat: placeholder implementation

---
 .../helpers/editor/codemirror.ts              | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index 000d107af..add34f912 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -1,4 +1,10 @@
-import { keymap, EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view"
+import {
+  keymap,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+  placeholder,
+} from "@codemirror/view"
 import {
   Extension,
   EditorState,
@@ -144,6 +150,7 @@ export function useCodemirror(
 ): { cursor: Ref<{ line: number; ch: number }> } {
   const language = new Compartment()
   const lineWrapping = new Compartment()
+  const placeholderConfig = new Compartment()
 
   const cachedCursor = ref({
     line: 0,
@@ -199,6 +206,9 @@ export function useCodemirror(
           EditorState.changeFilter.of(
             () => !options.extendedEditorConfig.readOnly
           ),
+          placeholderConfig.of(
+            placeholder(options.extendedEditorConfig.placeholder ?? "")
+          ),
           language.of(
             getEditorLanguage(
               options.extendedEditorConfig.mode ?? "",
@@ -278,6 +288,15 @@ export function useCodemirror(
     }
   )
 
+  watch(
+    () => options.extendedEditorConfig.placeholder,
+    (newValue) => {
+      view.value?.dispatch({
+        effects: placeholderConfig.reconfigure(placeholder(newValue ?? "")),
+      })
+    }
+  )
+
   watch(cursor, (newPos) => {
     if (view.value) {
       if (