Changeset 672

Timestamp:

01/18/07 15:13:28 (6 years ago)

Author:

gogo

Message:

Cleanup a few things..
ticket:901 - the config variable (debatable if required) should be on by default, because IE does it by default (built in), this variable only affects Gecko, and the
functionality once worked as default, before a bug made it stop working.
ticket:10 changset:635 - cleaned up the separation of browser specific functionality and made it use the plugin architecture to do it's job. There is more to do in
cleaning up browser specific bits of XinhaCore?.js, for example EnterParagraphs plugin loading should be part of the Gecko layer now, browser specific config variables
should move to for example "Xinha.Gecko.paragraphHandler". I also think the browser specific files should be in a folder, perhaps Browser/Gecko.js instead of
functionsMozilla.js

Location:

trunk

Files:

• XinhaCore.js (modified) (11 diffs)
• examples/testbed.html (modified) (1 diff)
• functionsIE.js (modified) (8 diffs)
• functionsMozilla.js (modified) (8 diffs)

trunk/XinhaCore.js

@@ -374 +374 @@
   // see if the text just typed looks like a URL, or email address
   // and link it appropriatly
-  this.convertUrlsToLinks = false;
+  this.convertUrlsToLinks = true;
 
   // size of color picker cells
@@ -1446 +1446 @@
   var i;
   var editor = this;    // we'll need "this" in some nested functions
+  
+  // Now load a specific browser plugin which will implement the above for us.
+  if (Xinha.is_ie)
+  {
+    if ( typeof InternetExplorer == 'undefined' )
+    {            
+      Xinha.loadPlugin("InternetExplorer", function() { editor.generate(); }, _editor_url + 'functionsIE.js' );
+      return false;
+    }
+    editor._browserSpecificPlugin = editor.registerPlugin('InternetExplorer');
+  }
+  else
+  {
+    if ( typeof Gecko == 'undefined' )
+    {            
+      Xinha.loadPlugin("Gecko", function() { editor.generate(); }, _editor_url + 'functionsMozilla.js' );
+      return false;
+    }
+    editor._browserSpecificPlugin = editor.registerPlugin('Gecko');
+  }
+
   this.setLoadingMessage('Generate Xinha object');
 
@@ -2529 +2550 @@
 };
 
-Xinha.loadPlugin = function(pluginName, callback)
+Xinha.loadPlugin = function(pluginName, callback, plugin_file)
 {
   // @todo : try to avoid the use of eval()
@@ -2542 +2563 @@
   }
 
-  var dir = this.getPluginDir(pluginName);
-  var plugin = pluginName.replace(/([a-z])([A-Z])([a-z])/g, function (str, l1, l2, l3) { return l1 + "-" + l2.toLowerCase() + l3; }).toLowerCase() + ".js";
-  var plugin_file = dir + "/" + plugin;
-
+  if(!plugin_file)
+  {
+    var dir = this.getPluginDir(pluginName);
+    var plugin = pluginName.replace(/([a-z])([A-Z])([a-z])/g, function (str, l1, l2, l3) { return l1 + "-" + l2.toLowerCase() + l3; }).toLowerCase() + ".js";
+    plugin_file = dir + "/" + plugin;
+  }
+  
   Xinha._loadback(plugin_file, callback ? function() { callback(pluginName); } : null);
   return false;
@@ -2551 +2575 @@
 
 Xinha._pluginLoadStatus = {};
-Xinha._browserSpecificFunctionsLoaded = false;
+
 Xinha.loadPlugins = function(plugins, callbackIfNotReady)
 {
@@ -2558 +2582 @@
   var nuPlugins = Xinha.cloneObject(plugins);
 
-  if ( !Xinha._browserSpecificFunctionsLoaded )
-  {
-        if (Xinha.is_ie)
-        {
-                Xinha._loadback(_editor_url + "functionsIE.js",callbackIfNotReady);
-        }
-        else
-        {
-                Xinha._loadback(_editor_url + "functionsMozilla.js",callbackIfNotReady);
-        }
-        return false;
-  }
   while ( nuPlugins.length )
   {
@@ -3853 +3865 @@
 {
   var editor = this;
-  var keyEvent = (Xinha.is_ie && ev.type == "keydown") || (!Xinha.is_ie && ev.type == "keypress");
+  var keyEvent = this.isKeyEvent(ev);
 
   //call events of textarea
@@ -3860 +3872 @@
     editor._textArea['on'+ev.type]();
   }
-
-  if ( Xinha.is_gecko && keyEvent && ev.ctrlKey &&  this._unLink && this._unlinkOnUndo )
-  {
-    if ( String.fromCharCode(ev.charCode).toLowerCase() == 'z' )
-    {
-      Xinha._stopEvent(ev);
-      this._unLink();
-      editor.updateToolbar();
-      return;
-    }
-  }
-
+  
   if ( keyEvent )
   {
+    // Run the ordinary plugins first
     for ( var i in editor.plugins )
     {
       var plugin = editor.plugins[i].instance;
+      
+      if ( plugin == editor._browserSpecificPlugin) continue;
+      
       if ( plugin && typeof plugin.onKeyPress == "function" )
       {
@@ -3885 +3890 @@
       }
     }
+    
+    // Now run the browser specific one
+    if(typeof editor._browserSpecificPlugin.onKeyPress == "function")
+    {
+      if(editor._browserSpecificPlugin.onKeyPress(ev)) 
+      {
+        return false;
+      }
+    }
   }
 
@@ -3891 +3905 @@
         this._shortCuts(ev);
   }
-  else if ( keyEvent && Xinha.is_gecko )
-  {
-    this.mozKey( ev, keyEvent );
-  }
-
+  
   // update the toolbar state after some time
   if ( editor._timerToolbar )
@@ -5820 +5830 @@
   }
 };
