dante-editor 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 73a78f7445c358910dc9ab16aa63d7ff06359b4a
-  data.tar.gz: a84a1b3aba6f10b39c639c097d6c4e97ec355192
+  metadata.gz: b896bd119ce66604964b20e7e45e6d7547e26022
+  data.tar.gz: 4675935e48ee846eccbf5ba67f5c961d9343635b
 SHA512:
-  metadata.gz: 75fefccffab7efb346c48890052b5b411acd4bfc5d7dd8fc4b04f97f6c04868ea772bf3e7e796790e7e64fef86c3d26e4593076a976a31b1fe570bba5edc3dc5
-  data.tar.gz: 8276389a69898090daf28bad75f1ad1e72648c568e3edd67e7b2ea1483add90b3940bcdc9468a48666df00702fa0adb589f16711b2b2ea4f316756a6b18fa799
+  metadata.gz: 011a522973ef58cc5e486d70779f52dc876b65c3cb64478634e8b6fc6584a424dcab24b9c274390af0390e7f8c72cd72a3a99b9466c1eb5825b3c3653ad7918f
+  data.tar.gz: d994b05d927cb2059506b0d251252dc9dcf90b7413f6e677b1714697af3fecf8310ae9575403ae7e879ae120c2c9b4c0c42efdb5d8a8645a302e5a3501ef03b4

data/README.md

@@ -94,7 +94,7 @@ Until now I´ve been able to implement the following features:
 #### Uploader:
 + **upload_url:**  default: /uploads.json
 + **upload_callback** default: empty, allows optional way to handle the server response when image is uploaded This is useful when you don't have control on the backend response.
-
++ **image_delete_callback**: default: none, returns the image data before deletion. use this if you want to destroy image from the server.
 #### Embed tool:
 + **oembed_url:**  default: http://api.embed.ly/1/oembed?url="
 + **extract_url:** default: http://api.embed.ly/1/extract?url="

data/app/assets/javascripts/dante.js

@@ -5,6 +5,7 @@
 //= require dante/editor
 //= require dante/behavior
 //= require dante/behaviors/suggest
+//= require dante/behaviors/paste
 //= require dante/behaviors/image
 //= require dante/behaviors/list
 //= require dante/behaviors/save

data/app/assets/javascripts/dante/behaviors/image.js.coffee

@@ -2,6 +2,16 @@ utils = Dante.utils
 
 class Dante.View.Behavior.Image extends Dante.View.Behavior
 
+  # TODO. dry up this!, call constants from @editor
+  BACKSPACE  = 8
+  TAB        = 9
+  ENTER      = 13
+  SPACEBAR   = 32
+  LEFTARROW  = 37
+  UPARROW    = 38
+  RIGHTARROW = 39
+  DOWNARROW  = 40
+
   events:
     "click .graf--figure .aspectRatioPlaceholder" : "handleGrafFigureSelectImg"
     "click .graf--figure figcaption"   : "handleGrafFigureSelectCaption"
@@ -27,17 +37,24 @@ class Dante.View.Behavior.Image extends Dante.View.Behavior
     target = $(ev.currentTarget)
     @editor.pop_over_align.positionPopOver(target)
 
+  placeHolderDiv: (target)->
+    target.find(".aspectRatioPlaceholder")
+
   handleGrafFigureSelectCaption: (ev)->
     utils.log "FIGCAPTION"
     element = ev.currentTarget
     $(element).parent(".graf--figure").removeClass("is-mediaFocused")
+    @editor.pop_over_align.hide()
 
   handleGrafCaptionTyping: (ev)->
+    @editor.pop_over_align.hide()
+    
+    node = $(@editor.getNode())
+    
     if _.isEmpty(utils.getNode().textContent.trim())
-      $(@editor.getNode()).addClass("is-defaultValue")
+      $(node).addClass("is-defaultValue")
     else
