Added support for contenteditable (e.g. <div contenteditable>)

lib/client/textarea.js

@@ -50,11 +50,15 @@ var applyChange = function(ctx, oldval, newval) {
 // The context is optional, and will be created from the document if its not
 // specified.
 window.sharejs.Doc.prototype.attachTextarea = function(elem, ctx) {
+
   if (!ctx) ctx = this.createContext();
 
   if (!ctx.provides.text) throw new Error('Cannot attach to non-text document');
 
-  elem.value = ctx.get();
+  if (typeof elem.value === 'undefined')
+    elem.innerHTML = ctx.get();
+  else
+    elem.value = ctx.get()
 
   // The current value of the element's text is stored so we can quickly check
   // if its been changed in the event handlers. This is mostly for browsers on
@@ -67,15 +71,20 @@ window.sharejs.Doc.prototype.attachTextarea = function(elem, ctx) {
   // Replace the content of the text area with newText, and transform the
   // current cursor by the specified function.
   var replaceText = function(newText, transformCursor) {
-    if (transformCursor) {
-      var newSelection = [transformCursor(elem.selectionStart), transformCursor(elem.selectionEnd)];
-    }
+
+    var newSelection = (transformCursor) ? [transformCursor(elem.selectionStart), transformCursor(elem.selectionEnd)] : false
 
     // Fixate the window's scroll while we set the element's value. Otherwise
     // the browser scrolls to the element.
     var scrollTop = elem.scrollTop;
-    elem.value = newText;
-    prevvalue = elem.value; // Not done on one line so the browser can do newline conversion.
+
+    if (typeof elem.value === 'undefined')
+      elem.innerHTML = newText;
+    else
+      elem.value = newText
+
+    prevvalue = typeof elem.value === 'undefined' ? elem.innerHTML : elem.value; // Not done on one line so the browser can do newline conversion.
+
     if (elem.scrollTop !== scrollTop) elem.scrollTop = scrollTop;
 
     // Setting the selection moves the cursor. We'll just have to let your
@@ -99,7 +108,7 @@ window.sharejs.Doc.prototype.attachTextarea = function(elem, ctx) {
 
     // Remove any window-style newline characters. Windows inserts these, and
     // they mess up the generated diff.
-    var prev = elem.value.replace(/\r\n/g, '\n');
+    var prev = (typeof elem.value === 'undefined') ? elem.innerHTML.replace(/\r\n/g, '\n') : elem.value.replace(/\r\n/g, '\n');
     replaceText(prev.slice(0, pos) + text + prev.slice(pos), transformCursor);
   };
 
@@ -110,7 +119,7 @@ window.sharejs.Doc.prototype.attachTextarea = function(elem, ctx) {
       return pos < cursor ? cursor - Math.min(length, cursor - pos) : cursor;
     };
 
-    var prev = elem.value.replace(/\r\n/g, '\n');
+    var prev = (typeof elem.value === 'undefined') ? elem.innerHTML.replace(/\r\n/g, '\n') : elem.value.replace(/\r\n/g, '\n');
     replaceText(prev.slice(0, pos) + prev.slice(pos + length), transformCursor);
   };
 
@@ -121,9 +130,12 @@ window.sharejs.Doc.prototype.attachTextarea = function(elem, ctx) {
   var genOp = function(event) {
     // In a timeout so the browser has time to propogate the event's changes to the DOM.
     setTimeout(function() {
-      if (elem.value !== prevvalue) {
-        prevvalue = elem.value;
-        applyChange(ctx, ctx.get(), elem.value.replace(/\r\n/g, '\n'));
+      if (typeof elem.value === 'undefined' && elem.innerHTML !== prevvalue) {
+        prevvalue = elem.innerHTML
+        applyChange(ctx, ctx.get(), elem.innerHTML.replace(/\r\n/g, '\n'));
+      } else if (typeof elem.value === 'undefined' && elem.innerHTML !== prevvalue) {
+        prevvalue = elem.innerHTML
+        applyChange(ctx, ctx.get(), elem.innerHTML.replace(/\r\n/g, '\n'));
       }
     }, 0);
   };
@@ -150,5 +162,6 @@ window.sharejs.Doc.prototype.attachTextarea = function(elem, ctx) {
   };
 
   return ctx;
+
 };