mercury-rails 0.2.3 → 0.3.1

data/spec/javascripts/mercury/toolbar.expander_spec.js.coffee

@@ -1,5 +1,3 @@
-require '/assets/mercury.js'
-
 describe "Mercury.Toolbar.Expander", ->
 
   template 'mercury/toolbar.expander.html'

data/spec/javascripts/mercury/toolbar_spec.js.coffee

@@ -1,12 +1,10 @@
-require '/assets/mercury.js'
-
 describe "Mercury.Toolbar", ->
 
   template 'mercury/toolbar.html'
 
   beforeEach ->
     $.fx.off = true
-    ajaxSpy = spyOn($, 'ajax').andCallFake (url, options) =>
+    spyOn($, 'ajax').andCallFake (url, options) =>
       options.success('data') if options.success
 
   afterEach ->
@@ -32,36 +30,53 @@ describe "Mercury.Toolbar", ->
 
   describe "#build", ->
 
-    beforeEach ->
-      @buildButtonSpy = spyOn(Mercury.Toolbar.prototype, 'buildButton').andCallFake(=> $('<div>'))
-      @toolbar = new Mercury.Toolbar({appendTo: '#toolbar_container', visible: false})
+    describe "with a primary toolbar", ->
+
+      beforeEach ->
+        @buildButtonSpy = spyOn(Mercury.Toolbar.prototype, 'buildButton').andCallFake(=> $('<div>'))
+        @toolbar = new Mercury.Toolbar({appendTo: '#toolbar_container', visible: false})
 
-    it "builds an element", ->
-      expect($('.mercury-toolbar-container').length).toEqual(1)
+      it "builds an element", ->
+        expect($('.mercury-toolbar-container').length).toEqual(1)
 
-    it "hides the element if options.visible is false", ->
-      expect($('.mercury-toolbar-container').css('display')).toEqual('none')
+      it "hides the element if options.visible is false", ->
+        expect($('.mercury-toolbar-container').css('display')).toEqual('none')
+
+      it "can append to any element", ->
+        expect($('#toolbar_container .mercury-toolbar-container').length).toEqual(1)
 
-    it "can append to any element", ->
-      expect($('#toolbar_container .mercury-toolbar-container').length).toEqual(1)
+      it "builds out toolbar elements from the configuration", ->
+        expect($('.mercury-primary-toolbar').length).toEqual(1)
+        expect($('.mercury-editable-toolbar').length).toEqual(1)
+        expect($('.mercury-editable-toolbar').data('regions')).toEqual('editable,markupable')
 
-    it "builds out toolbar elements from the configuration", ->
-      expect($('.mercury-primary-toolbar').length).toEqual(1)
-      expect($('.mercury-editable-toolbar').length).toEqual(1)
-      expect($('.mercury-editable-toolbar').data('regions')).toEqual('editable,markupable')
+      it "builds buttons etc.", ->
+        expect(@buildButtonSpy.callCount).toBeGreaterThan(10)
 
-    it "builds buttons etc.", ->
-      expect(@buildButtonSpy.callCount).toBeGreaterThan(10)
+      it "sets it's width back to 100%", ->
+        expect(@toolbar.element.get(0).style.width).toEqual('100%')
+
+      it "disables all but the primary toolbar", ->
+        expect($('.mercury-editable-toolbar').hasClass('disabled')).toEqual(true)
+
+      it "adds an expander when white-space: nowrap (meaning the toolbar shouldn't wrap)", ->
+        expect($('.mercury-toolbar-button-container').length).toBeGreaterThan(1)
+        expect($('.mercury-toolbar-expander').length).toEqual(1)
+
+    describe "without a primary toolbar", ->
+
+      beforeEach ->
+        @primaryToolbar = Mercury.config.toolbars.primary
+        delete(Mercury.config.toolbars.primary)
+        @buildButtonSpy = spyOn(Mercury.Toolbar.prototype, 'buildButton').andCallFake(=> $('<div>'))
+        @toolbar = new Mercury.Toolbar({appendTo: '#toolbar_container', visible: false})
 
