dante-editor 0.0.5 → 0.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5df180cc7b05573d27375f1d68407eae113faafa
-  data.tar.gz: 0c20ba63a6873253fe41dee4b53ddbde40668793
+  metadata.gz: 71ee7534d221e83a36f0c8732f05bf4dc01900c4
+  data.tar.gz: a59f2be827882d5d796b5e7fd842cf2d3063b869
 SHA512:
-  metadata.gz: 7027a936bf5598765a5dc0f23ca29b9e8f024cb659f19efcfdb31c64418d3bbce8cb2545c167f7ac276f4ca77b84bda88e318bd3dd5c3a947a6a0b6ba4c90e3d
-  data.tar.gz: 6c4b90531e4971941b527324bf7b339d100aaf50a472c6827bbe0ea37272d8e4185fa196aa361d3c69220d51a1a004307227150717e375986806ba4fef05db1d
+  metadata.gz: f22ce041959c03deb02ed99f01b81dc7d9c76c178cec77b15f90b4990fd820f37e63487a4b838bb35edb7b78db5cb9b0a5b34d1278d0b9c41fce010a8c710a80
+  data.tar.gz: ce7b6b46893e0f92484fff5904ddbe987039923b82210cac54e4c7475b14bf33aba7b3321c051b24c1dd3860baccbb4d65603508676756d70c41149e07372346

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    dante-editor (0.0.5)
+    dante-editor (0.0.6)
 
 GEM
   remote: http://rubygems.org/

data/ROADMAP.md

@@ -2,11 +2,9 @@
 
 + 0.0.6
   + TODO LIST COMPLETE!
-+ 0.0.7
-  + implement Keyboard Shortcuts / word count / typing tricks
 + 0.1.0
-  + implement layout changes on embeds & uploads.
+  + implement Keyboard Shortcuts / word count / typing tricks
 + 0.2.0
+  + implement layout changes on embeds & uploads.
++ 0.3.0
   + implement creation of new sections
-+ 1.0.0
-  + use Rangy for better selection & range support.

data/TODO.md

@@ -14,6 +14,7 @@
     + handle remove from PRE tag, it set rare span, just remove it
     + clean node when remove one
     + don't remove entire graf-image when delete text from caption
+    + handle delete from link embeds . when text is empty , remove embed on next del key press.
 
   + IMAGES:
     + upload, show progress, complete

data/app/assets/fonts/dante.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
+<glyph unicode="&#xe600;" d="M256 759.559v-623.174c0-70.118 47.316-95.291 105.683-55.222l428.634 294.258c58.622 40.244 58.367 105.034 0 145.103l-428.634 294.258c-58.622 40.244-105.683 15.345-105.683-55.222zM320 766.664l426.195-293.488c30.527-20.25 29.832-31 0-51.070l-426.195-295.039v639.598z" />
+<glyph unicode="&#xe601;" d="M294.4 768l0.489 2.446c13.868 69.342 82.599 125.554 152.977 125.554h128.267c70.619 0 139.014-55.74 152.977-125.554l0.489-2.446h166.78c70.483 0 127.62-57.611 127.62-127.489v-449.022c0-70.41-57.249-127.489-127.62-127.489h-768.76c-70.483 0-127.62 57.611-127.62 127.489v449.022c0 70.41 57.249 127.489 127.62 127.489h166.78zM347.123 704h-218.685c-35.641 0-64.438-28.583-64.438-63.843v-448.314c0-35.279 28.85-63.843 64.438-63.843h767.124c35.641 0 64.438 28.583 64.438 63.843v448.314c0 35.279-28.85 63.843-64.438 63.843h-218.816l-13.864 65.375c-7.263 34.25-41.874 62.625-77.145 62.625h-147.627c-35.433 0-69.805-28.038-77.134-62.625l-13.853-65.375zM320 448c0-105.823 85.961-192 192-192 105.823 0 192 85.961 192 192 0 105.823-85.961 192-192 192-105.823 0-192-85.961-192-192zM384 448c0 70.692 56.815 128 128 128 70.692 0 128-56.815 128-128 0-70.692-56.815-128-128-128-70.692 0-128 56.815-128 128z" />
+<glyph unicode="&#xe602;" d="M544 416v-375.294c0-17.673-14.327-32-32-32s-32 14.327-32 32v375.294h-375.294c-17.673 0-32 14.327-32 32s14.327 32 32 32h375.294v375.294c0 17.673 14.327 32 32 32s32-14.327 32-32v-375.294h375.294c17.673 0 32-14.327 32-32s-14.327-32-32-32h-375.294z" />
+<glyph unicode="&#xe603;" d="M882.24 449.498l-235.855 234.241c-12.497 12.411-12.497 32.534 0 44.945s32.758 12.411 45.255 0l253.704-251.968c1.872-1.201 3.645-2.616 5.284-4.244 12.497-12.411 12.497-32.534 0-44.945l-257.992-256.226c-12.497-12.411-32.758-12.411-45.255 0s-12.497 32.534 0 44.945l234.859 233.252zM67.842 461.229c-6.562-12.128-4.719-27.599 5.53-37.848 2.863-2.863 6.133-5.070 9.624-6.621l249.364-249.364c12.497-12.497 32.758-12.497 45.255 0s12.497 32.758 0 45.255l-234.859 234.859 233.863 233.863c12.497 12.497 12.497 32.758 0 45.255s-32.758 12.497-45.255 0l-251.712-251.712c-1.872-1.209-3.645-2.634-5.284-4.273-2.805-2.805-4.981-6.002-6.527-9.414v0 0z" />
+</font></defs></svg>

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

