From 5aee35138e9d0ec273ab41a1386855c6c4232582 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Fri, 9 Aug 2019 22:14:07 +0200
Subject: [PATCH] Use placeholder in input UI

---
 docs/modules/Traits.md          | 40 ++++++++++++++++++++++++---------
 src/domain_abstract/ui/Input.js |  3 ++-
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/docs/modules/Traits.md b/docs/modules/Traits.md
index d99c3e533..e6c94f945 100644
--- a/docs/modules/Traits.md
+++ b/docs/modules/Traits.md
@@ -14,16 +14,6 @@ To get a better understanding of the content in this guide we recommend reading
 [[toc]]
 
 
-## Built-in trait types
-
-* text
-* number
-* checkbox
-* select
-* color
-
-
-
 
 
 ## Add Traits to Components
@@ -147,6 +137,36 @@ editor.DomComponents.addType('input', {
 })
 ```
 
+## Built-in trait types
+
+GrapesJS comes along with few built-in types that you can use to define your traits:
+
+* **Text**
+Simple text input
+```js
+{
+  type: 'text',
+  name: 'my-trait', // Available for all traits
+  label: 'My trait', // The label you will see near the input
+  placeholder: 'Insert text', // Placeholder to show inside the input
+}
+```
+* **Number**
+Number input
+```js
+{
+  type: 'number',
+  // ...
+  placeholder: '0-100',
+  min: 0, // Minimum number value
+  max: 100, // Maximum number value
+  step: 5, // Number of steps
+}
+```
+* checkbox
+* select
+* color
+
 
 
 ## Define new Trait type
diff --git a/src/domain_abstract/ui/Input.js b/src/domain_abstract/ui/Input.js
index bdd04562f..39b38a3a5 100644
--- a/src/domain_abstract/ui/Input.js
+++ b/src/domain_abstract/ui/Input.js
@@ -68,7 +68,8 @@ export default Backbone.View.extend({
    */
   getInputEl() {
     if (!this.inputEl) {
-      const plh = this.model.get('defaults') || '';
+      const { model } = this;
+      const plh = model.get('placeholder') || model.get('defaults') || '';
       this.inputEl = $(`<input type="text" placeholder="${plh}">`);
     }