kiteditor 1.0.11 → 1.0.12

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

@@ -1,12 +1,11 @@
-class @Mercury.Regions.Editable extends Mercury.Region
-  # No IE support yet because it doesn't follow the W3C standards for HTML5 contentEditable (aka designMode).
-  @supported: document.designMode && !jQuery.browser.konqueror && !jQuery.browser.msie
-  @supportedText: "Chrome 10+, Firefox 4+, Safari 5+"
-
-  type = 'editable'
+class @Mercury.Regions.Full extends Mercury.Region
+  # No IE < 10 support because those versions don't follow the W3C standards for HTML5 contentEditable (aka designMode).
+  @supported: document.designMode && !jQuery.browser.konqueror && (!jQuery.browser.msie || (jQuery.browser.msie && parseFloat(jQuery.browser.version, 10) >= 10))
+  @supportedText: "Chrome 10+, Firefox 4+, Safari 5+, Opera 11.64+"
+  type = 'full'
+  type: -> type
 
   constructor: (@element, @window, @options = {}) ->
-    @type = 'editable'
     super
 
 
@@ -26,7 +25,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
     @element.get(0).contentEditable = true
 
     # make all snippets not editable, and set their versions to 1
-    for element in @element.find('.mercury-snippet')
+    for element in @element.find('[data-snippet]')
       element.contentEditable = false
       jQuery(element).attr('data-version', '1')
 
@@ -47,7 +46,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
     Mercury.on 'region:update', =>
       return if @previewing || Mercury.region != @
-      setTimeout(1, => @selection().forceSelection(@element.get(0)))
+      setTimeout((=> @selection().forceSelection(@element.get(0))), 1)
       currentElement = @currentElement()
       if currentElement.length
         # setup the table editor if we're inside a table
@@ -69,16 +68,17 @@ class @Mercury.Regions.Editable extends Mercury.Region
       return if @previewing
       event.preventDefault() unless Mercury.snippet
       event.originalEvent.dataTransfer.dropEffect = 'copy'
-      if jQuery.browser.webkit
-        clearTimeout(@dropTimeout)
-        @dropTimeout = setTimeout(10, => @element.trigger('possible:drop'))
+      # removed to fix chrome update issue #362 https://github.com/jejacks0n/mercury/issues/362
+      # if jQuery.browser.webkit
+        # clearTimeout(@dropTimeout)
+        # @dropTimeout = setTimeout((=> @element.trigger('possible:drop')), 10)
 
     @element.on 'drop', (event) =>
       return if @previewing
 
       # handle dropping snippets
       clearTimeout(@dropTimeout)
-      @dropTimeout = setTimeout(1, => @element.trigger('possible:drop'))
+      @dropTimeout = setTimeout((=> @element.trigger('possible:drop')), 1)
 
       # handle any files that were dropped
       return unless event.originalEvent.dataTransfer.files.length
@@ -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 Mercury.snippet
         @focus()
-        Mercury.Snippet.displayOptionsFor(jQuery(snippet).data('snippet'))
+        Mercury.Snippet.displayOptionsFor(Mercury.snippet.name, {}, Mercury.snippet.hasOptions)
         @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
@@ -115,7 +115,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
     @element.on 'focus', =>
       return if @previewing
       Mercury.region = @
-      setTimeout(1, => @selection().forceSelection(@element.get(0)))
+      setTimeout((=> @selection().forceSelection(@element.get(0))), 1)
       Mercury.trigger('region:focused', {region: @})
 
     @element.on 'blur', =>
@@ -194,13 +194,13 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
   focus: ->
     if Mercury.region != @
-      setTimeout(10, => @element.focus())
+      setTimeout((=> @element.focus()), 10)
       try
         @selection().selection.collapseToStart()
       catch e
         # intentially do nothing
     else
-      setTimeout(10, => @element.focus())
+      setTimeout((=> @element.focus()), 10)
 
     Mercury.trigger('region:focused', {region: @})
     Mercury.trigger('region:update', {region: @})
@@ -217,7 +217,9 @@ class @Mercury.Regions.Editable extends Mercury.Region
         element.contentEditable = false
         element = jQuery(element)
         if snippet = Mercury.Snippet.find(element.data('snippet'))
-          unless element.data('version')
+          if element.data('version')
+            snippet.setVersion(element.data('version'))
+          else
             try
               version = parseInt(element.html().match(/\/(\d+)\]/)[1])
               if version
@@ -277,7 +279,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
     super
 
     # use a custom handler if there's one, otherwise use execCommand