-// backward compatibility
+
+
+// The following methods may be over-ridden or extended by the browser specific
+// javascript files.
+
+
+/** Insert a node at the current selection point. 
+ * @param toBeInserted DomNode
+ */
+
+Xinha.prototype.insertNodeAtSelection = function(toBeInserted) { Xinha.notImplemented("insertNodeAtSelection"); }
+
+/** Get the parent element of the supplied or current selection. 
+ *  @param   sel optional selection as returned by getSelection
+ *  @returns DomNode
+ */
+  
+Xinha.prototype.getParentElement      = function(sel) { Xinha.notImplemented("getParentElement"); }
+
+/**
+ * Returns the selected element, if any.  That is,
+ * the element that you have last selected in the "path"
+ * at the bottom of the editor, or a "control" (eg image)
+ *
+ * @returns null | DomNode
+ */
+ 
+Xinha.prototype.activeElement         = function(sel) { Xinha.notImplemented("activeElement"); }
+
+/** 
+ * Determines if the given selection is empty (collapsed).
+ * @param selection Selection object as returned by getSelection
+ * @returns true|false
+ */
+ 
+Xinha.prototype.selectionEmpty        = function(sel) { Xinha.notImplemented("selectionEmpty"); }
+
+/**
+ * Selects the contents of the given node.  If the node is a "control" type element, (image, form input, table)
+ * the node itself is selected for manipulation.
+ *
+ * @param node DomNode 
+ * @param pos  Set to a numeric position inside the node to collapse the cursor here if possible. 
+ */
+ 
+Xinha.prototype.selectNodeContents    = function(node,pos) { Xinha.notImplemented("selectNodeContents"); }
+
+/** Insert HTML at the current position, deleting the selection if any. 
+ *  
+ *  @param html string
+ */
+ 
+Xinha.prototype.insertHTML            = function(html) { Xinha.notImplemented("insertHTML"); }
+
+/** Get the HTML of the current selection.  HTML returned has not been passed through outwardHTML.
+ *
+ * @returns string
+ */
+Xinha.prototype.getSelectedHTML       = function() { Xinha.notImplemented("getSelectedHTML"); }
+
+/** Get a Selection object of the current selection.  Note that selection objects are browser specific.
+ *
+ * @returns Selection
+ */
+ 
+Xinha.prototype.getSelection          = function() { Xinha.notImplemented("getSelection"); }
+
+/** Create a Range object from the given selection.  Note that range objects are browser specific.
+ *
+ *  @param sel Selection object (see getSelection)
+ *  @returns Range
+ */
+ 
+Xinha.prototype.createRange           = function(sel) { Xinha.notImplemented("createRange"); }
+
+/** Determine if the given event object is a keydown/press event.
+ *
+ *  @param event Event 
+ *  @returns true|false
+ */
+ 
+Xinha.prototype.isKeyEvent            = function(event) { Xinha.notImplemented("isKeyEvent"); }
+
+/** Return the HTML string of the given Element, including the Element.
+ * 
+ * @param element HTML Element DomNode
+ * @returns string
+ */
+ 
+Xinha.getOuterHTML = function(element) { Xinha.notImplemented("getOuterHTML"); }
+
+
+
+// Compatability - all these names are deprecated and will be removed in a future version
+Xinha.prototype._activeElement  = function(sel) { return this.activeElement(sel); }
+Xinha.prototype._selectionEmpty = function(sel) { return this.selectionEmpty(sel); }
+Xinha.prototype._getSelection   = function() { return this.getSelection(); }
+Xinha.prototype._createRange    = function(sel) { return this.createRange(sel); }
 HTMLArea = Xinha;
+
 Xinha.init();
 Xinha.addDom0Event(window,'unload',Xinha.collectGarbageForIE);
+
+Xinha.notImplemented = function(methodName) 
+{
+  throw new Error("Method Not Implemented", "Part of Xinha has tried to call the " + methodName + " method which has not been implemented.");
+}

trunk/examples/testbed.html

@@ -55 +55 @@
       xinha_plugins = xinha_plugins ? xinha_plugins :
       [
-        'CharacterMap'
+        'CharacterMap', 'SpellChecker', 'Linker'
       ];
              // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)

trunk/functionsIE.js

