feat: placeholder implementation

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 (