mercury-rails 0.1.1 → 0.1.2

data/app/assets/javascripts/mercury/toolbar.button_group.js.coffee

@@ -8,7 +8,7 @@ class @Mercury.Toolbar.ButtonGroup
 
 
   build: ->
-    @element = $('<div>', {class: "mercury-button-group mercury-#{@name}-group"})
+    @element = jQuery('<div>', {class: "mercury-button-group mercury-#{@name}-group"})
     if @options._context || @options._regions
       @element.addClass('disabled')
 
@@ -17,7 +17,7 @@ class @Mercury.Toolbar.ButtonGroup
     Mercury.bind 'region:update', (event, options) =>
       context = Mercury.Toolbar.ButtonGroup.contexts[@name]
       if context
-        if options.region && $.type(options.region.currentElement) == 'function'
+        if options.region && jQuery.type(options.region.currentElement) == 'function'
           element = options.region.currentElement()
           if element.length && context.call(@, element, options.region.element)
             @element.removeClass('disabled')

data/app/assets/javascripts/mercury/toolbar.expander.js.coffee

@@ -9,8 +9,8 @@ class @Mercury.Toolbar.Expander extends Mercury.Palette
 
   build: ->
     @container.css({whiteSpace: 'normal'})
-    @trigger = $('<div>', {class: 'mercury-toolbar-expander'}).appendTo($(@options.appendTo).get(0) ? 'body')
-    @element = $('<div>', {class: "mercury-palette mercury-expander mercury-#{@name}-expander", style: 'display:none'})
+    @trigger = jQuery('<div>', {class: 'mercury-toolbar-expander'}).appendTo(jQuery(@options.appendTo).get(0) ? 'body')
+    @element = jQuery('<div>', {class: "mercury-palette mercury-expander mercury-#{@name}-expander", style: 'display:none'})
     @windowResize()
 
 
@@ -24,20 +24,20 @@ class @Mercury.Toolbar.Expander extends Mercury.Palette
       event.stopPropagation()
       hiddenButtons = []
       for button in @container.find('.mercury-button')
-        button = $(button)
+        button = jQuery(button)
         hiddenButtons.push(button.data('expander')) if button.position().top > 5
 
       @loadContent(hiddenButtons.join(''))
       @toggle()
 
     @element.click (event) =>
-      buttonName = $(event.target).closest('[data-button]').data('button')
+      buttonName = jQuery(event.target).closest('[data-button]').data('button')
       button = @container.find(".mercury-#{buttonName}-button")
       button.click()
 
 
   windowResize: ->
-    if @containerWidth > $(window).width() then @trigger.show() else @trigger.hide()
+    if @containerWidth > jQuery(window).width() then @trigger.show() else @trigger.hide()
     @hide()
 
 
@@ -46,11 +46,11 @@ class @Mercury.Toolbar.Expander extends Mercury.Palette
     position = @trigger.offset()
     width = @element.width()
 
-    position.left = position.left - width + @trigger.width() if position.left + width > $(window).width()
+    position.left = position.left - width + @trigger.width() if position.left + width > jQuery(window).width()
 
     @element.css {
-      top: position.top + @trigger.height(),
-      left: position.left,
-      display: if keepVisible then 'block' else 'none',
+      top: position.top + @trigger.height()
+      left: position.left
+      display: if keepVisible then 'block' else 'none'
       visibility: 'visible'
     }

data/app/assets/javascripts/mercury/toolbar.js.coffee

@@ -6,16 +6,16 @@ class @Mercury.Toolbar
 
 
   build: ->
-    @element = $('<div>', {class: 'mercury-toolbar-container', style: 'width:10000px'})
-    @element.appendTo($(@options.appendTo).get(0) ? 'body')
+    @element = jQuery('<div>', {class: 'mercury-toolbar-container', style: 'width:10000px'})
+    @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
 
-    for toolbarName, buttons of Mercury.config.toolbars
+    for own toolbarName, buttons of Mercury.config.toolbars
       continue if buttons._custom
