Add placeholder text for Cypher editor

src/components/MainLayout.vue

@@ -116,8 +116,7 @@
               <br />
               <br />
               You can visualize the schema of LDBC SNB in the Schema tab and execute
-              interactive Cypher queries in the Shell tab. If your query returns more than
-              1000 rows, it will be truncated.
+              interactive Cypher queries in the Shell tab.
             </p>
             <p v-if="modeStore.isReadOnly">
               KùzuExplorer is running in read-only mode. In this mode, you cannot load a

src/components/ShellView/CypherEditor.vue

@@ -44,6 +44,7 @@ import CypherLanguage from "../../utils/CypherLanguage";
 import MonacoCypherLanguage from "../../utils/MonacoCypherLanguage";
 import * as Monaco from "monaco-editor";
 import { UI_SIZE } from "../../utils/Constants";
+import PlaceholderContentWidget from "../../utils/MonacoPlaceholderContentWidget";
 
 // Make sure Monaco is not reactive. Otherwise, it will cause the Vue.js
 // app to crash.
@@ -141,6 +142,8 @@ export default {
       this.editor.addCommand(window.Monaco.KeyMod.Shift | window.Monaco.KeyCode.Enter, () => {
         this.evaluateCypher();
       });
+
+      new PlaceholderContentWidget('> Type your query here', this.editor);
     },
     toggleMaximize() {
       this.$emit("toggleMaximize");

src/utils/MonacoPlaceholderContentWidget.js

@@ -0,0 +1,57 @@
+class PlaceholderContentWidget {
+  static ID = "editor.widget.placeholderHint";
+
+  constructor(placeholder, editor) {
+    this.placeholder = placeholder;
+    this.editor = editor;
+    // register a listener for editor code changes
+    editor.onDidChangeModelContent(() => this.onDidChangeModelContent());
+    // ensure that on initial load the placeholder is shown
+    this.onDidChangeModelContent();
+  }
+
+  onDidChangeModelContent() {
+    if (this.editor.getValue() === "") {
+      this.editor.addContentWidget(this);
+    } else {
+      this.editor.removeContentWidget(this);
+    }
+  }
+
+  getId() {
+    return PlaceholderContentWidget.ID;
+  }
+
+  getDomNode() {
+    if (!this.domNode) {
+      this.domNode = document.createElement("div");
+      this.domNode.style.width = "max-content";
+      this.domNode.textContent = this.placeholder;
+      this.domNode.style.fontStyle = "italic";
+      this.domNode.style.color = "#6c757d";
+      this.editor.applyFontInfo(this.domNode);
+    }
+
+    return this.domNode;
+  }
+
+  getPosition() {
+    const monaco = window.Monaco;
+    if (!monaco) {
+      return {
+        position: { lineNumber: 1, column: 1 },
+        preference: [1],
+      };
+    }
+    return {
+      position: { lineNumber: 1, column: 1 },
+      preference: [monaco.editor.ContentWidgetPositionPreference.EXACT],
+    };
+  }
+
+  dispose() {
+    this.editor.removeContentWidget(this);
+  }
+}
+
+export default PlaceholderContentWidget;