rails-bootstrap-markdown 1.0.0 → 2.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b27bac04a913814ecb58b4abbb151d3e8aac8acb
-  data.tar.gz: 1f18da19cced94651de9f54d38a46e40ae18ae6d
+  metadata.gz: 3d90f4705ea4630c7e176d8d07efcb18e4faf4ce
+  data.tar.gz: 84096cdc58399fc311942bc9a0483bfe59fe4d83
 SHA512:
-  metadata.gz: 6ef374aaeba24702f1797416d7f1dc329842d934921edf829527f152f4b4236e2566a43ad8737646f8b4f780dfb95844e8b7c2588acf97bf446fb63da91de205
-  data.tar.gz: 265fc5fb77cf588995e50a95980822f1f6e798cce7c7a7a50726f9a0cb4d210bdde2baf7d76926f7d2e1c4bf973ed68b367b94804032d636a91b1b07a0ac52d1
+  metadata.gz: 86a34516bbadc8ec866f3663b24f7796d07c37d6738487dd5447c9c2f43b859f1f15480c1cc542cac3733ca47896d227f619fb5b21bac05b3143811b2043748d
+  data.tar.gz: dd2221974b223e8a2a9b74c07a18564bf18900dd6ecf189626a6b47bde0354e960dc98b75fe160e0ddb966493b6deae84163c4c4e561bb011c2499021b751f6f

data/.gitignore

@@ -15,3 +15,4 @@ spec/reports
 test/tmp
 test/version_tmp
 tmp
+.idea

data/README.md

