kalk_web: Added placeholder

PaddiM8 · May 29, 2021 · ddd075e · ddd075e
1 parent 5401415
commit ddd075e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/kalk_web/package.json b/kalk_web/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@paddim8/kalk-component",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"description": "A Svelte component for kalk, a calculator that supports user-defined functions and variables.",
 	"svelte": "src/main.ts",
 	"main": "public/build/bundle.js",

diff --git a/kalk_web/src/KalkCalculator.svelte b/kalk_web/src/KalkCalculator.svelte
@@ -56,6 +56,10 @@
     function setHtml(html: string) {
         highlightedTextElement.innerHTML = html;
         inputElement.value = highlightedTextElement.textContent;
+
+        if (!html) {
+            highlightedTextElement.innerHTML = `<span class='placeholder'>${hinttext}</div>`;
+        }
     }
 
     function getHtml(): string {
@@ -310,7 +314,9 @@
                     class="highlighted-text"
                     aria-hidden
                     bind:this={highlightedTextElement}
-                />
+                >
+                    <span class="placeholder">{hinttext}</span>
+                </div>
                 <textarea
                     class="input"
                     placeholder={hinttext}
@@ -388,6 +394,10 @@
             box-sizing: border-box;
         }
 
+        .placeholder {
+            color: gray;
+        }
+
         .prompt {
             background-color: inherit;
         }