mercury-rails 0.3.1 → 0.5.0

data/{vendor → app}/assets/javascripts/mercury/mercury.js.coffee

@@ -34,7 +34,7 @@
 #
 @Mercury ||= {}
 jQuery.extend @Mercury,
-  version: '0.3.0'
+  version: '0.5.0'
 
   # Mercury object namespaces
   Regions: Mercury.Regions || {}
@@ -55,6 +55,14 @@ jQuery.extend @Mercury,
     jQuery(window).on("mercury:#{eventName}", callback)
 
 
+  off: (eventName, callback) ->
+    jQuery(window).off("mercury:#{eventName}", callback)
+
+
+  one: (eventName, callback) ->
+    jQuery(window).one("mercury:#{eventName}", callback)
+
+
   trigger: (eventName, options) ->
     Mercury.log(eventName, options)
     jQuery(window).trigger("mercury:#{eventName}", options)

data/{vendor → app}/assets/javascripts/mercury/modals/insertsnippet.js.coffee

@@ -10,3 +10,4 @@
       snippet = Mercury.Snippet.create(@options.snippetName, serializedForm)
     Mercury.trigger('action', {action: 'insertSnippet', value: snippet})
     @hide()
+

data/{vendor → app}/assets/javascripts/mercury/page_editor.js.coffee

@@ -9,6 +9,7 @@ class @Mercury.PageEditor
     throw Mercury.I18n('Mercury.PageEditor can only be instantiated once.') if window.mercuryInstance
 
     @options.visible = true unless (@options.visible == false || @options.visible == 'no')
+    @options.saveDataType = 'json' unless (@options.saveDataType == false || @options.saveDataType)
     @visible = @options.visible
 
     window.mercuryInstance = @
@@ -28,15 +29,19 @@ class @Mercury.PageEditor
     @resize()
 
     @iframe.on 'load', => @initializeFrame()
-    @iframe.get(0).contentWindow.document.location.href = @iframeSrc(null, true)
-
+    @iframe.one 'load', => @bindEvents()
+    @loadIframeSrc(null)
 
   initializeFrame: ->
     try
       return if @iframe.data('loaded')
       @iframe.data('loaded', true)
       Mercury.notify("Opera isn't a fully supported browser, your results may not be optimal.") if jQuery.browser.opera
+
+      # set document reference of iframe
       @document = jQuery(@iframe.get(0).contentWindow.document)
+
+      # inject styles for document to be able to highlight regions and other tools
       stylesToInject = Mercury.config.injectedStyles.replace(/{{regionClass}}/g, Mercury.config.regions.className)
       jQuery("<style mercury-styles=\"true\">").html(stylesToInject).appendTo(@document.find('head'))
 
@@ -47,10 +52,13 @@ class @Mercury.PageEditor
       iframeWindow.Mercury = Mercury
       iframeWindow.History = History if window.History && History.Adapter
 
-      @bindEvents()
+      # (re) initialize the editor against the new document
+      @bindDocumentEvents()
       @resize()
       @initializeRegions()
       @finalizeInterface()
+
+      # trigger ready events
       Mercury.trigger('ready')
       jQuery(iframeWindow).trigger('mercury:ready')
       iframeWindow.Event.fire(iframeWindow, 'mercury:ready') if iframeWindow.Event && iframeWindow.Event.fire
@@ -75,7 +83,11 @@ class @Mercury.PageEditor
     if region.data('region')
       region = region.data('region')
     else
-      type = (region.data('type') || 'unknown').titleize()
+      type = (
+        region.data('type') ||
+        ( jQuery.type(Mercury.config.regions.determineType) == 'function' && Mercury.config.regions.determineType(region) ) ||
+        'unknown'
+      ).titleize()
       throw Mercury.I18n('Region type is malformed, no data-type provided, or "%s" is unknown for the "%s" region.', type, region.attr('id') || 'unknown') if type == 'Unknown' || !Mercury.Regions[type]
       if !Mercury.Regions[type].supported
         Mercury.notify('Mercury.Regions.%s is unsupported in this client. Supported browsers are %s.', type, Mercury.Regions[type].supportedText)
@@ -89,12 +101,26 @@ class @Mercury.PageEditor
     @santizerElement = jQuery('<div>', {id: 'mercury_sanitizer', contenteditable: 'true', style: 'position:fixed;width:100px;height:100px;top:0;left:-100px;opacity:0;overflow:hidden'})
     @santizerElement.appendTo(@options.appendTo ? @document.find('body'))
 