-    it "sets it's width back to 100%", ->
-      expect(@toolbar.element.get(0).style.width).toEqual('100%')
+      afterEach ->
+        Mercury.config.toolbars.primary = @primaryToolbar
 
-    it "disables all but the primary toolbar", ->
-      expect($('.mercury-editable-toolbar').hasClass('disabled')).toEqual(true)
+      it "doesn't disable the toolbars", ->
+        expect($('.mercury-editable-toolbar').hasClass('disabled')).toEqual(false)
 
-    it "adds an expander when white-space: nowrap (meaning the toolbar shouldn't wrap)", ->
-      expect($('.mercury-toolbar-button-container').length).toBeGreaterThan(1)
-      expect($('.mercury-toolbar-expander').length).toEqual(1)
 
 
   describe "#buildButton", ->
@@ -70,7 +85,7 @@ describe "Mercury.Toolbar", ->
       @toolbar = new Mercury.Toolbar({appendTo: '#test'})
 
     it "throws an exception when invalid options are passed", ->
-      expect(=> @toolbar.buildButton('foo', false)).toThrow('Unknown button structure -- please provide an array, object, or string for foo.')
+      expect(=> @toolbar.buildButton('foo', false)).toThrow('Unknown button structure -- please provide an array, object, or string for "foo".')
 
     it "returns false if the name is _custom, or _regions", ->
       expect(@toolbar.buildButton('_custom', 'foo')).toEqual(false)

data/spec/javascripts/mercury/tooltip_spec.js.coffee

@@ -1,5 +1,3 @@
-require '/assets/mercury.js'
-
 describe "Mercury.tooltip", ->
 
   template 'mercury/tooltip.html'
@@ -35,7 +33,7 @@ describe "Mercury.tooltip", ->
 
     it "gets the document from the element passed in", ->
       Mercury.tooltip.show(@forElement, 'content')
-      expect(Mercury.tooltip.document.get(0)).toEqual($(document).get(0))
+      expect(Mercury.tooltip.document).toEqual(document)
 
     it "calls initialize", ->
       Mercury.tooltip.show(@forElement, 'content')
@@ -113,13 +111,13 @@ describe "Mercury.tooltip", ->
 
     describe "document scrolling", ->
 
+      # untestable
       it "calls position if visible", ->
-        # untestable
 
     describe "element mousedown", ->
 
+      # untestable
       it "stops the event", ->
-        # untestable
 
 
   describe "#appear", ->

data/spec/javascripts/mercury/uploader_spec.js.coffee

@@ -1,5 +1,3 @@
-require '/assets/mercury.js'
-
 describe "Mercury.uploader", ->
 
   template 'mercury/uploader.html'
@@ -241,7 +239,7 @@ describe "Mercury.uploader", ->
   describe "#upload", ->
 
     # todo: test this
-    it "", ->
+    it "should build a multipart form and submit it", ->
 
 
   describe "#updateStatus", ->
@@ -256,7 +254,7 @@ describe "Mercury.uploader", ->
 
     it "updates the progress indicator width", ->
       Mercury.uploader.updateStatus('message', 512)
-      expect($('#test .mercury-uploader-indicator div').css('width')).toEqual('50%')
+      expect($('#test .mercury-uploader-indicator div').css('width')).toEqual('50px')
 
     it "updates the progress indicator value", ->
       Mercury.uploader.updateStatus('message', 512)
@@ -274,27 +272,27 @@ describe "Mercury.uploader", ->
       @setTimeoutSpy.andCallFake(=>)
       Mercury.uploader.hide(1)
       expect(@setTimeoutSpy.callCount).toEqual(1)
-      expect(@setTimeoutSpy.argsForCall[0][1]).toEqual(1000)
+      expect(@setTimeoutSpy.argsForCall[0][0]).toEqual(1000)
 
     it "hides the overlay and element", ->
