add placeholder option

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='[email protected]'</code><br>Your email is: <span data-malleable='true' data-ma-placeholder='[email protected]' data-ma-type='email'>[email protected]</span></p>
     </div>
 
     <script src='main.js' type='module'></script>

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 => {