From e50c787480ffa5f126b9b8927f6d4b5b0603d4a2 Mon Sep 17 00:00:00 2001
From: Chang Liu <liuc223@gmail.com>
Date: Wed, 1 Nov 2023 17:40:52 +0800
Subject: [PATCH] Add placeholder text for Cypher editor

---
 src/components/MainLayout.vue               |  3 +-
 src/components/ShellView/CypherEditor.vue   |  3 ++
 src/utils/MonacoPlaceholderContentWidget.js | 57 +++++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/MonacoPlaceholderContentWidget.js

diff --git a/src/components/MainLayout.vue b/src/components/MainLayout.vue
index b574550..aad23a5 100644
--- a/src/components/MainLayout.vue
+++ b/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
diff --git a/src/components/ShellView/CypherEditor.vue b/src/components/ShellView/CypherEditor.vue
index af0e24b..7b3b8a0 100644
--- a/src/components/ShellView/CypherEditor.vue
+++ b/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");
diff --git a/src/utils/MonacoPlaceholderContentWidget.js b/src/utils/MonacoPlaceholderContentWidget.js
new file mode 100644
index 0000000..f32eca1
--- /dev/null
+++ b/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;