-      $(@editor.getNode()).removeClass("is-defaultValue")
-
+      $(node).removeClass("is-defaultValue")
 
   #TODO: this is from embed! move this to embed behavior
   handleGrafFigureSelectIframe: (ev)->
@@ -54,3 +71,218 @@ class Dante.View.Behavior.Image extends Dante.View.Behavior
     @iframeSelected = null
     $(element).removeClass("is-selected is-mediaFocused")
 
+  handleKeyDown: (e, parent)->
+
+    if _.contains([UPARROW, DOWNARROW], e.which)
+      utils.log e.which
+      @handleArrowForKeyDown(e)
+
+    if (e.which is BACKSPACE)
+      
+      # without selection but with target active
+      if $(e.target).hasClass("graf--figure")
+        e.preventDefault()
+
+        # call callback for image delete 
+        if @editor.image_delete_callback
+          @editor.image_delete_callback( $(".is-selected").find("img").data() )
+        
+        utils.log("Replacing selected node")
+        @editor.replaceWith("p", $(".is-selected"))
+        @editor.setRangeAt($(".is-selected")[0])
+        @editor.pop_over_align.hide()
+        utils.log("Focus on the previous graf")
+        @editor.continue = false
+        return false 
+
+      #select an image if backspacing into it from a paragraph
+      if(parent.hasClass("graf--p") && @editor.isFirstChar() )
+        if(parent.prev().hasClass("graf--figure") && @editor.getSelectedText().length == 0)
+          e.preventDefault()
+          parent.prev().find("img").click()
+          @editor.pop_over_align.positionPopOver(parent.prev())
+          utils.log("Focus on the previous image")
+          @editor.continue = false
+          return false
+
+      # supress del into & delete embed if empty content found on delete key
+      if parent.hasClass("graf--mixtapeEmbed") or parent.hasClass("graf--iframe")
+        if _.isEmpty parent.text().trim() or @isFirstChar()
+          utils.log("Check for inmediate deletion on empty embed text")
+          @editor.inmediateDeletion = @editor.isSelectingAll(anchor_node)
+          @editor.handleInmediateDeletion(parent) if @editor.inmediateDeletion
+          e.preventDefault()
+          @editor.continue = false
+          return false
+
+      # TODO: supress del when the prev el is embed and current_node is at first char
+      if parent.prev().hasClass("graf--mixtapeEmbed")
+        if @editor.isFirstChar() && !_.isEmpty( parent.text().trim() )
+          @editor.continue = false
+          return false
+
+    # when user types over a selected image (graf--figure)
+    # unselect image , and set range on caption
+    if _.isUndefined(parent) or parent.length is 0 && $(".is-selected").hasClass("is-mediaFocused")
+      # will remove default value on typing
+      node = $(".is-selected").find("figcaption")
+      node.find(".defaultValue").remove()
+    
+      @editor.setRangeAt node[0]
+      $(".is-selected").removeClass("is-mediaFocused")
+      @editor.pop_over_align.hide()
+      #@editor.continue = false
+      return false
+
+  # handleKeyUp: (e, parent)->
+
+  #handle arrow direction from keyDown.
+  handleArrowForKeyDown: (ev)=>
+    caret_node   = @editor.getNode()
+    current_node = $(caret_node)
+    utils.log(ev)
+    ev_type = ev.originalEvent.key || ev.originalEvent.keyIdentifier
+
+    utils.log("ENTER ARROW for key #{ev_type}")
+
+    
+    #handle keys for image figure
+    
+    switch ev_type
+
+      when "ArrowDown", "Down"
+        # when graff-image selected but none selection is found
+        if _.isUndefined(current_node) or !current_node.exists()
+          if $(".is-selected").exists()
+            current_node = $(".is-selected")
+
+        next_node = current_node.next()
+        
+        utils.log "NEXT NODE IS #{next_node.attr('class')}"
+        utils.log "CURRENT NODE IS #{current_node.attr('class')}"
+
+        return unless $(current_node).hasClass("graf")
+        return unless current_node.hasClass("graf--figure") or $(current_node).editableCaretOnLastLine()
+
+        utils.log "ENTER ARROW PASSED RETURNS"
+        
+        #if next element is embed select & focus it
+        if next_node.hasClass("graf--figure") && caret_node
+          n = next_node.find(".imageCaption")
+          @editor.scrollTo(n)
+          utils.log "1 down"
+          utils.log n[0]
+          @editor.skip_keyup = true
+          @editor.selection().removeAllRanges()
+          @editor.markAsSelected(next_node)
+          next_node.addClass("is-mediaFocused is-selected")
+          
+          #@editor.setRangeAt $(".is-selected").find("figcaption")[0]
+          @editor.pop_over_align.positionPopOver(@placeHolderDiv(next_node))
+          @editor.continue = false
+
+          return false
+
+        else if next_node.prev().hasClass("graf--figure")
+          @editor.pop_over_align.hide()
+          
+        #if current node is embed
+        else if next_node.hasClass("graf--mixtapeEmbed")
+          n = current_node.next(".graf--mixtapeEmbed")
+          num = n[0].childNodes.length
+          @editor.setRangeAt n[0], num
+          #@editor.scrollTo(n)
+          utils.log "2 down"
+          @editor.continue = false
+          return false
+
+        if current_node.hasClass("graf--figure") && next_node.hasClass("graf")
+          @editor.scrollTo(next_node)
+          utils.log "3 down, from figure to next graf"
+          @editor.skip_keyup = true
+          @editor.markAsSelected(next_node)
+          @editor.setRangeAt next_node[0]
+          @editor.continue = false
+
+          return false
+
+      when "ArrowUp", "Up"
+        prev_node = current_node.prev()
+        utils.log "PREV NODE IS #{prev_node.attr('class')} #{prev_node.attr('name')}"
+        utils.log "CURRENT NODE IS up #{current_node.attr('class')}"
+
+        # will handle up when figure is selected
+        if prev_node.length is 0 && $(ev.target).hasClass("graf--figure")
+          n = $(ev.target).prev(".graf")
+          #num = n[0].childNodes.length
+          #@editor.setRangeAt n[0], num
+          @editor.continue = false
+          @editor.markAsSelected(n[0])
+          @editor.pop_over_align.hide()
+          return false
+
+        else if prev_node.length > 0 && $(".graf--figure.is-mediaFocused").length > 0
+          # do our best to detect up arrow from selected
+          n = $(".graf--figure.is-mediaFocused").prev(".graf")
+          #num = n[0].childNodes.length
+          #@editor.setRangeAt n[0], num
+          @editor.continue = false
+          @editor.markAsSelected(n[0])
+          @editor.pop_over_align.hide()
+          return false
+
+        return unless $(current_node).hasClass("graf")
+        return unless $(current_node).editableCaretOnFirstLine()
+
+        utils.log "ENTER ARROW PASSED RETURNS"
+
+        if prev_node.hasClass("graf--figure")
+          utils.log "1 up"
+          n = prev_node.find(".imageCaption")
+          @editor.scrollTo(n)
+          @editor.skip_keyup = true
+          @editor.selection().removeAllRanges()
+          @editor.markAsSelected(prev_node)
+
+          #TODO: to function
+          # @editor.setRangeAt $(".is-selected").find("figcaption")[0]
+          prev_node.addClass("is-mediaFocused")
+          @editor.pop_over_align.positionPopOver(@placeHolderDiv(prev_node))
+
+          @editor.continue = false
+          
+          return false
+
+        else if prev_node.hasClass("graf--mixtapeEmbed")
+          n = current_node.prev(".graf--mixtapeEmbed")
+          num = n[0].childNodes.length
+          @editor.setRangeAt n[0], num
+          #@editor.scrollTo(n)
+          utils.log "2 up"
+          @editor.continue = false
+          return false
+
+        if current_node.hasClass("graf--figure") && prev_node.hasClass("graf")
+          @editor.setRangeAt prev_node[0]
+          #@editor.scrollTo(prev_node)
+          utils.log "3 up"
+          @editor.continue = false
+          return false
+
+        else if prev_node.hasClass("graf")
+          n = current_node.prev(".graf")
+          num = n[0].childNodes.length
+          #@editor.scrollTo(n)
+          utils.log "4 up"
+          @editor.skip_keyup = true
+          @editor.markAsSelected(prev_node)
+          # @editor.continue = false
+          return false
+
+
+  #handle arrow direction from keyUp.
+  handleArrowForKeyUp: (ev)=>
+    current_node = $(@editor.editor.getNode())
+    if current_node.length > 0
+      @editor.markAsSelected( current_node )
+      @editor.displayTooltipAt( current_node )

data/app/assets/javascripts/dante/behaviors/paste.js.coffee

@@ -0,0 +1,64 @@
+utils = Dante.utils
+
+class Dante.View.Behavior.Paste extends Dante.View.Behavior
+
+  #events:
+  #  "paste" : "handlePaste"
+
+  initialize: (opts={})->
+    @editor      = opts.current_editor
+
+  #detects html data , creates a hidden node to paste ,
+  #then clean up the content and copies to currentNode, very clever uh?
+  handlePaste: (ev, parent)=>
+    
+    utils.log("pasted!")
+
+    pastedText = undefined
+    if (window.clipboardData && window.clipboardData.getData) #IE
+      pastedText = window.clipboardData.getData('Text')
+    else if (ev.originalEvent.clipboardData && ev.originalEvent.clipboardData.getData)
+      cbd = ev.originalEvent.clipboardData
+      pastedText = if _.isEmpty(cbd.getData('text/html')) then cbd.getData('text/plain') else cbd.getData('text/html')
+
+    utils.log("Process and handle text...")
+    #detect if is html
+    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>')
+
+      #create the placeholder element and assign pasted content
+      document.body.appendChild( $("<div id='#{@editor.paste_element_id.replace('#', '')}' class='dante-paste'></div>")[0] )
+      
+      $(@editor.paste_element_id).html("<span>#{pastedText}</span>")
+
+      #clean pasted content
+      @editor.setupElementsClasses $(@editor.paste_element_id), (e)=>
+        # e is the target object which is cleaned
+        nodes = $(e.html()).insertAfter($(parent))
+        #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
+        @editor.setRangeAt(last_node, num)
+        
+        #select new node
+        new_node = $(@editor.getNode())
+        @editor.markAsSelected(new_node)
+        @editor.displayTooltipAt($(@editor.el).find(".is-selected"))
+        
+        # wrap new images
+        @editor.handleUnwrappedImages(nodes)
+
+        #scroll to element top
+        top = new_node.offset().top
+        $('html, body').animate
+          scrollTop: top
+        , 20
+
+      @editor.continue = false
+      return false # Prevent the default handler from running.

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