-      @setTimeoutSpy.andCallFake((callback) => callback())
+      @setTimeoutSpy.andCallFake((timeout, callback) => callback())
       Mercury.uploader.hide()
       expect($('#test .mercury-uploader').css('opacity')).toEqual('0')
       expect($('#test .mercury-uploader-overlay').css('opacity')).toEqual('0')
 
     it "calls reset", ->
-      @setTimeoutSpy.andCallFake((callback) => callback())
+      @setTimeoutSpy.andCallFake((timeout, callback) => callback())
       spy = spyOn(Mercury.uploader, 'reset').andCallFake(=>)
       Mercury.uploader.hide()
       expect(spy.callCount).toEqual(1)
 
     it "sets visible to false", ->
-      @setTimeoutSpy.andCallFake((callback) => callback())
+      @setTimeoutSpy.andCallFake((timeout, callback) => callback())
       Mercury.uploader.hide()
       expect(Mercury.uploader.visible).toEqual(false)
 
     it "focuses the frame", ->
-      @setTimeoutSpy.andCallFake((callback) => callback())
+      @setTimeoutSpy.andCallFake((timeout, callback) => callback())
       spy = spyOn(Mercury, 'trigger').andCallFake(=>)
       Mercury.uploader.hide()
       expect(spy.callCount).toEqual(1)
@@ -363,11 +361,7 @@ describe "Mercury.uploader", ->
       it "updates the status to 'Successfully uploaded' and passes the total file size", ->
         @events.onload.call(Mercury.uploader)
         expect(@updateStatusSpy.callCount).toEqual(1)
-        expect(@updateStatusSpy.argsForCall[0]).toEqual(['Successfully uploaded', 1024])
-
-      it "calls hide", ->
-        @events.onload.call(Mercury.uploader)
-        expect(@hideSpy.callCount).toEqual(1)
+        expect(@updateStatusSpy.argsForCall[0]).toEqual(['Successfully uploaded...', 1024])
 
     describe ".onerror", ->
 

data/spec/javascripts/spec_helper.js