+    @snippetToolbar.release() if @snippetToolbar
     @snippetToolbar = new Mercury.SnippetToolbar(@document)
 
     @hijackLinksAndForms()
     Mercury.trigger('mode', {mode: 'preview'}) unless @options.visible
 
 
+  bindDocumentEvents: ->
+    @document.on 'mousedown', (event) ->
+      Mercury.trigger('hide:dialogs')
+      if Mercury.region
+        Mercury.trigger('unfocus:regions') unless jQuery(event.target).closest(".#{Mercury.config.regions.className}").get(0) == Mercury.region.element.get(0)
+
+    jQuery(@document).bind 'keydown', (event) =>
+      return unless event.ctrlKey || event.metaKey
+      if (event.keyCode == 83) # meta+S
+        Mercury.trigger('action', {action: 'save'})
+        event.preventDefault()
+
+
   bindEvents: ->
     Mercury.on 'initialize:frame', => setTimeout(100, @initializeFrame)
     Mercury.on 'focus:frame', => @iframe.focus()
@@ -108,20 +134,9 @@ class @Mercury.PageEditor
       options.already_handled = true
       action.call(@, options)
 
-    @document.on 'mousedown', (event) ->
-      Mercury.trigger('hide:dialogs')
-      if Mercury.region
-        Mercury.trigger('unfocus:regions') unless jQuery(event.target).closest(".#{Mercury.config.regions.className}").get(0) == Mercury.region.element.get(0)
-
     jQuery(window).on 'resize', =>
       @resize()
 
-    jQuery(@document).bind 'keydown', (event) =>
-      return unless event.ctrlKey || event.metaKey
-      if (event.keyCode == 83) # meta+S
-        Mercury.trigger('action', {action: 'save'})
-        event.preventDefault()
-
     jQuery(window).bind 'keydown', (event) =>
       return unless event.ctrlKey || event.metaKey
       if (event.keyCode == 83) # meta+S
@@ -162,13 +177,23 @@ class @Mercury.PageEditor
 
 
   iframeSrc: (url = null, params = false) ->
+    # remove the /editor segment of the url if it gets passed through
     url = (url ? window.location.href).replace(Mercury.config.editorUrlRegEx ?= /([http|https]:\/\/.[^\/]*)\/editor\/?(.*)/i,  "$1/$2")
     url = url.replace(/[\?|\&]mercury_frame=true/gi, '')
+    url = url.replace(/\&_=i\d+/gi, '')
     if params
-      return "#{url}#{if url.indexOf('?') > -1 then '&' else '?'}mercury_frame=true"
+      # add a param allowing the server to know that the request is coming from mercury
+      # and add a cache busting param so we don't get stale content
+      return "#{url}#{if url.indexOf('?') > -1 then '&' else '?'}mercury_frame=true&_=#{new Date().getTime()}"
     else
       return url
 
+  loadIframeSrc: (url)->
+    # clear any existing events if we are loading a new iframe to replace the existing one
+    @document.off() if @document
+
+    @iframe.data('loaded', false)
+    @iframe.get(0).contentWindow.document.location.href = @iframeSrc(url, true)
 
   hijackLinksAndForms: ->
     for element in jQuery('a, form', @document)
@@ -194,7 +219,7 @@ class @Mercury.PageEditor
 
 
   save: (callback) ->
-    url = @saveUrl ? Mercury.saveURL ? @iframeSrc()
+    url = @saveUrl ? Mercury.saveUrl ? @iframeSrc()
     data = @serialize()
     Mercury.log('saving', data)
     data = jQuery.toJSON(data) unless @options.saveStyle == 'form'
@@ -202,13 +227,14 @@ class @Mercury.PageEditor
     jQuery.ajax url, {
       headers: Mercury.ajaxHeaders()
       type: method || 'POST'
-      dataType: @options.saveDataType || 'json'
+      dataType: @options.saveDataType,
       data: {content: data, _method: method}
       success: =>
         Mercury.changes = false
         Mercury.trigger('saved')
         callback() if typeof(callback) == 'function'
-      error: =>
+      error: (response) =>
+        Mercury.trigger('save_failed', response)
         Mercury.notify('Mercury was unable to save to the url: %s', url)
     }
 
@@ -217,3 +243,4 @@ class @Mercury.PageEditor
     serialized = {}
     serialized[region.name] = region.serialize() for region in @regions
     return serialized
+

