side by side preview

public/src/modules/composer.js

@@ -2,7 +2,17 @@
 
 /* globals define, socket, app, config, ajaxify, utils, translator, templates, bootbox */
 
-define('composer', ['taskbar', 'composer/controls', 'composer/uploads', 'composer/formatting', 'composer/drafts', 'composer/tags'], function(taskbar, controls, uploads, formatting, drafts, tags) {
+var dependencies = [
+	'taskbar',
+	'composer/controls',
+	'composer/uploads',
+	'composer/formatting',
+	'composer/drafts',
+	'composer/tags',
+	'composer/preview'
+];
+
+define('composer', dependencies, function(taskbar, controls, uploads, formatting, drafts, tags, preview) {
 	var composer = {
 		active: undefined,
 		posts: {},
@@ -214,7 +224,7 @@ define('composer', ['taskbar', 'composer/controls', 'composer/uploads', 'compose
 					uploads.toggleThumbEls(postContainer, composer.posts[post_uuid].topic_thumb || '');
 				}
 
-				bodyEl.val(draft ? draft : postData.body);
+
 
 				postContainer.on('change', 'input, textarea', function() {
 					composer.posts[post_uuid].modified = true;
@@ -249,14 +259,12 @@ define('composer', ['taskbar', 'composer/controls', 'composer/uploads', 'compose
 					return false;
 				});
 
-				bodyEl.on('blur', function() {
-					socket.emit('modules.composer.renderPreview', bodyEl.val(), function(err, preview) {
-						preview = $(preview);
-						preview.find('img').addClass('img-responsive');
-						postContainer.find('.preview').html(preview);
-					});
+				bodyEl.on('input propertychange', function() {
+					preview.render(postContainer);
 				});
 
+				bodyEl.val(draft ? draft : postData.body);
+				preview.render(postContainer);
 				drafts.init(postContainer, postData);
 
 				handleResize(postContainer);
@@ -274,7 +282,6 @@ define('composer', ['taskbar', 'composer/controls', 'composer/uploads', 'compose
 
 				formatting.addComposerButtons();
 
-
 			});
 		});
 	}

public/src/modules/composer/formatting.js

@@ -2,7 +2,7 @@
 
 /* globals define */
 
-define('composer/formatting', ['composer/controls'], function(controls) {
+define('composer/formatting', ['composer/controls', 'composer/preview'], function(controls, preview) {
 
 	var formatting = {};
 
@@ -86,6 +86,7 @@ define('composer/formatting', ['composer/controls'], function(controls) {
 
 			if(formattingDispatchTable.hasOwnProperty(iconClass)){
 				formattingDispatchTable[iconClass](textarea, textarea.selectionStart, textarea.selectionEnd);
+				preview.render(postContainer);
 			}
 		});
 	};

public/src/modules/composer/preview.js

@@ -0,0 +1,22 @@
+'use strict';
+
+/* globals define, socket*/
+
+define('composer/preview', function() {
+	var preview = {};
+
+	preview.render = function(postContainer) {
+
+		var textarea = postContainer.find('textarea');
+		socket.emit('modules.composer.renderPreview', textarea.val(), function(err, preview) {
+			if (err) {
+				return;
+			}
+			preview = $(preview);
+			preview.find('img').addClass('img-responsive');
+			postContainer.find('.preview').html(preview);
+		});
+	};
+
+	return preview;
+});