@@ -38,6 +38,8 @@ class Dante.Editor extends Dante.View
     
     @upload_url      = opts.upload_url  || "/uploads.json"
     @upload_callback = opts.upload_callback
+    @image_delete_callback = opts.image_delete_callback
+
     @oembed_url      = opts.oembed_url  || "http://api.embed.ly/1/oembed?key=#{opts.api_key}&url="
     @extract_url     = opts.extract_url || "http://api.embed.ly/1/extract?key=#{opts.api_key}&url="
     @default_loading_placeholder = opts.default_loading_placeholder || Dante.defaults.image_placeholder
@@ -60,7 +62,7 @@ class Dante.Editor extends Dante.View
     @suggest_resource_handler = opts.suggest_resource_handler || null
     
     opts.base_widgets   ||= ["uploader", "embed", "embed_extract"]
-    opts.base_behaviors ||= ["save", "image","list", "suggest"]
+    opts.base_behaviors ||= ["save", "image", "paste", "list", "suggest"]
 
     @widgets   = []
     @behaviors = []
@@ -94,13 +96,17 @@ class Dante.Editor extends Dante.View
       @save_behavior = new Dante.View.Behavior.Save(current_editor: @, el: @el)
       @behaviors.push @save_behavior
 
+    if base_behaviors.indexOf("paste") >= 0
+      @paste_behavior = new Dante.View.Behavior.Paste(current_editor: @, el: @el)
+      @behaviors.push @paste_behavior
+
     if base_behaviors.indexOf("image") >= 0
