Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
$(() => {
const observer = new MutationObserver(addFormatControls)
observer.observe(document.querySelector('body'), {attributes: true, subtree: true})
function getCommentInput (optionsElement) {
return $(optionsElement).closest('.comment-box').find('textarea').get(0)
}
function wrapSelection (input, wrap) {
const selection = input.value.slice(input.selectionStart, input.selectionEnd)
if (selection.length > 0) {
if (selection.length >= wrap.length * 2 && selection.startsWith(wrap) && selection.endsWith(wrap)) {
replaceSelection(input, selection.slice(wrap.length, - wrap.length))
}
else {
replaceSelection(input, wrap + selection + wrap)
}
}
}
function replaceSelection (input, replacement) {
const text = input.value
const selectionStart = input.selectionStart
const selection = text.slice(selectionStart, input.selectionEnd)
input.value = text.slice(0, selectionStart) + replacement + text.slice(input.selectionEnd)
input.setSelectionRange(selectionStart, selectionStart + replacement.length)
input.focus()
}
function handleWrapButton(button, wrap) {
const input = getCommentInput(button)
wrapSelection(input, wrap)
input.focus()
}
function addFormatControls () {
$('.comment-box-options:visible:not(.bnnt)')
.addClass('bnnt')
.prepend('<a class="comment-box-options-item js-comment-bnnt-italic" href="#" title="Italic"><span class="icon-sm"><i>I</i></span></a>')
.prepend('<a class="comment-box-options-item js-comment-bnnt-bold" href="#" title="Bold"><span class="icon-sm"><b>B</b></span></a>')
.append('<a class="comment-box-options-item js-comment-bnnt-help" href="https://help.trello.com/article/821-using-markdown-in-trello" target="_blank" title="Help"><span class="icon-sm">&#xE933;</span></a>')
.each(function() {
$(this).find('.js-comment-bnnt-bold').click(function() { handleWrapButton(this, '**') })
$(this).find('.js-comment-bnnt-italic').click(function() { handleWrapButton(this, '_') })
})
}
})
/* UNUSED
//check for relevant path changes (in Trello, DOM mutation can happen without any path change so this is inappropriate)
let currentPath = document.location.pathname
function checkForCard() {
const newPath = document.location.pathname
if (currentPath !== newPath) {
if ( ! /^\/c\//.test(currentPath) && /^\/c\//.test(newPath)) {
window.setTimeout(addFormatControls, 500)
}
currentPath = newPath
}
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment