diff --git a/public/src/modules/composer.js b/public/src/modules/composer.js index 560c751e7a..5cbc4ca399 100644 --- a/public/src/modules/composer.js +++ b/public/src/modules/composer.js @@ -414,6 +414,90 @@ define(['taskbar'], function(taskbar) { thumbForm.submit(); } + function handleFormattingBarClick() { + var iconClass = $(this).find('i').attr('class'); + var textarea = $(this).parents('.composer').find('textarea')[0]; + + var textareaValue = $(textarea).val(); + + var selectionStart = textarea.selectionStart, + selectionEnd = textarea.selectionEnd, + selectionLength = selectionEnd - selectionStart, + isSelectionAtEnd = selectionStart === selectionEnd; + + function updateSelection(start, end){ + textarea.setSelectionRange(start, end); + textarea.focus(); + } + + function insertIntoInput(value) { + $(textarea).val(textareaValue.slice(0, selectionStart) + value + textareaValue.slice(selectionStart)); + } + + function wrapSelectedWith(leading, trailing){ + if(trailing === undefined){ + trailing = leading; + } + + $(textarea).val(textareaValue.slice(0, selectionStart) + leading + textareaValue.slice(selectionStart, selectionEnd) + trailing + textareaValue.slice(selectionEnd)); + } + + if(iconClass === 'fa fa-bold') { + if (isSelectionAtEnd) { + insertIntoInput("**bolded text**"); + + updateSelection(selectionStart + 2, selectionStart + 13); + } else { + wrapSelectedWith('**'); + + // Highlight selection + updateSelection(selectionStart + 2, selectionEnd + 2); + } + } + + if(iconClass === 'fa fa-italic') { + if (isSelectionAtEnd) { + insertIntoInput("*italicised text*"); + + // Highlight selection + updateSelection(selectionStart + 1, selectionStart + 16); + } else { + wrapSelectedWith('*'); + + // Highlight selection + updateSelection(selectionStart + 1, selectionEnd + 1); + } + } + + if (iconClass === 'fa fa-list'){ + if(isSelectionAtEnd){ + insertIntoInput("\n* list item"); + + // Highlight "list item" + updateSelection(selectionStart + 3, selectionStart + 12); + } else { + wrapSelectedWith('\n* ', ''); + + // Maintain selection: + updateSelection(selectionStart + 3, selectionEnd + 3); + } + } + + if (iconClass === 'fa fa-link') { + if (isSelectionAtEnd) { + insertIntoInput("[link text](link url)"); + + // Highlight "link url" + updateSelection(selectionStart + 12, selectionEnd + 20); + } else { + wrapSelectedWith('[', '](link url)'); + + // Highlight "link url" + updateSelection(selectionStart + selectionLength + 3, selectionEnd + 11); + } + } + } + composer.newTopic = function(cid) { if(!allowed()) { return; @@ -624,71 +708,7 @@ define(['taskbar'], function(taskbar) { } }); - postContainer.on('click', '.formatting-bar span', function() { - var postContentEl = postContainer.find('textarea'), - iconClass = $(this).find('i').attr('class'), - selectionStart = postContentEl[0].selectionStart, - selectionEnd = postContentEl[0].selectionEnd, - selectionLength = selectionEnd - selectionStart, - cursorPos; - - - function insertIntoInput(element, value) { - var start = postContentEl[0].selectionStart; - element.val(element.val().slice(0, start) + value + element.val().slice(start, element.val().length)); - postContentEl[0].selectionStart = postContentEl[0].selectionEnd = start + value.length; - } - - switch(iconClass) { - case 'fa fa-bold': - if (selectionStart === selectionEnd) { - // Nothing selected - cursorPos = postContentEl[0].selectionStart; - insertIntoInput(postContentEl, "**bolded text**"); - - // Highlight "link url" - postContentEl[0].selectionStart = cursorPos + 12; - postContentEl[0].selectionEnd = cursorPos + 20; - } else { - // Text selected - postContentEl.val(postContentEl.val().slice(0, selectionStart) + '**' + postContentEl.val().slice(selectionStart, selectionEnd) + '**' + postContentEl.val().slice(selectionEnd)); - postContentEl[0].selectionStart = selectionStart + 2; - postContentEl[0].selectionEnd = selectionEnd + 2; - } - break; - case 'fa fa-italic': - if (selectionStart === selectionEnd) { - // Nothing selected - insertIntoInput(postContentEl, "*italicised text*"); - } else { - // Text selected - postContentEl.val(postContentEl.val().slice(0, selectionStart) + '*' + postContentEl.val().slice(selectionStart, selectionEnd) + '*' + postContentEl.val().slice(selectionEnd)); - postContentEl[0].selectionStart = selectionStart + 1; - postContentEl[0].selectionEnd = selectionEnd + 1; - } - break; - case 'fa fa-list': - // Nothing selected - insertIntoInput(postContentEl, "\n* list item"); - break; - case 'fa fa-link': - if (selectionStart === selectionEnd) { - // Nothing selected - cursorPos = postContentEl[0].selectionStart; - insertIntoInput(postContentEl, "[link text](link url)"); - - // Highlight "link url" - postContentEl[0].selectionStart = cursorPos + 12; - postContentEl[0].selectionEnd = cursorPos + 20; - } else { - // Text selected - postContentEl.val(postContentEl.val().slice(0, selectionStart) + '[' + postContentEl.val().slice(selectionStart, selectionEnd) + '](link url)' + postContentEl.val().slice(selectionEnd)); - postContentEl[0].selectionStart = selectionStart + selectionLength + 3; - postContentEl[0].selectionEnd = selectionEnd + 11; - } - break; - } - }); + postContainer.on('click', '.formatting-bar span', handleFormattingBarClick); postContainer.on('click', '.formatting-bar span .fa-picture-o, .formatting-bar span .fa-upload', function() { $('#files').click();