Replacement for textarea and expanding.

app/assets/javascripts/app/controllers/widget/organization.js.coffee

@@ -41,16 +41,11 @@ class App.WidgetOrganization extends App.Controller
       organizationData: organizationData
     )
 
-    a = =>
-      visible = @el.find('textarea').is(":visible")
-      if visible && !@el.find('textarea').expanding('active')
-        @el.find('textarea').expanding()
-      @el.find('textarea').on('focus', (e) =>
-        visible = @el.find('textarea').is(":visible")
-        if visible && !@el.find('textarea').expanding('active')
-          @el.find('textarea').expanding()
-      )
-    @delay( a, 40 )
+    @$('div [contenteditable]').ce(
+      mode:      'textonly'
+      multiline: true
+      maxlength: 250
+    )
 
     # enable user popups
     @userPopups()
@@ -64,7 +59,7 @@ class App.WidgetOrganization extends App.Controller
     ###
 
   update: (e) =>
-    note   = $(e.target).val()
+    note = $(e.target).ceg({ mode: 'textonly' })
     organization = App.Organization.find( @organization_id )
     if organization.note isnt note
       organization.updateAttributes( note: note )

app/assets/javascripts/app/controllers/widget/user.js.coffee

@@ -73,16 +73,11 @@ class App.WidgetUser extends App.Controller
       userData: userData
     )
 
-    a = =>
-      visible = @el.find('textarea').is(":visible")
-      if visible && !@el.find('textarea').expanding('active')
-        @el.find('textarea').expanding()
-      @el.find('textarea').on('focus', (e) =>
-        visible = @el.find('textarea').is(":visible")
-        if visible && !@el.find('textarea').expanding('active')
-          @el.find('textarea').expanding()
-      )
-    @delay( a, 40 )
+    @$('div[contenteditable]').ce(
+      mode:      'textonly'
+      multiline: true
+      maxlength: 250
+    )
 
     @userTicketPopups(
       selector: '.user-tickets'
@@ -90,17 +85,8 @@ class App.WidgetUser extends App.Controller
       position: 'right'
     )
 
-    ###
-    if user.organization_id
-      @el.append('<div class="org-info"></div>')
-      new App.WidgetOrganization(
-        organization_id: user.organization_id
-        el:              @el.find('.org-info')
-      )
-    ###
-
   update: (e) =>
-    note = $(e.target).val()
+    note = $(e.target).ceg({ mode: 'textonly' })
     user = App.User.find( @user_id )
     if user.note isnt note
       user.updateAttributes( note: note )

app/assets/javascripts/app/views/widget/organization.jst.eco

@@ -8,7 +8,7 @@
         <div class="customer-info" title="<%- @Ti( row.display ) %>"><%- @L( @P( @organization[row.name] ) ) %></div>
       <% else: %>
         <div class="customer-info" title="<%- @Ti( row.display ) %>">
-          <textarea class="customer-info" rows="3" name="<%= row.name %>" data-type="update-org" placeholder="<%- @T( row.display ) %>"><%= @organization[row.name] %></textarea>
+          <div contenteditable="true" class="textbox" data-name="<%= row.name %>" data-type="update-org" data-placeholder="<%- @T('Add a Note') %>"><%= @organization[row.name] %></div>
         </div>
       <% end %>
     <% end %>

app/assets/javascripts/app/views/widget/user.jst.eco

@@ -17,7 +17,7 @@
     <% else: %>
       <div class="userInfo-label"><%- @Ti( row.display ) %></div>
       <div class="userInfo-value">
-        <textarea rows="1" name="<%= row.name %>" data-type="update" placeholder="<%- @T('Add a Note') %>"><%= @user[row.name] %></textarea>
+        <div contenteditable="true" class="textbox" data-name="<%= row.name %>" data-type="update" data-placeholder="<%- @T('Add a Note') %>"><%= @user[row.name] %></div>
       </div>
     <% end %>
     </div>

app/assets/stylesheets/zzz.css.erb

@@ -1363,17 +1363,6 @@ footer {
   color: #bbb;
 }
 
-.inline-edit {
-  padding: 4px;
-}
-.inline-edit:hover {
-  padding: 3px;
-  border: 1px dotted #F92;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-
 .translation {
   border: 1px dotted #F92;
   -webkit-border-radius: 3px;
@@ -3440,6 +3429,24 @@ footer {
   margin-top: 1px;
 }
 
+.textbox[contenteditable] {
+  white-space: pre;
+  padding: 1px;
+  outline-style: none;
+}
+.textbox[contenteditable]:hover, .textbox[contenteditable]:focus {
+  padding: 0;
+  border: 1px dotted hsl(145,51%,45%);
+  border-radius: 3px;
+}
+.textbox[contenteditable].invalid {
+  padding: 0;
+  border: 1px dotted #F92;
+  border-radius: 3px;
+}
+.textbox > .placeholder {
+  color: #999;
+}
 /*
 
   ----------------