dante-editor 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9d4df3156378b59b7396a2b87162436cb60557e3
-  data.tar.gz: 517e2d07d9f36c86a648e07123e534a97c57e025
+  metadata.gz: 64b4e8827f1fd8a73d53ea8a3d2096428c512777
+  data.tar.gz: bfcca07541a5c1b66e5fb750fdb0eb0d9fc3cdd5
 SHA512:
-  metadata.gz: 67f9b45f3efd4dd05d92c9adf4eb0cf97d36996be5eb623cc47981d495be4b1546ea080aa948d366d0eaf356f574cc112ccc949b686e65afe7f117b8dc125f7e
-  data.tar.gz: da1cd87246a7167a9fa0c493ac4da218800b1bd89d58c54c74f4a0749d97bb55ed6ecc216ddd16209d676687b0e085e3af4cb1f1e0cff4621516cd6ec45d5d3e
+  metadata.gz: 9e18ede5c0fcb9553798120b174c3cd05f17d8f785870b03c60e78d0e569783123cfcc3504af2b8dcb5a3d05fe5097aaa5d2dca06280e441b3df5304cbab9939
+  data.tar.gz: 890dfde37222b9741982b8c31f2b91b137a47bd1c6dea6902e4004c853d2916cd984bd893f109c118d401b46ecee365271058f18f19deab5378ecdb88aeaa234

data/Gemfile

@@ -2,7 +2,7 @@
 # the following line to use "https"
 source 'http://rubygems.org'
 
-gem "therubyracer"
+#gem "therubyracer"
 gem "middleman", "~>3.1.4"
 
 # Live-reloading plugin

data/README.md

@@ -4,28 +4,30 @@
 
 ##Motivation:
 