-      @save_behavior = new Dante.View.Behavior.Image(current_editor: @, el: @el)
-      @behaviors.push @save_behavior
+      @image_behavior = new Dante.View.Behavior.Image(current_editor: @, el: @el)
+      @behaviors.push @image_behavior
 
     if base_behaviors.indexOf("list") >= 0
-      @save_behavior = new Dante.View.Behavior.List(current_editor: @, el: @el)
-      @behaviors.push @save_behavior
+      @list_behavior = new Dante.View.Behavior.List(current_editor: @, el: @el)
+      @behaviors.push @list_behavior
 
     #add extra behaviors
     if opts.extra_behaviors
@@ -217,6 +223,7 @@ class Dante.Editor extends Dante.View
 
   getSelectionStart: ->
     node = document.getSelection().anchorNode
+    return if node is null
     if node.nodeType == 3 then node.parentNode else node
 
   getRange: () ->
@@ -386,111 +393,12 @@ class Dante.Editor extends Dante.View
     , 20
 
   #handle arrow direction from keyUp.
-  handleArrow: (ev)=>
+  handleArrowForKeyUp: (ev)=>
     current_node = $(@getNode())
     if current_node.length > 0
       @markAsSelected( current_node )
       @displayTooltipAt( current_node )
 
-  #handle arrow direction from keyDown.
-  handleArrowForKeyDown: (ev)=>
-    caret_node   = @getNode()
-    current_node = $(caret_node)
-    utils.log(ev)
-    ev_type = ev.originalEvent.key || ev.originalEvent.keyIdentifier
-
-    utils.log("ENTER ARROW for key #{ev_type}")
-
-    #handle keys for image figure
-    switch ev_type
-
-      when "Down"
-        #when graff-image selected but none selection is found
-        if _.isUndefined(current_node) or !current_node.exists()
-          if $(".is-selected").exists()
-            current_node = $(".is-selected")
-
-        next_node = current_node.next()
-
-        utils.log "NEXT NODE IS #{next_node.attr('class')}"
-        utils.log "CURRENT NODE IS #{current_node.attr('class')}"
-
-        return unless $(current_node).hasClass("graf")
-        return unless current_node.hasClass("graf--figure") or $(current_node).editableCaretOnLastLine()
-
-        utils.log "ENTER ARROW PASSED RETURNS"
-
-        #if next element is embed select & focus it
-        if next_node.hasClass("graf--figure") && caret_node
-          n = next_node.find(".imageCaption")
-          @scrollTo(n)
-          utils.log "1 down"
-          utils.log n[0]
-          @skip_keyup = true
-          @selection().removeAllRanges()
-          @markAsSelected(next_node)
-          next_node.addClass("is-mediaFocused is-selected")
-          return false
-        #if current node is embed
-        else if next_node.hasClass("graf--mixtapeEmbed")
-          n = current_node.next(".graf--mixtapeEmbed")
-          num = n[0].childNodes.length
-          @setRangeAt n[0], num
-          @scrollTo(n)
-          utils.log "2 down"
-          return false
-
-        if current_node.hasClass("graf--figure") && next_node.hasClass("graf")
-          @scrollTo(next_node)
-          utils.log "3 down, from figure to next graf"
-          #@skip_keyup = true
-          @markAsSelected(next_node)
-          @setRangeAt next_node[0]
-          return false
-
-      when "Up"
-        prev_node = current_node.prev()
-        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")
-        return unless $(current_node).editableCaretOnFirstLine()
-
-        utils.log "ENTER ARROW PASSED RETURNS"
-
-        if prev_node.hasClass("graf--figure")
-          utils.log "1 up"
-          n = prev_node.find(".imageCaption")
-          @scrollTo(n)
-          @skip_keyup = true
-          @selection().removeAllRanges()
-          @markAsSelected(prev_node)
-          prev_node.addClass("is-mediaFocused")
-          return false
-
-        else if prev_node.hasClass("graf--mixtapeEmbed")
-          n = current_node.prev(".graf--mixtapeEmbed")
-          num = n[0].childNodes.length
-          @setRangeAt n[0], num
-          @scrollTo(n)
-          utils.log "2 up"
-          return false
-
-        if current_node.hasClass("graf--figure") && prev_node.hasClass("graf")
-          @setRangeAt prev_node[0]
-          @scrollTo(prev_node)
-          utils.log "3 up"
-          return false
-
-        else if prev_node.hasClass("graf")
-          n = current_node.prev(".graf")
-          num = n[0].childNodes.length
-          @scrollTo(n)
-          utils.log "4 up"
-          @skip_keyup = true
-          @markAsSelected(prev_node)
-          return false
-
   #parse text for initial mess
   parseInitialMess: ()->
     @setupElementsClasses $(@el).find('.section-inner') , (e)=>
