Added media query and configs for editor

also added placeholder

bower.json

@@ -4,6 +4,7 @@
   "dependencies": {
     "components-font-awesome": "^4.7.0",
     "demo-content": "kriss-kross-io/demo-content#^0.0.4",
+    "iron-media-query": "PolymerElements/iron-media-query#^1.0.8",
     "marked-element": "PolymerElements/marked-element#^1.2.0",
     "medium-editor-markdown": "IonicaBizau/medium-editor-markdown#^2.6.1",
     "paper-input": "PolymerElements/paper-input#^1.1.22",

demo/index.html

@@ -22,6 +22,7 @@ <h3>Basic markdown-editor demo</h3>
         <template>
           <markdown-editor
               markdown="> **Markdown** is _awesome_!"
+              placeholder-text="Type here"
               preview></markdown-editor>
         </template>
       </demo-snippet>

markdown-editor.html

@@ -4,6 +4,9 @@
 <link rel="import" href="../paper-input/paper-input-behavior.html">
 <link rel="import" href="../paper-input/paper-input-container.html">
 
+<!-- Iron elements -->
+<link rel="import" href="../iron-media-query/iron-media-query.html">
+
 <!-- Molecule elements -->
 <link rel="import" href="../marked-element/marked-element.html">
 
@@ -26,6 +29,12 @@
       :host {
         display: block;
       }
+      /*TODO: fix missing styling*/
+      /*:host ::content .markdown-html blockquote {
+        padding: 0 1em;
+        color: #777;
+        border-left: 0.25em solid #ddd;
+      }*/
       #preview {
         background-color: #ededed;
         overflow-x: scroll;
@@ -35,6 +44,8 @@
       }
     </style>
 
+    <iron-media-query query="max-width: 600px" query-matches="{{_smallScreen}}"></iron-media-query>
+
     <paper-input-container id="editor"
         always-float-label>
       <label>description</label>
@@ -54,6 +65,28 @@
       is: 'markdown-editor',
 
       properties: {
+        /**
+         * Instance of MediumEditor class
+         */
+        editor: {
+          type: Object,
+          readOnly: true,
+          observer: '_editorChanged'
+        },
+        /**
+         * Custom placeholder text shown in the editor window
+         */
+        placeholderText: {
+          type: String,
+          value: null
+        },
+        /**
+         * Hides the placeholder upon clicking the text editor when true
+         */
+        placeholderHide: {
+          type: Boolean,
+          value: true
+        },
         /**
          * The markdown to be rendered
          */
@@ -68,57 +101,119 @@
           type: Boolean,
           reflectToAttribute: true,
           value: false
+        },
+        _smallScreen: {
+          type: Boolean
+        }
+      },
+
+      ready: function () {
+        this._initializeEditor();
+      },
+
+      _initializeEditor: function () {
+        if (this.editor) {
+          this.editor.destroy();
+          this._setEditor(null);
+        }
+        this._setEditor(new MediumEditor(this.$.input, this._buildOptions()));
+
+        // cleaning span tags
+        this.editor.subscribe('editableInput', this._handleEditableInput.bind(this));
+      },
+
+      _buildOptions: function () {
+        var options = {};
+
+        options['disableExtraSpaces'] =  true;
+        options['buttonLabels'] =  'fontawesome';
+        options['targetBlank'] =  true;
+
+        // TOOLBAR
+        var toolbarOptions = {};
+        toolbarOptions['buttons'] = [
+          'bold',
+          'italic',
+          'anchor',
+          'h1',
+          'h2',
+          'h3',
+          'quote',
+          'unorderedlist',
+          'orderedlist',
+          'removeFormat'
+        ];
+        if (this._smallScreen) {
+          toolbarOptions['static'] = true;
+          toolbarOptions['sticky'] = true;
+        }
+        options['toolbar'] = toolbarOptions;
+
+        // PASTE
+        var pasteOptions = {};
+        pasteOptions['forcePlainText'] = true;
+        options['paste'] = pasteOptions;
+
+        // PLACEHOLDER
+        placeholderOptions = {};
+        if (this.placeholderText) {
+          if (this.placeholderText) {
+            placeholderOptions['text'] = this.placeholderText;
+          }
+          if (this.placeholderHide) {
+            placeholderOptions['hideOnClick'] = this.placeholderHide;
+          }
         }
+        options['placeholder'] = placeholderOptions;
+
+        // EXTENSIONS
+        var extensionOptions = {};
+        extensionOptions['markdown'] = new MeMarkdown({
+          events: [
+            'input',
+            'change',
+            'click',
+            'focus'
+          ]
+        }, function(markdown) {
+          this._handleOutput(markdown);
+        }.bind(this));
+        options['extensions'] = extensionOptions;
+
+        return options;
       },
 
-      ready: function() {
-        this.renderMarkdown();
-
-        new MediumEditor(this.$.input, {
-          extensions: {
-            markdown: new MeMarkdown(function(md) {
-              // console.log('md:\n%O', md);
-              this.set('markdown', md);
-            }.bind(this))
-          },
-          toolbar: {
-            buttons: [
-              'bold',
-              'italic',
-              'anchor',
-              'h1',
-              'h2',
-              'h3',
-              'quote',
-              'unorderedlist',
-              'orderedlist',
-              'removeFormat'
-            ],
-            static: true,
-            sticky: true
-          },
-          paste: {
-            forcePlainText: true
-          },
-          disableExtraSpaces: true,
-          buttonLabels: 'fontawesome',
-          targetBlank: true,
-          placeholder: false
-        }).subscribe('editableKeypress', function(event, element) {
-          // cleanse those span tags
-          var spanList = element.getElementsByTagName('span');
-          for (var i = 0; i < spanList.length; i++) {
-            spanList[i].outerHTML = spanList[i].innerHTML;
-          };
-        });
+      _handleEditableInput: function (event, element) {
+        // clean those span tags
+        var spanList = element.getElementsByTagName('span');
+        for (var i = 0; i < spanList.length; i++) {
+          spanList[i].outerHTML = spanList[i].innerHTML;
+        };
+      },
+
+      _handleOutput: function (md) {
+        if (this._editorReady) {
+          // console.log('md:\n"%s"', md);
+          this.set('markdown', md);
+        }
+      },
+
+      _editorChanged: function(editor) {
+        if (editor) {
+          this.renderMarkdown();
+          this.set('_editorReady', true);
+
+          if (this.markdown) {
+            this.editor.trigger('focus', {}, this.$.input);
+          }
+        }
       },
 
       /**
-       * Resets the input and applies the markdown property to `marked-element`
+       * Applies the markdown property to `marked-element`
        */
       renderMarkdown: function() {
-        this.$.input.innerHTML = null;
-
+        // console.log('renderMarkdown: %s', this.markdown);
         this.$.marked.markdown = this.markdown;
       }
 

medium-editor-markdown-import.html

@@ -1,6 +1,6 @@
 <!-- <link rel="import" href="editor-styles.html"> -->
 <link rel="stylesheet" href="../medium-editor/dist/css/medium-editor.min.css">
-<link rel="stylesheet" href="../medium-editor/dist/css/themes/flat.min.css">
+<link rel="stylesheet" href="../medium-editor/dist/css/themes/bootstrap.min.css">
 <link rel="stylesheet" href="../components-font-awesome/css/font-awesome.min.css">
 
 <script src="../medium-editor/dist/js/medium-editor.js"></script>