-    if handler = Mercury.config.behaviors[action] || Mercury.Regions.Editable.actions[action]
+    if handler = Mercury.config.behaviors[action] || Mercury.Regions.Full.actions[action]
       handler.call(@, @selection(), options)
     else
       sibling = @element.get(0).previousSibling if action == 'indent'
@@ -308,7 +310,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
       @history.push(@content(null, false, true))
     else if keyCode
       # set a timeout for pushing to the history
-      @historyTimeout = setTimeout(waitTime * 1000, => @history.push(@content(null, false, true)))
+      @historyTimeout = setTimeout((=> @history.push(@content(null, false, true))), waitTime * 1000)
     else
       # push to the history immediately
       @history.push(@content(null, false, true))
@@ -317,7 +319,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
 
   selection: ->
-    return new Mercury.Regions.Editable.Selection(@window.getSelection(), @document)
+    return new Mercury.Regions.Full.Selection(@window.getSelection(), @document)
 
 
   path: ->
@@ -349,7 +351,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
       sanitizer = jQuery('#mercury_sanitizer', @document).focus()
 
       # set 1ms timeout to allow paste event to complete
-      setTimeout 1, =>
+      setTimeout =>
         # sanitize the content
         content = @sanitize(sanitizer)
 
@@ -360,11 +362,13 @@ class @Mercury.Regions.Editable extends Mercury.Region
         # paste sanitized content
         @element.focus()
         @execCommand('insertHTML', {value: content})
+      , 1
 
 
   sanitize: (sanitizer) ->
     # always remove nested regions
-    sanitizer.find(".#{Mercury.config.regions.className}").remove()
+    sanitizer.find("[#{Mercury.config.regions.attribute}]").remove()
+    sanitizer.find('[src*="webkit-fake-url://"]').remove()
 
     if Mercury.config.pasting.sanitize
       switch Mercury.config.pasting.sanitize
@@ -422,7 +426,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
     redo: -> @content(@history.redo())
 
-    horizontalRule: -> this.execCommand('insertHorizontalRule')
+    horizontalRule: -> @execCommand('insertHTML', {value: '<hr/>'})
 
     removeFormatting: (selection) -> selection.insertTextNode(selection.textContent())
 
@@ -466,7 +470,7 @@ class @Mercury.Regions.Editable extends Mercury.Region
 
 
 # Helper class for managing selection and getting information from it
-class Mercury.Regions.Editable.Selection
+class Mercury.Regions.Full.Selection
 
   constructor: (@selection, @context) ->
     return unless @selection.rangeCount >= 1
@@ -490,7 +494,13 @@ class Mercury.Regions.Editable.Selection
 
 
   textContent: ->
-    return @range.cloneContents().textContent
+    return @content().textContent
+
+
+  htmlContent: ->
+    content = @content()
+    return jQuery('<div>').html(content).html()
+    return null
 
 
   content: ->
@@ -508,15 +518,15 @@ class Mercury.Regions.Editable.Selection
     range = @context.createRange()
 
     if @range
-      if @commonAncestor(true).closest('.mercury-snippet').length
-        lastChild = @context.createTextNode('\x00')
+      if @commonAncestor(true).closest('[data-snippet]').length
+        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 = '\x00'
+        element.lastChild.textContent = "\x00"
       else
-        lastChild = @context.createTextNode('\x00')
+        lastChild = @context.createTextNode("\x00")
         element.appendChild(lastChild)
 
     if lastChild

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

@@ -0,0 +1,93 @@
+# The image region is designed for a single, stand-along image and allows drag & drop uploading of a replacement right
+# into the page, but provides no editing of other DOM attributes at this time.
+class @Mercury.Regions.Image extends Mercury.Region
+  @supported: document.getElementById
+  @supportedText: "Chrome 10+, Firefox 4+, IE 7+, Safari 5+, Opera 8+"
+  type = 'image'
+  type: -> type
+
+  constructor: (@element, @window, @options = {}) ->
+    super
+
+
+  bindEvents: ->
+    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
+
+    @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
+      if event.originalEvent.dataTransfer.files.length
+        event.preventDefault()
+        @focus()
+        Mercury.uploader(event.originalEvent.dataTransfer.files[0])
+
+    @element.on 'focus', =>
+      @focus()
+
+
+  togglePreview: ->
+    if @previewing
+      @previewing = false
+      @element.attr(Mercury.config.regions.attribute, type)
+      @build()
+    else
+      @previewing = true
+      @element.removeAttr(Mercury.config.regions.attribute)
+      Mercury.trigger('region:blurred', {region: @})
+  
+
+  focus: ->
+    return if @previewing
+    Mercury.region = @
+    Mercury.trigger('region:focused', {region: @})
+    Mercury.trigger('region:update', {region: @})
+
+
+  execCommand: (action, options = {}) ->
+    super
+    handler.call(@, options) if handler = Mercury.Regions.Image.actions[action]
+
+
+  pushHistory: () ->
+    @history.push(src: @element.attr('src'))
+
+
+  updateSrc: (src) ->
+    @element.attr('src', src)
+
+
+  serialize: ->
+    return {
+      type: type
+      data: @dataAttributes()
+      attributes:
+        src: @element.attr('src')
+    }
+
+
+  @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/{vendor/assets/javascripts/mercury/regions/markupable.js.coffee → app/assets/javascripts/mercury/regions/markdown.js.coffee}

