dante-editor 0.0.13 → 0.0.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: eba2467b8be034552237cb54293358466332638c
-  data.tar.gz: 0dae2099d83d79aaf498b58e6b9e28c8b2f4acde
+  metadata.gz: 64f6f786c61ccbf8426121e68b54530c5fcf0427
+  data.tar.gz: 73f9b8c0bbb9e8ff59ce223ba455fd0c72d4f065
 SHA512:
-  metadata.gz: a54f3a0c8308f70be7bd76404878dff6d61407f1100c859f4aca0564819dcb0b37c788c287f3d53bf7a584ce419050aedd1cd067d61ce8b8a0921f5738cacc4f
-  data.tar.gz: bdba4aa9e98ac3e9b4480ed039f56772663ff6e5111dde4cc548bf4472a924bb1d0957f069b22ebd6082f9aca26dabf962766669c36284b81a1b883ff2e4f7c7
+  metadata.gz: f8f8c7511abc490294fcbf3e6a41dab1271f7ca5cef6046f6eb77a147895bae60926535c6a0fdd1c70c570977c92f1ae06728ed1d5c2f1b3506fbfdeebacefa6
+  data.tar.gz: 175e321a6d64c3c9dc3c6c33a0accee13edf352b08d7c42e7100278e321db2c6a5cb3fbcaa883941fb5431b7e3ea26840efb09dc76493cca45beb9b7cd63dc0d

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    dante-editor (0.0.13)
+    dante-editor (0.0.14)
 
 GEM
   remote: http://rubygems.org/
@@ -138,3 +138,6 @@ DEPENDENCIES
   ruby18_source_location
   sinatra
   wdm (~> 0.1.0)
+
+BUNDLED WITH
+   1.10.5

data/app/assets/javascripts/dante/editor.js.coffee

@@ -77,7 +77,6 @@ class Dante.Editor extends Dante.View
 
     @initializeWidgets(opts)
 
-
   initializeWidgets: (opts)->
     #TODO: this could be a hash to access widgets without var
     #Base widgets
@@ -248,11 +247,11 @@ class Dante.Editor extends Dante.View
     a is b
 
   #set focus and caret position on element
-  setRangeAt: (element, int=0)->
+  setRangeAt: (element, pos=0)->
     range = document.createRange()
     sel = window.getSelection()
     #node = element.firstChild;
-    range.setStart(element, int); #DANGER this is supported by IE 9
+    range.setStart(element, pos); #DANGER this is supported by IE 9
     #range.setStartAfter(element)
     #range.setEnd(element, int);
     range.collapse(true)
@@ -261,7 +260,7 @@ class Dante.Editor extends Dante.View
     element.focus()
 
   #set focus and caret position on element
-  setRangeAtText: (element, int=0)->
+  setRangeAtText: (element, pos=0)->
     range = document.createRange()
     sel = window.getSelection()
     node = element.firstChild;
@@ -460,7 +459,7 @@ class Dante.Editor extends Dante.View
 
       when "Up"
         prev_node = current_node.prev()
-        utils.log "PREV NODE IS #{prev_node.attr('class')}"
+        utils.log "PREV NODE IS #{prev_node.attr('class')} #{prev_node.attr('name')}"
         utils.log "CURRENT NODE IS up #{current_node.attr('class')}"
 
         return unless $(current_node).hasClass("graf")
@@ -503,8 +502,8 @@ class Dante.Editor extends Dante.View
 
   #parse text for initial mess
   parseInitialMess: ()->
-    @setupElementsClasses $(@el).find('.section-inner') , ()=>
-      @handleUnwrappedImages($(@el).find('.section-inner'))
+    @setupElementsClasses $(@el).find('.section-inner') , (e)=>
+      @handleUnwrappedImages(e)
 
   handleDblclick: ()->
     utils.log "handleDblclick"
@@ -517,7 +516,7 @@ class Dante.Editor extends Dante.View
   #then clean up the content and copies to currentNode, very clever uh?
   handlePaste: (ev)=>
     utils.log("pasted!")
-    @aa =  @getNode()
+    @aa = @getNode()
 
     pastedText = undefined
     if (window.clipboardData && window.clipboardData.getData) #IE