-I´ve tried all the medium clones out there, they are really great and all have it´s pros & cons, but none of them have all the features that medium wysywig provides, so I wonder, how difficult could be build my own Medium clone?
+So far I have tried all the Medium.com wysiwyg clones out there, these are really great, and each have their pros and cons. [But none of them has all the features that the real medium editor provides.](http://howtox.com/medium-editor-clones-in-js/)
+so I wonder, How complicated could be write my own Medium wysiwyg clone?
+
+## Demo:
+
+[http://michelson.github.io/Dante/](http://michelson.github.io/Dante/)
 
 Until now I´ve been able to implement the following features:
 
 ## Features:
 
-+ HTML sanitizer when paste text or initial load.
-+ Image formatting/upload for paste events.
-+ Add an unique name to elements on page.
-+ Implementation of the famous tooltip on each paragraph when selected
++ HTML sanitizer for pasted or loaded text.
++ Image upload for paste events.
++ Image upload for legacy images on existent texts.
++ The medium (+) Tooltip to embed or upload media.
 + Tab navigation.
 + Embeds:
   + Image Uploader with *preview* and caption option.
   + Embed data for pasted link through OEmbed services.
   + Embed media information for pasted links through OEmbed services.
-+ CSS tries to use the same fonts used in Medium, if you have setup those fonts, or fallbacks to open fonts (by Google fonts) or system fonts.
++ 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
 
-## Demo:
-
-[http://michelson.github.io/Dante/](http://michelson.github.io/Dante/)
 
 ## Usage:
 
@@ -55,14 +57,16 @@ Until now I´ve been able to implement the following features:
 
 ### Configuration options:
 
-    el:          default: #editor
-    debugMode:   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="
-    store_url:   url to store data with interval , defaults to none
-    store_interval: default: 15000 (15 secs)
-    default_loading_placeholder: image placeholder to show when uploaded/pasted images are loading , defaults to a grey background
++ **el:**          default: #editor
++ **debugMode:**   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="
++ **store_url:**   default: to none , url to store data with interval
++ **store_interval:** default: 15000 (15 secs)
++ **spellcheck:**  default: false
++ **default_loading_placeholder:** image placeholder to show when uploaded/pasted images are loading , defaults to a grey background
++ **disable_title** default: false , will hide the initial heading placeholder for initial text
 
 ### Rails / AssetPippeline
 
@@ -80,25 +84,27 @@ in Gemfile
 
 ## Disclaimer:
 
-This Library will work on early versions of Chrome/Safari/FF/IE.
-I don't have any intentions to target all browsers versions, really... if you like this library and need backwards support for an specific version you can submit a patch to help with the development or just upgrade your shitty browser :D
+This Library will work fine on latest versions of Chrome/Safari/FF/IE.
+We don't have any intention to target all browsers versions, really... if you like this library and you need backward compatibility with an specific version you can submit a patch to help with the development or just upgrade your shitty browser :D
+
+**BTW , this library is an official beta release, so there are known bugs that we are currently working on.
+see TODO list below.**
 
 ## Dependencies:
 
-Some dependencies are required in order to Dante editor to work propperly:
+Some dependencies are required in order to Dante editor works properly:
 
 + Jquery
 + [Underscore](https://github.com/documentcloud/underscore)
 + [Sanitize.js](https://github.com/gbirke/sanitize.js)
 
 
-drop underscore and jquery dependencies is on the roadmap.
+**Drop underscore and jquery dependencies are on our roadmap.**
 
 
 ## Development:
 
-There is a development web app middleman/sinatra to work with the source files and make the proper tests.
-To use application:
+There is a web app for development to work with the source files and make the proper tests. To use application:
 
 ### Installation:
 
@@ -126,7 +132,22 @@ tests are located in source/tests and /source/assets/spec folder and accessible
 
   [read todo](./TODO.md)
 
+## MAINTAINERS:
+
++ [Miguel Michelson](http://github.com/michelson)
++ [Cristian Ferrari](http://github.com/cristianferrarig)
+
+### Alternatives:
+
++ https://github.com/sofish/pen
++ https://github.com/orthes/medium-editor-insert-plugin
+
+### ACKNOWLEDGMENTS:
+
++ Inline menu features was written taking some ideas and code from [pen.js](https://github.com/sofish/pen)
++ [Sanitize.js](https://github.com/gbirke/sanitize.js) allows us to clean HTML like pros.
++ No animals were harmed in the making of this ~~film~~ wysiwyg
 
 ### LICENSE
 
-Miguel Michelson Martinez [Licensed under MIT.](./license.md) 2014
+[Licensed under MIT.](./license.md) 2014

data/ROADMAP.md

@@ -0,0 +1,12 @@
+## ROADMAP
+
++ 0.0.5
+  + TODO LIST COMPLETE!
++ 0.0.7
+  + implement Keyboard Shortcuts / word count / typing tricks
++ 0.1.0
+  + implement layout changes on embeds & uploads.
++ 0.2.0
+  + implement creation of new sections
++ 1.0.0
+  + use Rangy for better selection & range support.

data/TODO.md

@@ -3,14 +3,12 @@
 
   + GENERALS
     + FF in case markup breaks (like linebreak with br or unwraped text when typing) just rewrap from current range.
-    + Check double clicks on first p
 
   + SANITIZE PROCESS
 
   + MENU
     + Filter inner tags (except a, b, i ... ) when convert to blockquote
-    + Reposicionar menu cuando se cambia el tamaño del elemento
-    + Quitar las opciones B/i cuando el elemento seleccionado es un header
+    + blockquote works like crap
 
   + DELETE
     + handle remove from PRE tag, it set rare span, just remove it
@@ -18,7 +16,6 @@
 
   + IMAGES:
     + upload, show progress, complete
-    + mantain image ratio
     + handle enter (linebreak) when selected in caption (build new P)
       + Fix problem in FF when linebreak or arrow down to new P , is typing backwards!! (could be a range 1 char problem ?)
 
@@ -29,16 +26,3 @@
   + SUBMIT:
     get clean version of content
 
-
-## ROADMAP
-
-+ 0.0.5
-  + TODO LIST COMPLETE!
-+ 0.1.0
-  + implement layout changes on embeds & uploads.
-+ 0.2.0
-  + implement creation of new sections
-+ 1.0.0
-  + use Rangy for better selection & range support.
-
-

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

@@ -10,23 +10,29 @@ class Dante.Editor extends Dante.View
     "keydown" : "handleKeyDown"
     "keyup"   : "handleKeyUp"
     "paste"   : "handlePaste"
-    "click .graf--figure" : "handleGrafFigureSelect"
+    "dblclick" : "handleDblclick"
+    "dragstart": "handleDrag"
+    "drop"    : "handleDrag"
+    "click .graf--figure .aspectRatioPlaceholder" : "handleGrafFigureSelectImg"
+    "click .graf--figure figcaption"   : "handleGrafFigureSelectCaption"
 
   initialize: (opts = {})=>
     @editor_options = opts
     #globals for selected text and node
-    @initial_html = $(@el).html()
-    @current_range = null
-    @current_node = null
+    @initial_html    = $(@el).html()
+    @current_range   = null
+    @current_node    = null
     @el = opts.el || "#editor"
+    @upload_url      = opts.upload_url  || "/uploads.json"
+    @oembed_url      = opts.oembed_url  || "http://api.embed.ly/1/oembed?url="
+    @extract_url     = opts.extract_url || "http://api.embed.ly/1/extract?key=86c28a410a104c8bb58848733c82f840&url="
+    @default_loading_placeholder = opts.default_loading_placeholder || Dante.defaults.image_placeholder
+    @store_url       = opts.store_url
+    @spell_check     = opts.spellcheck || false
+    @disable_title   = opts.disable_title || false
+    @store_interval  = opts.store_interval || 15000
     window.debugMode = opts.debug || false
     $(@el).addClass("debug") if window.debugMode
-    @upload_url  = opts.upload_url  || "/uploads.json"
-    @oembed_url  = opts.oembed_url  || "http://api.embed.ly/1/oembed?url="
-    @extract_url = opts.extract_url || "http://api.embed.ly/1/extract?key=86c28a410a104c8bb58848733c82f840&url="
-    @default_loading_placeholder = opts.default_loading_placeholder || Dante.defaults.image_placeholder
-    @store_url   = opts.store_url
-    @store_interval = opts.store_interval || 15000
     if (localStorage.getItem('contenteditable'))
       $(@el).html  localStorage.getItem('contenteditable')
 
@@ -64,6 +70,9 @@ class Dante.Editor extends Dante.View
   getContent: ()->
     $(@el).find(".section-inner").html()
 
+  renderTitle: ()->
+    "<h3 class='graf graf--h3'>#{@title_placeholder} </h3>"
+
   template: ()=>
     "<section class='section--first section--last'>
 
@@ -73,7 +82,7 @@ class Dante.Editor extends Dante.View
 
       <div class='section-content'>
         <div class='section-inner'>
-          <h3 class='graf graf--h3'>#{@title_placeholder}</h3>
+          #{if @disable_title then '' else @renderTitle()}
           <p class='graf graf--p'>#{@body_placeholder}<p>
         </div>
       </div>
@@ -92,15 +101,17 @@ class Dante.Editor extends Dante.View
 
   appendInitialContent: ()=>
     $(@el).find(".section-inner").html(@initial_html)
+    $(@el).attr("spellcheck", @spell_check)
 
   start: ()=>
     @render()
     $(@el).attr("contenteditable", "true")
-    $(@el).addClass("postField--body")
-    $(@el).wrap("<div class='notesSource'></div>")
+    $(@el).addClass("postField postField--body editable smart-media-plugin")
+    $(@el).wrap("<div class='postContent'><div class='notesSource'></div></div>")
     @appendMenus()
     @appendInitialContent() unless _.isEmpty @initial_html.trim()
-    @setupElementsClasses()
+    @parseInitialMess()
+
 
   restart: ()=>
     @render()
@@ -226,6 +237,7 @@ class Dante.Editor extends Dante.View
     (if root && root.contains(node) then node else null)
 
   displayMenu: (sel)->
+    #return if _.isUndefined sel
     setTimeout ()=>
       @editor_menu.render()
       pos = utils.getSelectionDimensions()
@@ -233,14 +245,16 @@ class Dante.Editor extends Dante.View
       @editor_menu.show()
     , 10
 
+  handleDrag: ()->
+    return false
+
   #get text of selected and displays menu
   handleTextSelection: (anchor_node)->
     @editor_menu.hide()
     text = @getSelectedText()
-    unless _.isEmpty text.trim()
-      #@current_range = @getRange()
-      @current_node  = anchor_node
-      @.displayMenu()
+    if !$(anchor_node).is(".graf--mixtapeEmbed, .graf--figure") && !_.isEmpty text.trim()
+        @current_node  = anchor_node
+        @.displayMenu()
 
   relocateMenu: (position)->
     height = @editor_menu.$el.outerHeight()
@@ -256,10 +270,19 @@ class Dante.Editor extends Dante.View
     $(".graf--first").html(@title_placeholder)
     $(".graf--last").html(@body_placeholder)
 
-  handleGrafFigureSelect: (ev)->
+  handleGrafFigureSelectImg: (ev)->
+    utils.log "FIGURE SELECT"
     element = ev.currentTarget
     @markAsSelected( element )
-    @setRangeAt( $(element).find('.imageCaption')[0] )
+    $(element).parent(".graf--figure").addClass("is-selected is-mediaFocused")
+    @selection().removeAllRanges()
+
+  handleGrafFigureSelectCaption: (ev)->
+    utils.log "FIGCAPTION"
+    element = ev.currentTarget
+    $(element).parent(".graf--figure").removeClass("is-mediaFocused")
+    #return false
+    #@setRangeAt( $(element).find('.imageCaption')[0] )
 
   handleBlur: (ev)=>
     #hide menu only if is not in use
@@ -272,9 +295,13 @@ class Dante.Editor extends Dante.View
   handleMouseUp: (ev)=>
     utils.log "MOUSE UP"
     anchor_node = @getNode()
-    utils.log anchor_node
-    utils.log ev.currentTarget
+    #utils.log anchor_node
+    #utils.log ev.currentTarget
+
     return if _.isNull(anchor_node)
+
+    @prev_current_node = anchor_node
+
     @handleTextSelection(anchor_node)
     @hidePlaceholder(anchor_node)
     @markAsSelected( anchor_node )
@@ -292,13 +319,14 @@ class Dante.Editor extends Dante.View
   #handle arrow direction from keyUp.
   handleArrow: (ev)=>
     current_node = $(@getNode())
-    if current_node
+    if current_node.length > 0
       @markAsSelected( current_node )
       @displayTooltipAt( current_node )
 
   #handle arrow direction from keyDown.
   handleArrowForKeyDown: (ev)=>
-    current_node = $(@getNode())
+    caret_node   = @getNode()
+    current_node = $(caret_node)
     utils.log(ev)
     ev_type = ev.originalEvent.key || ev.originalEvent.keyIdentifier
 
@@ -308,22 +336,32 @@ class Dante.Editor extends Dante.View
     switch ev_type
 
       when "Down"
+        #when graff-image selected but none selection is found
+        #debugger
+        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).editableCaretOnLastLine()
+        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")
+        if next_node.hasClass("graf--figure") && caret_node
           n = next_node.find(".imageCaption")
           @setRangeAt n[0]
           @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
@@ -336,19 +374,13 @@ class Dante.Editor extends Dante.View
           return false
 
         if current_node.hasClass("graf--figure") && next_node.hasClass("graf")
-          @setRangeAt next_node[0]
           @scrollTo(next_node)
-          utils.log "3 down"
+          utils.log "3 down, from figure to next graf"
+          #@skip_keyup = true
+          @markAsSelected(next_node)
+          @setRangeAt next_node[0]
           return false
 
-        ###
-        else if next_node.hasClass("graf")
-          n = current_node.next(".graf")
-          @setRangeAt n[0]
-          @scrollTo(n)
-          false
-        ###
-
       when "Up"
         prev_node = current_node.prev()
         utils.log "PREV NODE IS #{prev_node.attr('class')}"
@@ -362,8 +394,10 @@ class Dante.Editor extends Dante.View
         if prev_node.hasClass("graf--figure")
           utils.log "1 up"
           n = prev_node.find(".imageCaption")
-          @setRangeAt n[0]
+          #@setRangeAt n[0]
           @scrollTo(n)
+          @skip_keyup = true
+          @selection().removeAllRanges()
           prev_node.addClass("is-mediaFocused is-selected")
           return false
 
@@ -384,13 +418,27 @@ class Dante.Editor extends Dante.View
         else if prev_node.hasClass("graf")
           n = current_node.prev(".graf")
           num = n[0].childNodes.length
-          @setRangeAt n[0], num
+          #@setRangeAt n[0], num
           @scrollTo(n)
           utils.log "4 up"
+          @skip_keyup = true
+          #debugger
           return false
 
         utils.log "noting"
 
+  #parse text for initial mess
+  parseInitialMess: ()->
+    @setupElementsClasses $(@el).find('.section-inner') , ()=>
+      @handleUnwrappedImages($(@el).find('.section-inner'))
+
+  handleDblclick: ()->
+    utils.log "handleDblclick"
+    node =  @getNode()
+    if _.isNull node
+      @setRangeAt(@prev_current_node)
+    return false
+
   #detects html data , creates a hidden node to paste ,
   #then clean up the content and copies to currentNode, very clever uh?
   handlePaste: (ev)=>
@@ -634,6 +682,15 @@ class Dante.Editor extends Dante.View
       if $(anchor_node).prev().hasClass("graf--mixtapeEmbed")
         return false if @isFirstChar() && !_.isEmpty( $(anchor_node).text().trim() )
 
+      utils.log "sss"
+      utils.log anchor_node
+      if $(".is-selected").hasClass("graf--figure")
+        @replaceWith("p", $(".is-selected"))
+        @setRangeAt($(".is-selected")[0])
+        return false
+
+
+
     #arrows key
     #if _.contains([37,38,39,40], e.which)
     #up & down
@@ -644,9 +701,24 @@ class Dante.Editor extends Dante.View
 
     #hides tooltip if anchor_node text is empty
     if anchor_node
-      @tooltip_view.hide() unless _.isEmpty($(anchor_node).text())
+      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)->
+
+    if @skip_keyup
+      @skip_keyup = null
+      utils.log "SKIP KEYUP"
+      return
+
     utils.log "KEYUP"
 
     @editor_menu.hide() #hides menu just in case
@@ -701,6 +773,12 @@ class Dante.Editor extends Dante.View
     @setRangeAt(new_paragraph[0])
     @scrollTo new_paragraph
 
+  replaceWith: (element_type, from_element)->
+    new_paragraph = $("<#{element_type} class='graf graf--#{element_type} graf--empty is-selected'><br/></#{element_type}>")
+    from_element.replaceWith(new_paragraph)
+    @setRangeAt(new_paragraph[0])
+    @scrollTo new_paragraph
+
   #shows the (+) tooltip at current element
   displayTooltipAt: (element)->
     utils.log ("POSITION FOR TOOLTIP")
@@ -720,8 +798,19 @@ class Dante.Editor extends Dante.View
     $(@el).find(".is-selected").removeClass("is-mediaFocused is-selected")
     $(element).addClass("is-selected")
 
+    ###
     if $(element).prop("tagName").toLowerCase() is "figure"
       $(element).addClass("is-mediaFocused")
+      n = utils.getNode()
+      utils.log n
+
+      n = utils.getNode()
+      utils.log n
+      if _.isUndefined n
+        $(element).addClass("is-mediaFocused")
+      else if $(n).prop("tagName").toLowerCase() is "figcaption"
+        $(element).removeClass("is-mediaFocused")
+    ###
 
     $(element).find(".defaultValue").remove()
     #set reached top if element is first!
@@ -733,7 +822,7 @@ class Dante.Editor extends Dante.View
     n = element
     name = n.nodeName.toLowerCase()
     switch name
-      when "p", "h1", "h2", "h3", "h4", "h5", "h6", "pre", "div"
+      when "p", "pre", "div"
         #utils.log n
         unless $(n).hasClass("graf--mixtapeEmbed")
           $(n).removeClass().addClass("graf graf--#{name}")
@@ -741,6 +830,14 @@ class Dante.Editor extends Dante.View
         if name is "p" and $(n).find("br").length is 0
           $(n).append("<br>")
 
+      when "h1", "h2", "h3", "h4", "h5", "h6"
+        if name is "h1"
+          new_el = $("<h2 class='graf graf--h2'>#{$(n).text()}</h2>")
+          $(n).replaceWith(new_el)
+          @setElementName(n)
+        else
+          $(n).removeClass().addClass("graf graf--#{name}")
+
       when "code"
         #utils.log n
         $(n).unwrap().wrap("<p class='graf graf--pre'></p>")
@@ -755,14 +852,12 @@ class Dante.Editor extends Dante.View
 
       when "img"
         utils.log "images"
-        #@handleUnwrappedImages(n)
-        #@handleUnwrappedImages(nodes)
         @tooltip_view.uploadExistentImage(n)
         #set figure non editable
 
       when "a", 'strong', 'em', 'br', 'b', 'u', 'i'
         utils.log "links"
-        $(n).wrap("<p class='graf graf--#{name}'></p>")
+        $(n).wrap("<p class='graf graf--p'></p>")
         n = $(n).parent()
         #dont know
 
@@ -771,6 +866,9 @@ class Dante.Editor extends Dante.View
         #$(n).find("p").unwrap()
         n = $(n).removeClass().addClass("graf graf--#{name}")
 
+      when "figure"
+        if $(n).hasClass(".graf--figure")
+          n = $(n)
       else
         #TODO: for now leave this relaxed, because this is
         #overwriting embeds
@@ -811,7 +909,7 @@ class Dante.Editor extends Dante.View
       @element = element
 
     s = new Sanitize
-      elements: ['strong','img', 'em', 'br', 'a', 'blockquote', 'b', 'u', 'i', 'pre', 'p', 'h2', 'h3']
+      elements: ['strong','img', 'em', 'br', 'a', 'blockquote', 'b', 'u', 'i', 'pre', 'p', 'h1', 'h2', 'h3', 'h4']
 
       attributes:
         '__ALL__': ['class']
@@ -853,7 +951,10 @@ class Dante.Editor extends Dante.View
                       if(input.node_name == 'figure' && $(input.node).hasClass("graf--figure") )
                         return whitelist_nodes: [input.node]
 
-                      else if(input.node_name == 'div' && ($(input.node).hasClass("aspect-ratio-fill") || $(input.node).hasClass("aspectRatioPlaceholder")) && $(input.node).parent(".graf--figure").exists() )
+                      else if(input.node_name == 'div' && ( $(input.node).hasClass("aspectRatioPlaceholder") && $(input.node).parent(".graf--figure").exists() ))
+                        return whitelist_nodes: [input.node]
+
+                      else if(input.node_name == 'div' && ( $(input.node).hasClass("aspect-ratio-fill") && $(input.node).parent(".aspectRatioPlaceholder").exists() ))
                         return whitelist_nodes: [input.node]
 
                       else if(input.node_name == 'img' && $(input.node).parent(".graf--figure").exists() )
@@ -862,6 +963,9 @@ class Dante.Editor extends Dante.View
                       else if(input.node_name == 'a' && $(input.node).parent(".graf--mixtapeEmbed").exists() )
                         return attr_whitelist: ["style"]
 
+                      else if(input.node_name == 'figcaption' && $(input.node).parent(".graf--figure").exists())
+                        return whitelist_nodes: [input.node]
+
                       else if(input.node_name == 'span' && $(input.node).parent(".imageCaption").exists())
                         return whitelist_nodes: [input.node]
                       else