character_editor 0.0.1 → 0.0.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9de43f73c9a9be5a52713b0e182eae7a3d77a5d4
-  data.tar.gz: 48d6f5ee42ea70ac33468e504d50a96ae9b2f86e
+  metadata.gz: e9ead82356a9f7446f9a612643dca791b865b2aa
+  data.tar.gz: f69a8651fdeed67516b651cd7d6f22bda7531c7d
 SHA512:
-  metadata.gz: 733d8129f5be1b895c043aaea78ba6cf692153f7c3c6c4d0e6fa00d55b8a33c50a3574cc5f16cf882f6c361f673d3acb9319d25c1f143ead6899c6f270b66f5b
-  data.tar.gz: 6a13445ba089a922eb5df7e77cb74d94117963ca3e6be89bf50a2832a9bb0d20012b80612d845f9d4062338a64f477891ed07422025a7621bdb1e515af8f1b8c
+  metadata.gz: 30d2bb4d3b1039e35a4a722c4bb1b11af61fc8356d80417be9a3475c6d262c948939aa94c03d93b83786b81500eed30baadefb5506653376215e8300dccbb8e1
+  data.tar.gz: ef4c68f4aedb47bea73fab5cae920edf1a5d4cde3fc223f1854643ea4f6eef470fc5dc0889bd7dab5b007b8fdffc83ef3ca1345e8f307a860d3f3659cfdc6ca1

data/.gitignore

@@ -1 +1,2 @@
 .DS_Store
+pkg

data/README.md

@@ -1,3 +1,13 @@
 # [Character](http://github.com/slate-studio/character) Editor
 