@@ -531,28 +530,38 @@ class Dante.Editor extends Dante.View
     if pastedText.match(/<\/*[a-z][^>]+?>/gi)
       utils.log("HTML DETECTED ON PASTE")
       pastedText = pastedText.replace(/&.*;/g, "")
+
       #convert pasted divs in p before copy contents into div
       pastedText = pastedText.replace(/<div>([\w\W]*?)<\/div>/gi, '<p>$1</p>')
 
-      document.body.appendChild($("<div id='#{@paste_element_id.replace('#', '')}'></div>")[0])
+      #create the placeholder element and assign pasted content
+      document.body.appendChild( $("<div id='#{@paste_element_id.replace('#', '')}' class='dante-paste'></div>")[0] )
       $(@paste_element_id).html("<span>#{pastedText}</span>")
 
-      @setupElementsClasses $(@paste_element_id), ()=>
-        nodes = $($(@paste_element_id).html()).insertAfter($(@aa))
-        $(@paste_element_id).remove()
+      #clean pasted content
+
+      @setupElementsClasses $(@paste_element_id), (e)=>
+        # e is the target object which is cleaned
+        nodes = $(e.html()).insertAfter($(@aa))
+        #remove paste div since we wont use it until the next paste
+        e.remove()
         #set caret on newly created node
         last_node = nodes.last()[0]
         num = last_node.childNodes.length
         @setRangeAt(last_node, num)
+        #select new node
         new_node = $(@getNode())
-        top = new_node.offset().top
         @markAsSelected(new_node)
         @displayTooltipAt($(@el).find(".is-selected"))
-        #scroll to element top
+
         @handleUnwrappedImages(nodes)
+
+        #scroll to element top
+        top = new_node.offset().top
         $('html, body').animate
           scrollTop: top
-        , 200
+        , 20
+
 
       return false # Prevent the default handler from running.
 
@@ -604,6 +613,7 @@ class Dante.Editor extends Dante.View
       node = $(range.commonAncestorContainer)
       prev = node.prev()
       num = prev[0].childNodes.length
+      utils.log "PREV NODE"
       utils.log prev
       if prev.hasClass("graf")
         @setRangeAt(prev[0], num)
@@ -613,6 +623,8 @@ class Dante.Editor extends Dante.View
         @setRangeAt(prev[0], num)
         node.remove()
         @markAsSelected(@getNode())
+      else if prev.hasClass("postList")
+        @.setRangeAt(prev.find("li").last()[0])
       else if !prev
         @.setRangeAt(@.$el.find(".section-inner p")[0])
 
@@ -658,15 +670,13 @@ class Dante.Editor extends Dante.View
     anchor_node = @getNode() #current node on which cursor is positioned
     parent = $(anchor_node)
 
-
     @markAsSelected( anchor_node ) if anchor_node
 
     if e.which is TAB
-
       @handleTab(anchor_node)
       return false
 
-    if e.which == ENTER
+    if e.which is ENTER
 
       #removes previous selected nodes
       $(@el).find(".is-selected").removeClass("is-selected")
@@ -733,7 +743,7 @@ class Dante.Editor extends Dante.View
       , 2
 
     #delete key
-    if (e.which == BACKSPACE)
+    if (e.which is BACKSPACE)
       eventHandled = false;
       @tooltip_view.hide()
       utils.log("removing from down")
@@ -748,24 +758,26 @@ class Dante.Editor extends Dante.View
       utils.log(utils_anchor_node);
 
       #check if any of the widgets can handle a backspace keydown
-      utils.log("HANDLING WIDGET BACKSPACES");
+      utils.log("HANDLING WIDGET BACKSPACES")
       _.each @widgets, (w)=>
-        if w.handleBackspaceKey && !handled
-          handled = w.handleBackspaceKey(e, anchor_node);
+        if _.isFunction(w.handleBackspaceKey) && !eventHandled
+          eventHandled = w.handleBackspaceKey(e, anchor_node)
+          utils.log(eventHandled)
 
       if (eventHandled)
-        e.preventDefault();
+        e.preventDefault()
+        utils.log("SCAPE FROM BACKSPACE HANDLER")
         return false;
 
       if(parent.hasClass("graf--li") and @getCharacterPrecedingCaret().length is 0)
-          return this.handleListBackspace(parent, e);
+        return this.handleListBackspace(parent, e);
 
       #select an image if backspacing into it from a paragraph
-      if($(anchor_node).hasClass("graf--p") && @isFirstChar)
-          if($(anchor_node).prev().hasClass("graf--figure"))
-            e.preventDefault();
-            $(anchor_node).prev().find("img").click();
-            utils.log("Focus on the previous image")
+      if($(anchor_node).hasClass("graf--p") && @isFirstChar() )
+        if($(anchor_node).prev().hasClass("graf--figure") && @getSelectedText().length == 0)
+          e.preventDefault();
+          $(anchor_node).prev().find("img").click();
+          utils.log("Focus on the previous image");
 
       if $(utils_anchor_node).hasClass("section-content") || $(utils_anchor_node).hasClass("graf--first")
         utils.log "SECTION DETECTED FROM KEYDOWN #{_.isEmpty($(utils_anchor_node).text())}"
@@ -789,12 +801,12 @@ class Dante.Editor extends Dante.View
         return false if @isFirstChar() && !_.isEmpty( $(anchor_node).text().trim() )
 
     #spacebar
-    if (e.which == SPACEBAR)
+    if (e.which is SPACEBAR)
       utils.log("SPACEBAR")
       if (parent.hasClass("graf--p"))
         @handleSmartList(parent, e)
+    
     #arrows key
-    #if _.contains([37,38,39,40], e.which)
     #up & down
     if _.contains([UPARROW, DOWNARROW], e.which)
       utils.log e.which
@@ -912,7 +924,7 @@ class Dante.Editor extends Dante.View
 
   #mark the current row as selected
   markAsSelected: (element)->
-
+    utils.log element
     return if _.isUndefined element
 
     $(@el).find(".is-selected").removeClass("is-mediaFocused is-selected")
@@ -985,34 +997,35 @@ class Dante.Editor extends Dante.View
 
   setupElementsClasses: (element, cb)->
     if _.isUndefined(element)
-      @element = $(@el).find('.section-inner')
+      element = $(@el).find('.section-inner')
     else
-      @element = element
-
-    setTimeout ()=>
-      #clean context and wrap text nodes
-      @cleanContents(@element)
-      @wrapTextNodes(@element)
-
-      #setup classes
-      _.each  @element.children(), (n)=>
-        name = $(n).prop("tagName").toLowerCase()
-        n = @addClassesToElement(n)
-        @setElementName(n)
-
-      @setupLinks(@element.find("a"))
-      @setupFirstAndLast()
+      element = element
 
-      cb() if _.isFunction(cb)
-    , 20
+    #setTimeout ()=>
+    #clean context and wrap text nodes
+    @cleanContents(element)
+    @wrapTextNodes(element)
+    #setup classes
+    _.each  element.children(), (n)=>
+      name = $(n).prop("tagName").toLowerCase()
+      n = @addClassesToElement(n)
+      @setElementName(n)
+
+    @setupLinks(element.find("a"))
+    @setupFirstAndLast()
+    cb(element) if _.isFunction(cb)
+    #, 20
 
   cleanContents: (element)->
     #TODO: should config tags
+    utils.log "ti"
+    utils.log element
     if _.isUndefined(element)
-      @element = $(@el).find('.section-inner')
+      element = $(@el).find('.section-inner')
     else
-      @element = element
+      element = element
 
+    paste_div = @paste_element_id
     s = new Sanitize
       elements: ['strong','img', 'em', 'br', 'a', 'blockquote', 'b', 'u', 'i', 'pre', 'p', 'h1', 'h2', 'h3', 'h4', 'ul', 'ol', 'li']
 
@@ -1027,6 +1040,8 @@ class Dante.Editor extends Dante.View
       transformers: [(input)->
                       if (input.node_name == "span" && $(input.node).hasClass("defaultValue") )
                         return whitelist_nodes: [input.node]
+                      if( $(input.node).hasClass("dante-paste") )
+                        return whitelist_nodes: [input.node]
                       else
                         return null
                     (input)->
@@ -1077,9 +1092,9 @@ class Dante.Editor extends Dante.View
                         return null
                     ]
 
-    if @element.exists()
-      utils.log "CLEAN HTML #{@element[0].tagName}"
-      @element.html(s.clean_node( @element[0] ))
+    if element.exists()
+      utils.log "CLEAN HTML #{element[0].tagName}"
+      element.html(s.clean_node( element[0] ))
 
   setupLinks: (elems)->
     _.each elems, (n)=>
@@ -1226,7 +1241,7 @@ class Dante.Editor extends Dante.View
       content = $li.html()
       @replaceWith("p", $li)
       $paragraph = $(".is-selected")
-      $paragraph.removeClass("graf--empty").html(content)
+      $paragraph.removeClass("graf--empty").html(content).attr("name", utils.generateUniqueName());
 
       if($list.children().length is 0)
         $list.remove()

data/app/assets/javascripts/dante/tooltip_widgets/uploader.js.coffee

@@ -29,26 +29,26 @@ class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
   #replace existing img tag , and wrap it in insertTamplate
   #TODO: take the url and upload it
   uploadExistentImage: (image_element, opts = {})->
-
     utils.log ("process image here!")
     tmpl = $(@insertTemplate())
     tmpl.find("img").attr('src', @current_editor.default_loading_placeholder )
     #is a child element or a first level element ?
 
     if $(image_element).parents(".graf").length > 0
-      #return if its already wrapped in graf--figure
+      #return if it's already wrapped in graf--figure
       if $(image_element).parents(".graf").hasClass("graf--figure")
         return
+
       utils.log "UNO"
       tmpl.insertBefore( $(image_element).parents(".graf") )
       node = @current_editor.getNode()
+      #wtf?
       if node
         @current_editor.preCleanNode($(node))
         @current_editor.addClassesToElement(node)
     else
       utils.log "DOS"
-      img = $(image_element).parentsUntil(".section-inner").first()
-      $(img).replaceWith(tmpl)
+      $(image_element).replaceWith(tmpl)
 
     utils.log $("[name='#{tmpl.attr('name')}']").attr("name")
     @replaceImg(image_element, $("[name='#{tmpl.attr('name')}']"))
@@ -59,7 +59,6 @@ class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
       for i in [0..n-1] by 1
         $("[name='#{tmpl.attr('name')}']").unwrap()
 
-    utils.log "FIG"
     #utils.log $("[name='#{tmpl.attr('name')}']").attr("name")
 
   replaceImg: (image_element, figure)->
@@ -229,19 +228,27 @@ class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
   # @param {Event} e    - The backspace event that is being handled
   # @param {Node}  node - The node the backspace was used in, assumed to be from te editor's getNode() function
   #
-  # @return {Boolean} true if this function handled the backspace event, otherwise false
+  # @return {Boolean} true if this function should scape the default behavior
   ###
   handleBackspaceKey: (e, node) =>
-
-    #remove graf figure is is selected but not in range (not focus on caption)
-    if $(".is-selected").hasClass("graf--figure") && !anchor_node?
+    utils.log "handleBackspaceKey on uploader widget"
+   
+    # remove graf figure if is selected but not in range (not focus on caption)
+    if $(node).hasClass("is-selected") && $(node).hasClass("graf--figure")
+      # exit if selection is on caption
+      anchor_node = @current_editor.selection().anchorNode
+      
+      # return false unless backspace is in the first char
+      if ( anchor_node? && $(anchor_node.parentNode).hasClass("imageCaption"))
+        if @current_editor.isFirstChar()
+          return true
+        else
+          return false
+
+    else if $(".is-selected").hasClass("is-mediaFocused")
+      # assume that select node is the current media element
+      # if it's focused when backspace it means that it should be removed
       utils.log("Replacing selected node")
       @current_editor.replaceWith("p", $(".is-selected"))
-
-      e.preventDefault() #without this line, the browser may interpret the backspace as a "go pack a page" command
-      
       @current_editor.setRangeAt($(".is-selected")[0])
       return true
-
-    return false
-  

data/app/assets/stylesheets/dante/_scaffold.scss

@@ -18,3 +18,7 @@
   }
 
 }
+
+.dante-paste{
+  display:none;
+}

data/bower.json

@@ -2,7 +2,7 @@
   "name" : "dante",
   "description": "Just another Medium editor clone.",
   "homepage": "michelson.github.io/Dante/",
-  "version" : "0.0.13",
+  "version" : "0.0.14",
   "keywords": [
     "css",
     "sass",