dante-editor 0.0.7 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e2ec0071786217bc5d8d7e34c715187744439cae
-  data.tar.gz: 164d2de65f75dfa632f86343558007ff8c20f38c
+  metadata.gz: eedf5900c356c7db2f6c2a506a3c36023327a52a
+  data.tar.gz: ece1127158d6ed6c86311f7ca034a81194618778
 SHA512:
-  metadata.gz: eac586a212bb0abec442f55a200001a6c6dbbc05b9d2203eaee38926d2afa4992a98a48e9c74c3a3764c183aa9e9fdfe5a12ed3139163fd93e06658dea505fa9
-  data.tar.gz: 74078718948964b7d15975034b4a089e40f1d7de5c6d801246a3e2f6418fdd00ab477717d3ce33be88650dae9a89b256cc8364c55cf00516b6f5bae923c9447a
+  metadata.gz: 41352cf754791ce8c712c582c8670a5d924c07d56b1313f2cab57e178bcfa36f0d5b59f32ff32605ba791b33ec6d61eb236e39795405b6d22b3be1edd3edd7d7
+  data.tar.gz: 4902b6a415b936025f9f7f26db7a4ff3cf5fc81b1c3fa97b5d6acd1d4fad43ecc7d0a9dfea44bcb5cb2455361ed0805f2a7ed46df1b91a42fbc713582215d5e2

data/README.md

@@ -26,6 +26,7 @@ Until now I´ve been able to implement the following features:
   + Image Uploader with *preview* and caption option.
   + Embed data for pasted link through OEmbed services.
   + Embed media information for pasted links through OEmbed services.
++ List creation with shorcuts ie:. 1. , - , 1) with spacebar or return key
 + CSS tries to use the same fonts used in Medium, (if you have already setup those fonts) or fallbacks to open fonts (by Google fonts) or system fonts.
   + serif: freight-text-pro fallbacks to Merriweather or Georgia,
   + sans:  jaf-bernino-sans fallbacks to Open Sans or Lucida Grande
@@ -60,7 +61,7 @@ Until now I´ve been able to implement the following features:
 ### Configuration options:
 
 + **el:**          default: #editor
-+ **debugMode:**   default: false
++ **debug:**   default: false
 + **upload_url:**  default: /uploads.json
 + **oembed_url:**  default: http://api.embed.ly/1/oembed?url="
 + **extract_url:** default: http://api.embed.ly/1/extract?url="
@@ -112,6 +113,7 @@ There is a web app for development to work with the source files and make the pr
 
 + install ruby
 + execute `bundle install`
++ execute `bower install`
 
 ### Start app:
 