@@ -1,16 +1,10 @@
-# 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.Markupable extends Mercury.Region
+class @Mercury.Regions.Markdown extends Mercury.Region
   @supported: document.getElementById
-  @supportedText: "IE 7+, Chrome 10+, Firefox 4+, Safari 5+, Opera 8+"
-
-  type = 'markupable'
+  @supportedText: "Chrome 10+, Firefox 4+, IE 7+, Safari 5+, Opera 8+"
+  type = 'markdown'
+  type: -> type
 
   constructor: (@element, @window, @options = {}) ->
-    @type = 'markupable'
     super
     @converter = new Showdown.converter()
 
@@ -18,13 +12,18 @@ class @Mercury.Regions.Markupable extends Mercury.Region
   build: ->
     width = '100%'
     height = @element.height()
-
     value = @element.html().replace(/^\s+|\s+$/g, '').replace('>', '>')
-    @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', display: 'block', 'overflow-y': 'hidden', width: width, height: height, fontFamily: '"Courier New", Courier, monospace'})
-    @element.addClass(Mercury.config.regions.className)
+
+    @textarea = jQuery('<textarea>', @document).val(value).addClass('mercury-textarea')
+    @textarea.css
+      border: 0
+      background: 'transparent'
+      display: 'block'
+      'overflow-y': 'hidden'
+      width: width
+      height: height
+      fontFamily: '"Courier New", Courier, monospace'
+
     @element.empty().append(@textarea)
 
     @previewElement = jQuery('<div>', @document)
@@ -35,6 +34,12 @@ class @Mercury.Regions.Markupable extends Mercury.Region
     @resize()
 
 
+  dataAttributes: ->
+    data = {}
+    data[attr] = @container.attr('data-' + attr) for attr in Mercury.config.regions.dataAttributes
+    return data
+
+
   bindEvents: ->
     Mercury.on 'mode', (event, options) => @togglePreview() if options.mode == 'preview'
     Mercury.on 'focus:frame', => @focus() if !@previewing && Mercury.region == @
@@ -66,7 +71,7 @@ class @Mercury.Regions.Markupable extends Mercury.Region
       if Mercury.snippet
         event.preventDefault()
         @focus()
-        Mercury.Snippet.displayOptionsFor(Mercury.snippet)
+        Mercury.Snippet.displayOptionsFor(Mercury.snippet.name, {}, Mercury.snippet.hasOptions)
 
       # handle any files that were dropped
       if event.originalEvent.dataTransfer.files.length
@@ -164,13 +169,13 @@ class @Mercury.Regions.Markupable extends Mercury.Region
   togglePreview: ->
     if @previewing
       @previewing = false
-      @container.addClass(Mercury.config.regions.className).removeClass("#{Mercury.config.regions.className}-preview")
+      @container.attr(Mercury.config.regions.attribute, type)
       @previewElement.hide()
       @element.show()
       @focus() if Mercury.region == @
     else
       @previewing = true
-      @container.addClass("#{Mercury.config.regions.className}-preview").removeClass(Mercury.config.regions.className)
+      @container.removeAttr(Mercury.config.regions.attribute)
       value = @converter.makeHtml(@element.val())
       @previewElement.html(value)
       @previewElement.show()
@@ -181,7 +186,7 @@ class @Mercury.Regions.Markupable extends Mercury.Region
   execCommand: (action, options = {}) ->
     super
 
-    handler.call(@, @selection(), options) if handler = Mercury.Regions.Markupable.actions[action]
+    handler.call(@, @selection(), options) if handler = Mercury.Regions.Markdown.actions[action]
     @resize()
 
 