@@ -793,9 +793,9 @@ class Dante.Editor extends Dante.View
     return if !element
     @tooltip_view.hide()
     return unless _.isEmpty( $(element).text() )
-    @position = $(element).offset()
+    @positions = $(element).offset()
     @tooltip_view.render()
-    @tooltip_view.move(left: @position.left - 60, top: @position.top - 1 )
+    @tooltip_view.move(@positions)
 
   #mark the current row as selected
   markAsSelected: (element)->

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

@@ -42,7 +42,6 @@ class Dante.Editor.PopOver extends Dante.View
 
   displayAt: (ev)->
     @cancelHide()
-    #debugger
     target = $(ev.currentTarget)
     $(@el).find(".popover-inner a").text( target.attr('href') ).attr('href', target.attr("href") )
     @positionAt(ev)

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

@@ -10,9 +10,9 @@ class Dante.Editor.Tooltip extends Dante.View
   initialize: (opts = {})=>
     @current_editor = opts.editor
     @buttons = [
-      {icon: "fa-camera", title: "Add an image", action: "image"},
-      {icon: "fa-play",   title: "Add a video",  action: "embed"},
-      {icon: "fa-code",   title: "Add an embed", action: "embed-extract"}
+      {icon: "icon-image", title: "Add an image", action: "image"},
+      {icon: "icon-video", title: "Add a video",  action: "embed"},
+      {icon: "icon-embed", title: "Add an embed", action: "embed-extract"}
     ]
     #TODO: include section splitter
     #icon: "fa-minus", title: "Add a new part", action: "hr"
@@ -22,11 +22,11 @@ class Dante.Editor.Tooltip extends Dante.View
     _.each @buttons, (b)->
       data_action_value = if b.action_value then "data-action-value='#{b.action_value}'" else  ""
       menu += "<button class='inlineTooltip-button scale' title='#{b.title}' data-action='inline-menu-#{b.action}' #{data_action_value}>
-        <span class='fa #{b.icon}'></span>
+        <span class='tooltip-icon #{b.icon}'></span>
       </button>"
 
     "<button class='inlineTooltip-button control' title='Close Menu' data-action='inline-menu'>
-        <span class='fa fa-plus'></span>
+        <span class='tooltip-icon icon-plus'></span>
     </button>
     <div class='inlineTooltip-menu'>
       #{menu}
@@ -69,15 +69,23 @@ class Dante.Editor.Tooltip extends Dante.View
 
   render: ()=>
     $(@el).html(@template())
-    $(@el).show()
+    $(@el).addClass("is-active")
+    @
 
   toggleOptions: ()=>
     utils.log "Toggle Options!!"
-    $(@el).toggleClass("is-active is-scaled")
+    $(@el).toggleClass("is-scaled")
     return false
 
   move: (coords)->
-    $(@el).offset(coords)
+    tooltip         = $(@el)
+    control_width   = tooltip.find(".control").css("width")
+    control_spacing = tooltip.find(".inlineTooltip-menu").css("padding-left")
+    pull_size       = parseInt(control_width.replace(/px/,"")) + parseInt(control_spacing.replace(/px/,""))
+    coord_left      = coords.left - pull_size
+    coord_top       = coords.top
+
+    $(@el).offset(top: coord_top, left: coord_left)
 
   handleClick: (ev)->
     name = $(ev.currentTarget).data('action')
@@ -353,5 +361,4 @@ class Dante.Editor.Tooltip extends Dante.View
     node.removeClass("is-embedable is-extractable")
 
   hide: ()=>
-    $(@el).hide()
     $(@el).removeClass("is-active is-scaled")

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

@@ -1,4 +1,4 @@
-//@if $debugger {
+@if $debugger {
   .debug {
     .section-inner {
       .is-selected{
@@ -8,4 +8,4 @@
       }
     }
   }
-//}
+}

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

@@ -1,12 +1,17 @@
-@font-face {
-  font-family: 'dante';
-  src: font-url('fontello.eot?370dad08');
-  src: font-url('fontello.eot?370dad08#iefix') format('embedded-opentype'),
-  font-url('fontello.woff?370dad08') format('woff'),
-  font-url('fontello.ttf?370dad08') format('truetype'),
-  font-url('fontello.svg?370dad08#fontello') format('svg');
-  font-weight: normal;
-  font-style: normal;
+@mixin font-face($font-family, $file-name, $font-weight: normal, $font-style: normal) {
+  @font-face {
+    font-family: '#{$font-family}';
+    src: font-url('#{$file-name}.eot?370dad08');
+    src: font-url('#{$file-name}.eot?370dad08#iefix') format('embedded-opentype'),
+    font-url('#{$file-name}.woff?370dad08') format('woff'),
+    font-url('#{$file-name}.ttf?370dad08') format('truetype'),
+    font-url('#{$file-name}.svg?370dad08##{$file-name}') format('svg');
+    font-weight: $font-weight;
+    font-style: $font-style;
+  }
 }
 
+@include font-face(dante, fontello);
+@include font-face(dante-tooltip, dante);
+
 @import url(http://fonts.googleapis.com/css?family=Merriweather:400,700,400italic,700italic|Open+Sans:400,300,800);

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

@@ -20,7 +20,7 @@
 }
 
 .graf--h2 {
-  font-family: $sans;
+  font-family: $font-family-sans;
   font-size: 60px;
   font-style: normal;
   font-weight: 700;
@@ -32,7 +32,7 @@
   padding-top: 0;
 }
 .graf--h3 {
-  font-family: $sans;
+  font-family: $font-family-sans;
   letter-spacing: -0.02em;
   font-weight: 700;
   font-style: normal;
@@ -43,7 +43,7 @@
   margin-bottom: 4px;
 }
 .graf--h4 {
-  font-family: $sans;
+  font-family: $font-family-sans;
   letter-spacing: -0.02em;
   font-weight: 300;
   font-style: normal;
@@ -183,6 +183,11 @@
   padding-top: 0;
 }
 
+/*.graf--empty {
+  margin-bottom: -7px;
+  margin-top: -7px;
+}*/
+
 p[data-align="center"],
 .graf--h2[data-align="center"],
 .graf--h3[data-align="center"],

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

@@ -12,7 +12,6 @@
   }
 }
 