@@ -139,7 +141,13 @@ tests are located in source/tests and /source/assets/spec folder and accessible
 + [Miguel Michelson](http://github.com/michelson)
 + [Cristian Ferrari](http://github.com/cristianferrarig)
 
-### Alternatives:
+### CONTRIBUTORS
+
+Big kudos to our valued contributors. Check them all at:
+
+https://github.com/michelson/dante/graphs/contributors
+
+### ALTERNATIVES
 
 + https://github.com/sofish/pen
 + https://github.com/orthes/medium-editor-insert-plugin
@@ -152,4 +160,4 @@ tests are located in source/tests and /source/assets/spec folder and accessible
 
 ### LICENSE
 
-[Licensed under MIT.](./license.md) 2014
+[Licensed under MIT.](./license.md) 2014

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

@@ -13,6 +13,9 @@ class Dante.Editor extends Dante.View
     "drop"    : "handleDrag"
     "click .graf--figure .aspectRatioPlaceholder" : "handleGrafFigureSelectImg"
     "click .graf--figure figcaption"   : "handleGrafFigureSelectCaption"
+
+    "mouseover .graf--figure.graf--iframe" : "handleGrafFigureSelectIframe"
+    "mouseleave .graf--figure.graf--iframe" : "handleGrafFigureUnSelectIframe"
     "keyup .graf--figure figcaption"   : "handleGrafCaptionTyping"
 
     "mouseover .markup--anchor" : "displayPopOver"
@@ -33,6 +36,7 @@ class Dante.Editor extends Dante.View
     @spell_check     = opts.spellcheck || false
     @disable_title   = opts.disable_title || false
     @store_interval  = opts.store_interval || 15000
+    @paste_element_id = "#dante-paste-div"
     window.debugMode = opts.debug || false
     $(@el).addClass("debug") if window.debugMode
     if (localStorage.getItem('contenteditable'))
@@ -151,7 +155,7 @@ class Dante.Editor extends Dante.View
     range = range || this.current_range
     if !range
       range = this.getRange()
-      range.collapse(false); # set to end
+      range.collapse(false) # set to end
 
     @selection().removeAllRanges()
     @selection().addRange(range)
@@ -233,8 +237,14 @@ class Dante.Editor extends Dante.View
     range = @selection().getRangeAt(0)
     node = range.commonAncestorContainer
     return null  if not node or node is root
-    node = node.parentNode  while node and (node.nodeType isnt 1) and (node.parentNode isnt root)
-    node = node.parentNode  while node and (node.parentNode isnt root)
+
+    #node = node.parentNode while node and (node.nodeType isnt 1) and (node.parentNode isnt root)
+    #node = node.parentNode while node and (node.parentNode isnt root)
+
+    node = node.parentNode  while node and (node.nodeType isnt 1 or not $(node).hasClass("graf")) and (node.parentNode isnt root)
+    if not $(node).hasClass("graf--li")
+      node = node.parentNode  while node and (node.parentNode isnt root)
+
     (if root && root.contains(node) then node else null)
 
   displayMenu: (sel)->
@@ -290,6 +300,20 @@ class Dante.Editor extends Dante.View
     $(element).parent(".graf--figure").addClass("is-selected is-mediaFocused")
     @selection().removeAllRanges()
 
+  handleGrafFigureSelectIframe: (ev)->
+    utils.log "FIGURE IFRAME SELECT"
+    element = ev.currentTarget
+    @iframeSelected = element
+    @markAsSelected( element )
+    $(element).addClass("is-selected is-mediaFocused")
+    @selection().removeAllRanges()
+
+  handleGrafFigureUnSelectIframe: (ev)->
+    utils.log "FIGURE IFRAME UNSELECT"
+    element = ev.currentTarget
+    @iframeSelected = null
+    $(element).removeClass("is-selected is-mediaFocused")
+
   handleGrafFigureSelectCaption: (ev)->
     utils.log "FIGCAPTION"
     element = ev.currentTarget
@@ -448,17 +472,20 @@ class Dante.Editor extends Dante.View
       cbd = ev.originalEvent.clipboardData
       pastedText = if _.isEmpty(cbd.getData('text/html')) then cbd.getData('text/plain') else cbd.getData('text/html')
 
-    utils.log(pastedText) # Process and handle text...
+    utils.log("Process and handle text...")
     #detect if is html
     if pastedText.match(/<\/*[a-z][^>]+?>/gi)
       utils.log("HTML DETECTED ON PASTE")
-      $(pastedText)
+      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'></div>")[0])
-      $("#paste").html(pastedText)
-      @setupElementsClasses $("#paste"), ()=>
-        nodes = $($("#paste").html()).insertAfter($(@aa))
-        $("#paste").remove()
+      document.body.appendChild($("<div id='#{@paste_element_id.replace('#', '')}'></div>")[0])
+      $(@paste_element_id).html("<span>#{pastedText}</span>")
+
+      @setupElementsClasses $(@paste_element_id), ()=>
+        nodes = $($(@paste_element_id).html()).insertAfter($(@aa))
+        $(@paste_element_id).remove()
         #set caret on newly created node
         last_node = nodes.last()[0]
         num = last_node.childNodes.length
@@ -481,7 +508,6 @@ class Dante.Editor extends Dante.View
       utils.log ("process image here!")
       @tooltip_view.uploadExistentImage(image)
 
-  #TODO: remove this, not used
   handleInmediateDeletion: (element)->
     @inmediateDeletion = false
     new_node = $( @baseParagraphTmpl() ).insertBefore( $(element) )
@@ -576,6 +602,7 @@ class Dante.Editor extends Dante.View
     utils.log "KEYDOWN"
 
     anchor_node = @getNode() #current node on which cursor is positioned
+    $node = $(anchor_node);
 
     @markAsSelected( anchor_node ) if anchor_node
 
@@ -593,6 +620,13 @@ class Dante.Editor extends Dante.View
 
       utils.log @isLastChar()
 
+      #smart list support
+      if $node.hasClass("graf--p")
+        li = @handleSmartList($node, e)
+        anchor_node = li if li
+      else if $node.hasClass("graf--li") and ($node.text() is "")
+        @handleListLineBreak($node, e)
+
       #embeds or extracts
       if parent.hasClass("is-embedable")
         @tooltip_view.getEmbedFromNode($(anchor_node))
@@ -617,7 +651,6 @@ class Dante.Editor extends Dante.View
 
       @tooltip_view.cleanOperationClasses($(anchor_node))
 
-
       if (anchor_node && @editor_menu.lineBreakReg.test(anchor_node.nodeName))
         #new paragraph if it the last character
         if @isLastChar()
@@ -627,6 +660,7 @@ class Dante.Editor extends Dante.View
 
       setTimeout ()=>
         node = @getNode()
+        return if _.isUndefined(node)
         #set name on new element
         @setElementName($(node))
 
@@ -656,6 +690,9 @@ class Dante.Editor extends Dante.View
       anchor_node = @getNode()
       utils_anchor_node = utils.getNode()
 
+      if($node.hasClass("graf--li") and @getCharacterPrecedingCaret().length is 0)
+          return this.handleListBackspace($node, e);
+
       if $(utils_anchor_node).hasClass("section-content") || $(utils_anchor_node).hasClass("graf--first")
         utils.log "SECTION DETECTED FROM KEYDOWN #{_.isEmpty($(utils_anchor_node).text())}"
         return false if _.isEmpty($(utils_anchor_node).text())
@@ -665,27 +702,29 @@ class Dante.Editor extends Dante.View
         utils.log("TextNode detected from Down!")
         #return false
 
-      #supress del into embed if first char or delete if empty content
+      #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()
-          utils.log "EMPTY CHAR"
+        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
-        else
-          if @isFirstChar()
-            utils.log "FIRST CHAR"
-            @inmediateDeletion = true if @isSelectingAll(anchor_node)
-            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() )
 
-      utils.log anchor_node
-      if $(".is-selected").hasClass("graf--figure")
+      #remove graf figure is is selected but not in range (not focus on caption)
+      if $(".is-selected").hasClass("graf--figure") && !anchor_node?
         @replaceWith("p", $(".is-selected"))
         @setRangeAt($(".is-selected")[0])
         return false
 
+    #spacebar
+    if (e.which == 32)
+      utils.log("SPACEBAR")
+      if ($node.hasClass("graf--p"))
+        @handleSmartList($node, e)
     #arrows key
     #if _.contains([37,38,39,40], e.which)
     #up & down
@@ -790,10 +829,11 @@ class Dante.Editor extends Dante.View
   displayTooltipAt: (element)->
     utils.log ("POSITION FOR TOOLTIP")
     #utils.log $(element)
-    return if !element
+    element = $(element)
+    return if !element || _.isEmpty(element) || element[0].tagName is "LI"
     @tooltip_view.hide()
-    return unless _.isEmpty( $(element).text() )
-    @positions = $(element).offset()
+    return unless _.isEmpty( element.text() )
+    @positions = element.offset()
     @tooltip_view.render()
     @tooltip_view.move(@positions)
 
@@ -816,7 +856,6 @@ class Dante.Editor extends Dante.View
     name = n.nodeName.toLowerCase()
     switch name
       when "p", "pre", "div"
-        #utils.log n
         unless $(n).hasClass("graf--mixtapeEmbed")
           $(n).removeClass().addClass("graf graf--#{name}")
 
@@ -837,10 +876,10 @@ class Dante.Editor extends Dante.View
         n = $(n).parent()
 
       when "ol", "ul"
-        #utils.log "lists"
+        utils.log "lists"
         $(n).removeClass().addClass("postList")
         _.each $(n).find("li"), (li)->
-          $(n).removeClass().addClass("graf graf--li")
+          $(li).removeClass().addClass("graf graf--li")
         #postList , and li as graf
 
       when "img"
@@ -881,11 +920,11 @@ class Dante.Editor extends Dante.View
       #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"))
@@ -902,7 +941,7 @@ class Dante.Editor extends Dante.View
       @element = element
 
     s = new Sanitize
-      elements: ['strong','img', 'em', 'br', 'a', 'blockquote', 'b', 'u', 'i', 'pre', 'p', 'h1', 'h2', 'h3', 'h4']
+      elements: ['strong','img', 'em', 'br', 'a', 'blockquote', 'b', 'u', 'i', 'pre', 'p', 'h1', 'h2', 'h3', 'h4', 'ul', 'ol', 'li']
 
       attributes:
         '__ALL__': ['class']
@@ -966,7 +1005,7 @@ class Dante.Editor extends Dante.View
                     ]
 
     if @element.exists()
-      utils.log "CLEAN HTML"
+      utils.log "CLEAN HTML #{@element[0].tagName}"
       @element.html(s.clean_node( @element[0] ))
 
   setupLinks: (elems)->
@@ -981,7 +1020,7 @@ class Dante.Editor extends Dante.View
 
   preCleanNode: (element)->
     s = new Sanitize
-      elements: ['strong', 'em', 'br', 'a', 'b', 'u', 'i']
+      elements: ['strong', 'em', 'br', 'a', 'b', 'u', 'i', 'ul', 'ol', 'li']
 
       attributes:
         a: ['href', 'title', 'target']
@@ -1012,4 +1051,83 @@ class Dante.Editor extends Dante.View
     ).wrap "<p class='graf grap--p'></p>"
 
   setElementName: (element)->
-    $(element).attr("name", utils.generateUniqueName())
+    $(element).attr("name", utils.generateUniqueName())
+
+  #LIST METHODS
+
+  listify: ($paragraph, listType, tagLength)->
+    utils.log "LISTIFY PARAGRAPH"
+    content = $paragraph.html().replace(/&nbsp;/g, " ")
+    utils.log(tagLength)
+
+    content = content.slice(tagLength, content.length)
+
+    switch(listType)
+      when "ul" then $list = $("<ul></ul>")
+      when "ol" then $list = $("<ol></ol>")
+      else return false
+
+    @addClassesToElement($list[0])
+    @replaceWith("li", $paragraph)
+    $li = $(".is-selected")
+
+    @setElementName($li[0])
+
+    $li.html(content).wrap($list)
+
+    if($li.find("br").length == 0)
+      $li.append("<br/>")
+    @setRangeAt($li[0])
+
+    $li[0]
+
+  handleSmartList: ($item, e)->
+    utils.log("HANDLE A SMART LIST")
+    match = $item.text().match(/^\s*(\-|\*)\s*/)
+
+    if match
+      utils.log("CREATING UL LIST ITEM")
+      e.preventDefault()
+      $li = @listify($item, "ul", match[0].length)
+    else if match = $item.text().match(/^\s*1(\.|\))\s*/)
+      utils.log("CREATING OL LIST ITEM")
+      e.preventDefault()
+      $li = @listify($item, "ol", match[0].length)
+
+    $li
+
+  handleListLineBreak: ($li, e)->
+    utils.log("LIST LINE BREAK")
+    e.preventDefault()
+    @tooltip_view.hide()
+    $list = $li.parent("ol, ul")
+    $paragraph = $("<p></p>")
+    if($list.children().length == 1)
+      @replaceWith("p", $list)
+    else if ($li.next().length == 0 and $li.text() == "")
+      $list.after($paragraph)
+      $li.remove()
+
+      @addClassesToElement($paragraph[0])
+      @setRangeAt($paragraph[0])
+      @markAsSelected($paragraph[0])
+      @scrollTo($paragraph)
+
+  handleListBackspace: ($li, e)->
+
+    $list = $li.parent("ol, ul")
+    utils.log("LIST BACKSPACE")
+
+    if($li.prev().length is 0)
+      e.preventDefault()
+
+      $list.before($li)
+      content = $li.html()
+      @replaceWith("p", $li)
+      $paragraph = $(".is-selected")
+      $paragraph.removeClass("graf--empty").html(content)
+
+      if($list.children().length is 0)
+        $list.remove()
+
+      @setupFirstAndLast()

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

@@ -196,6 +196,9 @@ class Dante.Editor.Menu extends Dante.View
       if tag.match /(?:h[1-6])/i
         $(@el).find(".icon-bold, .icon-italic, .icon-blockquote")
         .parent("li").remove()
+      else if tag is "indent"
+        $(@el).find(".icon-h2, .icon-h3, .icon-h4, .icon-blockquote")
+        .parent("li").remove()
         #.parent("li").hide()
         #.addClass("hidden")
 

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

@@ -310,19 +310,23 @@ class Dante.Editor.Tooltip extends Dante.View
     false
 
   getEmbedFromNode: (node)=>
-    @node_name = $(node).attr("name")
-    $.getJSON("#{@current_editor.oembed_url}#{$(@node).text()}").success (data)=>
-      @node = $("[name=#{@node_name}]")
-      iframe_src = $(data.html).prop("src")
-      tmpl = $(@embedTemplate())
-      tmpl.attr("name", @node.attr("name"))
-      $(@node).replaceWith(tmpl)
-      replaced_node = $(".graf--iframe[name=#{@node.attr("name")}]")
-      replaced_node.find("iframe").attr("src", iframe_src)
-      url = data.url || data.author_url
-      utils.log "URL IS #{url}"
-      replaced_node.find(".markup--anchor").attr("href", url ).text(url)
-      @hide()
+    @node = $(node)
+    @node_name = @node.attr("name")
+    @node.addClass("spinner")
+
+    $.getJSON("#{@current_editor.oembed_url}#{$(@node).text()}")
+      .success (data)=>
+        @node = $("[name=#{@node_name}]")
+        iframe_src = $(data.html).prop("src")
+        tmpl = $(@embedTemplate())
+        tmpl.attr("name", @node.attr("name"))
+        $(@node).replaceWith(tmpl)
+        replaced_node = $(".graf--iframe[name=#{@node.attr("name")}]")
+        replaced_node.find("iframe").attr("src", iframe_src)
+        url = data.url || data.author_url
+        utils.log "URL IS #{url}"
+        replaced_node.find(".markup--anchor").attr("href", url ).text(url)
+        @hide()
 
   ##EXTRACT
   displayExtractPlaceHolder: ()->
@@ -335,7 +339,10 @@ class Dante.Editor.Tooltip extends Dante.View
     false
 
   getExtractFromNode: (node)=>
-    @node_name = $(node).attr("name")
+    @node = $(node)
+    @node_name = @node.attr("name")
+    @node.addClass("spinner")
+
     $.getJSON("#{@current_editor.extract_url}#{$(@node).text()}").success (data)=>
       @node = $("[name=#{@node_name}]")
       iframe_src = $(data.html).prop("src")