From ddd075ef642d0c5723e0d7f7a71b5f04d2c4d8b5 Mon Sep 17 00:00:00 2001
From: bakk <bakk@tuta.io>
Date: Sat, 29 May 2021 13:23:08 +0200
Subject: [PATCH] kalk_web: Added placeholder

---
 kalk_web/package.json              |  2 +-
 kalk_web/src/KalkCalculator.svelte | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/kalk_web/package.json b/kalk_web/package.json
index 8d3e4cd..b5edad6 100644
--- 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
index 84fbfd0..598eb3e 100644
--- 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;
         }