@@ -1 @@
-/** Returns a node after which we can insert other nodes, in the current
- * selection.  The selection is removed.  It splits a text node, if needed.
- */
+
+  /*--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
+    --  Xinha (is not htmlArea) - http://xinha.gogo.co.nz/
+    --
+    --  Use of Xinha is granted by the terms of the htmlArea License (based on
+    --  BSD license)  please read license.txt in this package for details.
+    --
+    --  Xinha was originally based on work by Mihai Bazon which is:
+    --      Copyright (c) 2003-2004 dynarch.com.
+    --      Copyright (c) 2002-2003 interactivetools.com, inc.
+    --      This copyright notice MUST stay intact for use.
+    --
+    -- This is the Internet Explorer compatability plugin, part of the 
+    -- Xinha core.
+    --
+    --  The file is loaded as a special plugin by the Xinha Core when
+    --  Xinha is being run under an Internet Explorer based browser.
+    --
+    --  It provides implementation and specialisation for various methods
+    --  in the core where different approaches per browser are required.
+    --
+    --  Design Notes::
+    --   Most methods here will simply be overriding Xinha.prototype.<method>
+    --   and should be called that, but methods specific to IE should 
+    --   be a part of the InternetExplorer.prototype, we won't trample on 
+    --   namespace that way.
+    --
+    --  $HeadURL$
+    --  $LastChangedDate$
+    --  $LastChangedRevision$
+    --  $LastChangedBy$
+    --------------------------------------------------------------------------*/
+                                                    
+InternetExplorer._pluginInfo = {
+  name          : "Internet Explorer",
+  origin        : "Xinha Core",
+  version       : "$LastChangedRevision$",
+  developer     : "The Xinha Core Developer Team",
+  developer_url : "$HeadURL$",
+  license       : "htmlArea"
+};
+
+function InternetExplorer(editor) {
+  this.editor = editor;  
+  editor.InternetExplorer = this; // So we can do my_editor.InternetExplorer.doSomethingIESpecific();
+}
+
+/** Allow Internet Explorer to handle some key events in a special way.
+ */
+  
+InternetExplorer.prototype.onKeyPress = function(ev)
+{
+  switch(ev.keyCode) 
+  {
+    case 8: // KEY backspace
+    case 46: // KEY delete
+    {
+      if(this.handleBackspace())
+      {
+        Xinha._stopEvent(ev);
+        return true;
+      }
+    }
+    break;
+  }
+  
+  return false;
+}
+
+/** When backspace is hit, the IE onKeyPress will execute this method.
+ *  It preserves links when you backspace over them and apparently 
+ *  deletes control elements (tables, images, form fields) in a better
+ *  way.
+ *
+ *  @returns true|false True when backspace has been handled specially
+ *   false otherwise (should pass through). 
+ */
+
+InternetExplorer.prototype.handleBackspace = function()
+{
+  var editor = this.editor;
+  var sel = editor._getSelection();
+  if ( sel.type == 'Control' )
+  {
+    var elm = editor._activeElement(sel);
+    Xinha.removeFromParent(elm);
+    return true;
+  }
+
+  // This bit of code preseves links when you backspace over the
+  // endpoint of the link in IE.  Without it, if you have something like
+  //    link_here |
+  // where | is the cursor, and backspace over the last e, then the link
+  // will de-link, which is a bit tedious
+  var range = editor._createRange(sel);
+  var r2 = range.duplicate();
+  r2.moveStart("character", -1);
+  var a = r2.parentElement();
+  // @fixme: why using again a regex to test a single string ???
+  if ( a != range.parentElement() && ( /^a$/i.test(a.tagName) ) )
+  {
+    r2.collapse(true);
+    r2.moveEnd("character", 1);
+    r2.pasteHTML('');
+    r2.select();
+    return true;
+  }
+};
+
+/*--------------------------------------------------------------------------*/
+/*------- IMPLEMENTATION OF THE ABSTRACT "Xinha.prototype" METHODS ---------*/
+/*--------------------------------------------------------------------------*/
+
+/** Insert a node at the current selection point. 
+ * @param toBeInserted DomNode
+ */
+
 Xinha.prototype.insertNodeAtSelection = function(toBeInserted)
 {
-  return null;  // this function not yet used for IE <FIXME>
-};
-
-// Returns the deepest node that contains both endpoints of the selection.
+  Xinha.notImplemented('insertNodeAtSelection');
+};
+
+  
+/** Get the parent element of the supplied or current selection. 
+ *  @param   sel optional selection as returned by getSelection
+ *  @returns DomNode
+ */
+ 
 Xinha.prototype.getParentElement = function(sel)
 {
@@ -55 +174 @@
  * at the bottom of the editor, or a "control" (eg image)
  *
- * @returns null | element
- */
+ * @returns null | DomNode
+ */
+ 
 Xinha.prototype._activeElement = function(sel)
 {
@@ -104 +224 @@
 };
 
-  Xinha.prototype._selectionEmpty = function(sel)
+/** 
+ * Determines if the given selection is empty (collapsed).
+ * @param selection Selection object as returned by getSelection
+ * @returns true|false
+ */
+ 
+Xinha.prototype.selectionEmpty = function(sel)
 {
   if ( !sel )
@@ -114 +240 @@
 };
 
-// Selects the contents inside the given node
+/**
+ * Selects the contents of the given node.  If the node is a "control" type element, (image, form input, table)
+ * the node itself is selected for manipulation.
+ *
+ * @param node DomNode 
+ * @param pos  Set to a numeric position inside the node to collapse the cursor here if possible. 
+ */
+ 
 Xinha.prototype.selectNodeContents = function(node, pos)
 {
@@ -136 +269 @@
 };
   
-/** Call this function to insert HTML code at the current position.  It deletes
- * the selection, if any.
- */
+/** Insert HTML at the current position, deleting the selection if any. 
+ *  
+ *  @param html string
+ */
+ 
 Xinha.prototype.insertHTML = function(html)
 {
@@ -148 +283 @@
 
 
-// Retrieve the selected block
+/** Get the HTML of the current selection.  HTML returned has not been passed through outwardHTML.
+ *
+ * @returns string
+ */
+ 
 Xinha.prototype.getSelectedHTML = function()
 {
@@ -166 +305 @@
   return '';
 };
-
-Xinha.prototype.checkBackspace = function()
-{
-  var sel = this._getSelection();
-  if ( sel.type == 'Control' )
-  {
-    var elm = this._activeElement(sel);
-    Xinha.removeFromParent(elm);
-    return true;
-  }
-
-  // This bit of code preseves links when you backspace over the
-  // endpoint of the link in IE.  Without it, if you have something like
-  //    link_here |
-  // where | is the cursor, and backspace over the last e, then the link
-  // will de-link, which is a bit tedious
-  var range = this._createRange(sel);
-  var r2 = range.duplicate();
-  r2.moveStart("character", -1);
-  var a = r2.parentElement();
-  // @fixme: why using again a regex to test a single string ???
-  if ( a != range.parentElement() && ( /^a$/i.test(a.tagName) ) )
-  {
-    r2.collapse(true);
-    r2.moveEnd("character", 1);
-    r2.pasteHTML('');
-    r2.select();
-    return true;
-  }
-};
-  
-// returns the current selection object
-Xinha.prototype._getSelection = function()
+  
+/** Get a Selection object of the current selection.  Note that selection objects are browser specific.
+ *
+ * @returns Selection
+ */
+ 
+Xinha.prototype.getSelection = function()
 {
   return this._doc.selection;
 };
 
-// returns a range for the current selection
-Xinha.prototype._createRange = function(sel)
+/** Create a Range object from the given selection.  Note that range objects are browser specific.
+ *
+ *  @param sel Selection object (see getSelection)
+ *  @returns Range
+ */
+ 
+Xinha.prototype.createRange = function(sel)
 {
   return sel.createRange();
 };
 
+/** Determine if the given event object is a keydown/press event.
+ *
+ *  @param event Event 
+ *  @returns true|false
+ */
+ 
+Xinha.prototype.isKeyEvent = function(event)
+{
+  return event.type == "keydown";
+}
+
+/** Return the HTML string of the given Element, including the Element.
+ * 
+ * @param element HTML Element DomNode
+ * @returns string
+ */
+ 
 Xinha.getOuterHTML = function(element)
 {
@@ -214 +349 @@
 };
   
-//What is this supposed to do??? it's never used 
-Xinha.prototype._formatBlock = function(block_format)
-{
-
-};
-
-Xinha._browserSpecificFunctionsLoaded = true;

trunk/functionsMozilla.js

@@ -1 @@
-/** Returns a node after which we can insert other nodes, in the current
- * selection.  The selection is removed.  It splits a text node, if needed.
- */
-Xinha.prototype.insertNodeAtSelection = function(toBeInserted)
-{
-  var sel = this._getSelection();
-  var range = this._createRange(sel);
-  // remove the current selection
-  sel.removeAllRanges();
-  range.deleteContents();
-  var node = range.startContainer;
-  var pos = range.startOffset;
-  var selnode = toBeInserted;
-  switch ( node.nodeType )
-  {
-    case 3: // Node.TEXT_NODE
-      // we have to split it at the caret position.
-      if ( toBeInserted.nodeType == 3 )
-      {
-        // do optimized insertion
-        node.insertData(pos, toBeInserted.data);
-        range = this._createRange();
-        range.setEnd(node, pos + toBeInserted.length);
-        range.setStart(node, pos + toBeInserted.length);
-        sel.addRange(range);
-      }
-      else
-      {
-        node = node.splitText(pos);
-        if ( toBeInserted.nodeType == 11 /* Node.DOCUMENT_FRAGMENT_NODE */ )
-        {
-          selnode = selnode.firstChild;
-        }
-        node.parentNode.insertBefore(toBeInserted, node);
-        this.selectNodeContents(selnode);
-        this.updateToolbar();
-      }
-    break;
-    case 1: // Node.ELEMENT_NODE
-      if ( toBeInserted.nodeType == 11 /* Node.DOCUMENT_FRAGMENT_NODE */ )
-      {
-        selnode = selnode.firstChild;
-      }
-      node.insertBefore(toBeInserted, node.childNodes[pos]);
-      this.selectNodeContents(selnode);
-      this.updateToolbar();
-    break;
-  }
-};
-  
-// Returns the deepest node that contains both endpoints of the selection.
-Xinha.prototype.getParentElement = function(sel)
-{
-  if ( typeof sel == 'undefined' )
-  {
-    sel = this._getSelection();
-  }
-  var range = this._createRange(sel);
-  try
-  {
-    var p = range.commonAncestorContainer;
-    if ( !range.collapsed && range.startContainer == range.endContainer &&
-        range.startOffset - range.endOffset <= 1 && range.startContainer.hasChildNodes() )
-    {
-      p = range.startContainer.childNodes[range.startOffset];
-    }
-    /*
-    alert(range.startContainer + ":" + range.startOffset + "\n" +
-          range.endContainer + ":" + range.endOffset);
-    */
-    while ( p.nodeType == 3 )
-    {
-      p = p.parentNode;
-    }
-    return p;
-  }
-  catch (ex)
-  {
-    return null;
-  }
-};
-
-/**
- * Returns the selected element, if any.  That is,
- * the element that you have last selected in the "path"
- * at the bottom of the editor, or a "control" (eg image)
- *
- * @returns null | element
- */
-Xinha.prototype._activeElement = function(sel)
-{
-  if ( ( sel === null ) || this._selectionEmpty(sel) )
-  {
-    return null;
-  }
-
-  // For Mozilla we just see if the selection is not collapsed (something is selected)
-  // and that the anchor (start of selection) is an element.  This might not be totally
-  // correct, we possibly should do a simlar check to IE?
-  if ( !sel.isCollapsed )
-  {      
-    if ( sel.anchorNode.childNodes.length > sel.anchorOffset && sel.anchorNode.childNodes[sel.anchorOffset].nodeType == 1 )
-    {
-      return sel.anchorNode.childNodes[sel.anchorOffset];
-    }
-    else if ( sel.anchorNode.nodeType == 1 )
-    {
-      return sel.anchorNode;
-    }
-    else
-    {
-      return null; // return sel.anchorNode.parentNode;
-    }
-  }
-  return null;
-};
-  
-Xinha.prototype._selectionEmpty = function(sel)
-{
-  if ( !sel )
-  {
-    return true;
-  }
-
-  if ( typeof sel.isCollapsed != 'undefined' )
-  {      
-    return sel.isCollapsed;
-  }
-
-  return true;
-};
-  
-// Selects the contents inside the given node
-Xinha.prototype.selectNodeContents = function(node, pos)
-{
-  this.focusEditor();
-  this.forceRedraw();
-  var range;
-  var collapsed = typeof pos == "undefined" ? true : false;
-  var sel = this._getSelection();
-  range = this._doc.createRange();
-  // Tables and Images get selected as "objects" rather than the text contents
-  if ( collapsed && node.tagName && node.tagName.toLowerCase().match(/table|img|input|textarea|select/) )
-  {
-    range.selectNode(node);
-  }
-  else
-  {
-    range.selectNodeContents(node);
-    //(collapsed) && range.collapse(pos);
-  }
-  sel.removeAllRanges();
-  sel.addRange(range);
-};
-  
-/** Call this function to insert HTML code at the current position.  It deletes
- * the selection, if any.
- */
-Xinha.prototype.insertHTML = function(html)
-{
-  var sel = this._getSelection();
-  var range = this._createRange(sel);
-  this.focusEditor();
-  // construct a new document fragment with the given HTML
-  var fragment = this._doc.createDocumentFragment();
-  var div = this._doc.createElement("div");
-  div.innerHTML = html;
-  while ( div.firstChild )
-  {
-    // the following call also removes the node from div
-    fragment.appendChild(div.firstChild);
-  }
-  // this also removes the selection
-  var node = this.insertNodeAtSelection(fragment);
-};
-
-// Retrieve the selected block
-Xinha.prototype.getSelectedHTML = function()
-{
-  var sel = this._getSelection();
-  var range = this._createRange(sel);
-  return Xinha.getHTML(range.cloneContents(), false, this);
-};
-  
-Xinha.prototype.checkBackspace = function()
-{
-  var self = this;
-  setTimeout(
-    function()
-    {
-      var sel = self._getSelection();
-      var range = self._createRange(sel);
-      var SC = range.startContainer;
-      var SO = range.startOffset;
-      var EC = range.endContainer;
-      var EO = range.endOffset;
-      var newr = SC.nextSibling;
-      if ( SC.nodeType == 3 )
-      {
-        SC = SC.parentNode;
-      }
-      if ( ! ( /\S/.test(SC.tagName) ) )
-      {
-        var p = document.createElement("p");
-        while ( SC.firstChild )
-        {
-          p.appendChild(SC.firstChild);
-        }
-        SC.parentNode.insertBefore(p, SC);
-        Xinha.removeFromParent(SC);
-        var r = range.cloneRange();
-        r.setStartBefore(newr);
-        r.setEndAfter(newr);
-        r.extractContents();
-        sel.removeAllRanges();
-        sel.addRange(r);
-      }
-    },
-    10);
-};
-
-// returns the current selection object
-Xinha.prototype._getSelection = function()
-{
-  return this._iframe.contentWindow.getSelection();
-};
-  
-// returns a range for the current selection
-Xinha.prototype._createRange = function(sel)
-{
-  this.activateEditor();
-  if ( typeof sel != "undefined" )
-  {
-    try
-    {
-      return sel.getRangeAt(0);
-    }
-    catch(ex)
-    {
-      return this._doc.createRange();
-    }
-  }
-  else
-  {
-    return this._doc.createRange();
-  }
-};
-
-Xinha.getOuterHTML = function(element)
-{
-  return (new XMLSerializer()).serializeToString(element);
-};
-  
-//What is this supposed to do??? it's never used 
-//ray
-Xinha.prototype._formatBlock = function(block_format)
-{
-  var ancestors = this.getAllAncestors();
-  var apply_to, x = null;
-  // Block format can be a tag followed with class defs
-  //  eg div.blue.left
-  var target_tag = null;
-  var target_classNames = [ ];
-
-  if ( block_format.indexOf('.') >= 0 )
-  {
-    target_tag = block_format.substr(0, block_format.indexOf('.')).toLowerCase();
-    target_classNames = block_format.substr(block_format.indexOf('.'), block_format.length - block_format.indexOf('.')).replace(/\./g, '').replace(/^\s*/, '').replace(/\s*$/, '').split(' ');
-  }
-  else
-  {
-    target_tag = block_format.toLowerCase();
-  }
-
-  var sel = this._getSelection();
-  var rng = this._createRange(sel);
-
-  if ( Xinha.is_gecko )
-  {
-    if ( sel.isCollapsed )
-    {
-      // With no selection we want to apply to the whole contents of the ancestor block
-      apply_to = this._getAncestorBlock(sel);
-      if ( apply_to === null )
-      {
-        // If there wasn't an ancestor, make one.
-        apply_to = this._createImplicitBlock(sel, target_tag);
-      }
-    }
-    else
-    {
-      // With a selection it's more tricky
-      switch ( target_tag )
-      {
-
-        case 'h1':
-        case 'h2':
-        case 'h3':
-        case 'h4':
-        case 'h5':
-        case 'h6':
-        case 'h7':
-          apply_to = [];
-          var search_tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7'];
-          for ( var y = 0; y < search_tags.length; y++ )
-          {
-            var headers = this._doc.getElementsByTagName(search_tags[y]);
-            for ( x = 0; x < headers.length; x++ )
-            {
-              if ( sel.containsNode(headers[x]) )
-              {
-                apply_to[apply_to.length] = headers[x];
-              }
-            }
-          }
-          if ( apply_to.length > 0)
-          {
-            break;
-          }
-          // If there wern't any in the selection drop through
-        case 'div':
-          apply_to = this._doc.createElement(target_tag);
-          apply_to.appendChild(rng.extractContents());
-          rng.insertNode(apply_to);
-        break;
-
-        case 'p':
-        case 'center':
-        case 'pre':
-        case 'ins':
-        case 'del':
-        case 'blockquote':
-        case 'address':
-          apply_to = [];
-          var paras = this._doc.getElementsByTagName(target_tag);
-          for ( x = 0; x < paras.length; x++ )
-          {
-            if ( sel.containsNode(paras[x]) )
-            {
-              apply_to[apply_to.length] = paras[x];
-            }
-          }
-
-          if ( apply_to.length === 0 )
-          {
-            sel.collapseToStart();
-            return this._formatBlock(block_format);
-          }
-        break;
-      }
-    }
-  }
-};
-
-
-// IE's textRange and selection object is woefully inadequate,
-// which means this fancy stuff is gecko only sorry :-|
-// Die Bill, Die.  (IE supports it somewhat nativly though)
-Xinha.prototype.mozKey = function ( ev, keyEvent )
-{
-  var editor = this;
+
+  /*--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
+    --  Xinha (is not htmlArea) - http://xinha.gogo.co.nz/
+    --
+    --  Use of Xinha is granted by the terms of the htmlArea License (based on
+    --  BSD license)  please read license.txt in this package for details.
+    --
+    --  Xinha was originally based on work by Mihai Bazon which is:
+    --      Copyright (c) 2003-2004 dynarch.com.
+    --      Copyright (c) 2002-2003 interactivetools.com, inc.
+    --      This copyright notice MUST stay intact for use.
+    --
+    -- This is the Gecko compatability plugin, part of the Xinha core.
+    --
+    --  The file is loaded as a special plugin by the Xinha Core when
+    --  Xinha is being run under a Gecko based browser with the Midas
+    --  editing API.
+    --
+    --  It provides implementation and specialisation for various methods
+    --  in the core where different approaches per browser are required.
+    --
+    --  Design Notes::
+    --   Most methods here will simply be overriding Xinha.prototype.<method>
+    --   and should be called that, but methods specific to Gecko should 
+    --   be a part of the Gecko.prototype, we won't trample on namespace
+    --   that way.
+    --
+    --  $HeadURL$
+    --  $LastChangedDate$
+    --  $LastChangedRevision$
+    --  $LastChangedBy$
+    --------------------------------------------------------------------------*/
+                                                    
+Gecko._pluginInfo = {
+  name          : "Gecko",
+  origin        : "Xinha Core",
+  version       : "$LastChangedRevision$",
+  developer     : "The Xinha Core Developer Team",
+  developer_url : "$HeadURL$",
+  license       : "htmlArea"
+};
+
+function Gecko(editor) {
+  this.editor = editor;  
+  editor.Gecko = this;
+}
+
+/** Allow Gecko to handle some key events in a special way.
+ */
+  
+Gecko.prototype.onKeyPress = function(ev)
+{
+  var editor = this.editor;
+  
+  if ( ev.ctrlKey &&  editor._unLink && editor._unlinkOnUndo )
+  {
+    if ( String.fromCharCode(ev.charCode).toLowerCase() == 'z' )
+    {
+      Xinha._stopEvent(ev);
+      editor._unLink();
+      editor.updateToolbar();
+      return true; // Stop further
+    }
+  }
+  
   var s = editor._getSelection();
   var autoWrap = function (textNode, tag)
@@ -373 +77 @@
     rightText.data = ' ' + rightText.data;
 
-    if ( Xinha.is_ie )
-    {
-      var r = editor._createRange(s);
-      s.moveToElementText(rightText);
-      s.move('character', 1);
-    }
-    else
-    {
-      s.collapse(rightText, 1);
-    }
-    Xinha._stopEvent(ev);
+    s.collapse(rightText, 1);
+    // Xinha._stopEvent(ev);
 
     editor._unLink = function()
@@ -404 +99 @@
     // and link it appropriatly
     case 32:
-      if ( this.config.convertUrlsToLinks && s && s.isCollapsed && s.anchorNode.nodeType == 3 && s.anchorNode.data.length > 3 && s.anchorNode.data.indexOf('.') >= 0 )
+      if ( editor.config.convertUrlsToLinks && s && s.isCollapsed && s.anchorNode.nodeType == 3 && s.anchorNode.data.length > 3 && s.anchorNode.data.indexOf('.') >= 0 )
       {
         var midStart = s.anchorNode.data.substring(0,s.anchorOffset).search(/\S{4,}$/);
@@ -412 +107 @@
         }
 
-        if ( this._getFirstAncestor(s, 'a') )
+        if ( editor._getFirstAncestor(s, 'a') )
         {
           break; // already in an anchor
@@ -452 +147 @@
 
     default:
-      if ( ev.keyCode == 27 || ( this._unlinkOnUndo && ev.ctrlKey && ev.which == 122 ) )
-      {
-        if ( this._unLink )
-        {
-          this._unLink();
+      if ( ev.keyCode == 27 || ( editor._unlinkOnUndo && ev.ctrlKey && ev.which == 122 ) )
+      {
+        if ( editor._unLink )
+        {
+          editor._unLink();
           Xinha._stopEvent(ev);
         }
@@ -463 +158 @@
       else if ( ev.which || ev.keyCode == 8 || ev.keyCode == 46 )
       {
-        this._unlinkOnUndo = false;
+        editor._unlinkOnUndo = false;
 
         if ( s.anchorNode && s.anchorNode.nodeType == 3 )
         {
           // See if we might be changing a link
-          var a = this._getFirstAncestor(s, 'a');
+          var a = editor._getFirstAncestor(s, 'a');
           // @todo: we probably need here to inform the setTimeout below that we not changing a link and not start another setTimeout
           if ( !a )
@@ -513 +208 @@
   }
 
-
   // other keys here
   switch (ev.keyCode)
   {
     case 13: // KEY enter
-      if ( Xinha.is_gecko && !ev.shiftKey && this.config.mozParaHandler == 'dirty' )
-      {
-        this.dom_checkInsertP();
+      if( !ev.shiftKey && editor.config.mozParaHandler == 'dirty' )
+      {
+        editor.dom_checkInsertP();
         Xinha._stopEvent(ev);
       }
@@ -526 +220 @@
     case 8: // KEY backspace
     case 46: // KEY delete
-      if ( ( Xinha.is_gecko && !ev.shiftKey ) || Xinha.is_ie )
-      {
-        if ( this.checkBackspace() )
-        {
-          Xinha._stopEvent(ev);
-        }
+      if ( !ev.shiftKey && this.handleBackspace() )
+      {
+        Xinha._stopEvent(ev);
       }
     break;
   }
+  
+  return false; // Let other plugins etc continue from here.
 }
 
-Xinha._browserSpecificFunctionsLoaded = true;
+/** When backspace is hit, the Gecko onKeyPress will execute this method.
+ *  I don't remember what the exact purpose of this is though :-(
+ */
+ 
+Gecko.prototype.handleBackspace = function()
+{
+  var editor = this.editor;
+  setTimeout(
+    function()
+    {
+      var sel   = editor.getSelection();
+      var range = editor.createRange(sel);
+      var SC = range.startContainer;
+      var SO = range.startOffset;
+      var EC = range.endContainer;
+      var EO = range.endOffset;
+      var newr = SC.nextSibling;
+      if ( SC.nodeType == 3 )
+      {
+        SC = SC.parentNode;
+      }
+      if ( ! ( /\S/.test(SC.tagName) ) )
+      {
+        var p = document.createElement("p");
+        while ( SC.firstChild )
+        {
+          p.appendChild(SC.firstChild);
+        }
+        SC.parentNode.insertBefore(p, SC);
+        Xinha.removeFromParent(SC);
+        var r = range.cloneRange();
+        r.setStartBefore(newr);
+        r.setEndAfter(newr);
+        r.extractContents();
+        sel.removeAllRanges();
+        sel.addRange(r);
+      }
+    },
+    10);
+};
+
+/*--------------------------------------------------------------------------*/
+/*------- IMPLEMENTATION OF THE ABSTRACT "Xinha.prototype" METHODS ---------*/
+/*--------------------------------------------------------------------------*/
+
+/** Insert a node at the current selection point. 
+ * @param toBeInserted DomNode
+ */
+
+Xinha.prototype.insertNodeAtSelection = function(toBeInserted)
+{
+  var sel = this._getSelection();
+  var range = this._createRange(sel);
+  // remove the current selection
+  sel.removeAllRanges();
+  range.deleteContents();
+  var node = range.startContainer;
+  var pos = range.startOffset;
+  var selnode = toBeInserted;
+  switch ( node.nodeType )
+  {
+    case 3: // Node.TEXT_NODE
+      // we have to split it at the caret position.
+      if ( toBeInserted.nodeType == 3 )
+      {
+        // do optimized insertion
+        node.insertData(pos, toBeInserted.data);
+        range = this._createRange();
+        range.setEnd(node, pos + toBeInserted.length);
+        range.setStart(node, pos + toBeInserted.length);
+        sel.addRange(range);
+      }
+      else
+      {
+        node = node.splitText(pos);
+        if ( toBeInserted.nodeType == 11 /* Node.DOCUMENT_FRAGMENT_NODE */ )
+        {
+          selnode = selnode.firstChild;
+        }
+        node.parentNode.insertBefore(toBeInserted, node);
+        this.selectNodeContents(selnode);
+        this.updateToolbar();
+      }
+    break;
+    case 1: // Node.ELEMENT_NODE
+      if ( toBeInserted.nodeType == 11 /* Node.DOCUMENT_FRAGMENT_NODE */ )
+      {
+        selnode = selnode.firstChild;
+      }
+      node.insertBefore(toBeInserted, node.childNodes[pos]);
+      this.selectNodeContents(selnode);
+      this.updateToolbar();
+    break;
+  }
+};
+  
+/** Get the parent element of the supplied or current selection. 
+ *  @param   sel optional selection as returned by getSelection
+ *  @returns DomNode
+ */
+ 
+Xinha.prototype.getParentElement = function(sel)
+{
+  if ( typeof sel == 'undefined' )
+  {
+    debugger;
+    sel = this._getSelection();
+  }
+  var range = this._createRange(sel);
+  try
+  {
+    var p = range.commonAncestorContainer;
+    if ( !range.collapsed && range.startContainer == range.endContainer &&
+        range.startOffset - range.endOffset <= 1 && range.startContainer.hasChildNodes() )
+    {
+      p = range.startContainer.childNodes[range.startOffset];
+    }
+
+    while ( p.nodeType == 3 )
+    {
+      p = p.parentNode;
+    }
+    return p;
+  }
+  catch (ex)
+  {
+    return null;
+  }
+};
+
+/**
+ * Returns the selected element, if any.  That is,
+ * the element that you have last selected in the "path"
+ * at the bottom of the editor, or a "control" (eg image)
+ *
+ * @returns null | DomNode
+ */
+
+Xinha.prototype.activeElement = function(sel)
+{
+  if ( ( sel === null ) || this._selectionEmpty(sel) )
+  {
+    return null;
+  }
+
+  // For Mozilla we just see if the selection is not collapsed (something is selected)
+  // and that the anchor (start of selection) is an element.  This might not be totally
+  // correct, we possibly should do a simlar check to IE?
+  if ( !sel.isCollapsed )
+  {      
+    if ( sel.anchorNode.childNodes.length > sel.anchorOffset && sel.anchorNode.childNodes[sel.anchorOffset].nodeType == 1 )
+    {
+      return sel.anchorNode.childNodes[sel.anchorOffset];
+    }
+    else if ( sel.anchorNode.nodeType == 1 )
+    {
+      return sel.anchorNode;
+    }
+    else
+    {
+      return null; // return sel.anchorNode.parentNode;
+    }
+  }
+  return null;
+};
+
+/** 
+ * Determines if the given selection is empty (collapsed).
+ * @param selection Selection object as returned by getSelection
+ * @returns true|false
+ */
+ 
+Xinha.prototype.selectionEmpty = function(sel)
+{
+  if ( !sel )
+  {
+    return true;
+  }
+
+  if ( typeof sel.isCollapsed != 'undefined' )
+  {      
+    return sel.isCollapsed;
+  }
+
+  return true;
+};
+
+
+/**
+ * Selects the contents of the given node.  If the node is a "control" type element, (image, form input, table)
+ * the node itself is selected for manipulation.
+ *
+ * @param node DomNode 
+ * @param pos  Set to a numeric position inside the node to collapse the cursor here if possible. 
+ */
+ 
+Xinha.prototype.selectNodeContents = function(node, pos)
+{
+  this.focusEditor();
+  this.forceRedraw();
+  var range;
+  var collapsed = typeof pos == "undefined" ? true : false;
+  var sel = this._getSelection();
+  range = this._doc.createRange();
+  // Tables and Images get selected as "objects" rather than the text contents
+  if ( collapsed && node.tagName && node.tagName.toLowerCase().match(/table|img|input|textarea|select/) )
+  {
+    range.selectNode(node);
+  }
+  else
+  {
+    range.selectNodeContents(node);
+    //(collapsed) && range.collapse(pos);
+  }
+  sel.removeAllRanges();
+  sel.addRange(range);
+};
+  
+/** Insert HTML at the current position, deleting the selection if any. 
+ *  
+ *  @param html string
+ */
+ 
+Xinha.prototype.insertHTML = function(html)
+{
+  var sel = this._getSelection();
+  var range = this._createRange(sel);
+  this.focusEditor();
+  // construct a new document fragment with the given HTML
+  var fragment = this._doc.createDocumentFragment();
+  var div = this._doc.createElement("div");
+  div.innerHTML = html;
+  while ( div.firstChild )
+  {
+    // the following call also removes the node from div
+    fragment.appendChild(div.firstChild);
+  }
+  // this also removes the selection
+  var node = this.insertNodeAtSelection(fragment);
+};
+
+/** Get the HTML of the current selection.  HTML returned has not been passed through outwardHTML.
+ *
+ * @returns string
+ */
+ 
+Xinha.prototype.getSelectedHTML = function()
+{
+  var sel = this._getSelection();
+  var range = this._createRange(sel);
+  return Xinha.getHTML(range.cloneContents(), false, this);
+};
+  
+
+/** Get a Selection object of the current selection.  Note that selection objects are browser specific.
+ *
+ * @returns Selection
+ */
+ 
+Xinha.prototype.getSelection = function()
+{
+  return this._iframe.contentWindow.getSelection();
+};
+  
+/** Create a Range object from the given selection.  Note that range objects are browser specific.
+ *
+ *  @param sel Selection object (see getSelection)
+ *  @returns Range
+ */
+ 
+Xinha.prototype.createRange = function(sel)
+{
+  this.activateEditor();
+  if ( typeof sel != "undefined" )
+  {
+    try
+    {
+      return sel.getRangeAt(0);
+    }
+    catch(ex)
+    {
+      return this._doc.createRange();
+    }
+  }
+  else
+  {
+    return this._doc.createRange();
+  }
+};
+
+/** Determine if the given event object is a keydown/press event.
+ *
+ *  @param event Event 
+ *  @returns true|false
+ */
+ 
+Xinha.prototype.isKeyEvent = function(event)
+{
+  return event.type == "keypress";
+}
+
+/** Return the HTML string of the given Element, including the Element.
+ * 
+ * @param element HTML Element DomNode
+ * @returns string
+ */
+ 
+Xinha.getOuterHTML = function(element)
+{
+  return (new XMLSerializer()).serializeToString(element);
+};