-      toolbar = $('<div>', {class: "mercury-toolbar mercury-#{toolbarName}-toolbar"}).appendTo(@element)
+      toolbar = jQuery('<div>', {class: "mercury-toolbar mercury-#{toolbarName}-toolbar"}).appendTo(@element)
       toolbar.attr('data-regions', buttons._regions) if buttons._regions
-      container = $('<div>', {class: 'mercury-toolbar-button-container'}).appendTo(toolbar)
+      container = jQuery('<div>', {class: 'mercury-toolbar-button-container'}).appendTo(toolbar)
 
-      for buttonName, options of buttons
+      for own buttonName, options of buttons
         continue if buttonName == '_regions'
         button = @buildButton(buttonName, options)
         button.appendTo(container) if button
@@ -31,21 +31,20 @@ class @Mercury.Toolbar
 
   buildButton: (name, options) ->
     return false if name[0] == '_'
-    switch $.type(options)
-
+    switch jQuery.type(options)
       when 'array' # button
         [title, summary, handled] = options
         new Mercury.Toolbar.Button(name, title, summary, handled, {appendDialogsTo: @element})
 
       when 'object' # button group
         group = new Mercury.Toolbar.ButtonGroup(name, options)
-        for a, o of options
-          button = @buildButton(a, o)
+        for own action, opts of options
+          button = @buildButton(action, opts)
           button.appendTo(group) if button
         group
 
       when 'string' # separator
-        $('<hr>', {class: "mercury-#{if options == '-' then 'line-separator' else 'separator'}"})
+        jQuery('<hr>', {class: "mercury-#{if options == '-' then 'line-separator' else 'separator'}"})
 
       else throw "Unknown button structure -- please provide an array, object, or string for #{name}."
 
@@ -53,13 +52,13 @@ class @Mercury.Toolbar
   bindEvents: ->
     Mercury.bind 'region:focused', (event, options) =>
       for toolbar in @element.find(".mercury-toolbar")
-        toolbar = $(toolbar)
+        toolbar = jQuery(toolbar)
         if regions = toolbar.data('regions')
           toolbar.removeClass('disabled') if regions.split(',').indexOf(options.region.type) > -1
 
     Mercury.bind 'region:blurred', (event, options) =>
       for toolbar in @element.find(".mercury-toolbar")
-        toolbar = $(toolbar)
+        toolbar = jQuery(toolbar)
         if regions = toolbar.data('regions')
           toolbar.addClass('disabled') if regions.split(',').indexOf(options.region.type) > -1
 

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

@@ -2,10 +2,10 @@
   Mercury.tooltip.show(forElement, content, options)
   return Mercury.tooltip
 