@@ -200,7 +205,7 @@ class @Mercury.Regions.Markupable extends Mercury.Region
       @history.push(@contentAndSelection())
     else if keyCode
       # set a timeout for pushing to the history
-      @historyTimeout = setTimeout(waitTime * 1000, => @history.push(@contentAndSelection()))
+      @historyTimeout = setTimeout((=> @history.push(@contentAndSelection())), waitTime * 1000)
     else
       # push to the history immediately
       @history.push(@contentAndSelection())
@@ -209,7 +214,7 @@ class @Mercury.Regions.Markupable extends Mercury.Region
 
 
   selection: ->
-    return new Mercury.Regions.Markupable.Selection(@element)
+    return new Mercury.Regions.Markdown.Selection(@element)
 
 
   resize: ->
@@ -261,7 +266,7 @@ class @Mercury.Regions.Markupable extends Mercury.Region
       }
       selection.unWrapLine("#{wrapper[0]}", "#{wrapper[1]}") for wrapperName, wrapper of wrappers
       if options.value == 'blockquote'
-        Mercury.Regions.Markupable.actions.indent.call(@, selection, options)
+        Mercury.Regions.Markdown.actions.indent.call(@, selection, options)
         return
       selection.wrapLine("#{wrappers[options.value][0]}", "#{wrappers[options.value][1]}")
 
@@ -289,7 +294,7 @@ class @Mercury.Regions.Markupable extends Mercury.Region
 
 
 # Helper class for managing selection and getting information from it
-class Mercury.Regions.Markupable.Selection
+class Mercury.Regions.Markdown.Selection
 
   constructor: (@element) ->
     @el = @element.get(0)

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

@@ -1,16 +1,11 @@
-# todo:
-
-# 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+"
-
+  @supportedText: "Chrome 10+, Firefox 4+, IE 7+, Safari 5+, Opera 8+"
   type = 'simple'
+  type: -> type
 
   constructor: (@element, @window, @options = {}) ->
-    @type = 'simple'
+    Mercury.log("building #{type}", @element, @options)
     super
 
 
@@ -23,9 +18,7 @@ class @Mercury.Regions.Simple extends Mercury.Region
       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 = jQuery('<textarea>', @document).val(value).addClass('mercury-textarea')
     @textarea.css
       border: 0
       background: 'transparent'
@@ -44,7 +37,7 @@ class @Mercury.Regions.Simple extends Mercury.Region
       display: 'inherit'
       lineHeight: 'inherit'
       textAlign: 'inherit'
-    @element.addClass(Mercury.config.regions.className)
+
     @element.empty().append(@textarea)
 
     @container = @element
@@ -67,31 +60,10 @@ class @Mercury.Regions.Simple extends Mercury.Region
       @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'
+    @bindElementEvents()
 
-    @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])
 
+  bindElementEvents: ->
     @element.on 'focus', =>
       return if @previewing
       Mercury.region = @
@@ -131,20 +103,6 @@ class @Mercury.Regions.Simple extends Mercury.Region
           event.preventDefault()
           @execCommand('insertHTML', {value: '  '})
 
-      if event.metaKey
-        switch event.keyCode
-          when 66 # b
-            @execCommand('bold')
-            event.preventDefault()
-
-          when 73 # i
-            @execCommand('italic')
-            event.preventDefault()
-
-          when 85 # u
-            @execCommand('underline')
-            event.preventDefault()
-
       @pushHistory(event.keyCode)
 
     @element.on 'keyup', =>
@@ -202,15 +160,14 @@ class @Mercury.Regions.Simple extends Mercury.Region
     if @previewing
       @previewing = false
       @element = @container
+      @container.attr(Mercury.config.regions.attribute, type)
       @build()
+      @bindElementEvents()
       @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.removeAttr(Mercury.config.regions.attribute)
       @container.html(value)
       Mercury.trigger('region:blurred', {region: @})
 
@@ -237,7 +194,7 @@ class @Mercury.Regions.Simple extends Mercury.Region
       @history.push(@contentAndSelection())
     else if keyCode
       # set a timeout for pushing to the history
-      @historyTimeout = setTimeout(waitTime * 1000, => @history.push(@contentAndSelection()))
+      @historyTimeout = setTimeout((=> @history.push(@contentAndSelection())), waitTime * 1000)
     else
       # push to the history immediately
       @history.push(@contentAndSelection())