kalk_web placeholder

kalk_web/README.md

@@ -38,6 +38,7 @@ I am not aware of a better way.
 The colours in the component can be changed by using these attributes.
 ```html
 <kalk-calculator
+    hintText="Type something..." 
     identifierColor="cornflowerblue"
     operatorColor="darkorange"
     promptColor="mediumseagreen"

kalk_web/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@paddim8/kalk-component",
-	"version": "1.0.0",
+	"version": "1.0.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",

kalk_web/src/KalkCalculator.svelte

@@ -8,6 +8,7 @@
     export let promptColor = "mediumseagreen";
     export let errorColor = "tomato";
     export let linkColor = "cornflowerblue";
+    export let hintText = "";
 
     type Kalk = typeof import("@paddim8/kalk");
 
@@ -282,6 +283,13 @@
             outline: none;
         }
     }
+
+    [contenteditable][placeholder]:empty:before {
+        content: attr(placeholder);
+        position: absolute;
+        color: gray;
+        background-color: transparent;
+    }
 </style>
 
 <svelte:options tag="kalk-calculator" />
@@ -305,6 +313,7 @@
             <div
                 contenteditable="true"
                 class="input"
+                placeholder={hintText}
                 on:keydown={(event) => handleKeyDown(event, kalk)}
                 on:keyup={handleKeyUp}
                 on:input={handleInput}