From 47f4350cdde7b4739ebc1c4980180bb8e40c70a0 Mon Sep 17 00:00:00 2001
From: Nicolas CARPi <nico-git@deltablot.email>
Date: Thu, 16 Dec 2021 00:05:00 +0100
Subject: [PATCH] add placeholder option

---
 demo/index.html |  2 ++
 src/main.ts     | 11 +++++++++++
 2 files changed, 13 insertions(+)

diff --git a/demo/index.html b/demo/index.html
index b7cdb34..4a4380f 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -39,6 +39,8 @@ <h2>Selecting behavior on Enter keypress</h2>
       <p><code>data-ma-enter='cancel'</code><br><span data-malleable='true' data-ma-enter='cancel'>Pressing Enter will cancel edition.</span></p>
       <p><code>data-ma-enter='submit'</code><br><span data-malleable='true' data-ma-enter='submit'>Pressing Enter will submit changes.</span></p>
       <p><code>data-ma-enter='ignore'</code><br><span data-malleable='true' data-ma-enter='ignore'>Pressing Enter will do nothing.</span></p>
+      <h2>Adding a placeholder</h2>
+      <p><code>data-ma-placeholder='you@example.com'</code><br>Your email is: <span data-malleable='true' data-ma-placeholder='you@example.com' data-ma-type='email'>niko@example.com</span></p>
     </div>
 
     <script src='main.js' type='module'></script>
diff --git a/src/main.ts b/src/main.ts
index a2ca75b..f0b9d74 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -48,6 +48,7 @@ export interface Options {
   onBlur?: Action;
   onEdit?(original: HTMLElement, event:Event, input: HTMLInputElement): boolean;
   onEnter?: Action;
+  placeholder?: string;
   selectOptions?: Array<SelectOptions>;
   submit?: string;
   submitClasses?: Array<string>;
@@ -89,6 +90,7 @@ export class Malle {
       onBlur: Action.Submit,
       onEdit: undefined,
       onEnter: Action.Submit,
+      placeholder: '',
       selectOptions: [],
       submit: '',
       submitClasses: [],
@@ -208,6 +210,15 @@ export class Malle {
     // the value of the input is the current text of the original element
     input.value = this.original.innerText;
 
+    // PLACEHOLDER
+    if (this.opt.placeholder) {
+      input.placeholder = this.opt.placeholder;
+    }
+    // data-ma-placeholder will override the option
+    if (this.original.dataset.maPlaceholder) {
+      input.placeholder = this.original.dataset.maPlaceholder;
+    }
+
     // add options for a select
     if (this.opt.inputType === InputType.Select) {
       this.opt.selectOptions.forEach(o => {