data/{vendor → app}/assets/javascripts/mercury/panel.js.coffee

@@ -6,7 +6,7 @@ class @Mercury.Panel extends Mercury.Dialog
 
   build: ->
     @element = jQuery('<div>', {class: 'mercury-panel loading', style: 'display:none;'})
-    @titleElement = jQuery("<h1>#{Mercury.I18n(@options.title)}</h1>").appendTo(@element)
+    @titleElement = jQuery("<h1><span>#{Mercury.I18n(@options.title)}</span></h1>").appendTo(@element)
     @paneElement = jQuery('<div>', {class: 'mercury-panel-pane'}).appendTo(@element)
 
     if @options.closeButton
@@ -100,7 +100,7 @@ class @Mercury.Panel extends Mercury.Dialog
   makeDraggable: ->
     elementWidth = @element.width()
     @element.draggable {
-      handle: 'h1',
+      handle: 'h1 span',
       axis: 'x',
       opacity: 0.70
       scroll: false,

data/{vendor → app}/assets/javascripts/mercury/plugins/save_as_xml/mercury/page_editor.js.coffee

@@ -1,7 +1,7 @@
 class Mercury.PageEditor extends Mercury.PageEditor
 
   save: ->
-    url = @saveUrl ? Mercury.saveURL ? @iframeSrc()
+    url = @saveUrl ? Mercury.saveUrl ? @iframeSrc()
     data = @serializeAsXml()
     console.log('saving', data)
     return
@@ -25,4 +25,4 @@ class Mercury.PageEditor extends Mercury.PageEditor
       for snippetName, snippetProperties of regionProperties['snippets']
         snippetNodes.push("<#{snippetName} name=\"#{snippetProperties['name']}\"><![CDATA[#{jQuery.toJSON(snippetProperties['options'])}]]></#{snippetName}>")
       regionNodes.push("<region name=\"#{regionName}\" type=\"#{regionProperties['type']}\"><value>\n<![CDATA[#{regionProperties['value']}]]>\n</value><snippets>#{snippetNodes.join('')}</snippets></region>")
-    return "<regions>#{regionNodes.join('')}</regions>"
+    return "<regions>#{regionNodes.join('')}</regions>"

data/{vendor → app}/assets/javascripts/mercury/regions/editable.js.coffee

@@ -93,9 +93,9 @@ class @Mercury.Regions.Editable extends Mercury.Region
     # read: http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
     @element.on 'possible:drop', =>
       return if @previewing
-      if snippet = @element.find('img[data-snippet]').get(0)
+      if snippetPlaceHolder = @element.find('img[data-snippet]').get(0)
         @focus()
-        Mercury.Snippet.displayOptionsFor(jQuery(snippet).data('snippet'))
+        Mercury.Snippet.displayOptionsFor(jQuery(snippetPlaceHolder).data('snippet'))
         @document.execCommand('undo', false, null)
 
     # custom paste handling: we have to do some hackery to get the pasted content since it's not exposed normally
@@ -509,14 +509,14 @@ class Mercury.Regions.Editable.Selection
 
     if @range
       if @commonAncestor(true).closest('.mercury-snippet').length
-        lastChild = @context.createTextNode('\00')
+        lastChild = @context.createTextNode("\x00")
         element.appendChild(lastChild)
     else
       if element.lastChild && element.lastChild.nodeType == 3 && element.lastChild.textContent.replace(/^[\s+|\n+]|[\s+|\n+]$/, '') == ''
         lastChild = element.lastChild
-        element.lastChild.textContent = '\00'
+        element.lastChild.textContent = "\x00"
       else
-        lastChild = @context.createTextNode('\00')
+        lastChild = @context.createTextNode("\x00")
         element.appendChild(lastChild)
 
     if lastChild

data/app/assets/javascripts/mercury/regions/image.js.coffee

@@ -0,0 +1,114 @@
+# The image region is designed for a single, stand-along image. It
+# allows drag & drop uploading of a replacement right into the page,
+# but no editing of other DOM attributes at this time.
+#
+class @Mercury.Regions.Image extends Mercury.Region
+  @supported: document.getElementById
+  @supportedText: "IE 7+, Chrome 10+, Firefox 4+, Safari 5+, Opera 8+"
+
+  type = 'image'
+
+  constructor: (@element, @window, @options = {}) ->
+    @type = 'image'
+    super
+
+  build: ->
+    # We've going to drive all the interaction with events
+    # in bindEvent. Here we just highlight the elements to it
+    # appears "changeable" to the user.
+    @element.
+      addClass( Mercury.config.regions.className ).
+      removeClass( "#{Mercury.config.regions.className}-preview" )
+
+  bindEvents: ->
+    # This is standard stuff, take from the region parent
+    # class. We copy it instead of super() to avoid the snippet
+    # code.
+    # 
+    Mercury.on 'mode', (event, options) => @togglePreview() if options.mode == 'preview'
+
+    Mercury.on 'focus:frame', =>
+      return if @previewing || Mercury.region != @
+      @focus()
+
+    Mercury.on 'action', (event, options) =>
+      return if @previewing || Mercury.region != @
+      @execCommand(options.action, options) if options.action
+
+    # The meat. D&D uploading similar to the editable class.
+    #
+    @element.on 'dragenter', (event) =>
+      return if @previewing
+      event.preventDefault()
+      event.originalEvent.dataTransfer.dropEffect = 'copy'
+
+    @element.on 'dragover', (event) =>
+      return if @previewing
+      event.preventDefault()
+      event.originalEvent.dataTransfer.dropEffect = 'copy'
+
+    @element.on 'drop', (event) =>
+      return if @previewing
+      # handle any files that were dropped
+      if event.originalEvent.dataTransfer.files.length
+        event.preventDefault()
+        # Mercury.uploader will call a Mercury action of insertImage
+        # as a callback. If this region is the currently focused one,
+        # then we process the callback. Focus, then fire the upload.
+        #
+        @focus()
+        Mercury.uploader(event.originalEvent.dataTransfer.files[0])
+
+    @element.on 'focus', =>
+      @focus()
+
+  togglePreview: ->
+    if @previewing
+      @previewing = false
+      @build()
+    else
+      @previewing = true
+      @element.
+        addClass( "#{Mercury.config.regions.className}-preview" ).
+        removeClass( Mercury.config.regions.className )
+      Mercury.trigger('region:blurred', {region: @})
+  
+  focus: ->
+    return if @previewing
+    Mercury.region = @
+    Mercury.trigger('region:focused', {region: @})
+    Mercury.trigger('region:update', {region: @})
+
+  execCommand: (action, options = {}) ->
+    # Our history is pushed in the parent.
+    #
+    super
+    handler.call(@, options) if handler = Mercury.Regions.Image.actions[action]
+
+  pushHistory: () ->
+    # Store the current image src
+    #
+    @history.push(src: @element.attr('src'))
+
+  updateSrc: (src) ->
+    @element.attr('src', src)
+
+  serialize: ->
+    return {
+      type: @type
+      data: @dataAttributes()
+      attributes:
+        src: @element.attr('src')
+    }
+
+  # Actions. These are all fired by execCommand.
+  #
+  @actions: {
+
+    undo: -> if prev = @history.undo() then @updateSrc(prev.src)
+
+    redo: -> if next = @history.redo() then @updateSrc(next.src)
+    
+    insertImage: (options) -> @updateSrc(options.value.src)
+
+  }

data/app/assets/javascripts/mercury/regions/simple.js.coffee

@@ -0,0 +1,325 @@
+# todo:
+# context for the toolbar buttons and groups needs to change so we can do the following:
+# how to handle context for buttons?  if the cursor is within a bold area (**bo|ld**), or selecting it -- it would be
+# nice if we could activate the bold button for instance.
+
+class @Mercury.Regions.Simple extends Mercury.Region
+  @supported: document.getElementById
+  @supportedText: "IE 7+, Chrome 10+, Firefox 4+, Safari 5+, Opera 8+"
+
+  type = 'simple'
+
+  constructor: (@element, @window, @options = {}) ->
+    @type = 'simple'
+    super
+
+
+  build: ->
+    if @element.css('display') == 'block'
+      width = '100%'
+      height = @element.height()
+    else
+      width = @element.width()
+      height = @element.height() # 'auto'
+
+    value = @element.text()
+    @element.removeClass(Mercury.config.regions.className)
+    @textarea = jQuery('<textarea>', @document).val(value)
+    @textarea.attr('class', @element.attr('class')).addClass('mercury-textarea')
+    @textarea.css
+      border: 0
+      background: 'transparent'
+      'overflow-y': 'hidden'
+      width: width
+      height: height
+      fontFamily: 'inherit'
+      fontSize: 'inherit'
+      fontWeight: 'inherit'
+      fontStyle: 'inherit'
+      color: 'inherit'
+      'min-height': 0
+      padding: '0'
+      margin: 0
+      'border-radius': 0
+      display: 'inherit'
+      lineHeight: 'inherit'
+      textAlign: 'inherit'
+    @element.addClass(Mercury.config.regions.className)
+    @element.empty().append(@textarea)
+
+    @container = @element
+    @container.data('region', @)
+    @element = @textarea
+    @resize()
+
+
+  bindEvents: ->
+    Mercury.on 'mode', (event, options) => @togglePreview() if options.mode == 'preview'
+    Mercury.on 'focus:frame', => @focus() if !@previewing && Mercury.region == @
+
+    Mercury.on 'action', (event, options) =>
+      return if @previewing || Mercury.region != @
+      @execCommand(options.action, options) if options.action
+
+    Mercury.on 'unfocus:regions', =>
+      return if @previewing || Mercury.region != @
+      @element.blur()
+      @container.removeClass('focus')
+      Mercury.trigger('region:blurred', {region: @})
+
+    @element.on 'dragenter', (event) =>
+      return if @previewing
+      event.preventDefault()
+      event.originalEvent.dataTransfer.dropEffect = 'copy'
+
+    @element.on 'dragover', (event) =>
+      return if @previewing
+      event.preventDefault()
+      event.originalEvent.dataTransfer.dropEffect = 'copy'
+
+    @element.on 'drop', (event) =>
+      return if @previewing
+
+      # handle dropping snippets
+      if Mercury.snippet
+        event.preventDefault()
+        @focus()
+        Mercury.Snippet.displayOptionsFor(Mercury.snippet)
+
+      # handle any files that were dropped
+      if event.originalEvent.dataTransfer.files.length
+        event.preventDefault()
+        @focus()
+        Mercury.uploader(event.originalEvent.dataTransfer.files[0])
+
+    @element.on 'focus', =>
+      return if @previewing
+      Mercury.region = @
+      @container.addClass('focus')
+      Mercury.trigger('region:focused', {region: @})
+
+    @element.on 'keydown', (event) =>
+      return if @previewing
+      @resize()
+      switch event.keyCode
+        when 90 # undo / redo
+          return unless event.metaKey
+          event.preventDefault()
+          if event.shiftKey then @execCommand('redo') else @execCommand('undo')
+          return
+
+        when 13 # enter or return
+          selection = @selection()
+          text = @element.val()
+          start = text.lastIndexOf('\n', selection.start)
+          end = text.indexOf('\n', selection.end)
+          end = text.length if end < start
+          start = text.lastIndexOf('\n', selection.start - 1) if text[start] == '\n'
+          if text[start + 1] == '-'
+            selection.replace('\n- ', false, true)
+          if /\d/.test(text[start + 1])
+            lineText = text.substring(start, end)
+            if /(\d+)\./.test(lineText)
+              number = parseInt(RegExp.$1)
+              selection.replace("\n#{number += 1}. ", false, true)
+          # Never allow return. Newlines won't survive the 
+          # change-over to HTML, so just don't encourage their
+          # use.
+          event.preventDefault()
+
+        when 9 # tab
+          event.preventDefault()
+          @execCommand('insertHTML', {value: '  '})
+
+      @pushHistory(event.keyCode)
+
+    @element.on 'keyup', =>
+      return if @previewing
+      Mercury.changes = true
+      @resize()
+      Mercury.trigger('region:update', {region: @})
+
+    @element.on 'mouseup', =>
+      return if @previewing
+      @focus()
+      Mercury.trigger('region:focused', {region: @})
+
+    @element.on 'paste', (event) =>
+      return if @previewing || Mercury.region != @
+      if @specialContainer
+        event.preventDefault()
+        return
+      return if @pasting
+      Mercury.changes = true
+      @handlePaste(event.originalEvent)
+
+
+  handlePaste: (event) ->
+    # get the text content from the clipboard and fall back to using the sanitizer if unavailable
+    @execCommand('insertHTML', {value: event.clipboardData.getData('text/plain').replace(/\n/g, ' ')})
+    event.preventDefault()
+    return
+
+
+  path: ->
+    [@container.get(0)]
+
+
+  focus: ->
+    @element.focus()
+
+
+  content: (value = null, filterSnippets = true) ->
+    if value != null
+      if jQuery.type(value) == 'string'
+        @element.val(value)
+      else
+        @element.val(value.html)
+        @selection().select(value.selection.start, value.selection.end)
+    else
+      return @element.val()
+
+
+  contentAndSelection: ->
+    return {html: @content(null, false), selection: @selection().serialize()}
+
+
+  togglePreview: ->
+    if @previewing
+      @previewing = false
+      @element = @container
+      @build()
+      @focus() if Mercury.region == @
+      # @container.addClass(Mercury.config.regions.className).removeClass("#{Mercury.config.regions.className}-preview")
+      # @previewElement.hide()
+      # @element.show()
+    else
+      @previewing = true
+      @container.addClass("#{Mercury.config.regions.className}-preview").removeClass(Mercury.config.regions.className)
+      value = jQuery('<div></div>').text(@element.val()).html()
+      @container.html(value)
+      Mercury.trigger('region:blurred', {region: @})
+
+
+  execCommand: (action, options = {}) ->
+    super
+
+    handler.call(@, @selection(), options) if handler = Mercury.Regions.Simple.actions[action]
+    @resize()
+
+
+  pushHistory: (keyCode) ->
+    # when pressing return, delete or backspace it should push to the history
+    # all other times it should store if there's a 1 second pause
+    keyCodes = [13, 46, 8]
+    waitTime = 2.5
+    knownKeyCode = keyCodes.indexOf(keyCode) if keyCode
+
+    # clear any pushes to the history
+    clearTimeout(@historyTimeout)
+
+    # if the key code was return, delete, or backspace store now -- unless it was the same as last time
+    if knownKeyCode >= 0 && knownKeyCode != @lastKnownKeyCode # || !keyCode
+      @history.push(@contentAndSelection())
+    else if keyCode
+      # set a timeout for pushing to the history
+      @historyTimeout = setTimeout(waitTime * 1000, => @history.push(@contentAndSelection()))
+    else
+      # push to the history immediately
+      @history.push(@contentAndSelection())
+
+    @lastKnownKeyCode = knownKeyCode
+
+
+  selection: ->
+    return new Mercury.Regions.Simple.Selection(@element)
+
+
+  resize: ->
+    @element.css({height: @element.get(0).scrollHeight - 100})
+    @element.css({height: @element.get(0).scrollHeight});
+
+
+  snippets: ->
+
+
+  # Actions
+  @actions: {
+
+    undo: -> @content(@history.undo())
+
+    redo: -> @content(@history.redo())
+
+    insertHTML: (selection, options) ->
+      if options.value.get && element = options.value.get(0)
+        options.value = jQuery('<div>').html(element).html()
+      selection.replace(options.value, false, true)
+
+  }
+
+
+# Helper class for managing selection and getting information from it
+class Mercury.Regions.Simple.Selection
+
+  constructor: (@element) ->
+    @el = @element.get(0)
+    @getDetails()
+
+
+  serialize: ->
+    return {start: @start, end: @end}
+
+
+  getDetails: ->
+    @length = @el.selectionEnd - @el.selectionStart
+    @start = @el.selectionStart
+    @end = @el.selectionEnd
+    @text = @element.val().substr(@start, @length)
+
+
+  replace: (text, select = false, placeCursor = false) ->
+    @getDetails()
+    val = @element.val()
+    savedVal = @element.val()
+    @element.val(val.substr(0, @start) + text + val.substr(@end, val.length))
+    changed = @element.val() != savedVal
+    @select(@start, @start + text.length) if select
+    @select(@start + text.length, @start + text.length) if placeCursor
+    return changed
+
+
+  select: (@start, @end) ->
+    @element.focus()
+    @el.selectionStart = @start
+    @el.selectionEnd = @end
+    @getDetails()
+
+
+  wrap: (left, right) ->
+    @getDetails()
+    @deselectNewLines()
+    @replace(left + @text + right, @text != '')
+    @select(@start + left.length, @start + left.length) if @text == ''
+
+
+  deselectNewLines: ->
+    text = @text
+    length = text.replace(/\n+$/g, '').length
+    @select(@start, @start + length)
+
+
+  placeMarker: ->
+    @wrap('[mercury-marker]', '[mercury-marker]')
+
+
+  removeMarker: ->
+    val = @element.val()
+    start = val.indexOf('[mercury-marker]')
+    return unless start > -1
+    end = val.indexOf('[mercury-marker]', start + 1) - '[mercury-marker]'.length
+    @element.val(@element.val().replace(/\[mercury-marker\]/g, ''))
+    @select(start, end)
+
+
+  textContent: ->
+    return @text