character_editor 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 9de43f73c9a9be5a52713b0e182eae7a3d77a5d4
+  data.tar.gz: 48d6f5ee42ea70ac33468e504d50a96ae9b2f86e
+SHA512:
+  metadata.gz: 733d8129f5be1b895c043aaea78ba6cf692153f7c3c6c4d0e6fa00d55b8a33c50a3574cc5f16cf882f6c361f673d3acb9319d25c1f143ead6899c6f270b66f5b
+  data.tar.gz: 6a13445ba089a922eb5df7e77cb74d94117963ca3e6be89bf50a2832a9bb0d20012b80612d845f9d4062338a64f477891ed07422025a7621bdb1e515af8f1b8c

data/.gitignore

@@ -0,0 +1 @@
+.DS_Store

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in character.gemspec
+gemspec

data/Gemfile.lock

@@ -0,0 +1,14 @@
+PATH
+  remote: .
+  specs:
+    character_medium_editor (0.0.1)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  character_medium_editor!

data/README.md

@@ -0,0 +1,3 @@
+# [Character](http://github.com/slate-studio/character) Editor
+
+Based on [MediumEditor](https://github.com/daviferreira/medium-editor) — Medium.com WYSIWYG editor clone.

data/Rakefile

@@ -0,0 +1,5 @@
+require 'rubygems/package_task'
+
+spec = Gem::Specification.load(Dir['*.gemspec'].first)
+gem = Gem::PackageTask.new(spec)
+gem.define()

data/app/assets/javascripts/character_editor.coffee

@@ -0,0 +1,193 @@
+###!
+* Character Editor
+* Author: Alexander Kravets @ slatestudio.com
+* Licensed under the MIT license
+
+  Usage:
+  $('#editor').editor({placeholder: 'Title' })
+  inst = $('#editor').data('editor')
+  inst.serialize()
+
+###
+
+#= require_self
+#= require character_editor/_selection
+#= require character_editor/_toolbar
+
+# Object - an object representing a concept that you want
+# to model (e.g. a car)
+@CharacterEditor =
+  options:
+    allowMultiParagraphSelection: true
+    anchorInputPlaceholder:       'Paste or type a link'
+    buttons:                      ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote']
+    delay:                        0
+    diffLeft:                     0
+    diffTop:                      -10
+    disableReturn:                false
+    disableToolbar:               false
+    forcePlainText:               true
+    placeholder:                  'Type your text...'
+    targetBlank:                  false
+    firstHeader:                  'h3'
+    secondHeader:                 'h4'
+    tabSpaces:                    '    '
+    viewSelector:                 'body'
+    parentElements:               ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre']
+
+  _dataOptions: ->
+    result = {}
+    dataOptions = @$elem.attr('data-options')
+    if dataOptions
+      opts = dataOptions.split(';')
+
+      isNumber     = (n)   -> return !isNaN(parseFloat(n)) && isFinite(n)
+      removeQuotes = (str) -> str.replace(/^['\\/"]+|(;\s?})+|['\\/"]+$/g, '')
+      trim         = (val) -> if typeof val == 'string' then removeQuotes($.trim(val)) else val
+
+      $.each opts, (i, opt) ->
+        p = opt.split(':')
+
+        if /true/i.test(p[1])
+          p[1] = true
+        else if /false/i.test(p[1])
+          p[1] = false
+        else if isNumber(p[1])
+          p[1] = parseFloat(p[1])
+
+        if p.length == 2 and p[0].length > 0
+          result[ trim(p[0]) ] = trim(p[1])
+
+    return result
+
+  init: (options, elem) ->
+    @elem = elem
+    @$elem = $(elem)
+
+    @options = $.extend({}, @options, @_dataOptions(), options)
+
+    @_build()
+
+    @_bind()
+
+    @
+
+  _build: ->
+    @$elem.attr('contenteditable', true)
+    @$elem.attr('data-editor-element', true)
+
+    @_setPlaceholder()
+
+    if not @options.disableToolbar
+      @_addToolbar()
+
+  _addToolbar: -> # create only one toolbar for now
+    @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)
+
+      window.characterEditorToolbar = @toolbar
+
+  _setPlaceholder: ->
+    @$elem.attr('data-placeholder', @options.placeholder)
+
+    activatePlaceholder = (el) ->
+      if el.textContent.replace(/^\s+|\s+$/g, '') == ''
+        $(el).addClass('character-editor-placeholder')
+
+    activatePlaceholder(@elem)
+
+    @$elem.on 'blur keypress', (e) ->
+      $(@).removeClass('character-editor-placeholder')
+      if e.type != 'keypress'
+        activatePlaceholder(@)
+
+  _bind: ->
+    @_bindNewParagraph()
+    @_bindReturn()
+    @_bindTab()
+    @_bindPaste()
+
+  _bindNewParagraph: ->
+    @$elem.on 'keyup', (e) =>
+      node = getSelectionStart()
+
+      if node and node.getAttribute('data-editor-element') and node.children.length == 0 and !@options.disableReturn
+        document.execCommand('formatBlock', false, 'p')
+
+      if e.which == 13 and !e.shiftKey
+        node    = getSelectionStart()
+        tagName = node.tagName.toLowerCase()
+
+        if !@options.disableReturn and tagName != 'li' and !isListItemChild(node)
+          document.execCommand('formatBlock', false, 'p')
+          if tagName == 'a'
+            document.execCommand('unlink', false, null)
+
+  _bindReturn: ->
+    @$elem.on 'keypress', (e) =>
+      if e.which == 13 and @options.disableReturn
+        e.preventDefault()
+
+  _bindTab: ->
+    @$elem.on 'keydown', (e) =>
+      if e.which == 9
+        tag = getSelectionStart().tagName.toLowerCase()
+        if tag == "pre"
+          e.preventDefault()
+          document.execCommand('insertHtml', null, @options.tabSpaces)
+
+  _bindPaste: ->
+    return if !@options.forcePlainText
+
+    @$elem.on 'paste', (e) =>
+      html = ''
+
+      $(@).removeClass('character-editor-placeholder')
+
+      if e.clipboardData and e.clipboardData.getData
+        e.preventDefault()
+
+        if !@options.disableReturn
+          paragraphs = e.clipboardData.getData('text/plain').split(/[\r\n]/g)
+          $.each paragraphs, (i, p) -> if p != '' then html += "<p>#{p}</p>"
+
+          document.execCommand('insertHTML', false, html)
+        else
+          document.execCommand('insertHTML', false, e.clipboardData.getData('text/plain'))
+
+  serialize: ->
+    @$elem.html().trim()
+
+  destroy: ->
+    @$elem.removeAttr('contenteditable')
+    @$elem.removeAttr('data-editor-element')
+    @$elem.removeAttr('data-placeholder')
+    @$elem.removeClass('character-editor-placeholder')
+
+    @$elem.off 'blur keypress keyup keydown paste'
+
+    if @toolbar
+      @toolbar.destroy()
+      delete @toolbar
+      delete window.characterEditorToolbar
+
+# Object.create support test, and fallback for browsers without it
+if typeof Object.create isnt "function"
+  Object.create = (o) ->
+    F = ->
+    F:: = o
+    new F()
+
+# Create a plugin based on a defined object
+$.plugin = (name, object) ->
+  $.fn[name] = (options) ->
+    @each ->
+      $.data @, name, Object.create(object).init(options, @)  unless $.data(@, name)
+  return
+
+$.plugin('editor', CharacterEditor)

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

@@ -0,0 +1,51 @@
+# http://stackoverflow.com/questions/4176923/html-of-selected-text
+# by Tim Down
+window.getSelectionHtml = ->
+  html = ''
+
+  if window.getSelection != undefined
+    sel = window.getSelection()
+
+    if sel.rangeCount
+      container = document.createElement('div')
+
+      for i in [0..sel.rangeCount-1]
+        container.appendChild(sel.getRangeAt(i).cloneContents())
+
+      html = container.innerHTML
+
+  else if document.selection != undefined
+
+    if document.selection.type == 'Text'
+      html = document.selection.createRange().htmlText
+
+  return html
+
+# http://stackoverflow.com/questions/1197401/how-can-i-get-the-element-the-caret-is-in-with-javascript-when-using-contentedi
+# by You
+window.getSelectionStart = ->
+  node = document.getSelection().anchorNode
+  startNode = if node and node.nodeType == 3 then node.parentNode else node
+  return startNode
+
+window.isListItemChild = (node) -> $(node).parents('li').length > 0
+
+# http://stackoverflow.com/questions/5605401/insert-link-in-contenteditable-element
+# by Tim Down
+window.saveSelection = ->
+  sel = window.getSelection()
+
+  if sel.getRangeAt and sel.rangeCount
+    ranges = []
+    for i in [0..sel.rangeCount-1]
+      ranges.push(sel.getRangeAt(i))
+    return ranges
+
+  return false
+
+window.restoreSelection = (savedSel) ->
+  sel = window.getSelection()
+  if savedSel
+    sel.removeAllRanges()
+    for i in [0..savedSel.length-1]
+      sel.addRange(savedSel[i])

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

@@ -0,0 +1,353 @@
+
+@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()

data/app/assets/stylesheets/character_editor.scss

@@ -0,0 +1,126 @@
+$bgcolor: #57ad68;
+$border_color: #fff;
+$button_size: 40px;
+$link_color: #fff;
+
+.character-editor                     {
+  &:focus                             { outline: 0;
+  }
+}
+
+.character-editor-placeholder         { position: relative;
+  &:after                             { position: absolute;
+                                        content: attr(data-placeholder);
+                                        top: 0;
+                                        left: 0;
+                                        font-style: italic;
+                                        opacity: .5;
+    }
+}
+
+.character-editor-toolbar             { position: absolute;
+                                        top: 0;
+                                        left: 0;
+                                        visibility: hidden;
+                                        z-index: 2000;
+                                        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;
+  }
+
+  li                                  { float: left;
+                                        list-style: none;
+                                        margin: 0;
+                                        padding: 0;
+    &:last-child button               { border-right: none;
+    }
+
+    button                            { display: block;
+                                        padding: 0px;
+                                        margin: 0;
+                                        height: $button_size;
+                                        min-width: $button_size;
+                                        background-color: transparent;
+                                        border: none;
+                                        border-right: 1px solid lighten($bgcolor, 20);
+                                        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);
+                                        color: #fff;
+      }
+      &:focus                         { outline: none;
+      }
+    }
+  }
+
+  .character-editor-button-active     { background-color: darken($bgcolor, 30);
+                                        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;
+                                        color: #fff;
+  input[type='text'], a               { font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+  }
+  input[type='text']                  { display: inline;
+                                        padding: 6px;
+                                        height: $button_size;
+                                        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;
+    }
+  }
+  a                                   { color: $link_color;
+                                        font-weight: bolder;
+                                        font-size: 24px;
+                                        text-decoration: none;
+                                        padding: 0 13px;
+    &:hover                           { color: $link_color;
+                                        opacity: .8;
+    }
+  }
+}
+
+%character-toolbar-arrow              { content: "";
+                                        display: block;
+                                        position: absolute;
+                                        left: 50%;
+                                        margin-left: -5px;
+                                        width: 0;
+                                        height: 0;
+                                        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;
+}