@@ -505,56 +413,17 @@ class Dante.Editor extends Dante.View
 
   #detects html data , creates a hidden node to paste ,
   #then clean up the content and copies to currentNode, very clever uh?
-  handlePaste: (ev)=>
-    utils.log("pasted!")
-    @aa = @getNode()
-
-    pastedText = undefined
-    if (window.clipboardData && window.clipboardData.getData) #IE
-      pastedText = window.clipboardData.getData('Text')
-    else if (ev.originalEvent.clipboardData && ev.originalEvent.clipboardData.getData)
-      cbd = ev.originalEvent.clipboardData
-      pastedText = if _.isEmpty(cbd.getData('text/html')) then cbd.getData('text/plain') else cbd.getData('text/html')
-
-    utils.log("Process and handle text...")
-    #detect if is html
-    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>')
-
-      #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>")
-
-      #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())
-        @markAsSelected(new_node)
-        @displayTooltipAt($(@el).find(".is-selected"))
-
-        @handleUnwrappedImages(nodes)
-
-        #scroll to element top
-        top = new_node.offset().top
-        $('html, body').animate
-          scrollTop: top
-        , 20
+  handlePaste: (e)=>
+    @continue = true
+    #handle paste for each widget
+    utils.log("HANDLING PASTE");
+    parent = @getNode()
 
+    _.each @behaviors, (b)=>
+      if b.handlePaste
+        b.handlePaste(e, parent);
 
-      return false # Prevent the default handler from running.
+    return false unless @continue
 
   handleUnwrappedImages: (elements)->
     # http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata
@@ -658,6 +527,8 @@ class Dante.Editor extends Dante.View
   handleKeyDown: (e)->
     utils.log "KEYDOWN"
 
+    @continue = true
+
     anchor_node = @getNode() #current node on which cursor is positioned
     parent = $(anchor_node)
 
@@ -670,6 +541,8 @@ class Dante.Editor extends Dante.View
       if b.handleKeyDown
         b.handleKeyDown(e, parent);
 
+    return false unless @continue
+
     if e.which is TAB
       @handleTab(anchor_node)
       return false
@@ -682,7 +555,7 @@ class Dante.Editor extends Dante.View
       utils.log @isLastChar()
 
       #handle keydowns for each widget
-      utils.log("HANDLING WIDGET KEYDOWNS");
+      utils.log("HANDLING WIDGET ENTER");
       _.each @widgets, (w)=>
         if w.handleEnterKey
           w.handleEnterKey(e, parent);