-Based on [MediumEditor](https://github.com/daviferreira/medium-editor) — Medium.com WYSIWYG editor clone.
+Based on [MediumEditor](https://github.com/daviferreira/medium-editor) — Medium.com WYSIWYG editor clone.
+
+## TODO:
+ - fix copy/paste in the editor (test Safari/Chrome/FF, might be related to span issue)
+ - pre tag is not removed when unset
+ - insert images (integrate with Character assets plugin)
+
+### Span Issue: happens only in Chrome
+
+* http://www.neotericdesign.com/blog/2013/3/working-around-chrome-s-contenteditable-span-bug
+* http://stackoverflow.com/questions/15015019/prevent-chrome-from-wrapping-contents-of-joined-p-with-a-span

data/app/assets/javascripts/character_editor.coffee

@@ -12,7 +12,7 @@
 
 #= require_self
 #= require character_editor/_selection
-#= require character_editor/_toolbar
+#= require character_editor/toolbar/_toolbar
 
 # Object - an object representing a concept that you want
 # to model (e.g. a car)
@@ -20,7 +20,7 @@
   options:
     allowMultiParagraphSelection: true
     anchorInputPlaceholder:       'Paste or type a link'
-    buttons:                      ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote']
+    buttons:                      'bold italic underline anchor header1 header2 quote'
     delay:                        0
     diffLeft:                     0
     diffTop:                      -10
@@ -29,8 +29,8 @@
     forcePlainText:               true
     placeholder:                  'Type your text...'
     targetBlank:                  false
-    firstHeader:                  'h3'
-    secondHeader:                 'h4'
+    firstHeader:                  'h2'
+    secondHeader:                 'h3'
     tabSpaces:                    '    '
     viewSelector:                 'body'
     parentElements:               ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre']
@@ -81,15 +81,10 @@
     if not @options.disableToolbar
       @_addToolbar()
 
-  _addToolbar: -> # create only one toolbar for now
+  _addToolbar: ->
     @toolbar = window.characterEditorToolbar
-
     if not @toolbar
-      $toolbarElement = $("<div id='character_editor_toolbar' class='character-editor-toolbar' />")
-      $(@options.viewSelector).append($toolbarElement)
-
-      @toolbar = Object.create(CharacterEditor.Toolbar).init(@options, $toolbarElement)
-
+      @toolbar = Object.create(CharacterEditor.Toolbar).init(@options)
       window.characterEditorToolbar = @toolbar
 
   _setPlaceholder: ->

data/app/assets/javascripts/character_editor/toolbar/_position.coffee

@@ -0,0 +1,40 @@
+
+@CharacterEditor.Toolbar._setPosition = ->
+  $contentView  = $(@options.viewSelector)
+  $arrow        = @$elem.children('.character-editor-toolbar-arrow')
+  $toolbarWidth = @$elem.width()
+  $toolbarLeft  = @$elem.position().left
+
+  contentLeftOffset = $contentView.offset().left
+  contentTopOffset  = $contentView.offset().top
+  contentScrollTop  = $contentView.scrollTop()
+  contentInnerWidth = $contentView.innerWidth()
+
+  selection = window.getSelection()
+  range     = selection.getRangeAt(0)
+  boundary  = range.getBoundingClientRect()
+
+  offsetWidth  = @$elem.get(0).offsetWidth
+  offsetHeight = @$elem.get(0).offsetHeight
+
+  defaultLeft     = (@options.diffLeft) - (offsetWidth / 2)
+  middleBoundary  = (boundary.left + boundary.right) / 2 - contentLeftOffset
+  halfOffsetWidth = offsetWidth / 2
+
+  @$elem.css 'top', boundary.top + @options.diffTop - contentTopOffset + contentScrollTop - offsetHeight + 'px'
+
+  edgeOffset = 5
+
+  # TODO: some issues still happen here, on double click (right edge) and right edge text selection
+
+  if middleBoundary < halfOffsetWidth
+    @$elem.css { left: "#{edgeOffset}px", right: 'auto' }
+    $arrow.css { 'margin-left': -($toolbarWidth/2 - middleBoundary + 10) } # arrow to left
+
+  else if (contentInnerWidth - middleBoundary) <= halfOffsetWidth
+    @$elem.css { left: 'auto', right: "#{edgeOffset}px" }
+    $arrow.css { 'margin-left': (middleBoundary - $toolbarLeft - $toolbarWidth/2 - 5) } # arrow to right
+
+  else
+    @$elem.css { left: defaultLeft + middleBoundary + 'px', right: 'auto' }
+    $arrow.css { 'margin-left': '' } # center arrow

data/app/assets/javascripts/character_editor/toolbar/_templates.coffee

@@ -0,0 +1,72 @@
+
+@CharacterEditor.Toolbar._toolbarTemplate = (options) -> """
+  <div id='character_editor_toolbar' class='character-editor-toolbar'>
+    <ul id='character_editor_toolbar_buttons'></ul>
+    <div class='character-editor-toolbar-form-anchor' id='character_editor_toolbar_form_anchor'>
+      <input type='text' value='' placeholder='#{ options.anchorInputPlaceholder }'><a href='#'>&times;</a>
+    </div>
+    <div class='character-editor-toolbar-arrow'></div>
+  </div>"""
+
+@CharacterEditor.Toolbar._generateButtonTemplates = (options) ->
+  classPrefix = 'character-editor-action'
+
+  l =
+    bold:           '<i class="fa fa-bold"></i>'
+    italic :        '<i class="fa fa-italic"></i>'
+    underline:      '<i class="fa fa-underline"></i>'
+    strikethrough:  '<i class="fa fa-strikethrough"></i>'
+    superscript:    '<i class="fa fa-superscript"></i>'
+    subscript:      '<i class="fa fa-subscript"></i>'
+    anchor:         '<i class="fa fa-link"></i>'
+    image:          '<i class="fa fa-picture-o"></i>'
+    quote:          '<i class="fa fa-quote-right"></i>'
+    orderedlist:    '<i class="fa fa-list-ol"></i>'
+    unorderedlist:  '<i class="fa fa-list-ul"></i>'
+    pre:            '<i class="fa fa-code fa-lg"></i>'
+    header1:        "<b>#{ options.firstHeader.toUpperCase() }</b>"
+    header2:        "<b>#{ options.secondHeader.toUpperCase() }</b>"
+
+  templates =
+    bold:           "<li><button class='#{classPrefix} #{classPrefix}-bold'
+                                 data-action='bold' data-element='b'>#{ l.bold }</button></li>"
+
+    italic:         "<li><button class='#{classPrefix} #{classPrefix}-italic'
+                                 data-action='italic' data-element='i'>#{ l.italic }</button></li>"
+
+    underline:      "<li><button class='#{classPrefix} #{classPrefix}-underline'
+                                 data-action='underline' data-element='u'>#{ l.underline }</button></li>"
+
+    strikethrough:  "<li><button class='#{classPrefix} #{classPrefix}-strikethrough'
+                                 data-action='strikethrough' data-element='strike'>#{ l.strikethrough }</button></li>"
+
+    superscript:    "<li><button class='#{classPrefix} #{classPrefix}-superscript'
+                                 data-action='superscript' data-element='sup'>#{ l.superscript }</button></li>"
+
+    subscript:      "<li><button class='#{classPrefix} #{classPrefix}-subscript'
+                                 data-action='subscript' data-element='sub'>#{ l.subscript }</button></li>"
+
+    anchor:         "<li><button class='#{classPrefix} #{classPrefix}-anchor'
+                                 data-action='anchor' data-element='a'>#{ l.anchor }</button></li>"
+
+    image:          "<li><button class='#{classPrefix} #{classPrefix}-image'
+                                 data-action='image' data-element='img'>#{ l.image }</button></li>"
+
+    quote:          "<li><button class='#{classPrefix} #{classPrefix}-quote'
+                                 data-action='append-blockquote' data-element='blockquote'>#{ l.quote }</button></li>"
+
+    orderedlist:    "<li><button class='#{classPrefix} #{classPrefix}-orderedlist'
+                                 data-action='insertorderedlist' data-element='ol'>#{ l.orderedlist }</button></li>"
+
+    unorderedlist:  "<li><button class='#{classPrefix} #{classPrefix}-unorderedlist'
+                                 data-action='insertunorderedlist' data-element='ul'>#{ l.unorderedlist }</button></li>"
+
+    pre:            "<li><button class='#{classPrefix} #{classPrefix}-pre'
+                                 data-action='append-pre' data-element='pre'>#{ l.pre }</button></li>"
+
+    header1:        "<li><button class='#{classPrefix} #{classPrefix}-header1'
+                                 data-action='append-#{ options.firstHeader }' data-element='#{ options.firstHeader }'>#{ l.header1 }</button></li>"
+
+    header2:        "<li><button class='#{classPrefix} #{classPrefix}-header2'
+                                 data-action='append-#{ options.secondHeader }' data-element='#{ options.secondHeader }'>#{ l.header2 }</button></li>"
+  return templates

data/app/assets/javascripts/character_editor/toolbar/_toolbar.coffee

@@ -0,0 +1,241 @@
+#= require_self
+#= require ./_position
+#= require ./_templates
+
+@CharacterEditor.Toolbar =
+  init: (options, elem) ->
+    @options = $.extend({}, @options, options)
+
+    @_buttonTemplates = @_generateButtonTemplates(@options)
+
+    @$elem = $(@_toolbarTemplate(@options))
+    $(@options.viewSelector).append(@$elem)
+
+    # this helps to not hide toolbar on selection (while toolbar button click)
+    @keepToolbarVisible = false
+
+    @_build()
+
+    @_bind()
+
+    @
+
+  options: {}
+
+  _build: ->
+    @$toolbarButtons = @$elem.find('#character_editor_toolbar_buttons')
+    @$anchorForm     = @$elem.find('#character_editor_toolbar_form_anchor')
+    @$anchorInput    = @$anchorForm.children('input')
+
+    @$toolbarButtons.show()
+    @$anchorForm.hide()
+
+  _bind: ->
+    @_bindWindowResize()
+    @_bindButtons()
+    @_bindAnchorForm()
+    @_bindSelect()
+
+  _hide: ->
+    @keepToolbarVisible = false
+    @$elem.removeClass('character-editor-toolbar-active')
+    @$toolbarButtons.removeClass()
+
+  _show: ->
+    timer = ''
+
+    @$anchorForm.hide()
+
+    # TODO: this can be optimized to do not change DOM
+    html = ''
+    $.each @options.buttons.split(' '), (i, key) => html += @_buttonTemplates[key]
+    @$toolbarButtons.html(html)
+
+    @$toolbarButtons.show()
+
+    @$anchorInput.css('width', @$elem.width() - 40 - 12) # TODO: remove build in themes values
+
+    @keepToolbarVisible = false
+
+    clearTimeout(timer)
+
+    timer = setTimeout ( =>
+      if !@$elem.hasClass('character-editor-toolbar-active')
+        @$elem.addClass('character-editor-toolbar-active')
+    ), 100
+
+  _bindSelect: ->
+    if !@options.disableToolbar
+      timer = ''
+      toolbar = @
+
+      $(@options.viewSelector).on 'mouseup keyup blur', (e) =>
+        clearTimeout(timer)
+        timer = setTimeout (-> toolbar._checkSelection()), @options.delay
+
+  _bindWindowResize: ->
+    timer = ''
+    $(window).on 'resize', =>
+      clearTimeout(timer)
+      timer = setTimeout ( => if @$elem.hasClass('character-editor-toolbar-active') then @_setPosition() ), 100
+
+  _getActiveEditor: ->
+    $editorElement = $(@selection.getRangeAt(0).commonAncestorContainer).parents('[data-editor-element]')
+    if $editorElement then $editorElement.data('editor') else false
+
+  _checkSelection: ->
+    if not @keepToolbarVisible
+      @selection  = window.getSelection()
+
+      if @selection.toString().trim() == ''
+        return @_hide()
+
+      activeEditor = @_getActiveEditor()
+      if !activeEditor or activeEditor.options.disableToolbar
+        return @_hide()
+
+      selectionHtml = getSelectionHtml()
+      selectionHtml = selectionHtml.replace(/<[\S]+><\/[\S]+>/gim, '')
+
+      hasMultiParagraphs = selectionHtml.match(/<(p|h[0-6]|blockquote)>([\s\S]*?)<\/(p|h[0-6]|blockquote)>/g)
+
+      if !@options.allowMultiParagraphSelection and hasMultiParagraphs
+        return @_hide()
+
+      @_setButtonStates()
+      @_show()
+      @_setPosition()
+
+  _setButtonStates: ->
+    $buttons = @$elem.find('button')
+    $buttons.removeClass('character-editor-button-active')
+
+    parentNode = @selection.anchorNode
+
+    if !parentNode.tagName
+      parentNode = @selection.anchorNode.parentNode
+
+    while parentNode.tagName != undefined and @options.parentElements.indexOf(parentNode.tagName) == -1
+      tag = parentNode.tagName.toLowerCase()
+      @_activateButton(tag)
+      parentNode = parentNode.parentNode
+
+  _activateButton: (tag) ->
+    $el = @$elem.find('[data-element="' + tag + '"]').first()
+    if $el.length and !$el.hasClass('character-editor-button-active')
+      $el.addClass('character-editor-button-active')
+
+  _getSelectionData: (el) ->
+    if el and el.tagName
+      tagName = el.tagName.toLowerCase()
+
+    while el and @options.parentElements.indexOf(tagName) == -1
+      el = el.parentNode
+      if el and el.tagName
+        tagName = el.tagName.toLowerCase()
+
+    return { el: el, tagName: tagName }
+
+  _execFormatBlock: (el) ->
+    selectionData = @_getSelectionData(@selection.anchorNode)
+
+    # FF handles blockquote differently on formatBlock allowing nesting, we need to use outdent
+    # https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla
+    if el == 'blockquote' and selectionData.el and selectionData.el.parentNode.tagName.toLowerCase() == 'blockquote'
+      return document.execCommand('outdent', false, null)
+
+    if selectionData.tagName == el
+      el = 'p'
+
+    return document.execCommand('formatBlock', false, el)
+
+  _execAction: (action, e) ->
+    if action.indexOf('append-') > -1
+     @_execFormatBlock(action.replace('append-', ''))
+     @_setPosition()
+     @_setButtonStates()
+
+    else if action is 'anchor'
+     @_triggerAnchorAction(e)
+
+    else if action is 'image'
+      document.execCommand('insertImage', false, window.getSelection())
+
+    else
+      document.execCommand(action, false, null)
+      @_setPosition()
+
+  _triggerAnchorAction: (e) ->
+    if @selection.anchorNode.parentNode.tagName.toLowerCase() == 'a'
+      document.execCommand('unlink', false, null)
+    else
+      if @$anchorForm.is(':visible') then @_show() else @_showAnchorForm()
+
+  _showAnchorForm: ->
+    @keepToolbarVisible = true
+
+    @savedSelection = window.saveSelection()
+
+    @$anchorForm.show()
+    @$toolbarButtons.hide()
+
+    @$anchorInput.focus()
+    @$anchorInput.val('')
+
+  _bindButtons: ->
+    toolbar  = @
+
+    triggerAction = (e) ->
+      e.preventDefault()
+      e.stopPropagation()
+
+      $button = $(e.currentTarget)
+      $button.toggleClass('character-editor-button-active')
+
+      action = $button.attr('data-action')
+      toolbar._execAction(action, e)
+
+    $(document).on 'click', '#character_editor_toolbar_buttons button', triggerAction
+
+  _setTargetBlank: ->
+    el = window.getSelectionStart()
+
+    if el.tagName.toLowerCase() == 'a'
+      el.target = '_blank'
+    else
+      $(el).find('a').each (i, el) -> $(el).attr('target', '_blank')
+
+  _createLink: (input) ->
+    window.restoreSelection(@savedSelection)
+    document.execCommand('createLink', false, @$anchorInput.val())
+
+    if @options.targetBlank
+      @_setTargetBlank()
+
+    @_show()
+    @$anchorInput.val('')
+
+  _bindAnchorForm: ->
+    @$anchorForm.on 'click', (e) ->
+      e.stopPropagation()
+
+    @$anchorInput.on 'keyup', (e) =>
+      if e.keyCode == 13
+        e.preventDefault()
+        @_createLink()
+
+    @$anchorInput.on 'blur', (e) =>
+      @keepToolbarVisible = false
+
+    @$anchorForm.find('a').on 'click', (e) =>
+      e.preventDefault()
+      window.restoreSelection(@savedSelection)
+
+  destroy: ->
+    $(@options.viewSelector).off 'mouseup keyup blur'
+    $(window).off 'resize'
+    @$anchorForm.off 'click'
+    @$anchorForm.find('a').off 'click'
+    @$anchorInput.on 'keyup blur'
+    $(document).off 'click', '#character_editor_toolbar_buttons button'
+    @$elem.remove()

data/app/assets/stylesheets/character_editor.scss

@@ -1,7 +1,11 @@
-$bgcolor: #57ad68;
-$border_color: #fff;
-$button_size: 40px;
-$link_color: #fff;
+//---------------------------------------------------------
+// CHARACTER EDITOR
+//---------------------------------------------------------
+
+$bgcolor:       $secondary_color;
+$border_color:  darken($secondary_color, 5%);
+$link_color:    #fff;
+$button_size:   40px;
 
 .character-editor                     {
   &:focus                             { outline: 0;
@@ -26,7 +30,6 @@ $link_color: #fff;
                                         background-color: $bgcolor;
                                         font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
                                         font-size: 16px;
-                                        //@include transition(top .075s ease-out,left .075s ease-out);
   ul                                  { margin: 0;
                                         padding: 0;
   }
@@ -45,14 +48,12 @@ $link_color: #fff;
                                         min-width: $button_size;
                                         background-color: transparent;
                                         border: none;
-                                        border-right: 1px solid lighten($bgcolor, 20);
+                                        border-right: 1px solid $border_color;
                                         color: $link_color;
                                         cursor: pointer;
                                         font-size: 14px;
                                         text-decoration: none;
-                                        //@include box-sizing(border-box);
-                                        //@include transition(background-color .2s ease-in, color .2s ease-in);
-      &:hover                         { background-color: darken($bgcolor, 20);
+      &:hover                         { background-color: $border_color;
                                         color: #fff;
       }
       &:focus                         { outline: none;
@@ -60,18 +61,12 @@ $link_color: #fff;
     }
   }
 
-  .character-editor-button-active     { background-color: darken($bgcolor, 30);
+  .character-editor-button-active     { background-color: $border_color;
                                         color: #fff;
   }
 }
 
 .character-editor-toolbar-active      { visibility: visible;
-                                        //-webkit-animation: pop-upwards 160ms forwards linear;
-                                        //-moz-animation: pop-upwards 160ms forwards linear;
-                                        //-ms-animation: pop-upwards 160ms forwards linear;
-                                        //-o-animation: pop-upwards 160ms forwards linear;
-                                        //animation: pop-upwards 160ms forwards linear;
-                                        //@include transition(top .075s ease-out,left .075s ease-out);
 }
 
 .character-editor-toolbar-form-anchor { background: $bgcolor;
@@ -80,47 +75,40 @@ $link_color: #fff;
   }
   input[type='text']                  { display: inline;
                                         padding: 6px;
-                                        height: $button_size;
+                                        height: $button_size - 12px;
                                         background-color: $bgcolor!important;
                                         color: $link_color;
                                         border: none;
                                         font-size: 14px;
                                         margin: 0;
-                                        //@include box-sizing(border-box);
     &:focus                           { outline: 0;
                                         border: none;
                                         box-shadow: none;
     }
+    @include input-placeholder        { color: $border_color;
+    }
   }
   a                                   { color: $link_color;
                                         font-weight: bolder;
                                         font-size: 24px;
                                         text-decoration: none;
                                         padding: 0 13px;
+                                        position: relative;
+                                        top: 1px;
     &:hover                           { color: $link_color;
                                         opacity: .8;
     }
   }
 }
 
-%character-toolbar-arrow              { content: "";
-                                        display: block;
+.character-editor-toolbar-arrow       { display: block;
                                         position: absolute;
                                         left: 50%;
+                                        top: $button_size;
                                         margin-left: -5px;
-                                        width: 0;
-                                        height: 0;
+                                        width: 0px;
+                                        height: 0px;
                                         border-style: solid;
-}
-
-.character-toolbar-arrow-under:after  { @extend %character-toolbar-arrow;
-                                        top: $button_size;
                                         border-width: 5px 5px 0 5px;
-                                        border-color: $bgcolor transparent transparent transparent;
-}
-
-.character-toolbar-arrow-over:before { @extend %character-toolbar-arrow;
-                                      top: -5px;
-                                      border-width: 0 5px 5px 5px;
-                                      border-color: transparent transparent $bgcolor transparent;
+                                        border-color:  $bgcolor transparent transparent transparent;
 }

data/lib/character_editor/version.rb

@@ -1,5 +1,5 @@
 module Character
   module Editor
-    VERSION = '0.0.1'
+    VERSION = '0.0.9'
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: character_editor
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.9
 platform: ruby
 authors:
 - Alexander Kravets
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-02-07 00:00:00.000000000 Z
+date: 2014-02-24 00:00:00.000000000 Z
 dependencies: []
 description: 
 email: alex@slatestudio.com
@@ -23,7 +23,9 @@ files:
 - Rakefile
 - app/assets/javascripts/character_editor.coffee
 - app/assets/javascripts/character_editor/_selection.coffee
-- app/assets/javascripts/character_editor/_toolbar.coffee
+- app/assets/javascripts/character_editor/toolbar/_position.coffee
+- app/assets/javascripts/character_editor/toolbar/_templates.coffee
+- app/assets/javascripts/character_editor/toolbar/_toolbar.coffee
 - app/assets/stylesheets/character_editor.scss
 - character_editor.gemspec
 - lib/character_editor.rb

data/app/assets/javascripts/character_editor/_toolbar.coffee

@@ -1,353 +0,0 @@
-
-@CharacterEditor.Toolbar =
-  init: (options, elem) ->
-    @options = $.extend({}, @options, options)
-
-    @elem = elem
-    @$elem = $(elem)
-
-    # this helps to not hide toolbar on selection (while toolbar button click)
-    @keepToolbarVisible = false
-
-    @_build()
-
-    @_bind()
-
-    @
-
-  options:
-    buttonLabels:
-      bold:           '<i class="fa fa-bold"></i>'
-      italic :        '<i class="fa fa-italic"></i>'
-      underline:      '<i class="fa fa-underline"></i>'
-      strikethrough:  '<i class="fa fa-strikethrough"></i>'
-      superscript:    '<i class="fa fa-superscript"></i>'
-      subscript:      '<i class="fa fa-subscript"></i>'
-      anchor:         '<i class="fa fa-link"></i>'
-      image:          '<i class="fa fa-picture-o"></i>'
-      quote:          '<i class="fa fa-quote-right"></i>'
-      orderedlist:    '<i class="fa fa-list-ol"></i>'
-      unorderedlist:  '<i class="fa fa-list-ul"></i>'
-      pre:            '<i class="fa fa-code fa-lg"></i>'
-      header1:        '<b>H1</b>'
-      header2:        '<b>H1</b>'
-
-  _buttonTemplate: (key) ->
-    l               = @options.buttonLabels
-    classPrefix     = 'character-editor-action'
-    templates =
-      bold:           "<li><button class='#{classPrefix} #{classPrefix}-bold'
-                                   data-action='bold' data-element='b'>#{ l.bold }</button></li>"
-
-      italic:         "<li><button class='#{classPrefix} #{classPrefix}-italic'
-                                   data-action='italic' data-element='i'>#{ l.italic }</button></li>"
-
-      underline:      "<li><button class='#{classPrefix} #{classPrefix}-underline'
-                                   data-action='underline' data-element='u'>#{ l.underline }</button></li>"
-
-      strikethrough:  "<li><button class='#{classPrefix} #{classPrefix}-strikethrough'
-                                   data-action='strikethrough' data-element='strike'>#{ l.strikethrough }</button></li>"
-
-      superscript:    "<li><button class='#{classPrefix} #{classPrefix}-superscript'
-                                   data-action='superscript' data-element='sup'>#{ l.superscript }</button></li>"
-
-      subscript:      "<li><button class='#{classPrefix} #{classPrefix}-subscript'
-                                   data-action='subscript' data-element='sub'>#{ l.subscript }</button></li>"
-
-      anchor:         "<li><button class='#{classPrefix} #{classPrefix}-anchor'
-                                   data-action='anchor' data-element='a'>#{ l.anchor }</button></li>"
-
-      image:          "<li><button class='#{classPrefix} #{classPrefix}-image'
-                                   data-action='image' data-element='img'>#{ l.image }</button></li>"
-
-      quote:          "<li><button class='#{classPrefix} #{classPrefix}-quote'
-                                   data-action='append-blockquote' data-element='blockquote'>#{ l.quote }</button></li>"
-
-      orderedlist:    "<li><button class='#{classPrefix} #{classPrefix}-orderedlist'
-                                   data-action='insertorderedlist' data-element='ol'>#{ l.orderedlist }</button></li>"
-
-      unorderedlist:  "<li><button class='#{classPrefix} #{classPrefix}-unorderedlist'
-                                   data-action='insertunorderedlist' data-element='ul'>#{ l.unorderedlist }</button></li>"
-
-      pre:            "<li><button class='#{classPrefix} #{classPrefix}-pre'
-                                   data-action='append-pre' data-element='pre'>#{ l.pre }</button></li>"
-
-      header1:        "<li><button class='#{classPrefix} #{classPrefix}-header1'
-                                   data-action='append-#{ @options.firstHeader }' data-element='#{ @options.firstHeader }'>#{ l.header1 }</button></li>"
-
-      header2:        "<li><button class='#{classPrefix} #{classPrefix}-header2'
-                                   data-action='append-#{ @options.secondHeader }' data-element='#{ @options.secondHeader }'>#{ l.header2 }</button></li>"
-    return templates[key]
-
-  _build: ->
-    html = """<ul id='character_editor_toolbar_buttons'>"""
-
-    $.each @options.buttons, (i, key) => html += @_buttonTemplate(key)
-
-    html += """</ul>
-     <div class='character-editor-toolbar-form-anchor' id='character_editor_toolbar_form_anchor'>
-       <input type='text' value='' placeholder='#{ @options.anchorInputPlaceholder }'><a href='#'>&times;</a>
-     </div>"""
-    @$elem.html(html)
-
-    @$toolbarButtons = @$elem.find('#character_editor_toolbar_buttons')
-    @$anchorForm     = @$elem.find('#character_editor_toolbar_form_anchor')
-    @$anchorInput    = @$anchorForm.children('input')
-
-    buttonWidth = @$toolbarButtons.find('button').first().width()
-    @$anchorInput.css('width', (@options.buttons.length - 1) * buttonWidth + @options.buttons.length - 1)
-
-    @$toolbarButtons.show()
-    @$anchorForm.hide()
-
-  _bind: ->
-    @_bindWindowResize()
-    @_bindButtons()
-    @_bindAnchorForm()
-    @_bindSelect()
-
-  _hide: ->
-    @keepToolbarVisible = false
-    @$elem.removeClass('character-editor-toolbar-active')
-
-  _show: ->
-    timer = ''
-
-
-    @$anchorForm.hide()
-    @$toolbarButtons.show()
-    @keepToolbarVisible = false
-
-    clearTimeout(timer)
-
-    timer = setTimeout ( =>
-      if !@$elem.hasClass('character-editor-toolbar-active')
-        @$elem.addClass('character-editor-toolbar-active')
-    ), 100
-
-  _setPosition: ->
-    $contentView      = $(@options.viewSelector)
-
-    contentLeftOffset = $contentView.offset().left
-    contentTopOffset  = $contentView.offset().top
-    contentScrollTop  = $contentView.scrollTop()
-    contentInnerWidth = $contentView.innerWidth()
-
-    buttonHeight    = 30
-    selection       = window.getSelection()
-    range           = selection.getRangeAt(0)
-    boundary        = range.getBoundingClientRect()
-
-    offsetWidth  = @$elem.get(0).offsetWidth
-    offsetHeight = @$elem.get(0).offsetHeight
-
-    defaultLeft       = (@options.diffLeft) - (offsetWidth / 2)
-    middleBoundary    = (boundary.left + boundary.right) / 2 - contentLeftOffset
-    halfOffsetWidth   = offsetWidth / 2
-
-
-    if boundary.top < buttonHeight
-      @$elem.addClass('character-toolbar-arrow-over')
-      @$elem.removeClass('character-toolbar-arrow-under')
-      @$elem.css 'top', buttonHeight + boundary.bottom - @options.diffTop + window.pageYOffset - offsetHeight + 'px'
-    else
-      @$elem.addClass('character-toolbar-arrow-under')
-      @$elem.removeClass('character-toolbar-arrow-over')
-      @$elem.css 'top', boundary.top + @options.diffTop - contentTopOffset + contentScrollTop - offsetHeight + 'px'
-
-    edgeOffset = 5
-
-    if middleBoundary < halfOffsetWidth
-      @$elem.css 'left', defaultLeft + halfOffsetWidth + edgeOffset + 'px'
-    else if (contentInnerWidth - middleBoundary) < halfOffsetWidth
-      @$elem.css 'left', contentInnerWidth + defaultLeft - halfOffsetWidth - edgeOffset + 'px'
-    else
-      @$elem.css 'left', defaultLeft + middleBoundary + 'px'
-
-    # TODO: update arrow layout to make it possible to move it on edge cases
-    #
-    #
-    #
-    #
-    #
-    #
-    #
-
-  _bindSelect: ->
-    if !@options.disableToolbar
-      timer = ''
-      toolbar = @
-
-      $(@options.viewSelector).on 'mouseup keyup blur', (e) =>
-        console.log $(e.target).parents('#character_editor_toolbar')
-
-        clearTimeout(timer)
-        timer = setTimeout ( -> console.log 'select' ; toolbar._checkSelection() ), @options.delay
-
-  _bindWindowResize: ->
-    timer = ''
-    $(window).on 'resize', =>
-      clearTimeout(timer)
-      timer = setTimeout ( => if @$elem.hasClass('character-editor-toolbar-active') then @_setPosition() ), 100
-
-  _getActiveEditor: ->
-    $editorElement = $(@selection.getRangeAt(0).commonAncestorContainer).parents('[data-editor-element]')
-    if $editorElement then $editorElement.data('editor') else false
-
-  _checkSelection: ->
-    if not @keepToolbarVisible
-      @selection  = window.getSelection()
-
-      if @selection.toString().trim() == ''
-        return @_hide()
-
-      activeEditor = @_getActiveEditor()
-      if !activeEditor or activeEditor.options.disableToolbar
-        return @_hide()
-
-      selectionHtml = getSelectionHtml()
-      selectionHtml = selectionHtml.replace(/<[\S]+><\/[\S]+>/gim, '')
-
-      hasMultiParagraphs = selectionHtml.match(/<(p|h[0-6]|blockquote)>([\s\S]*?)<\/(p|h[0-6]|blockquote)>/g)
-
-      if !@options.allowMultiParagraphSelection and hasMultiParagraphs
-        return @_hide()
-
-      @_setButtonStates()
-      @_setPosition()
-      @_show()
-
-  _setButtonStates: ->
-    $buttons = @$elem.find('button')
-    $buttons.removeClass('character-editor-button-active')
-
-    parentNode = @selection.anchorNode
-
-    if !parentNode.tagName
-      parentNode = @selection.anchorNode.parentNode
-
-    while parentNode.tagName != undefined and @options.parentElements.indexOf(parentNode.tagName) == -1
-      tag = parentNode.tagName.toLowerCase()
-      @_activateButton(tag)
-      parentNode = parentNode.parentNode
-
-  _activateButton: (tag) ->
-    $el = @$elem.find('[data-element="' + tag + '"]').first()
-    if $el.length and !$el.hasClass('character-editor-button-active')
-      $el.addClass('character-editor-button-active')
-
-  _getSelectionData: (el) ->
-    if el and el.tagName
-      tagName = el.tagName.toLowerCase()
-
-    while el and @options.parentElements.indexOf(tagName) == -1
-      el = el.parentNode
-      if el and el.tagName
-        tagName = el.tagName.toLowerCase()
-
-    return { el: el, tagName: tagName }
-
-  _execFormatBlock: (el) ->
-    selectionData = @_getSelectionData(@selection.anchorNode)
-
-    # FF handles blockquote differently on formatBlock allowing nesting, we need to use outdent
-    # https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla
-    if el == 'blockquote' and selectionData.el and selectionData.el.parentNode.tagName.toLowerCase() == 'blockquote'
-      return document.execCommand('outdent', false, null)
-
-    if selectionData.tagName == el
-      el = 'p'
-
-    return document.execCommand('formatBlock', false, el)
-
-  _execAction: (action, e) ->
-    if action.indexOf('append-') > -1
-     @_execFormatBlock(action.replace('append-', ''))
-     @_setPosition()
-     @_setButtonStates()
-
-    else if action is 'anchor'
-     @_triggerAnchorAction(e)
-
-    else if action is 'image'
-      document.execCommand('insertImage', false, window.getSelection())
-
-    else
-      document.execCommand(action, false, null)
-      @_setPosition()
-
-  _triggerAnchorAction: (e) ->
-    if @selection.anchorNode.parentNode.tagName.toLowerCase() == 'a'
-      document.execCommand('unlink', false, null)
-    else
-      if @$anchorForm.is(':visible') then @_show() else @_showAnchorForm()
-
-  _showAnchorForm: ->
-    @keepToolbarVisible = true
-
-    @savedSelection = window.saveSelection()
-
-    @$anchorForm.show()
-    @$toolbarButtons.hide()
-
-    @$anchorInput.focus()
-    @$anchorInput.val('')
-
-  _bindButtons: ->
-    toolbar  = @
-    $buttons = @$elem.find('button')
-
-    triggerAction = (e) ->
-      e.preventDefault()
-      e.stopPropagation()
-
-      $button = $(e.currentTarget)
-      $button.toggleClass('character-editor-button-active')
-
-      action = $button.attr('data-action')
-      toolbar._execAction(action, e)
-
-    $buttons.on 'click', triggerAction
-
-  _setTargetBlank: ->
-    el = window.getSelectionStart()
-
-    if el.tagName.toLowerCase() == 'a'
-      el.target = '_blank'
-    else
-      $(el).find('a').each (i, el) -> $(el).attr('target', '_blank')
-
-  _createLink: (input) ->
-    window.restoreSelection(@savedSelection)
-    document.execCommand('createLink', false, @$anchorInput.val())
-
-    if @options.targetBlank
-      @_setTargetBlank()
-
-    @_show()
-    @$anchorInput.val('')
-
-  _bindAnchorForm: ->
-    @$anchorForm.on 'click', (e) ->
-      e.stopPropagation()
-
-    @$anchorInput.on 'keyup', (e) =>
-      if e.keyCode == 13
-        e.preventDefault()
-        @_createLink()
-
-    @$anchorInput.on 'blur', (e) =>
-      @keepToolbarVisible = false
-
-    @$anchorForm.find('a').on 'click', (e) =>
-      e.preventDefault()
-      window.restoreSelection(@savedSelection)
-
-  destroy: ->
-    $(@options.viewSelector).off 'mouseup keyup blur'
-    $(window).off 'resize'
-    @$anchorForm.off 'click'
-    @$anchorForm.find('a').off 'click'
-    @$anchorInput.on 'keyup blur'
-    @$elem.find('button').off 'click'
-    @$elem.remove()