data/character_editor.gemspec

@@ -0,0 +1,21 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/character_editor/version', __FILE__)
+
+Gem::Specification.new do |gem|
+  gem.name          = 'character_editor'
+  gem.version       = Character::Editor::VERSION
+  gem.summary       = 'Character WYSIWYG editor'
+  gem.license       = 'MIT'
+
+  gem.authors       = ['Alexander Kravets']
+  gem.email         = 'alex@slatestudio.com'
+  gem.homepage      = 'https://github.com/slate-studio/character_editor'
+
+  gem.require_paths = ['lib']
+  gem.files         = `git ls-files`.split($\)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+
+  # Supress the warning about no rubyforge project
+  gem.rubyforge_project = 'nowarning'
+end

data/lib/character_editor.rb

@@ -0,0 +1,2 @@
+require 'character_editor/version'
+require 'character_editor/engine'

data/lib/character_editor/engine.rb

@@ -0,0 +1,14 @@
+module Character
+  module Editor
+    class Engine < ::Rails::Engine
+      config.before_configuration do
+      end
+    end
+
+    class << self
+      def configure(&block)
+        block.call(self)
+      end
+    end
+  end
+end

data/lib/character_editor/version.rb

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

metadata

@@ -0,0 +1,56 @@
+--- !ruby/object:Gem::Specification
+name: character_editor
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Alexander Kravets
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-02-07 00:00:00.000000000 Z
+dependencies: []
+description: 
+email: alex@slatestudio.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- Gemfile.lock
+- README.md
+- Rakefile
+- app/assets/javascripts/character_editor.coffee
+- app/assets/javascripts/character_editor/_selection.coffee
+- app/assets/javascripts/character_editor/_toolbar.coffee
+- app/assets/stylesheets/character_editor.scss
+- character_editor.gemspec
+- lib/character_editor.rb
+- lib/character_editor/engine.rb
+- lib/character_editor/version.rb
+homepage: https://github.com/slate-studio/character_editor
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: nowarning
+rubygems_version: 2.2.1
+signing_key: 
+specification_version: 4
+summary: Character WYSIWYG editor
+test_files: []