Making heading block plain text

src/heading.js

@@ -12,11 +12,38 @@ SirTrevor.Blocks.Heading = SirTrevor.Block.extend({
   formattingEnabled: false,
 
   editorHTML: function() {
-		return _.template('<h2 class="required text-block <%= className %>" contenteditable="true"></h2>', this);
+		return _.template('<div class="expanding-textarea"><pre><span></span><br></pre><textarea class="required <%= className %>"></textarea></div>', this);
 	},
 
-	loadData: function(data){
-     this.$$('.text-block').html(data.text);
+  loadData: function(data){
+    this.$$('.heading').html(data.text);
+  },
+
+  onBlockRender: function(){
+    /* Make our expanding text area */
+
+    var cont = this.$$('.expanding-textarea'),
+        area = cont.find('textarea'),
+        span = cont.find('span');
+
+    area.bind('input', function(){
+      span.text(area.val());
+    });
+
+    cont.addClass('active');
+
+		area.focus();
+
+  },
+
+  toData: function() {
+    var bl = this.$el,
+        dataObj = {}
+
+    dataObj.text = this.$$('.heading').val();
+
+		this.setData(dataObj)
+
   }
 
 });