-
 .icon-h2:before                   { content: "H1"; }
 .icon-h3:before                   { content: "H2"; }
 .icon-h4:before                   { content: "H3"; }
@@ -29,9 +28,30 @@
 .icon-createlink:before           { content: ""; }
 .icon-blockquote:before           { content: ""; }
 
-
 .icon-h2:before,
 .icon-h3:before,
 .icon-h4:before {
   font-weight: bold;
 }
+
+
+.tooltip-icon {
+  &:before {
+    font-family: 'dante-tooltip';
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    // Better Font Rendering
+     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+.icon-video:before { content: "\e600"; }
+.icon-image:before { content: "\e601"; }
+.icon-plus:before  { content: "\e602"; }
+.icon-embed:before { content: "\e603"; }

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

@@ -73,13 +73,15 @@
   & {
     min-width: 20px;
     display: inline-block;
-    padding: 0 10px;
+    padding-left: 10px;
+    padding-right: 10px;
     overflow: hidden;
     text-align: center;
     color: $menu-color;
     cursor: pointer;
     font-size: 16px;
-    line-height: $menu-height - 2;
+    line-height: $menu-button-height;
+    height: $menu-button-height;
     -webkit-user-select: none;
        -moz-user-select: none;
         -ms-user-select: none;

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

@@ -74,7 +74,7 @@ h4 .markup--anchor {
     border-width: 1px;
     box-sizing: border-box;
     color: rgba(0, 0, 0, 0.6);
-    font-family: $sans;
+    font-family: $font-family-sans;
     font-size: 12px;
     font-style: normal;
     font-weight: 300;
@@ -105,7 +105,7 @@ h4 .markup--anchor {
 
 .graf--mixtapeEmbed {
     color: rgba(0, 0, 0, 0.6);
-    font-family: $sans;
+    font-family: $font-family-sans;
     font-size: 12px;
     font-style: normal;
     font-weight: 300;
@@ -115,7 +115,7 @@ h4 .markup--anchor {
 .markup--mixtapeEmbed-strong {
     color: #000;
     display: block;
-    font-family: $sans;
+    font-family: $font-family-sans;
     font-size: 30px;
     font-style: normal;
     font-weight: 300;
@@ -147,7 +147,7 @@ h4 .markup--anchor {
 
 // .imageCaption {
 //     color: rgba(0, 0, 0, 0.6);
-//     font-family: $serif;
+//     font-family: $font-family-serif;
 //     font-size: 14px;
 //     font-style: italic;
 //     font-weight: 400;
@@ -201,7 +201,7 @@ section.is-backgrounded + section > .section-divider {
 // }
 
 .defaultValue--prompt {
-    font-family: $sans;
+    font-family: $font-family-sans;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;

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

@@ -3,17 +3,22 @@
   // BASE
   position: absolute;
   z-index: 900;
-  overflow: hidden;
-  display: none;
-  width: 33px;
-  height: 33px;
+  width: $tooltip-size;
+  height: $tooltip-size;
   -webkit-transition: opacity 100ms, width 0 linear 250ms;
   transition: opacity 100ms, width 0 linear 250ms;
   padding: 0;
+  font-size: 0;
+
+  opacity: 0;
+  pointer-events: none;
 
   &.is-active {
-    display: block;
-    width: 220px;
+    opacity: 1;
+    pointer-events: auto;
+  }
+  &.is-scaled {
+    width: $tooltip-size-expanded;
     -webkit-transition-delay: 0;
     transition-delay: 0;
   }
@@ -23,10 +28,10 @@
 .inlineTooltip-menu {
   & {
     display: inline-block;
-    padding-left: 22px;
+    padding-left: $tooltip-menu-spacing;
   }
   button {
-    margin-right: 9px;
+    margin-right: $tooltip-button-spacing;
   }
 }
 
@@ -41,7 +46,7 @@
     padding: 0;
     vertical-align: bottom;
     box-sizing: border-box;
-    border-radius: 999em;
+    border-radius: $tooltip-border-radius;
     cursor: pointer;
     font-size: 14px;
     text-decoration: none;
@@ -58,66 +63,67 @@
     -moz-font-feature-settings: "liga" on;
     width: $tooltip-size;
     height: $tooltip-size;
-    line-height: $tooltip-size - 2;
+    line-height: $tooltip-line-height;
     -webkit-transition: 100ms border-color, 100ms color;
     transition: 100ms border-color, 100ms color;
-    background: rgba(0,0,0,0);
-    border: 1px solid rgba(0,0,0,0.15);
-    color: rgba(0,0,0,0.44);
+    background: rgba($tooltip-color, $tooltip-background-opacity);
+    border: $tooltip-border-width solid;
+    border-color: rgba($tooltip-color, $tooltip-color-opacity);
+    color: rgba($tooltip-color, $tooltip-color-opacity);
   }
 
   &:hover {
-    border-color: rgba(0,0,0,0.9);
-    color: rgba(0,0,0,0.9);
+    border-color: rgba($tooltip-color, $tooltip-color-opacity-hover);
+    color: rgba($tooltip-color, $tooltip-color-opacity-hover);
   }
 
   // SCALE
   &.scale {
     & {
-      -webkit-transform: scale(0);
-      -ms-transform: scale(0);
-      transform: scale(0);
-      -webkit-transition-property: -webkit-transform;
-      transition-property: transform;
-      -webkit-transition-duration: 100ms;
-      transition-duration: 100ms;
+       -webkit-transform: scale(0);
+           -ms-transform: scale(0);
+               transform: scale(0);
+      -webkit-transition: -webkit-#{$tooltip-forward-transition}, $tooltip-default-transition;
+              transition: $tooltip-forward-transition, $tooltip-default-transition;
     }
     .is-scaled & {
-      -webkit-transform: scale(1);
-      -ms-transform: scale(1);
-      transform: scale(1);
-      -webkit-transition-duration: 200ms;
-      transition-duration: 200ms;
+       -webkit-transform: scale(1);
+           -ms-transform: scale(1);
+               transform: scale(1);
+      -webkit-transition: -webkit-#{$tooltip-backward-transition}, $tooltip-default-transition;
+              transition: $tooltip-backward-transition, $tooltip-default-transition;
     }
     &:nth-child(2) {
       -webkit-transition-delay: 30ms;
-      transition-delay: 30ms;
+              transition-delay: 30ms;
     }
     &:nth-child(3) {
       -webkit-transition-delay: 60ms;
-      transition-delay: 60ms;
+              transition-delay: 60ms;
     }
     &:nth-child(4) {
       -webkit-transition-delay: 90ms;
-      transition-delay: 90ms;
+              transition-delay: 90ms;
     }
   }
 
   // CONTROL
   &.control {
     & {
-      -webkit-transition: -webkit-transform 100ms;
-              transition: transform 100ms;
+      -webkit-transition: -webkit-#{$tooltip-forward-transition}, $tooltip-default-transition;
+              transition: $tooltip-forward-transition, $tooltip-default-transition;
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
                transform: rotate(0);
     }
-    .is-active & {
-      -webkit-transition: -webkit-transform 250ms;
-              transition: transform 250ms;
+    .is-scaled & {
+      -webkit-transition: -webkit-#{$tooltip-backward-transition}, $tooltip-default-transition;
+              transition: $tooltip-backward-transition, $tooltip-default-transition;
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
+            border-color: rgba($tooltip-color, $tooltip-color-opacity-hover);
+                   color: rgba($tooltip-color, $tooltip-color-opacity-hover);
     }
   }
 

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

@@ -1,30 +1,46 @@
-$font-family-sans:        'jaf-bernino-sans', 'Open Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-$font-family-serif:       'freight-text-pro', 'Merriweather', Georgia,Cambria, "Times New Roman", Times,serif;
-$font-family-mono:        Menlo, Monaco, Consolas, "Courier New", "Courier", monospace;
-
-$font-family-base:        $font-family-sans;
-$font-size-base:          14px;
-$line-height-base:        1.428571429; // 20/14
-//$line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
-
-$active-color:       #57AD68;
-
-$debugger:           false;
-
-$menu-height:        45px;
-$menu-tone:          #333;
-$menu-factor:        5%;
-$menu-background:    linear-gradient(to bottom, darken($menu-tone,$menu-factor), $menu-tone) repeat scroll 0 0 $menu-tone;
-$menu-shadow:        1px 2px 3px -2px #222;
-$menu-border-color:  darken($menu-tone,$menu-factor);
-$menu-border:        1px solid $menu-border-color;
-$menu-border-radius: 5px;
-$menu-color:         #FFFFFF;
-$menu-color-active:  #1ABF89;
-$menu-caret-size:    8px;
-
-$tooltip-size:       32px;
-
-// Legacy
-$serif: $font-family-serif;
-$sans:  $font-family-sans;
+$font-family-sans:              'jaf-bernino-sans', 'Open Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+$font-family-serif:             'freight-text-pro', 'Merriweather', Georgia,Cambria, "Times New Roman", Times,serif;
+$font-family-mono:              Menlo, Monaco, Consolas, "Courier New", "Courier", monospace;
+
+$font-family-base:              $font-family-sans;
+$font-size-base:                14px;
+$line-height-base:              1.428571429; // 20/14
+
+$active-color:                  #5BD974;
+
+$menu-tone:                     #333;
+$menu-factor:                   5%;
+$menu-background:               linear-gradient(to bottom, darken($menu-tone,$menu-factor), $menu-tone) repeat scroll 0 0 $menu-tone;
+$menu-shadow:                   1px 2px 3px -2px #222;
+$menu-border-width:             1px;
+$menu-border-color:             darken($menu-tone,$menu-factor);
+$menu-border-radius:            5px;
+$menu-border:                   $menu-border-width solid $menu-border-color;
+$menu-color:                    #FFFFFF;
+$menu-color-active:             $active-color;
+$menu-caret-size:               8px;
+
+$menu-height:                   45px;
+$menu-button-height:            $menu-height - ($menu-border-width * 2);
+
+$tooltip-color:                 black;
+$tooltip-color-opacity:         0.44;
+$tooltip-color-opacity-hover:   0.9;
+$tooltip-background-opacity:    0;
+$tooltip-border-width:          1px;
+$tooltip-border-radius:         999em;
+
+$tooltip-button-spacing:        9px;
+$tooltip-menu-spacing:          22px;
+
+$tooltip-items:                 3;
+$tooltip-size:                  32px;
+$tooltip-line-height:           $tooltip-size;
+
+// Add 1px on expanded tooltip to avoid colapsed buttons in FF
+$tooltip-size-expanded:         1 + ($tooltip-size + $tooltip-menu-spacing) + (($tooltip-size + $tooltip-button-spacing) * $tooltip-items);
+$tooltip-default-transition:    100ms border-color, 100ms color;
+$tooltip-forward-transition:    transform 100ms;
+$tooltip-backward-transition:   transform 250ms;
+
+$debugger:                      true;

data/bower.json

@@ -1,10 +1,48 @@
 {
   "name" : "dante",
-  "version" : "0.0.1",
-  "main" : "dante.js",
-  "dependencies" : {
+  "description": "Just another Medium editor clone.",
+  "homepage": "michelson.github.io/Dante/",
+  "version" : "0.0.6",
+  "keywords": [
+    "css",
+    "sass",
+    "js",
+    "coffeescript",
+    "medium",
+    "editor",
+    "web",
+    "wysiwyg"
+  ],
+  "authors": [
+    { "name": "Miguel Michelson", "homepage": "https://github.com/michelson" },
+    { "name": "Cristian Ferrari", "homepage": "https://github.com/cristianferrarig" }
+  ],
+  "main": [
+    "app/**/*",
+    "source/assets/**/*",
+    "build/assets/images/dante/**/*",
+    "build/assets/fonts/dante/**/*",
+    "build/assets/stylesheets/dante/**/*",
+    "build/assets/javascripts/dante/editor.js"
+  ],
+  "ignore": [
+    ".gitignore",
+    ".travis.yml",
+    ".ruby-version",
+    "config.*",
+    "dante-editor.gemspec",
+    "Gemfile",
+    "Gemfile.lock",
+    "Procfile",
+    "rakefile",
+    "ROADMAP.md",
+    "TODO.md",
+    "lib",
+    "source"
+  ],
+  "dependencies": {
     "jquery": "*",
     "underscore" : "*",
-    "sanitize.js" : "*",
+    "sanitize.js" : "*"
   }
-}
+}

data/icons/dante.json

@@ -0,0 +1,143 @@
+{
+	"selection": [
+		{
+			"order": 4,
+			"id": 3,
+			"name": "video",
+			"prevSize": 16,
+			"code": 58880,
+			"tempChar": ""
+		},
+		{
+			"order": 3,
+			"id": 2,
+			"name": "image",
+			"prevSize": 16,
+			"code": 58881,
+			"tempChar": ""
+		},
+		{
+			"order": 2,
+			"id": 1,
+			"name": "plus",
+			"prevSize": 16,
+			"code": 58882,
+			"tempChar": ""
+		},
+		{
+			"order": 1,
+			"id": 0,
+			"name": "embed",
+			"prevSize": 16,
+			"code": 58883,
+			"tempChar": ""
+		}
+	],
+	"metadata": {
+		"name": "Untitled Set",
+		"importSize": 16,
+		"iconsHash": -548828287
+	},
+	"height": 1024,
+	"prevSize": 16,
+	"icons": [
+		{
+			"paths": [
+				"M256 200.441v623.174c0 70.118 47.316 95.291 105.683 55.222l428.634-294.258c58.622-40.244 58.367-105.034 0-145.103l-428.634-294.258c-58.622-40.244-105.683-15.345-105.683 55.222zM320 193.336l426.195 293.488c30.527 20.25 29.832 31 0 51.070l-426.195 295.039v-639.598z"
+			],
+			"attrs": [
+				{
+					"visibility": false
+				}
+			],
+			"grid": 16,
+			"tags": [
+				"video"
+			],
+			"defaultCode": 58880
+		},
+		{
+			"paths": [
+				"M294.4 192l0.489-2.446c13.868-69.342 82.599-125.554 152.977-125.554h128.267c70.619 0 139.014 55.74 152.977 125.554l0.489 2.446h166.78c70.483 0 127.62 57.611 127.62 127.489v449.022c0 70.41-57.249 127.489-127.62 127.489h-768.76c-70.483 0-127.62-57.611-127.62-127.489v-449.022c0-70.41 57.249-127.489 127.62-127.489h166.78zM347.123 256h-218.685c-35.641 0-64.438 28.583-64.438 63.843v448.314c0 35.279 28.85 63.843 64.438 63.843h767.124c35.641 0 64.438-28.583 64.438-63.843v-448.314c0-35.279-28.85-63.843-64.438-63.843h-218.816l-13.864-65.375c-7.263-34.25-41.874-62.625-77.145-62.625h-147.627c-35.433 0-69.805 28.038-77.134 62.625l-13.853 65.375zM320 512c0 105.823 85.961 192 192 192 105.823 0 192-85.961 192-192 0-105.823-85.961-192-192-192-105.823 0-192 85.961-192 192zM384 512c0-70.692 56.815-128 128-128 70.692 0 128 56.815 128 128 0 70.692-56.815 128-128 128-70.692 0-128-56.815-128-128z"
+			],
+			"attrs": [
+				{
+					"visibility": false
+				}
+			],
+			"grid": 16,
+			"tags": [
+				"image"
+			],
+			"defaultCode": 58881
+		},
+		{
+			"paths": [
+				"M544 544v375.294c0 17.673-14.327 32-32 32s-32-14.327-32-32v-375.294h-375.294c-17.673 0-32-14.327-32-32s14.327-32 32-32h375.294v-375.294c0-17.673 14.327-32 32-32s32 14.327 32 32v375.294h375.294c17.673 0 32 14.327 32 32s-14.327 32-32 32h-375.294z"
+			],
+			"attrs": [
+				{
+					"visibility": false
+				}
+			],
+			"grid": 16,
+			"tags": [
+				"plus"
+			],
+			"defaultCode": 58882
+		},
+		{
+			"paths": [
+				"M882.24 510.502l-235.855-234.241c-12.497-12.411-12.497-32.534 0-44.945s32.758-12.411 45.255 0l253.704 251.968c1.872 1.201 3.645 2.616 5.284 4.244 12.497 12.411 12.497 32.534 0 44.945l-257.992 256.226c-12.497 12.411-32.758 12.411-45.255 0s-12.497-32.534 0-44.945l234.859-233.252zM67.842 498.771c-6.562 12.128-4.719 27.599 5.53 37.848 2.863 2.863 6.133 5.070 9.624 6.621l249.364 249.364c12.497 12.497 32.758 12.497 45.255 0s12.497-32.758 0-45.255l-234.859-234.859 233.863-233.863c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0l-251.712 251.712c-1.872 1.209-3.645 2.634-5.284 4.273-2.805 2.805-4.981 6.002-6.527 9.414v0 0z"
+			],
+			"attrs": [
+				{
+					"visibility": false
+				}
+			],
+			"grid": 16,
+			"tags": [
+				"embed"
+			],
+			"defaultCode": 58883
+		}
+	],
+	"preferences": {
+		"fontPref": {
+			"prefix": "icon-",
+			"metadata": {
+				"fontFamily": "icomoon"
+			},
+			"showGlyphs": true,
+			"metrics": {
+				"emSize": 1024,
+				"baseline": 6.25,
+				"whitespace": 50
+			},
+			"resetPoint": 58880,
+			"showQuickUse": true,
+			"quickUsageToken": false,
+			"showMetrics": true,
+			"showMetadata": false
+		},
+		"imagePref": {
+			"color": 0,
+			"height": 32,
+			"columns": 16,
+			"margin": 16,
+			"png": false,
+			"sprites": true
+		},
+		"historySize": 100,
+		"showCodes": true,
+		"gridSize": 16,
+		"showLiga": false,
+		"showGrid": true,
+		"showGlyphs": true,
+		"showQuickUse": true,
+		"showQuickUse2": true,
+		"showSVGs": true,
+		"search": ""
+	},
+	"IcoMoonType": "icon-set"
+}

data/icons/embed.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
+    <title>code</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Group" sketch:type="MSLayerGroup" transform="translate(-144.000000, -8.000000)">
+            <rect id="Rectangle-24" stroke="#979797" sketch:type="MSShapeGroup" x="136" y="0" width="32" height="32" rx="40"></rect>
+            <path d="M157.784994,15.9766001 L154.099753,12.3165824 C153.904491,12.1226567 153.904491,11.8082411 154.099753,11.6143154 C154.295015,11.4203897 154.611598,11.4203897 154.80686,11.6143154 L158.77099,15.5513125 C158.800234,15.5700781 158.827937,15.5921813 158.853553,15.6176219 C159.048816,15.8115476 159.048816,16.1259632 158.853553,16.3198889 L154.822425,20.3234269 C154.627162,20.5173525 154.31058,20.5173525 154.115318,20.3234269 C153.920056,20.1295012 153.920056,19.8150855 154.115318,19.6211598 L157.784994,15.9766001 L157.784994,15.9766001 Z M145.060034,15.7933034 C144.957502,15.9827992 144.986306,16.2245417 145.146447,16.3846823 C145.191179,16.4294143 145.242278,16.4638988 145.296826,16.4881358 L149.19314,20.3844492 C149.388402,20.5797114 149.704985,20.5797114 149.900247,20.3844492 C150.095509,20.1891871 150.095509,19.8726046 149.900247,19.6773425 L146.23057,16.0076657 L149.884682,12.3535534 C150.079944,12.1582912 150.079944,11.8417088 149.884682,11.6464466 C149.68942,11.4511845 149.372838,11.4511845 149.177575,11.6464466 L145.244575,15.5794472 C145.215331,15.5983422 145.187627,15.6205976 145.162011,15.6462136 C145.11818,15.6900451 145.084187,15.7399899 145.060034,15.7933034 L145.060034,15.7933034 L145.060034,15.7933034 Z" id="Line" fill="#000000" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

data/icons/image.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
+    <title>camera</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Group" sketch:type="MSLayerGroup" transform="translate(-62.000000, -8.000000)">
+            <rect id="Rectangle-23" stroke="#979797" sketch:type="MSShapeGroup" x="54" y="0" width="32" height="32" rx="40"></rect>
+            <path d="M66.6,11 L63.9940603,11 C62.8945138,11 62,11.8918564 62,12.992017 L62,20.007983 C62,21.0998238 62.8927712,22 63.9940603,22 L76.0059397,22 C77.1054862,22 78,21.1081436 78,20.007983 L78,12.992017 C78,11.9001762 77.1072288,11 76.0059397,11 L73.4,11 L73.3923564,10.9617818 C73.1741867,9.87093353 72.1055038,9 71.0020869,9 L68.9979131,9 C67.8982606,9 66.8243361,9.87831961 66.6076436,10.9617818 L66.6,11 Z M67.4237976,12 L64.0068455,12 C63.4499488,12 63,12.446616 63,12.9975446 L63,20.0024554 C63,20.5536886 63.4507801,21 64.0068455,21 L75.9931545,21 C76.5500512,21 77,20.553384 77,20.0024554 L77,12.9975446 C77,12.4463114 76.5492199,12 75.9931545,12 L72.5741578,12 L72.3575338,10.9785101 C72.2440449,10.4433532 71.7032593,10 71.1521466,10 L68.8454731,10 C68.2918258,10 67.7547637,10.4380939 67.6402501,10.9785101 L67.4237976,12 Z M67,16 C67,14.3431458 68.3465171,13 70,13 C71.6568542,13 73,14.3465171 73,16 C73,17.6568542 71.6534829,19 70,19 C68.3431458,19 67,17.6534829 67,16 Z M68,16 C68,14.8954305 68.8877296,14 70,14 C71.1045695,14 72,14.8877296 72,16 C72,17.1045695 71.1122704,18 70,18 C68.8954305,18 68,17.1122704 68,16 Z" id="Rectangle-22" fill="#000000" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

data/icons/plus.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
+    <title>more</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Group" sketch:type="MSLayerGroup" transform="translate(-8.000000, -8.000000)">
+            <rect id="Rectangle-23" stroke="#979797" sketch:type="MSShapeGroup" x="0" y="0" width="32" height="32" rx="40"></rect>
+            <path d="M16.5,16.5 L16.5,22.363961 C16.5,22.6401034 16.2761424,22.863961 16,22.863961 C15.7238576,22.863961 15.5,22.6401034 15.5,22.363961 L15.5,16.5 L9.63603897,16.5 C9.35989659,16.5 9.13603897,16.2761424 9.13603897,16 C9.13603897,15.7238576 9.35989659,15.5 9.63603897,15.5 L15.5,15.5 L15.5,9.63603897 C15.5,9.35989659 15.7238576,9.13603897 16,9.13603897 C16.2761424,9.13603897 16.5,9.35989659 16.5,9.63603897 L16.5,15.5 L22.363961,15.5 C22.6401034,15.5 22.863961,15.7238576 22.863961,16 C22.863961,16.2761424 22.6401034,16.5 22.363961,16.5 L16.5,16.5 L16.5,16.5 Z" id="Line" fill="#000000" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

data/icons/video.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2 (9961) - http://www.bohemiancoding.com/sketch -->
+    <title>media</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Group" sketch:type="MSLayerGroup" transform="translate(-103.000000, -8.000000)">
+            <rect id="Rectangle-23" stroke="#979797" sketch:type="MSShapeGroup" x="95" y="0" width="32" height="32" rx="40"></rect>
+            <path d="M107,11.1318944 C107,10.0292777 107.735324,9.64023121 108.651297,10.2690478 L115.348703,14.8668273 C116.260689,15.492907 116.264676,16.5052457 115.348703,17.1340624 L108.651297,21.7318418 C107.739311,22.3579215 107,21.9645938 107,20.8689953 L107,11.1318944 Z M108,11.020874 L114.659302,15.6066284 C115.136292,15.9230347 115.125427,16.0910034 114.659302,16.404602 L108,21.0145874 L108,11.020874 Z" id="Rectangle-20" fill="#000000" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

data/lib/dante-editor/version.rb

@@ -1,5 +1,5 @@
 require "dante-editor/version"
 
 module DanteEditor
-  VERSION = "0.0.5"
+  VERSION = "0.0.6"
 end

data/source/assets/stylesheets/_layout.scss

@@ -0,0 +1,51 @@
+$color-brand: #1abf89;
+$gutter: 30px;
+
+#header {
+  display: block;
+  z-index: 500;
+  width: 100%;
+  font-size: 14px;
+  color: rgba(0,0,0,0.3);
+  font-family: "jaf-bernino-sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
+  letter-spacing: -0.02em;
+  font-weight: 400;
+  font-style: normal;
+  box-sizing: border-box;
+  -webkit-transition: 200ms background-color,200ms color;
+  transition: 200ms background-color,200ms color;
+  position: fixed;
+  top: 0;
+  height: 65px;
+  background: rgba(255,255,255,0.97);
+  box-shadow: 0 0 1px rgba(0,0,0,0.15);
+}
+
+article {
+  margin-top: 140px;
+}
+
+.logo {
+  & {
+    display: inline-block;
+  }
+  img {
+    margin: 22px 14px 22px 20px;
+  }
+  span {
+    vertical-align: top;
+    border-left: 1px solid rgba(0,0,0,0.15);
+    padding: 5px 14px;
+    margin: 20px 0;
+    display: inline-block;
+  }
+}
+
+.github {
+  & {
+    float: right;
+    line-height: 0;
+    margin-top: 19px;
+    margin-right: 20px;
+  }
+}

data/source/assets/stylesheets/all.css.scss

@@ -2,61 +2,4 @@
 
 @import "scaffold";
 @import "tooltips";
-
-$color-brand: #1abf89;
-$gutter: 30px;
-
-#header {
-  display: block;
-  z-index: 500;
-  width: 100%;
-  font-size: 14px;
-  color: rgba(0,0,0,0.3);
-  font-family: "jaf-bernino-sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
-  letter-spacing: -0.02em;
-  font-weight: 400;
-  font-style: normal;
-  box-sizing: border-box;
-  -webkit-transition: 200ms background-color,200ms color;
-  transition: 200ms background-color,200ms color;
-  position: fixed;
-  top: 0;
-  height: 65px;
-  background: rgba(255,255,255,0.97);
-  box-shadow: 0 0 1px rgba(0,0,0,0.15);
-}
-
-article {
-  margin-top: 140px;
-}
-
-.logo {
-  & {
-    display: inline-block;
-  }
-  img {
-    margin: 22px 14px 22px 20px;
-  }
-  span {
-    vertical-align: top;
-    border-left: 1px solid rgba(0,0,0,0.15);
-    padding: 5px 14px;
-    margin: 20px 0;
-    display: inline-block;
-  }
-}
-
-.github {
-  & {
-    float: right;
-    font-size: 32px;
-    color: $color-brand;
-    line-height: 0;
-    margin-top: 19px;
-    margin-right: 24px;
-  }
-  i {
-    position: relative;
-    top: -2px;
-  }
-}
+@import "layout";

data/source/layouts/layout.erb

@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <title><%= current_page.data.title || "The Middleman" %></title>
-    <%= stylesheet_link_tag "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" %>
     <%= stylesheet_link_tag "normalize", "all", "editor" %>
     <%= javascript_include_tag  "deps", "editor" %>
   </head>
@@ -16,7 +15,9 @@
         <img src="assets/images/dante-editor-logo.png" alt="dante editor" height="21" >
         <span>Dante Editor</span>
       </div>
-      <a class="github tooltip-left" data-tooltip="Fork me on github" target="_blank" href="https://github.com/michelson/dante"><i class="fa fa-github"></i></a>
+      <a class="github tooltip-left" data-tooltip="Fork me on github" target="_blank" href="https://github.com/michelson/dante">
+        <img src="assets/images/github-logo.png" alt="Fork me on github" height="28" >
+      </a>
     </div>
 
     <%= yield %>

data/source/layouts/spec.html.erb

@@ -5,7 +5,6 @@
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <title>Dante Wysiwyg Specs</title>
     <link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
-    <%= stylesheet_link_tag "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" %>
     <%= stylesheet_link_tag "normalize", "all", "editor" %>
     <%= javascript_include_tag  "deps", "editor" %>
   </head>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dante-editor
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.6
 platform: ruby
 authors:
 - Miguel Michelson
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-12-12 00:00:00.000000000 Z
+date: 2014-12-15 00:00:00.000000000 Z
 dependencies: []
 description: dante-editor yet another Medium editor clone.
 email:
@@ -28,6 +28,10 @@ files:
 - README.md
 - ROADMAP.md
 - TODO.md
+- app/assets/fonts/dante.eot
+- app/assets/fonts/dante.svg
+- app/assets/fonts/dante.ttf
+- app/assets/fonts/dante.woff
 - app/assets/fonts/fontello.eot
 - app/assets/fonts/fontello.svg
 - app/assets/fonts/fontello.ttf
@@ -61,12 +65,18 @@ files:
 - config.rb
 - config.ru
 - dante-editor.gemspec
+- icons/dante.json
+- icons/embed.svg
+- icons/image.svg
+- icons/plus.svg
+- icons/video.svg
 - lib/dante-editor.rb
 - lib/dante-editor/rails.rb
 - lib/dante-editor/version.rb
 - license.md
 - rakefile
 - source/assets/images/dante-editor-logo.png
+- source/assets/images/github-logo.png
 - source/assets/javascripts/all.js
 - source/assets/javascripts/deps.js
 - source/assets/javascripts/editor.js
@@ -74,6 +84,7 @@ files:
 - source/assets/javascripts/specs/cleaner.js.coffee
 - source/assets/javascripts/specs/dante_view.js.coffee
 - source/assets/javascripts/specs/editor.js.coffee
+- source/assets/stylesheets/_layout.scss
 - source/assets/stylesheets/_scaffold.scss
 - source/assets/stylesheets/_tooltips.scss
 - source/assets/stylesheets/all.css.scss