@@ -7,6 +7,7 @@ A rails gem for [Bootstrap Markdown](http://toopay.github.io/bootstrap-markdown/
 - http://toopay.github.io/bootstrap-markdown/
 - https://github.com/domchristie/to-markdown
 - https://github.com/evilstreak/markdown-js
+- https://github.com/mathiasbynens/he
 
 ## Installation
 
@@ -32,8 +33,10 @@ Or install it yourself as:
 
 ### Javascript
 
+To require all 3rd party libraries at once, use:
+
 ```
-//= require bootstrap-markdown
+//= require bootstrap-markdown-bundle
 ```
 
 ## Contributing

data/app/assets/javascripts/bootstrap-markdown-bundle.js

@@ -0,0 +1,5 @@
+//= require he
+//= require markdown
+//= require to-markdown
+
+//= require bootstrap-markdown

data/app/assets/javascripts/bootstrap-markdown.js

@@ -1,8 +1,8 @@
 /* ===================================================
- * bootstrap-markdown.js v2.1.0
+ * bootstrap-markdown.js v2.6.0
  * http://github.com/toopay/bootstrap-markdown
  * ===================================================
- * Copyright 2013 Taufan Aditya
+ * Copyright 2013-2014 Taufan Aditya
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,9 +17,6 @@
  * limitations under the License.
  * ========================================================== */
 
-//= require markdown
-//= require to-markdown
-
 !function ($) {
 
   "use strict"; // jshint ;_;
@@ -30,17 +27,18 @@
 
   var Markdown = function (element, options) {
     // Class Properties
-    this.$ns          = 'bootstrap-markdown'
-    this.$element     = $(element)
-    this.$editable    = {el:null, type:null,attrKeys:[], attrValues:[], content:null}
-    this.$options     = $.extend(true, {}, $.fn.markdown.defaults, options)
-    this.$oldContent  = null
-    this.$isPreview   = false
-    this.$editor      = null
-    this.$textarea    = null
-    this.$handler     = []
-    this.$callback    = []
-    this.$nextTab     = []
+    this.$ns           = 'bootstrap-markdown'
+    this.$element      = $(element)
+    this.$editable     = {el:null, type:null,attrKeys:[], attrValues:[], content:null}
+    this.$options      = $.extend(true, {}, $.fn.markdown.defaults, options, this.$element.data(), this.$element.data('options'))
+    this.$oldContent   = null
+    this.$isPreview    = false
+    this.$isFullscreen = false
+    this.$editor       = null
+    this.$textarea     = null
+    this.$handler      = []
+    this.$callback     = []
+    this.$nextTab      = []
 
     this.showEditor()
   }
@@ -87,31 +85,37 @@
             var button = buttons[z],
                 buttonToggle = '',
                 buttonHandler = ns+'-'+button.name,
+                buttonIcon = this.__getIcon(button.icon),
                 btnText = button.btnText ? button.btnText : '',
                 btnClass = button.btnClass ? button.btnClass : 'btn',
-                tabIndex = button.tabIndex ? button.tabIndex : '-1'
+                tabIndex = button.tabIndex ? button.tabIndex : '-1',
+                hotkey = typeof button.hotkey !== 'undefined' ? button.hotkey : '',
+                hotkeyCaption = typeof jQuery.hotkeys !== 'undefined' && hotkey !== '' ? ' ('+hotkey+')' : ''
 
             if (button.toggle == true) {
               buttonToggle = ' data-toggle="button"'
             }
 
             // Attach the button object
-            btnGroupContainer.append('<button class="'
+            btnGroupContainer.append('<button type="button" class="'
                                     +btnClass
                                     +' btn-default btn-sm" title="'
-                                    +button.title
+                                    +this.__localize(button.title)
+                                    +hotkeyCaption
                                     +'" tabindex="'
                                     +tabIndex
                                     +'" data-provider="'
                                     +ns
                                     +'" data-handler="'
                                     +buttonHandler
+                                    +'" data-hotkey="'
+                                    +hotkey
                                     +'"'
                                     +buttonToggle
                                     +'><span class="'
-                                    +button.icon
+                                    +buttonIcon
                                     +'"></span> '
-                                    +btnText
+                                    +this.__localize(btnText)
                                     +'</button>')
 
             // Register handler and callback
@@ -133,12 +137,15 @@
           rowsVal = hasRows ? this.$textarea.attr('rows') : maxRows
 
       this.$textarea.attr('rows',rowsVal)
-      this.$textarea.css('resize','none')
+      if (this.$options.resize) {
+        this.$textarea.css('resize',this.$options.resize)
+      }
 
       this.$textarea
         .on('focus',    $.proxy(this.focus, this))
         .on('keypress', $.proxy(this.keypress, this))
         .on('keyup',    $.proxy(this.keyup, this))
+        .on('change',   $.proxy(this.change, this))
 
       if (this.eventSupported('keydown')) {
         this.$textarea.on('keydown', $.proxy(this.keydown, this))
@@ -161,6 +168,9 @@
 
       callbackHandler(this)
 
+      // Trigger onChange for each button handle
+      this.change(this);
+
       // Unless it was the save handler,
       // focusin the textarea
       if (handlerName.indexOf('cmdSave') < 0) {
@@ -170,6 +180,40 @@
       e.preventDefault()
     }
 
+  , __localize: function(string) {
+      var messages = $.fn.markdown.messages,
+          language = this.$options.language
+      if (
+        typeof messages !== 'undefined' &&
+        typeof messages[language] !== 'undefined' &&
+        typeof messages[language][string] !== 'undefined'
+      ) {
+        return messages[language][string];
+      }
+      return string;
+    }
+
+  , __getIcon: function(src) {
+    return typeof src == 'object' ? src[this.$options.iconlibrary] : src;
+  }
+
+  , setFullscreen: function(mode) {
+    var $editor = this.$editor,
+        $textarea = this.$textarea
+
+    if (mode === true) {
+      $editor.addClass('md-fullscreen-mode')
+      $('body').addClass('md-nooverflow')
+      this.$options.onFullscreen(this)
+    } else {
+      $editor.removeClass('md-fullscreen-mode')
+      $('body').removeClass('md-nooverflow')
+    }
+
+    this.$isFullscreen = mode;
+    $textarea.focus()
+  }
+
   , showEditor: function() {
       var instance = this,
           textarea,
@@ -195,14 +239,34 @@
                             'class': 'md-header btn-toolbar'
                             })
 
-        // Build the main buttons
-        if (options.buttons.length > 0) {
-          editorHeader = this.__buildButtons(options.buttons, editorHeader)
+        // Merge the main & additional button groups together
+        var allBtnGroups = []
+        if (options.buttons.length > 0) allBtnGroups = allBtnGroups.concat(options.buttons[0])
+        if (options.additionalButtons.length > 0) allBtnGroups = allBtnGroups.concat(options.additionalButtons[0])
+
+        // Reduce and/or reorder the button groups
+        if (options.reorderButtonGroups.length > 0) {
+          allBtnGroups = allBtnGroups
+              .filter(function(btnGroup) {
+                return options.reorderButtonGroups.indexOf(btnGroup.name) > -1
+              })
+              .sort(function(a, b) {
+                if (options.reorderButtonGroups.indexOf(a.name) < options.reorderButtonGroups.indexOf(b.name)) return -1
+                if (options.reorderButtonGroups.indexOf(a.name) > options.reorderButtonGroups.indexOf(b.name)) return 1
+                return 0
+              })
+        }
+
+        // Build the buttons
+        if (allBtnGroups.length > 0) {
+          editorHeader = this.__buildButtons([allBtnGroups], editorHeader)
         }
 
-        // Build the additional buttons
-        if (options.additionalButtons.length > 0) {
-          editorHeader = this.__buildButtons(options.additionalButtons, editorHeader)
+        if (options.fullscreen.enable) {
+          editorHeader.append('<div class="md-controls"><a class="md-control md-control-fullscreen" href="#"><span class="'+this.__getIcon(options.fullscreen.icons.fullscreenOn)+'"></span></a></div>').on('click', '.md-control-fullscreen', function(e) {
+              e.preventDefault();
+              instance.setFullscreen(true)
+          })
         }
 
         editor.append(editorHeader)
@@ -239,12 +303,15 @@
           container.replaceWith(editor)
         }
 
-        // Create the footer if savable
-        if (options.savable) {
-          var editorFooter = $('<div/>', {
+        var editorFooter = $('<div/>', {
                            'class': 'md-footer'
                          }),
-              saveHandler = 'cmdSave'
+            createFooter = false,
+            footer = ''
+        // Create the footer if savable
+        if (options.savable) {
+          createFooter = true;
+          var saveHandler = 'cmdSave'
 
           // Register handler and callback
           handler.push(saveHandler)
@@ -254,21 +321,43 @@
                               +ns
                               +'" data-handler="'
                               +saveHandler
-                              +'"><i class="icon icon-white icon-ok"></i> Save</button>')
+                              +'"><i class="icon icon-white icon-ok"></i> '
+                              +this.__localize('Save')
+                              +'</button>')
+
 
-          editor.append(editorFooter)
         }
 
-        // Set width/height
-        $.each(['height','width'],function(k,attr){
-          if (options[attr] != 'inherit') {
-            if (jQuery.isNumeric(options[attr])) {
-              editor.css(attr,options[attr]+'px')
-            } else {
-              editor.addClass(options[attr])
-            }
+        footer = typeof options.footer === 'function' ? options.footer(this) : options.footer
+
+        if ($.trim(footer) !== '') {
+          createFooter = true;
+          editorFooter.append(footer);
+        }
+
+        if (createFooter) editor.append(editorFooter)
+
+        // Set width
+        if (options.width && options.width !== 'inherit') {
+          if (jQuery.isNumeric(options.width)) {
+            editor.css('display', 'table')
+            textarea.css('width', options.width + 'px')
+          } else {
+            editor.addClass(options.width)
           }
-        })
+        }
+
+        // Set height
+        if (options.height && options.height !== 'inherit') {
+          if (jQuery.isNumeric(options.height)) {
+            var height = options.height
+            if (editorHeader) height = Math.max(0, height - editorHeader.outerHeight())
+            if (editorFooter) height = Math.max(0, height - editorFooter.outerHeight())
+            textarea.css('height', height + 'px')
+          } else {
+            editor.addClass(options.height)
+          }
+        }
 
         // Reference
         this.$editor     = editor
@@ -282,6 +371,30 @@
         this.$editor.attr('id',(new Date).getTime())
         this.$editor.on('click', '[data-provider="bootstrap-markdown"]', $.proxy(this.__handle, this))
 
+        if (this.$element.is(':disabled') || this.$element.is('[readonly]')) {
+          this.$editor.addClass('md-editor-disabled');
+          this.disableButtons('all');
+        }
+
+        if (this.eventSupported('keydown') && typeof jQuery.hotkeys === 'object') {
+          editorHeader.find('[data-provider="bootstrap-markdown"]').each(function() {
+            var $button = $(this),
+              hotkey = $button.attr('data-hotkey')
+            if (hotkey.toLowerCase() !== '') {
+              textarea.bind('keydown', hotkey, function() {
+                $button.trigger('click')
+                return false;
+              })
+            }
+          })
+        }
+
+        if (options.initialstate === 'preview') {
+          this.showPreview();
+        } else if (options.initialstate === 'fullscreen' && options.fullscreen.enable) {
+          this.setFullscreen(true)
+        }
+
       } else {
         this.$editor.show()
       }
@@ -291,15 +404,60 @@
         this.$editor.addClass('active')
       }
 
+      if (options.fullscreen.enable && options.fullscreen !== false) {
+        this.$editor.append('\
+          <div class="md-fullscreen-controls">\
+            <a href="#" class="switch-theme" title="Switch themes"><span class="'+this.__getIcon(options.fullscreen.icons.switchTheme)+'"></span></a>\
+            <a href="#" class="exit-fullscreen" title="Exit fullscreen"><span class="'+this.__getIcon(options.fullscreen.icons.fullscreenOff)+'"></span></a>\
+          </div>')
+
+        this.$editor.on('click', '.exit-fullscreen', function(e) {
+          e.preventDefault()
+          instance.setFullscreen(false)
+        })
+
+        this.$editor.on('click', '.switch-theme', function(e) {
+          e.preventDefault()
+          instance.$editor.toggleClass('theme-dark')
+        })
+      }
+
+      // hide hidden buttons from options
+      this.hideButtons(options.hiddenButtons)
+
+      // disable disabled buttons from options
+      this.disableButtons(options.disabledButtons)
+
       // Trigger the onShow hook
       options.onShow(this)
 
       return this
     }
 
+  , parseContent: function() {
+      var content,
+        callbackContent = this.$options.onPreview(this) // Try to get the content from callback
+
+      if (typeof callbackContent == 'string') {
+        // Set the content based by callback content
+        content = callbackContent
+      } else {
+        // Set the content
+        var val = this.$textarea.val();
+        if(typeof markdown == 'object') {
+          content = markdown.toHTML(val);
+        }else if(typeof marked == 'function') {
+          content = marked(val);
+        } else {
+          content = val;
+        }
+      }
+
+      return content;
+    }
+
   , showPreview: function() {
       var options = this.$options,
-          callbackContent = options.onPreview(this), // Try to get the content from callback
           container = this.$textarea,
           afterContainer = container.next(),
           replacementContainer = $('<div/>',{'class':'md-preview','data-provider':'markdown-preview'}),
@@ -310,13 +468,7 @@
       // Disable all buttons
       this.disableButtons('all').enableButtons('cmdPreview')
 
-      if (typeof callbackContent == 'string') {
-        // Set the content based by callback content
-        content = callbackContent
-      } else {
-        // Set the content
-        content = (typeof markdown == 'object') ? markdown.toHTML(container.val()) : container.val()
-      }
+      content = this.parseContent()
 
       // Build preview element
       replacementContainer.html(content)
@@ -329,12 +481,27 @@
         container.parent().append(replacementContainer)
       }
 
+      // Set the preview element dimensions
+      replacementContainer.css({
+        width: container.outerWidth() + 'px',
+        height: container.outerHeight() + 'px'
+      })
+
+      if (this.$options.resize) {
+        replacementContainer.css('resize',this.$options.resize)
+      }
+
       // Hide the last-active textarea
       container.hide()
 
       // Attach the editor instances
       replacementContainer.data('markdown',this)
 
+      if (this.$element.is(':disabled') || this.$element.is('[readonly]')) {
+        this.$editor.addClass('md-editor-disabled');
+        this.disableButtons('all');
+      }
+
       return this
     }
 
@@ -350,6 +517,8 @@
 
       // Enable all buttons
       this.enableButtons('all')
+      // Disable configured disabled buttons
+      this.disableButtons(this.$options.disabledButtons)
 
       // Back to the editor
       this.$textarea.show()
@@ -477,7 +646,7 @@
         this.$nextTab.push(function(){
           return that.findSelection(start)
         })
-      } else if (typeof start == 'numeric' && typeof end == 'numeric') {
+      } else if (typeof start == 'number' && typeof end == 'number') {
         var oldSelection = this.getSelection()
 
         this.setSelection(start,end)
@@ -489,24 +658,70 @@
       return
     }
 
-  , enableButtons: function(name) {
-      var alter = function (el) {
-        el.removeAttr('disabled')
+  , __parseButtonNameParam: function(nameParam) {
+      var buttons = []
+
+      if (typeof nameParam == 'string') {
+        buttons.push(nameParam)
+      } else {
+        buttons = nameParam
       }
 
-      this.__alterButtons(name,alter)
+      return buttons
+    }
 
-      return this
+  , enableButtons: function(name) {
+      var buttons = this.__parseButtonNameParam(name),
+        that = this
+
+      $.each(buttons, function(i, v) {
+        that.__alterButtons(buttons[i], function (el) {
+          el.removeAttr('disabled')
+        });
+      })
+
+      return this;
     }
 
   , disableButtons: function(name) {
-      var alter = function (el) {
-        el.attr('disabled','disabled')
-      }
+      var buttons = this.__parseButtonNameParam(name),
+        that = this
 
-      this.__alterButtons(name,alter)
+      $.each(buttons, function(i, v) {
+        that.__alterButtons(buttons[i], function (el) {
+          el.attr('disabled','disabled')
+        });
+      })
+
+      return this;
+    }
+
+  , hideButtons: function(name) {
+      var buttons = this.__parseButtonNameParam(name),
+        that = this
+
+      $.each(buttons, function(i, v) {
+        that.__alterButtons(buttons[i], function (el) {
+          el.addClass('hidden');
+        });
+      })
+
+      return this;
+
+    }
+
+  , showButtons: function(name) {
+      var buttons = this.__parseButtonNameParam(name),
+        that = this
+
+      $.each(buttons, function(i, v) {
+        that.__alterButtons(buttons[i], function (el) {
+          el.removeClass('hidden');
+        });
+      })
+
+      return this;
 
-      return this
     }
 
   , eventSupported: function(eventName) {
@@ -518,16 +733,6 @@
       return isSupported
     }
 
-  , keydown: function (e) {
-      this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27])
-      this.keyup(e)
-    }
-
-  , keypress: function (e) {
-      if (this.suppressKeyPressRepeat) return
-      this.keyup(e)
-    }
-
   , keyup: function (e) {
       var blocked = false
       switch(e.keyCode) {
@@ -568,7 +773,10 @@
           break
 
         case 13: // enter
+          blocked = false
+          break
         case 27: // escape
+          if (this.$isFullscreen) this.setFullscreen(false)
           blocked = false
           break
 
@@ -580,7 +788,14 @@
         e.stopPropagation()
         e.preventDefault()
       }
-  }
+
+      this.$options.onChange(this)
+    }
+
+  , change: function(e) {
+      this.$options.onChange(this);
+      return this;
+    }
 
   , focus: function (e) {
       var options = this.$options,
@@ -605,6 +820,9 @@
         }
       })
 
