textarea: use white-space: pre-wrap instead of converting nl2br and back, see #48

src/editable-form/editable-form.css

@@ -128,4 +128,8 @@
 
 .editable-clear-x:hover {
    opacity: 1;
+}
+
+.editable-pre-wrapped {
+   white-space: pre-wrap;
 }

src/element/editable-element.js

@@ -61,6 +61,11 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             //add 'editable' class to every editable element
             this.$element.addClass('editable');
             
+            //specifically for "textarea" add class .editable-pre-wrapped to keep linebreaks
+            if(this.input.type === 'textarea') {
+                this.$element.addClass('editable-pre-wrapped');
+            }
+            
             //attach handler activating editable. In disabled mode it just prevent default action (useful for links)
             if(this.options.toggle !== 'manual') {
                 this.$element.addClass('editable-click');

src/inputs/textarea.js

@@ -38,8 +38,10 @@ $(function(){
                 }
             });
         },
-
+        
-        value2html: function(value, element) {
+       //using `white-space: pre-wrap` solves \n  <--> BR conversion very elegant!
+       /* 
+       value2html: function(value, element) {
             var html = '', lines;
             if(value) {
                 lines = value.split("\n");
@@ -50,7 +52,7 @@ $(function(){
             }
             $(element).html(html);
         },
-
+       
         html2value: function(html) {
             if(!html) {
                 return '';
@@ -69,7 +71,7 @@ $(function(){
             }
             return lines.join("\n");
         },
-
+         */
         activate: function() {
             $.fn.editabletypes.text.prototype.activate.call(this);
         }

test/unit/textarea.js

@@ -57,6 +57,8 @@ $(function () {
         }, timeout);                       
       })            
   
+     //with white-space: pre-wrap no need to convert \n to BR
+     /*
      asyncTest("should replace <br> with newline (on show) and back (on save)", function () {
         var  v = '12<br>\n3&lt;i&gt;4<br />56',
              e = $('<a href="#" data-type="textarea" data-pk="1" data-url="post.php">'+v+'</a>').appendTo(fx).editable(),
@@ -80,7 +82,32 @@ $(function () {
            e.remove();    
            start();  
         }, timeout);           
-    })  
+    }) 
+    */ 
+   asyncTest("should keep newlines on show and on save", function () {
+        var  v = '12\n56',
+             e = $('<a href="#" data-type="textarea" data-pk="1" data-url="post.php">'+v+'</a>').appendTo(fx).editable(),
+             vnew = "12\n3<b>4\n56\n\n78",
+             vnew2 = "12\n3&lt;b&gt;4\n56\n\n78";
+
+        equal(e.data('editable').value, v, '\\n preserved');               
+ 
+        e.click();
+        var p = tip(e);
+        equal(p.find('textarea').val(), e.data('editable').value, 'textarea contains correct value');
+
+        p.find('textarea').val(vnew)
+        p.find('form').submit(); 
+        
+        setTimeout(function() {
+           ok(!p.is(':visible'), 'popover closed')
+           equal(e.data('editable').value, vnew, 'new text saved to value')
+           equal(e.html().toLowerCase(), vnew2.toLowerCase(), 'new text shown') 
+           e.remove();    
+           start();  
+        }, timeout);           
+    });     
+    
     
      asyncTest("submit by ctrl+enter", function () {
         expect(2);