-$.extend Mercury.tooltip, {
+jQuery.extend Mercury.tooltip, {
 
   show: (@forElement, @content, @options = {}) ->
-    @document = $(@forElement.get(0).ownerDocument)
+    @document = jQuery(@forElement.get(0).ownerDocument)
     @initialize()
     if @visible then @update() else @appear()
 
@@ -18,8 +18,8 @@ $.extend Mercury.tooltip, {
 
 
   build: ->
-    @element = $('<div>', {class: 'mercury-tooltip'})
-    @element.appendTo($(@options.appendTo).get(0) ? 'body')
+    @element = jQuery('<div>', {class: 'mercury-tooltip'})
+    @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
 
 
   bindEvents: ->
@@ -47,14 +47,14 @@ $.extend Mercury.tooltip, {
     offset = @forElement.offset()
     width = @element.width()
 
-    top = offset.top + (Mercury.displayRect.top - $(@document).scrollTop()) + @forElement.outerHeight()
-    left = offset.left - $(@document).scrollLeft()
+    top = offset.top + (Mercury.displayRect.top - jQuery(@document).scrollTop()) + @forElement.outerHeight()
+    left = offset.left - jQuery(@document).scrollLeft()
 
     left = left - (left + width + 25) - Mercury.displayRect.width if (left + width + 25) > Mercury.displayRect.width
     left = if left <= 0 then 0 else left
 
     @element.css {
-      top: top,
+      top: top
       left: left
     }
 

data/app/assets/javascripts/mercury/uploader.js.coffee

@@ -2,7 +2,7 @@
   Mercury.uploader.show(file, options)
   return Mercury.uploader
 
-$.extend Mercury.uploader, {
+jQuery.extend Mercury.uploader, {
 
   show: (file, @options = {}) ->
     @file = new Mercury.uploader.File(file)
@@ -37,15 +37,15 @@ $.extend Mercury.uploader, {
 
 
   build: ->
-    @element = $('<div>', {class: 'mercury-uploader', style: 'display:none'})
+    @element = jQuery('<div>', {class: 'mercury-uploader', style: 'display:none'})
     @element.append('<div class="mercury-uploader-preview"><b><img/></b></div>')
     @element.append('<div class="mercury-uploader-details"></div>')
     @element.append('<div class="mercury-uploader-progress"><span>Processing...</span><div class="mercury-uploader-indicator"><div><b>0%</b></div></div></div>')
 
-    @overlay = $('<div>', {class: 'mercury-uploader-overlay', style: 'display:none'})
+    @overlay = jQuery('<div>', {class: 'mercury-uploader-overlay', style: 'display:none'})
 
-    @element.appendTo($(@options.appendTo).get(0) ? 'body')
-    @overlay.appendTo($(@options.appendTo).get(0) ? 'body')
+    @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
+    @overlay.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
 
 
   bindEvents: ->
@@ -65,8 +65,8 @@ $.extend Mercury.uploader, {
 
 
   position: ->
-    viewportWidth = $(window).width()
-    viewportHeight = $(window).height()
+    viewportWidth = jQuery(window).width()
+    viewportHeight = jQuery(window).height()
 
     width = @element.outerWidth()
     height = @element.outerHeight()
@@ -84,17 +84,17 @@ $.extend Mercury.uploader, {
 
   loadImage: ->
     @file.readAsDataURL (result) =>
-      @element.find('.mercury-uploader-preview b').html($('<img>', {src: result}))
+      @element.find('.mercury-uploader-preview b').html(jQuery('<img>', {src: result}))
       @upload()
 
 
   upload: ->
     xhr = new XMLHttpRequest
-    $.each ['onloadstart', 'onprogress', 'onload', 'onabort', 'onerror'], (index, eventName) =>
+    jQuery.each ['onloadstart', 'onprogress', 'onload', 'onabort', 'onerror'], (index, eventName) =>
       xhr.upload[eventName] = (event) => @uploaderEvents[eventName].call(@, event)
     xhr.onload = (event) =>
       try
-        response = $.evalJSON(event.target.responseText)
+        response = jQuery.evalJSON(event.target.responseText)
         Mercury.trigger('action', {action: 'insertImage', value: {src: response.url}})
       catch error
         @updateStatus('Unable to process response')
@@ -143,7 +143,7 @@ $.extend Mercury.uploader, {
     @updateStatus('Processing...',)
 
 
-  uploaderEvents: {
+  uploaderEvents:
     onloadstart: -> @updateStatus('Uploading...')
 
     onprogress: (event) -> @updateStatus('Uploading...', event.loaded)
@@ -159,7 +159,6 @@ $.extend Mercury.uploader, {
     onerror: ->
       @updateStatus('Error: Unable to upload the file')
       @hide(1)
-  }
 }
 
 
@@ -208,6 +207,6 @@ class Mercury.uploader.MultiPartPost
 
   buildBody: ->
     boundary = '--' + @boundary
-    for name, value of @formInputs
+    for own name, value of @formInputs
       @body += "#{boundary}\r\nContent-Disposition: form-data; name=\"#{name}\"\r\n\r\n#{unescape(encodeURIComponent(value))}\r\n"
     @body += "#{boundary}\r\nContent-Disposition: form-data; name=\"#{@inputName}\"; filename=\"#{@file.name}\"\r\nContent-Type: #{@file.type}\r\nContent-Transfer-Encoding: binary\r\n\r\n#{@contents}\r\n#{boundary}--"

data/app/assets/javascripts/mercury_loader.js

@@ -0,0 +1,98 @@
+/*!
+ * Mercury Editor is a Coffeescript and jQuery based WYSIWYG editor.  Mercury Editor utilizes the HTML5 ContentEditable
+ * spec to allow editing sections of a given page (instead of using iframes) and provides an editing experience that's as
+ * realistic as possible.  By not using iframes for editable regions it allows CSS to behave naturally.
+ *
+ * Mercury Editor was written for the future, and doesn't attempt to support legacy implementations of document editing.
+ *
+ * Currently supported browsers are
+ *   - Firefox 4+
+ *   - Chrome 10+
+ *   - Safari 5+
+ *
+ * Copyright (c) 2011 Jeremy Jackson
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+ * persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+ * Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+ * WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+ * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ *= require_self
+ */
+(function() {
+  if (!document.getElementsByTagName) return;
+
+  var head = document.getElementsByTagName("head")[0];
+  if (window == top) {
+    var style = document.createElement('style');
+    style.innerText = 'body{visibility:hidden;display:none}';
+    head.appendChild(style);
+  }
+
+  var timer;
+  function fireContentLoadedEvent() {
+    if (document.mercuryLoaded) return;
+    if (timer) window.clearTimeout(timer);
+    document.mercuryLoaded = true;
+
+    if (window == top) {
+      setTimeout(function() {
+        document.body.innerHTML = ' ';
+        for (var i = 0; i <= document.styleSheets.length - 1; i += 1) {
+          document.styleSheets[i].disabled = true
+        }
+
+        var link = document.createElement('link');
+        link.href = '/assets/mercury.css';
+        link.media = 'screen';
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        head.appendChild(link);
+
+        var script = document.createElement('script');
+        script.src = '/assets/mercury.js';
+        script.type = 'text/javascript';
+        head.appendChild(script);
+        script.onload = function() {
+          document.body.style.visibility = 'visible';
+          document.body.style.display = 'block';
+          new Mercury.PageEditor()
+        }
+      }, 1);
+    } else if (top.Mercury) {
+      window.Mercury = top.Mercury;
+      Mercury.trigger('initialize:frame');
+    }
+  }
+
+  function checkReadyState() {
+    if (document.readyState === 'complete') {
+      document.stopObserving('readystatechange', checkReadyState);
+      fireContentLoadedEvent();
+    }
+  }
+
+  function pollDoScroll() {
+    try { document.documentElement.doScroll('left'); }
+    catch(e) {
+      timer = pollDoScroll.defer();
+      return;
+    }
+    fireContentLoadedEvent();
+  }
+
+  if (document.addEventListener) {
+    document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
+  } else {
+    document.observe('readystatechange', checkReadyState);
+    if (window == top) { timer = pollDoScroll.defer(); }
+  }
+})();

data/app/assets/stylesheets/mercury/modal.scss

@@ -114,10 +114,10 @@
   }
 }
 /*
- * Specific Modals (eg. htmleditor)
+ * Specific Modals (eg. htmlEditor)
  *----------------------------------------------------------------------------*/
-/* htmleditor */
-#mercury_htmleditor {
+/* htmlEditor */
+#mercury_htmlEditor {
   textarea {
     margin: 0 0 -2px 0;
     padding: 0;
@@ -143,8 +143,8 @@
     white-space: pre;
   }
 }
-/* insertcharacter */
-#mercury_insertcharacter {
+/* insertCharacter */
+#mercury_insertCharacter {
   .character {
     float: left;
     width: 20px;

data/app/assets/stylesheets/mercury/toolbar.scss

@@ -141,24 +141,22 @@
 .mercury-expander-button[data-button=undo] em             { background-image: url(/assets/mercury/toolbar/primary/undo.png) }
 .mercury-primary-toolbar .mercury-redo-button em,
 .mercury-expander-button[data-button=redo] em             { background-image: url(/assets/mercury/toolbar/primary/redo.png) }
-.mercury-primary-toolbar .mercury-insertlink-button em,
-.mercury-expander-button[data-button=insertlink] em       { background-image: url(/assets/mercury/toolbar/primary/insertlink.png) }
-.mercury-primary-toolbar .mercury-insertmedia-button em,
-.mercury-expander-button[data-button=insertmedia] em      { background-image: url(/assets/mercury/toolbar/primary/insertmedia.png) }
-.mercury-primary-toolbar .mercury-inserttable-button em,
-.mercury-expander-button[data-button=inserttable] em      { background-image: url(/assets/mercury/toolbar/primary/inserttable.png) }
-.mercury-primary-toolbar .mercury-insertcharacter-button em,
-.mercury-expander-button[data-button=insertcharacter] em  { background-image: url(/assets/mercury/toolbar/primary/insertcharacter.png) }
-.mercury-primary-toolbar .mercury-objectspanel-button em,
-.mercury-expander-button[data-button=objectspanel] em     { background-image: url(/assets/mercury/toolbar/primary/objectspanel.png) }
-.mercury-primary-toolbar .mercury-historypanel-button em,
-.mercury-expander-button[data-button=historypanel] em     { background-image: url(/assets/mercury/toolbar/primary/historypanel.png) }
-.mercury-primary-toolbar .mercury-notespanel-button em,
-.mercury-expander-button[data-button=notespanel] em       { background-image: url(/assets/mercury/toolbar/primary/notespanel.png) }
+.mercury-primary-toolbar .mercury-insertLink-button em,
+.mercury-expander-button[data-button=insertLink] em       { background-image: url(/assets/mercury/toolbar/primary/insertlink.png) }
+.mercury-primary-toolbar .mercury-insertMedia-button em,
+.mercury-expander-button[data-button=insertMedia] em      { background-image: url(/assets/mercury/toolbar/primary/insertmedia.png) }
+.mercury-primary-toolbar .mercury-insertTable-button em,
+.mercury-expander-button[data-button=insertTable] em      { background-image: url(/assets/mercury/toolbar/primary/inserttable.png) }
+.mercury-primary-toolbar .mercury-insertCharacter-button em,
+.mercury-expander-button[data-button=insertCharacter] em  { background-image: url(/assets/mercury/toolbar/primary/insertcharacter.png) }
+.mercury-primary-toolbar .mercury-objectsPanel-button em,
+.mercury-expander-button[data-button=objectsPanel] em     { background-image: url(/assets/mercury/toolbar/primary/objectspanel.png) }
+.mercury-primary-toolbar .mercury-historyPanel-button em,
+.mercury-expander-button[data-button=historyPanel] em     { background-image: url(/assets/mercury/toolbar/primary/historypanel.png) }
+.mercury-primary-toolbar .mercury-notesPanel-button em,
+.mercury-expander-button[data-button=notesPanel] em       { background-image: url(/assets/mercury/toolbar/primary/notespanel.png) }
 .mercury-primary-toolbar .mercury-todospanel-button em,
 .mercury-expander-button[data-button=todospanel] em       { background-image: url(/assets/mercury/toolbar/primary/todospanel.png) }
-.mercury-primary-toolbar .mercury-notespanel-button em,
-.mercury-expander-button[data-button=notespanel] em       { background-image: url(/assets/mercury/toolbar/primary/notespanel.png) }
 .mercury-primary-toolbar .mercury-todospanel-button em,
 .mercury-expander-button[data-button=todospanel] em       { background-image: url(/assets/mercury/toolbar/primary/todospanel.png) }
 /*
@@ -238,48 +236,48 @@
   .mercury-subscript-button.active           { background-position: -112px -18px }
   .mercury-superscript-button                { background-position: -135px 0 }
   .mercury-superscript-button.active         { background-position: -135px -18px }
-  .mercury-justifyleft-button                { background-position: -158px 0 }
-  .mercury-justifyleft-button.active         { background-position: -158px -18px }
-  .mercury-justifycenter-button              { background-position: -181px 0 }
-  .mercury-justifycenter-button.active       { background-position: -181px -18px }
-  .mercury-justifyright-button               { background-position: -203px 0 }
-  .mercury-justifyright-button.active        { background-position: -203px -18px }
-  .mercury-justifyfull-button                { background-position: -225px 0 }
-  .mercury-justifyfull-button.active         { background-position: -225px -18px }
-  .mercury-insertunorderedlist-button        { background-position: -248px 0 }
-  .mercury-insertunorderedlist-button.active { background-position: -248px -18px }
-  .mercury-insertorderedlist-button          { background-position: -271px 0 }
-  .mercury-insertorderedlist-button.active   { background-position: -271px -18px }
+  .mercury-justifyLeft-button                { background-position: -158px 0 }
+  .mercury-justifyLeft-button.active         { background-position: -158px -18px }
+  .mercury-justifyCenter-button              { background-position: -181px 0 }
+  .mercury-justifyCenter-button.active       { background-position: -181px -18px }
+  .mercury-justifyRight-button               { background-position: -203px 0 }
+  .mercury-justifyRight-button.active        { background-position: -203px -18px }
+  .mercury-justifyFull-button                { background-position: -225px 0 }
+  .mercury-justifyFull-button.active         { background-position: -225px -18px }
+  .mercury-insertUnorderedList-button        { background-position: -248px 0 }
+  .mercury-insertUnorderedList-button.active { background-position: -248px -18px }
+  .mercury-insertOrderedList-button          { background-position: -271px 0 }
+  .mercury-insertOrderedList-button.active   { background-position: -271px -18px }
   .mercury-outdent-button                    { background-position: -294px 0 }
   .mercury-outdent-button.active             { background-position: -294px -18px }
   .mercury-indent-button                     { background-position: -317px 0 }
   .mercury-indent-button.active              { background-position: -317px -18px }
-  .mercury-insertrowbefore-button            { background-position: -340px 0 }
-  .mercury-insertrowbefore-button.active     { background-position: -340px -18px }
-  .mercury-insertrowafter-button             { background-position: -363px 0 }
-  .mercury-insertrowafter-button.active      { background-position: -363px -18px }
-  .mercury-deleterow-button                  { background-position: -385px 0 }
-  .mercury-deleterow-button.active           { background-position: -385px -18px }
-  .mercury-insertcolumnbefore-button         { background-position: -407px 0 }
-  .mercury-insertcolumnbefore-button.active  { background-position: -407px -18px }
-  .mercury-insertcolumnafter-button          { background-position: -429px 0 }
-  .mercury-insertcolumnafter-button.active   { background-position: -429px -18px }
-  .mercury-deletecolumn-button               { background-position: -451px 0 }
-  .mercury-deletecolumn-button.active        { background-position: -451px -18px }
-  .mercury-increasecolspan-button            { background-position: -474px 0; width: 23px }
-  .mercury-increasecolspan-button.active     { background-position: -474px -18px }
-  .mercury-decreasecolspan-button            { background-position: -497px 0 }
-  .mercury-decreasecolspan-button.active     { background-position: -497px -18px }
-  .mercury-increaserowspan-button            { background-position: -520px 0 }
-  .mercury-increaserowspan-button.active     { background-position: -520px -18px }
-  .mercury-decreaserowspan-button            { background-position: -542px 0 }
-  .mercury-decreaserowspan-button.active     { background-position: -542px -18px }
-  .mercury-horizontalrule-button             { background-position: -564px 0 }
-  .mercury-horizontalrule-button.active      { background-position: -564px -18px }
-  .mercury-removeformatting-button           { background-position: -588px 0 }
-  .mercury-removeformatting-button.active    { background-position: -588px -18px }
-  .mercury-htmleditor-button                 { background-position: -612px 0 }
-  .mercury-htmleditor-button.active          { background-position: -612px -18px }
+  .mercury-insertRowBefore-button            { background-position: -340px 0 }
+  .mercury-insertRowBefore-button.active     { background-position: -340px -18px }
+  .mercury-insertRowAfter-button             { background-position: -363px 0 }
+  .mercury-insertRowAfter-button.active      { background-position: -363px -18px }
+  .mercury-deleteRow-button                  { background-position: -385px 0 }
+  .mercury-deleteRow-button.active           { background-position: -385px -18px }
+  .mercury-insertColumnBefore-button         { background-position: -407px 0 }
+  .mercury-insertColumnBefore-button.active  { background-position: -407px -18px }
+  .mercury-insertColumnAfter-button          { background-position: -429px 0 }
+  .mercury-insertColumnAfter-button.active   { background-position: -429px -18px }
+  .mercury-deleteColumn-button               { background-position: -451px 0 }
+  .mercury-deleteColumn-button.active        { background-position: -451px -18px }
+  .mercury-increaseColspan-button            { background-position: -474px 0; width: 23px }
+  .mercury-increaseColspan-button.active     { background-position: -474px -18px }
+  .mercury-decreaseColspan-button            { background-position: -497px 0 }
+  .mercury-decreaseColspan-button.active     { background-position: -497px -18px }
+  .mercury-increaseRowspan-button            { background-position: -520px 0 }
+  .mercury-increaseRowspan-button.active     { background-position: -520px -18px }
+  .mercury-decreaseRowspan-button            { background-position: -542px 0 }
+  .mercury-decreaseRowspan-button.active     { background-position: -542px -18px }
+  .mercury-horizontalRule-button             { background-position: -564px 0 }
+  .mercury-horizontalRule-button.active      { background-position: -564px -18px }
+  .mercury-removeFormatting-button           { background-position: -588px 0 }
+  .mercury-removeFormatting-button.active    { background-position: -588px -18px }
+  .mercury-htmlEditor-button                 { background-position: -612px 0 }
+  .mercury-htmlEditor-button.active          { background-position: -612px -18px }
 }
 /*
  * Toolbar: Markupable Region Toolbar
@@ -352,16 +350,16 @@
   .mercury-subscript-button.active           { background-position: -112px -18px }
   .mercury-superscript-button                { background-position: -135px 0 }
   .mercury-superscript-button.active         { background-position: -135px -18px }
-  .mercury-insertunorderedlist-button        { background-position: -248px 0 }
-  .mercury-insertunorderedlist-button.active { background-position: -248px -18px }
-  .mercury-insertorderedlist-button          { background-position: -271px 0 }
-  .mercury-insertorderedlist-button.active   { background-position: -271px -18px }
+  .mercury-insertUnorderedList-button        { background-position: -248px 0 }
+  .mercury-insertUnorderedList-button.active { background-position: -248px -18px }
+  .mercury-insertOrderedList-button          { background-position: -271px 0 }
+  .mercury-insertOrderedList-button.active   { background-position: -271px -18px }
   .mercury-outdent-button                    { background-position: -294px 0 }
   .mercury-outdent-button.active             { background-position: -294px -18px }
   .mercury-indent-button                     { background-position: -317px 0 }
   .mercury-indent-button.active              { background-position: -317px -18px }
-  .mercury-horizontalrule-button             { background-position: -564px 0 }
-  .mercury-horizontalrule-button.active      { background-position: -564px -18px }
+  .mercury-horizontalRule-button             { background-position: -564px 0 }
+  .mercury-horizontalRule-button.active      { background-position: -564px -18px }
 }
 /*
  * Toolbar: Snippetable Region Toolbar
@@ -408,10 +406,10 @@
     }
   }
   /* default buttons */
-  .mercury-editsnippet-button                { background-position: -24px 0 }
-  .mercury-editsnippet-button.active         { background-position: -24px -18px }
-  .mercury-removesnippet-button              { background-position: -48px 0 }
-  .mercury-removesnippet-button.active       { background-position: -48px -18px }
+  .mercury-editSnippet-button                { background-position: -24px 0 }
+  .mercury-editSnippet-button.active         { background-position: -24px -18px }
+  .mercury-removeSnippet-button              { background-position: -48px 0 }
+  .mercury-removeSnippet-button.active       { background-position: -48px -18px }
   .mercury-dragsnippet-button                { background-position: -72px 0 }
   .mercury-dragsnippet-button.active         { background-position: -72px -18px }
 }