@@ -761,11 +634,11 @@ class Dante.Editor extends Dante.View
         return false;
 
       #select an image if backspacing into it from a paragraph
-      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($(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())}"
@@ -775,41 +648,17 @@ class Dante.Editor extends Dante.View
         # @displayEmptyPlaceholder()
         utils.log("TextNode detected from Down!")
         #return false
-
-      # supress del into & delete embed if empty content found on delete key
-      if $(anchor_node).hasClass("graf--mixtapeEmbed") or $(anchor_node).hasClass("graf--iframe")
-        if _.isEmpty $(anchor_node).text().trim() or @isFirstChar()
-          utils.log("Check for inmediate deletion on empty embed text")
-          @inmediateDeletion = @isSelectingAll(anchor_node)
-          @handleInmediateDeletion($(anchor_node)) if @inmediateDeletion
-          return false
-
-      # TODO: supress del when the prev el is embed and current_node is at first char
-      if $(anchor_node).prev().hasClass("graf--mixtapeEmbed")
-        return false if @isFirstChar() && !_.isEmpty( $(anchor_node).text().trim() )
-
-    #arrows key
-    #up & down
-    if _.contains([UPARROW, DOWNARROW], e.which)
-      utils.log e.which
-      @handleArrowForKeyDown(e)
-      #return false
-
+    
     #hides tooltip if anchor_node text is empty
     if anchor_node
       unless _.isEmpty($(anchor_node).text())
         @tooltip_view.hide()
         $(anchor_node).removeClass("graf--empty")
 
-    #when user types over a selected image (graf--figure)
-    #unselect image , and set range on caption
-    if _.isUndefined(anchor_node) && $(".is-selected").hasClass("is-mediaFocused")
-      @setRangeAt $(".is-selected").find("figcaption")[0]
-      $(".is-selected").removeClass("is-mediaFocused")
-      return false
-
   handleKeyUp: (e , node)->
 
+    @continue = true
+
     if @skip_keyup
       @skip_keyup = null
       utils.log "SKIP KEYUP"
@@ -830,6 +679,8 @@ class Dante.Editor extends Dante.View
       if b.handleKeyUp
         b.handleKeyUp(e)
 
+    return false unless @continue
+
     if (e.which == BACKSPACE)
 
       #if detect all text deleted , re render
@@ -872,7 +723,7 @@ class Dante.Editor extends Dante.View
 
     #arrows key
     if _.contains([LEFTARROW, UPARROW, RIGHTARROW, DOWNARROW], e.which)
-      @handleArrow(e)
+      @handleArrowForKeyUp(e)
       #return false
 
   handleKeyPress: (e, node)->
@@ -915,13 +766,15 @@ class Dante.Editor extends Dante.View
 
   #mark the current row as selected
   markAsSelected: (element)->
-    utils.log element
+    utils.log "MARK AS SELECTED"
+
     return if _.isUndefined element
 
     $(@el).find(".is-selected").removeClass("is-mediaFocused is-selected")
+
     $(element).addClass("is-selected")
 
-    $(element).find(".defaultValue").remove()
+    #$(element).find(".defaultValue").remove()
     #set reached top if element is first!
     if $(element).hasClass("graf--first")
       @reachedTop = true
@@ -997,7 +850,7 @@ class Dante.Editor extends Dante.View
     @cleanContents(element)
     @wrapTextNodes(element)
     #setup classes
-    _.each  element.children(), (n)=>
+    _.each element.children(), (n)=>
       name = $(n).prop("tagName").toLowerCase()
       n = @addClassesToElement(n)
       @setElementName(n)
@@ -1114,7 +967,7 @@ class Dante.Editor extends Dante.View
 
   setupFirstAndLast: ()=>
     childs = $(@el).find(".section-inner").children()
-    childs.removeClass("graf--last , graf--first")
+    childs.removeClass("graf--last, graf--first")
     childs.first().addClass("graf--first")
     childs.last().addClass("graf--last")