+      // Trigger the onFocus hook
+      options.onFocus(this);
+
       return this
     }
 
@@ -663,6 +881,8 @@
     })
   }
 
+  $.fn.markdown.messages = {}
+
   $.fn.markdown.defaults = {
     /* Editor Properties */
     autofocus: false,
@@ -670,6 +890,10 @@
     savable:false,
     width: 'inherit',
     height: 'inherit',
+    resize: 'none',
+    iconlibrary: 'glyph',
+    language: 'en',
+    initialstate: 'editor',
 
     /* Buttons Properties */
     buttons: [
@@ -677,15 +901,16 @@
         name: 'groupFont',
         data: [{
           name: 'cmdBold',
+          hotkey: 'Ctrl+B',
           title: 'Bold',
-          icon: 'glyphicon glyphicon-bold',
+          icon: { glyph: 'glyphicon glyphicon-bold', fa: 'fa fa-bold', 'fa-3': 'icon-bold' },
           callback: function(e){
             // Give/remove ** surround the selection
             var chunk, cursor, selected = e.getSelection(), content = e.getContent()
 
             if (selected.length == 0) {
               // Give extra word
-              chunk = 'strong text'
+              chunk = e.__localize('strong text')
             } else {
               chunk = selected.text
             }
@@ -707,14 +932,15 @@
         },{
           name: 'cmdItalic',
           title: 'Italic',
-          icon: 'glyphicon glyphicon-italic',
+          hotkey: 'Ctrl+I',
+          icon: { glyph: 'glyphicon glyphicon-italic', fa: 'fa fa-italic', 'fa-3': 'icon-italic' },
           callback: function(e){
             // Give/remove * surround the selection
             var chunk, cursor, selected = e.getSelection(), content = e.getContent()
 
             if (selected.length == 0) {
               // Give extra word
-              chunk = 'emphasized text'
+              chunk = e.__localize('emphasized text')
             } else {
               chunk = selected.text
             }
@@ -736,16 +962,17 @@
         },{
           name: 'cmdHeading',
           title: 'Heading',
-          icon: 'glyphicon glyphicon-font',
+          hotkey: 'Ctrl+H',
+          icon: { glyph: 'glyphicon glyphicon-header', fa: 'fa fa-font', 'fa-3': 'icon-font' },
           callback: function(e){
             // Append/remove ### surround the selection
             var chunk, cursor, selected = e.getSelection(), content = e.getContent(), pointer, prevChar
 
             if (selected.length == 0) {
               // Give extra word
-              chunk = 'heading text'
+              chunk = e.__localize('heading text')
             } else {
-              chunk = selected.text
+              chunk = selected.text + '\n';
             }
 
             // transform selection and set the cursor into chunked text
@@ -754,12 +981,12 @@
               e.setSelection(selected.start-pointer,selected.end)
               e.replaceSelection(chunk)
               cursor = selected.start-pointer
-            } else if (prevChar = content.substr(selected.start-1,1), !!prevChar && prevChar != '\n') {
-              e.replaceSelection('\n\n### '+chunk+'\n')
+            } else if (selected.start > 0 && (prevChar = content.substr(selected.start-1,1), !!prevChar && prevChar != '\n')) {
+              e.replaceSelection('\n\n### '+chunk)
               cursor = selected.start+6
             } else {
               // Empty string before element
-              e.replaceSelection('### '+chunk+'\n')
+              e.replaceSelection('### '+chunk)
               cursor = selected.start+4
             }
 
@@ -772,21 +999,22 @@
         data: [{
           name: 'cmdUrl',
           title: 'URL/Link',
-          icon: 'glyphicon glyphicon-globe',
+          hotkey: 'Ctrl+L',
+          icon: { glyph: 'glyphicon glyphicon-link', fa: 'fa fa-link', 'fa-3': 'icon-link' },
           callback: function(e){
             // Give [] surround the selection and prepend the link
             var chunk, cursor, selected = e.getSelection(), content = e.getContent(), link
 
             if (selected.length == 0) {
               // Give extra word
-              chunk = 'enter link description here'
+              chunk = e.__localize('enter link description here')
             } else {
               chunk = selected.text
             }
 
-            link = prompt('Insert Hyperlink','http://')
+            link = prompt(e.__localize('Insert Hyperlink'),'http://')
 
-            if (link != null) {
+            if (link != null && link != '' && link != 'http://') {
               // transform selection and set the cursor into chunked text
               e.replaceSelection('['+chunk+']('+link+')')
               cursor = selected.start+1
@@ -798,27 +1026,28 @@
         },{
           name: 'cmdImage',
           title: 'Image',
-          icon: 'glyphicon glyphicon-picture',
+          hotkey: 'Ctrl+G',
+          icon: { glyph: 'glyphicon glyphicon-picture', fa: 'fa fa-picture-o', 'fa-3': 'icon-picture' },
           callback: function(e){
             // Give ![] surround the selection and prepend the image link
             var chunk, cursor, selected = e.getSelection(), content = e.getContent(), link
 
             if (selected.length == 0) {
               // Give extra word
-              chunk = 'enter image description here'
+              chunk = e.__localize('enter image description here')
             } else {
               chunk = selected.text
             }
 
-            link = prompt('Insert Image Hyperlink','http://')
+            link = prompt(e.__localize('Insert Image Hyperlink'),'http://')
 
             if (link != null) {
               // transform selection and set the cursor into chunked text
-              e.replaceSelection('!['+chunk+']('+link+' "enter image title here")')
+              e.replaceSelection('!['+chunk+']('+link+' "'+e.__localize('enter image title here')+'")')
               cursor = selected.start+2
 
               // Set the next tab
-              e.setNextTab('enter image title here')
+              e.setNextTab(e.__localize('enter image title here'))
 
               // Set the cursor
               e.setSelection(cursor,cursor+chunk.length)
@@ -829,8 +1058,9 @@
         name: 'groupMisc',
         data: [{
           name: 'cmdList',
-          title: 'List',
-          icon: 'glyphicon glyphicon-list',
+          hotkey: 'Ctrl+U',
+          title: 'Unordered List',
+          icon: { glyph: 'glyphicon glyphicon-list', fa: 'fa fa-list', 'fa-3': 'icon-list-ul' },
           callback: function(e){
             // Prepend/Give - surround the selection
             var chunk, cursor, selected = e.getSelection(), content = e.getContent()
@@ -838,12 +1068,12 @@
             // transform selection and set the cursor into chunked text
             if (selected.length == 0) {
               // Give extra word
-              chunk = 'list text here'
+              chunk = e.__localize('list text here')
 
               e.replaceSelection('- '+chunk)
-
               // Set the cursor
               cursor = selected.start+2
+
             } else {
               if (selected.text.indexOf('\n') < 0) {
                 chunk = selected.text
@@ -869,7 +1099,130 @@
               }
             }
 
+            // Set the cursor
+            e.setSelection(cursor,cursor+chunk.length)
+          }
+        },
+        {
+          name: 'cmdListO',
+          hotkey: 'Ctrl+O',
+          title: 'Ordered List',
+          icon: { glyph: 'glyphicon glyphicon-th-list', fa: 'fa fa-list-ol', 'fa-3': 'icon-list-ol' },
+          callback: function(e) {
+
+            // Prepend/Give - surround the selection
+            var chunk, cursor, selected = e.getSelection(), content = e.getContent()
+
+            // transform selection and set the cursor into chunked text
+            if (selected.length == 0) {
+              // Give extra word
+              chunk = e.__localize('list text here')
+              e.replaceSelection('1. '+chunk)
+              // Set the cursor
+              cursor = selected.start+3
+
+            } else {
+              if (selected.text.indexOf('\n') < 0) {
+                chunk = selected.text
+
+                e.replaceSelection('1. '+chunk)
+
+                // Set the cursor
+                cursor = selected.start+3
+              } else {
+                var list = []
+
+                list = selected.text.split('\n')
+                chunk = list[0]
+
+                $.each(list,function(k,v) {
+                  list[k] = '1. '+v
+                })
+
+                e.replaceSelection('\n\n'+list.join('\n'))
 
+                // Set the cursor
+                cursor = selected.start+5
+              }
+            }
+
+            // Set the cursor
+            e.setSelection(cursor,cursor+chunk.length)
+          }
+        },
+        {
+          name: 'cmdCode',
+          hotkey: 'Ctrl+K',
+          title: 'Code',
+          icon: { glyph: 'glyphicon glyphicon-asterisk', fa: 'fa fa-code', 'fa-3': 'icon-code' },
+          callback: function(e) {
+
+            // Give/remove ** surround the selection
+            var chunk, cursor, selected = e.getSelection(), content = e.getContent()
+
+            if (selected.length == 0) {
+              // Give extra word
+              chunk = e.__localize('code text here')
+            } else {
+              chunk = selected.text
+            }
+
+            // transform selection and set the cursor into chunked text
+            if (content.substr(selected.start-1,1) == '`'
+                && content.substr(selected.end,1) == '`' ) {
+              e.setSelection(selected.start-1,selected.end+1)
+              e.replaceSelection(chunk)
+              cursor = selected.start-1
+            } else {
+              e.replaceSelection('`'+chunk+'`')
+              cursor = selected.start+1
+            }
+
+            // Set the cursor
+            e.setSelection(cursor,cursor+chunk.length)
+          }
+        },
+        {
+          name: 'cmdQuote',
+          hotkey: 'Ctrl+Q',
+          title: 'Quote',
+          icon: { glyph: 'glyphicon glyphicon-comment', fa: 'fa fa-quote-left', 'fa-3': 'icon-quote-left' },
+          callback: function(e) {
+            // Prepend/Give - surround the selection
+            var chunk, cursor, selected = e.getSelection(), content = e.getContent()
+
+            // transform selection and set the cursor into chunked text
+            if (selected.length == 0) {
+              // Give extra word
+              chunk = e.__localize('quote here')
+              e.replaceSelection('> '+chunk)
+              // Set the cursor
+              cursor = selected.start+2
+
+            } else {
+              if (selected.text.indexOf('\n') < 0) {
+                chunk = selected.text
+
+                e.replaceSelection('> '+chunk)
+
+                // Set the cursor
+                cursor = selected.start+2
+              } else {
+                var list = []
+
+                list = selected.text.split('\n')
+                chunk = list[0]
+
+                $.each(list,function(k,v) {
+                  list[k] = '> '+v
+                })
+
+                e.replaceSelection('\n\n'+list.join('\n'))
+
+                // Set the cursor
+                cursor = selected.start+4
+              }
+            }
 
             // Set the cursor
             e.setSelection(cursor,cursor+chunk.length)
@@ -880,10 +1233,11 @@
         data: [{
           name: 'cmdPreview',
           toggle: true,
+          hotkey: 'Ctrl+P',
           title: 'Preview',
           btnText: 'Preview',
           btnClass: 'btn btn-primary btn-sm',
-          icon: 'glyphicon glyphicon-search',
+          icon: { glyph: 'glyphicon glyphicon-search', fa: 'fa fa-search', 'fa-3': 'icon-search' },
           callback: function(e){
             // Check the preview mode and toggle based on this flag
             var isPreview = e.$isPreview,content
@@ -899,12 +1253,39 @@
       }]
     ],
     additionalButtons:[], // Place to hook more buttons by code
+    reorderButtonGroups:[],
+    hiddenButtons:[], // Default hidden buttons
+    disabledButtons:[], // Default disabled buttons
+    footer: '',
+    fullscreen: {
+      enable: true,
+      icons: {
+        fullscreenOn: {
+          fa: 'fa fa-expand',
+          glyph: 'glyphicon glyphicon-fullscreen',
+          'fa-3': 'icon-resize-full'
+        },
+        fullscreenOff: {
+          fa: 'fa fa-compress',
+          glyph: 'glyphicon glyphicon-fullscreen',
+          'fa-3': 'icon-resize-small'
+        },
+        switchTheme: {
+          fa: 'fa fa-adjust',
+          glyph: 'glyphicon glyphicon-adjust',
+          'fa-3': 'icon-adjust'
+        }
+      }
+    },
 
     /* Events hook */
     onShow: function (e) {},
     onPreview: function (e) {},
     onSave: function (e) {},
-    onBlur: function (e) {}
+    onBlur: function (e) {},
+    onFocus: function (e) {},
+    onChange: function(e) {},
+    onFullscreen: function(e) {}
   }
 
   $.fn.markdown.Constructor = Markdown
@@ -927,7 +1308,8 @@
       $this.data('markdown').showEditor()
       return
     }
-    $this.markdown($this.data())
+
+    $this.markdown()
   }
 
   var analyzeMarkdown = function(e) {
@@ -993,4 +1375,4 @@
       })
     })
 
-}(window.jQuery);
+}(window.jQuery);