@@ -1,3 +1,4 @@
+require('/assets/mercury.js');
 
 jasmine.simulate = {
 

data/spec/javascripts/templates/mercury/page_editor.html

@@ -19,6 +19,7 @@
   <form id="form3r" action="" target="_self"></form>
   <form id="form4r" action=""></form>
 </div>
+<div id="region4" class="custom-region-class"></div>
 
 <a id="anchor1" href="#" target="_top">1</a>
 <a id="anchor2" href="#" target="_blank">2</a>

data/spec/javascripts/templates/mercury/region.html

@@ -1,2 +1,2 @@
-<div id="region">contents</div>
-<div id="region_with_snippet">contents<div class="mercury-snippet" data-snippet="snippet_1" data-version="1">snippet</div></div>
+<div id="region" data-scope="scope" data-version="1">contents</div>
+<div id="region_with_snippet">contents<div class="mercury-snippet" data-snippet="snippet_1" data-version="1">snippet</div></div>

data/vendor/assets/javascripts/mercury.js

@@ -24,16 +24,31 @@
  *
  *= require_self
  *
+ * Minimum jQuery requirements are 1.7
+ *= require mercury/dependencies/jquery-1.7
+ *
+ * You can include the Rails jQuery ujs script here to get some nicer behaviors in modals, panels and lightviews when
+ * using :remote => true within the contents rendered in them.
+ * require jquery_ujs
+ *
+ * If you want to override Mercury functionality, you can do so in a custom file that binds to the mercury:loaded event,
+ * or do so at the end of the current file (mercury.js).  There's an example that will help you get started.
+ * require mercury_overrides
+ *
  * Add all requires for the support libraries that integrate nicely with Mercury Editor.
  * require mercury/support/history
  *
  * Require Mercury Editor itself.
  *= require mercury/mercury
  *
+ * Require any localizations you wish to support
+ * Example: es.locale, or fr.locale -- regional dialects are in each language file so never en_US for instance.
+ * require mercury/locales/swedish_chef.locale
+ *
  * Add all requires for plugins that extend or change the behavior of Mercury Editor.
  * require mercury/plugins/save_as_xml/plugin.js
  */
-window.MercurySetup = {
+window.Mercury = {
 
   // # Mercury Configuration
   config: {
@@ -58,35 +73,45 @@ window.MercurySetup = {
     //
     // ### The available button types are:
     //
-    // - toggle:  toggles on or off when clicked, otherwise behaves like a button
-    // - modal:   opens a modal window, expects the action to be one of:
+    // - toggle:    toggles on or off when clicked, otherwise behaves like a button
+    // - modal:     opens a modal window, expects the action to be one of:
     //   1. a string url
     //   2. a function that returns a string url
-    // - panel:   opens a panel dialog, expects the action to be one of:
+    // - lightview: opens a lightview window (like modal, but different UI), expects the action to be one of:
     //   1. a string url
     //   2. a function that returns a string url
-    // - palette: opens a palette window, expects the action to be one of:
+    // - panel:     opens a panel dialog, expects the action to be one of:
     //   1. a string url
     //   2. a function that returns a string url
-    // - select:  opens a pulldown style window, expects the action to be one of:
+    // - palette:   opens a palette window, expects the action to be one of:
     //   1. a string url
     //   2. a function that returns a string url
-    // - context: calls a callback function, expects the action to be:
+    // - select:    opens a pulldown style window, expects the action to be one of:
+    //   1. a string url
+    //   2. a function that returns a string url
+    // - context:   calls a callback function, expects the action to be:
     //   1. a function that returns a boolean to highlight the button
     //   note: if a function isn't provided, the key will be passed to the contextHandler, in which case a default
     //         context will be used (for more info read the Contexts section below)
-    // - mode:    toggle a given mode in the editor, expects the action to be:
+    // - mode:      toggle a given mode in the editor, expects the action to be:
     //   1. a string, denoting the name of the mode
     //   note: it's assumed that when a specific mode is turned on, all other modes will be turned off, which happens
     //         automatically, thus putting the editor into a specific "state"
-    // - regions: allows buttons to be enabled/disabled based on what region type has focus, expects the action to be:
+    // - regions:   allows buttons to be enabled/disabled based on what region type has focus, expects the action to be:
     //   1. an array of region types (eg. ['editable', 'markupable'])
-    // - preload: allows some dialog views to be loaded when the button is created instead of on first open, expects:
+    // - preload:   allows some dialog views to be loaded when the button is created instead of on first open, expects:
     //   1. a boolean true / false
     //   note: this is only used by panels, selects, and palettes
     //
     // Separators are any "button" that's not an array, and are expected to be a string.  You can use two different
     // separator styles: line ('-'), and spacer (' ').
+    //
+    // ### Adding Contexts
+    //
+    // Contexts are used callback functions used for highlighting and disabling/enabling buttons and buttongroups.  When
+    // the cursor enters an element within an html region for instance we want to disable or highlight buttons based on
+    // the properties of the given node.  You can see examples of contexts in, and add your own to:
+    // `Mercury.Toolbar.Button.contexts` and `Mercury.Toolbar.ButtonGroup.contexts`
     toolbars: {
       primary: {
         save:                  ['Save', 'Save this page'],
@@ -148,8 +173,8 @@ window.MercurySetup = {
           sep:                 '-'
           },
         indent:                {
-          outdent:             ['Decrease Indentation', null],
-          indent:              ['Increase Indentation', null],
+          outdent:             ['Decrease Indentation'],
+          indent:              ['Increase Indentation'],
           sep:                 '-'
           },
         table:                 {
@@ -183,24 +208,153 @@ window.MercurySetup = {
       snippetable: {
         _custom:               true,
         actions:               {
-          editSnippet:         ['Edit Snippet Settings', null],
+          editSnippet:         ['Edit Snippet Settings'],
           sep1:                ' ',
-          removeSnippet:       ['Remove Snippet', null]
+          removeSnippet:       ['Remove Snippet']
           }
         }
       },
 
 
-    // ## Hijacking Links & Forms
+    // ## Region Options
     //
-    // Mercury will hijack links and forms that don't have a target set, or the target is set to _self and will set it
-    // to _top.  This is because the target must be set properly for Mercury to not get in the way of some
-    // functionality, like proper page loads on form submissions etc.  Mercury doesn't do this to links or forms that
-    // are within editable regions because it doesn't want to impact the html that's saved.  With that being explained,
-    // you can add classes to links or forms that you don't want this behavior added to.  Let's say you have links that
-    // open a lightbox style window, and you don't want the targets of these to be set to _top.  You can add classes to
-    // this array, and they will be ignored when the hijacking is applied.
-    nonHijackableClasses: [],
+    // You can customize some aspects of how regions are found, identified, and saved.
+    //
+    // className: Mercury identifies editable regions by a className.  This classname has to be added in your HTML in
+    // advance, and is the only real code/naming exposed in the implementation of Mercury.  To allow this to be as
+    // configurable as possible, you can set the name of the class.  When switching to preview mode, this configuration
+    // is also used to generate a class to indicate that Mercury is in preview mode by appending it with '-preview' (so
+    // by default it would be mercury-region-preview)
+    //
+    // identifier: This is used as a unique identifier for any given region (and thus should be unique to the page).
+    // By default this is the id attribute but can be changed to a data attribute should you want to use something
+    // custom instead.
+    //
+    // dataAttributes: The dataAttributes is an array of data attributes that will be serialized and returned to the
+    // server upon saving.  These attributes, when applied to a Mercury region element, will be automatically serialized
+    // and submitted with the AJAX request sent when a page is saved.  These are expected to be HTML5 data attributes,
+    // and 'data-' will automatically be prepended to each item in this directive. (ex. ['scope', 'version'])
+    regions: {
+      className: 'mercury-region',
+      identifier: 'id',
+      dataAttributes: []
+      },
+
+
+    // ## Snippet Options / Preview
+    //
+    // When a user drags a snippet onto the page they'll be prompted to enter options for the given snippet.  The server
+    // is expected to respond with a form.  Once the user submits this form, an Ajax request is sent to the server with
+    // the options provided; this preview request is expected to respond with the rendered markup for the snippet.
+    //
+    // method: The HTTP method used when submitting both the options and the preview.  We use POST by default because a
+    // snippet options form may contain large text inputs and we don't want that to be truncated when sent to the
+    // server.
+    //
+    // optionsUrl: The url that the options form will be loaded from.
+    //
+    // previewUrl: The url that the options will be submitted to, and will return the rendered snippet markup.
+    //
+    // **Note:** `:name` will be replaced with the snippet name in the urls (eg. /mercury/snippets/example/options.html)
+    snippets: {
+      method: 'POST',
+      optionsUrl: '/mercury/snippets/:name/options.html',
+      previewUrl: '/mercury/snippets/:name/preview.html'
+      },
+
+
+    // ## Image Uploading
+    //
+    // If you drag images from your desktop into regions that support it, it will be uploaded to the server and inserted
+    // into the region.  You can disable or enable this feature, the accepted mime-types, file size restrictions, and
+    // other things related to uploading.
+    //
+    // **Note:** Image uploading is only supported in some region types, and some browsers.
+    //
+    // enabled: You can set this to true, or false if you want to disable the feature entirely.
+    //
+    // allowedMimeTypes: You can restrict the types of files that can be uploaded by providing a list of allowed mime
+    // types.
+    //
+    // maxFileSize: You can restrict large files by setting the maxFileSize (in bytes).
+    //
+    // inputName: When uploading, a form is generated and submitted to the server via Ajax.  If your server would prefer
+    // a different name for how the image comes through, you can change the inputName.
+    //
+    // url: The url that the image upload will be submitted to.
+    //
+    // handler: You can use false to let Mercury handle it for you, or you can provide a handler function that can
+    // modify the response from the server.  This can be useful if your server doesn't respond the way Mercury expects.
+    // The handler function should take the response from the server and return an object that matches:
+    // `{image: {url: '[your provided url]'}`
+    uploading: {
+      enabled: true,
+      allowedMimeTypes: ['image/jpeg', 'image/gif', 'image/png'],
+      maxFileSize: 1235242880,
+      inputName: 'image[image]',
+      url: '/mercury/images',
+      handler: false
+      },
+
+
+    // ## Localization / I18n
+    //
+    // Include the .locale files you want to support when loading Mercury.  The files are always named by the language,
+    // and not the regional dialect (eg. en.locale.js) because the regional dialects are nested within the primary
+    // locale files.
+    //
+    // The client locale will be used first, and if no proper locale file is found for their language then the fallback
+    // preferredLocale configuration will be used.  If one isn't provided, and the client locale isn't included, the
+    // strings will remain untranslated.
+    //
+    // enabled: Set to false to disable, true to enable.
+    //
+    // preferredLocale: If a client doesn't support the locales you've included, this is used as a fallback.
+    localization: {
+      enabled: false,
+      preferredLocale: 'swedish_chef-BORK'
+      },
+
+
+    // ## Behaviors
+    //
+    // Behaviors are used to change the default behaviors of a given region type when a given button is clicked.  For
+    // example, you may prefer to add HR tags using an HR wrapped within a div with a classname (for styling).  You
+    // can add your own complex behaviors here and they'll be shared across all regions.
+    //
+    // If you want to add behaviors to specific region types, you can mix them into the actions property of any region
+    // type.
+    //
+    //     Mercury.Regions.Editable.actions.htmlEditor = function() {}
+    //
+    // You can see how the behavior matches up directly with the button names.  It's also important to note that the
+    // callback functions are executed within the scope of the given region, so you have access to all it's methods.
+    behaviors: {
+      //foreColor: function(selection, options) { selection.wrap('<span style="color:' + options.value.toHex() + '">', true) },
+      htmlEditor: function() { Mercury.modal('/mercury/modals/htmleditor.html', { title: 'HTML Editor', fullHeight: true, handler: 'htmlEditor' }); }
+      },
+
+
+    // ## Global Behaviors
+    //
+    // Global behaviors are much like behaviors, but are more "global".  Things like save, exit, etc. can be included
+    // here.  They'll only be called once, and execute within the scope of whatever editor is instantiated (eg.
+    // PageEditor).
+    //
+    // An example of changing how saving works:
+    //
+    //     save: function() {
+    //       var data = top.JSON.stringify(this.serialize(), null, '  ');
+    //       var content = '<textarea style="width:500px;height:200px" wrap="off">' + data + '</textarea>';
+    //       Mercury.modal(null, {title: 'Saving', closeButton: true, content: content})
+    //     }
+    //
+    // This is a nice way to add functionality, when the behaviors aren't region specific.  These can be triggered by a
+    // button, or manually with `Mercury.trigger('action', {action: 'barrelRoll'})`
+    globalBehaviors: {
+      exit: function() { window.location.href = this.iframeSrc() },
+      barrelRoll: function() { $('body').css({webkitTransform: 'rotate(360deg)'}) }
+      },
 
 
     // ## Ajax and CSRF Headers
@@ -212,6 +366,23 @@ window.MercurySetup = {
     csrfSelector: 'meta[name="csrf-token"]',
     csrfHeader: 'X-CSRF-Token',
 
+    // ## Editor URLs
+    //
+    // When loading a given page, you may want to tweak this regex.  It's to allow the url to differ from the page
+    // you're editing, and the url at which you access it.
+    editorUrlRegEx: /([http|https]:\/\/.[^\/]*)\/editor\/?(.*)/i,
+
+    // ## Hijacking Links & Forms
+    //
+    // Mercury will hijack links and forms that don't have a target set, or the target is set to _self and will set it
+    // to _parent.  This is because the target must be set properly for Mercury to not get in the way of some
+    // functionality, like proper page loads on form submissions etc.  Mercury doesn't do this to links or forms that
+    // are within editable regions because it doesn't want to impact the html that's saved.  With that being explained,
+    // you can add classes to links or forms that you don't want this behavior added to.  Let's say you have links that
+    // open a lightbox style window, and you don't want the targets of these to be set to _parent.  You can add classes
+    // to this array, and they will be ignored when the hijacking is applied.
+    nonHijackableClasses: [],
+
 
     // ## Pasting & Sanitizing
     //
@@ -220,17 +391,15 @@ window.MercurySetup = {
     // desired feature or an annoyance, so you can enable various sanitizing methods to clean the content when it's
     // pasted.
     //
-    // ### Sanitizing options:
+    // sanitize: Can be any of the following:
     // - false: no sanitizing is done, the content is pasted the exact same as it was copied by the user
     // - 'whitelist': content is cleaned using the settings specified in the tag white list (described below)
     // - 'text': all html is stripped before pasting, leaving only the raw text
     //
-    // ### Using the whitelist configuration
-    //
-    // The white list allows you to specify tags and attributes that are allowed when pasting content.  Each item in
-    // this object should contain the allowed tag, and an array of attributes that are allowed on that tag.  If the
-    // allowed attributes array is empty, all attributes will be removed.  If a tag is not present in this list, it will
-    // be removed, but without removing any of the text or tags inside it.
+    // whitelist: The white list allows you to specify tags and attributes that are allowed when pasting content.  Each
+    // item in this object should contain the allowed tag, and an array of attributes that are allowed on that tag.  If
+    // the allowed attributes array is empty, all attributes will be removed.  If a tag is not present in this list, it
+    // will be removed, but without removing any of the text or tags inside it.
     //
     // **Note:** Content is *always* sanitized if looks like it's from MS Word or similar editors regardless of this
     // configuration.
@@ -252,8 +421,11 @@ window.MercurySetup = {
         td:     ['colspan', 'rowspan'],
         div:    ['class'],
         span:   ['class'],
+        ul:     [],
+        ol:     [],
+        li:     [],
         b:      [],
-        bold:   [],
+        strong: [],
         i:      [],
         em:     [],
         u:      [],
@@ -267,90 +439,20 @@ window.MercurySetup = {
       },
 
 
-    // ## Snippet Options and Preview
-    //
-    // When a user drags a snippet onto the page they'll be prompted to enter options for the given snippet.  The server
-    // is expected to respond with a form.  Once the user submits this form, an Ajax request is sent to the server with
-    // the options provided; this preview request is expected to respond with the rendered markup for the snippet.
-    //
-    // Name will be replaced with the snippet name (eg. example)
-    snippets: {
-      method: 'POST',
-      optionsUrl: '/mercury/snippets/:name/options.html',
-      previewUrl: '/mercury/snippets/:name/preview.html'
-      },
-
-
-    // ## Image Uploading
-    //
-    // If you drag images (while pressing shift) from your desktop into regions that support it, it will be uploaded
-    // to the server and inserted into the region.  This configuration allows you to specify if you want to
-    // disable/enable this feature, the accepted mime-types, file size restrictions, and other things related to
-    // uploading.  You can optionally provide a handler function that takes the response from the server and returns an
-    // object: {image: {url: '[your provided url]'}
-    //
-    // **Note:** Image uploading is only supported in some region types, and some browsers.
-    uploading: {
-      enabled: true,
-      allowedMimeTypes: ['image/jpeg', 'image/gif', 'image/png'],
-      maxFileSize: 1235242880,
-      inputName: 'image[image]',
-      url: '/images',
-      handler: false
-      },
-
-
-    // ## Behaviors
-    //
-    // Behaviors are used to change the default behaviors of a given region type when a given button is clicked.  For
-    // example, you may prefer to add HR tags using an HR wrapped within a div with a classname (for styling).  You
-    // can add your own complex behaviors here.
-    //
-    // You can see how the behavior matches up directly with the button names.  It's also important to note that the
-    // callback functions are executed within the scope of the given region, so you have access to all it's methods.
-    // Here's some examples to help you get started.
-    behaviors: {
-      //foreColor: function(selection, options) { selection.wrap('<span style="color:' + options.value.toHex() + '">', true) },
-      htmlEditor: function() { Mercury.modal('/mercury/modals/htmleditor.html', { title: 'HTML Editor', fullHeight: true, handler: 'htmlEditor' }); }
-      },
-
-
-    // ## Contexts
-    //
-    // Contexts are used callback functions used for highlighting and disabling/enabling buttons and buttongroups.
-    // When the cursor enters an element within an html region for instance we want to disable or highlight buttons
-    // based on the properties of the given node.  You can see some examples of contexts in:
-    //
-    // Mercury.Toolbar.Button.contexts
-    // and
-    // Mercury.Toolbar.ButtonGroup.contexts
-
-    
-    // ## Region Class
-    //
-    // Mercury identifies editable regions by a region class.  This class has to be added in your HTML in advance, and
-    // is the only real Mercury code/naming exposed in the implementation of Mercury.  To allow this to be as
-    // configurable as possible, you can set the name of the class here.  When switching to preview mode, this
-    // configuration is used to generate a class to indicate that Mercury is in preview mode -- which will be this
-    // class with '-preview' appended (so, mercury-region-preview by default)
-    regionClass: 'mercury-region',
-
-    
-    // ## Styles
+    // ## Injected Styles
     //
     // Mercury tries to stay as much out of your code as possible, but because regions appear within your document we
     // need to include a few styles to indicate regions, as well as the different states of them (eg. focused).  These
-    // styles are injected into your document, and as simple as they might be, you may want to change them.  You can do
-    // so here.  {{regionClass}} will be automatically replaced with whatever you have set in the regionClass
-    // configuration directive.
+    // styles are injected into your document, and as simple as they might be, you may want to change them.
+    //
+    // {{regionClass}} will be automatically replaced with whatever you have set in the regions.class config directive.
     injectedStyles: '' +
       '.{{regionClass}} { min-height: 10px; outline: 1px dotted #09F } ' +
       '.{{regionClass}}:focus, .{{regionClass}}.focus { outline: none; -webkit-box-shadow: 0 0 10px #09F, 0 0 1px #045; box-shadow: 0 0 10px #09F, 0 0 1px #045 }' +
       '.{{regionClass}}:after { content: "."; display: block; visibility: hidden; clear: both; height: 0; overflow: hidden; }' +
-      '.{{regionClass}} table, .{{regionClass}} td, .{{regionClass}} th { border: 1px dotted red; }' +
-      '.mercury-textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; resize: vertical; }' +
-      '.mercury-textarea { min-height: 10px; outline: 1px dotted #09F }' +
-      '.mercury-textarea:focus, .mercury-textarea.focus { outline: none; -webkit-box-shadow: 0 0 10px #09F, 0 0 1px #045; box-shadow: 0 0 10px #09F, 0 0 1px #045 }'
+      '.{{regionClass}} table, .{{regionClass}} td, .{{regionClass}} th { border: 1px dotted red; min-width: 6px; }' +
+      '.mercury-textarea { border: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; resize: none; }' +
+      '.mercury-textarea:focus { outline: none; }'
   },
 
   // ## Silent Mode
@@ -361,9 +463,13 @@ window.MercurySetup = {
   // ## Debug Mode
   //
   // Turning debug mode on will log events and other various things (using console.debug if available).
-  debug: false
+  debug: false,
 
-};
+  // The onload method is provided as a callback in case you want to override default Mercury Editor behavior.  It will
+  // be called directly after the Mercury scripts have loaded, but before anything has been initialized.  It's a good
+  // place to add or change functionality.
+  onload: function() {
+    //Mercury.PageEditor.prototype.iframeSrc = function(url) { return '/testing'; }
+  },
 
-if (!window.Mercury) window.Mercury = window.MercurySetup;
-else if (typeof(jQuery) !== 'undefined') jQuery.extend(window.Mercury, window.MercurySetup);
+};