added new hook and method for plugins to introduce their own formatting options, #2743

public/src/modules/composer.js

@@ -16,11 +16,17 @@ define('composer', [
 	var composer = {
 		active: undefined,
 		posts: {},
-		bsEnvironment: undefined
+		bsEnvironment: undefined,
+		formatting: []
 	};
 
 	$(window).off('resize', onWindowResize).on('resize', onWindowResize);
 
+	// Query server for formatting options
+	socket.emit('modules.composer.getFormattingOptions', function(err, options) {
+		composer.formatting = options;
+	});
+
 	function onWindowResize() {
 		if (composer.active !== undefined) {
 			resize.reposition($('#cmp-uuid-' + composer.active));
@@ -232,8 +238,10 @@ define('composer', [
 			maximumTagLength: config.maximumTagLength,
 			isTopic: isTopic,
 			showHandleInput: (app.user.uid === 0 || (isEditing && isGuestPost && app.user.isAdmin)) && config.allowGuestHandles,
-			handle: composer.posts[post_uuid] ? composer.posts[post_uuid].handle || '' : undefined
+			handle: composer.posts[post_uuid] ? composer.posts[post_uuid].handle || '' : undefined,
+			formatting: composer.formatting
 		};
+		console.log(composer.formatting);
 
 		parseAndTranslate(template, data, function(composerTemplate) {
 			if ($('#cmp-uuid-' + post_uuid).length) {

public/src/modules/composer/formatting.js

@@ -7,61 +7,15 @@ define('composer/formatting', ['composer/controls', 'composer/preview'], functio
 	var formatting = {};
 
 	var formattingDispatchTable = {
-		'fa fa-bold': function(textarea, selectionStart, selectionEnd){
+		'picture-o': function(){
-			if(selectionStart === selectionEnd){
-				controls.insertIntoTextarea(textarea, '**bolded text**');
-				controls.updateTextareaSelection(textarea, selectionStart + 2, selectionStart + 13);
-			} else {
-				controls.wrapSelectionInTextareaWith(textarea, '**');
-				controls.updateTextareaSelection(textarea, selectionStart + 2, selectionEnd + 2);
-			}
-		},
-
-		'fa fa-italic': function(textarea, selectionStart, selectionEnd){
-			if(selectionStart === selectionEnd){
-				controls.insertIntoTextarea(textarea, "*italicised text*");
-				controls.updateTextareaSelection(textarea, selectionStart + 1, selectionStart + 16);
-			} else {
-				controls.wrapSelectionInTextareaWith(textarea, '*');
-				controls.updateTextareaSelection(textarea, selectionStart + 1, selectionEnd + 1);
-			}
-		},
-
-		'fa fa-list': function(textarea, selectionStart, selectionEnd){
-			if(selectionStart === selectionEnd){
-				controls.insertIntoTextarea(textarea, "\n* list item");
-
-				// Highlight "list item"
-				controls.updateTextareaSelection(textarea, selectionStart + 3, selectionStart + 12);
-			} else {
-				controls.wrapSelectionInTextareaWith(textarea, '\n* ', '');
-				controls.updateTextareaSelection(textarea, selectionStart + 3, selectionEnd + 3);
-			}
-		},
-
-		'fa fa-link': function(textarea, selectionStart, selectionEnd){
-			if(selectionStart === selectionEnd){
-				controls.insertIntoTextarea(textarea, "[link text](link url)");
-
-				// Highlight "link url"
-				controls.updateTextareaSelection(textarea, selectionStart + 12, selectionEnd + 20);
-			} else {
-				controls.wrapSelectionInTextareaWith(textarea, '[', '](link url)');
-
-				// Highlight "link url"
-				controls.updateTextareaSelection(textarea, selectionEnd + 3, selectionEnd + 11);
-			}
-		},
-
-		'fa fa-picture-o': function(){
 			$('#files').click();
 		},
 
-		'fa fa-upload': function(){
+		upload: function(){
 			$('#files').click();
 		},
 
-		'fa fa-tags': function() {
+		tags: function() {
 			$('.tags-container').toggleClass('hidden');
 		}
 	};
@@ -69,27 +23,35 @@ define('composer/formatting', ['composer/controls', 'composer/preview'], functio
 	var customButtons = [];
 
 	formatting.addComposerButtons = function() {
-		for (var button in customButtons) {
+		for(var x=0,numButtons=customButtons.length;x<numButtons;x++) {
-			if (customButtons.hasOwnProperty(button)) {
+			$('.formatting-bar .btn-group form').before('<span class="btn btn-link" tabindex="-1" data-format="' + customButtons[x].name + '"><i class="' + customButtons[x].iconClass + '"></i></span>');
-				$('.formatting-bar .btn-group form').before('<span class="btn btn-link" tabindex="-1"><i class="' + customButtons[button].iconClass + '"></i></span>');
-			}
-		}
 		}
+	};
 
 	formatting.addButton = function(iconClass, onClick) {
-		formattingDispatchTable[iconClass] = onClick;
+		var name = iconClass.replace('fa fa-', '');
+
+		formattingDispatchTable[name] = onClick;
 		customButtons.push({
+			name: name,
 			iconClass: iconClass
 		});
-	}
+	};
+
+	formatting.addButtonDispatch = function(name, onClick) {
+		formattingDispatchTable[name] = onClick;
+	};
 
 	formatting.addHandler = function(postContainer) {
 		postContainer.on('click', '.formatting-bar span', function () {
-			var iconClass = $(this).find('i').attr('class');
+			var format = $(this).attr('data-format'),
-			var textarea = $(this).parents('.composer').find('textarea')[0];
+				textarea = $(this).parents('.composer').find('textarea')[0];
+			console.log('handling', format);
 
-			if(formattingDispatchTable.hasOwnProperty(iconClass)){
+			console.log(formattingDispatchTable);
-				formattingDispatchTable[iconClass](textarea, textarea.selectionStart, textarea.selectionEnd);
+
+			if(formattingDispatchTable.hasOwnProperty(format)){
+				formattingDispatchTable[format](textarea, textarea.selectionStart, textarea.selectionEnd);
 				preview.render(postContainer);
 			}
 		});

src/socket.io/modules.js

@@ -114,6 +114,16 @@ SocketModules.composer.stopNotifyTyping = function(socket, data) {
 	server.in('topic_' + data.tid).emit('event:topic.stopNotifyTyping', data);
 };
 
+SocketModules.composer.getFormattingOptions = function(socket, data, callback) {
+	plugins.fireHook('filter:composer.formatting', {
+		options: [
+			// { className: 'fa fa-bold' }    Just an example of what needs to be set via plugins
+		]
+	}, function(err, payload) {
+		callback(err, payload.options);
+	});
+};
+
 /* Chat */
 
 SocketModules.chats.get = function(socket, data, callback) {