// ==UserScript==
// @name         Imgur: enable line breaks in comments in the old design
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  This script makes line breaks in comments visible. Normally, in the HTML, they are new line characters (\n), which aren't displayed as line breaks by a browser. This simply replaces them with <br/> elements, which are. You can enter line breaks, with or without this script, by pasting them from the clipboard.
// @author       Corrodias
// @match        https://imgur.com/gallery/*
// @match        https://imgur.com/user/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=imgur.com
// @grant        none
// @license      MIT
// ==/UserScript==
(function() {
'use strict';
if (typeof imgur === 'undefined') return; // This is not the old design.
let isGallery = window.location.pathname.startsWith('/gallery/'); // Otherwise, it's a user page.
waitForElement('#captions').then(commentsSection => {
// Update all currently displayed comments.
updateComments(commentsSection);
// Do the same on any comment that is loaded dynamically.
mutationObserver.observe(commentsSection, { childList: true, subtree: true });
});
//////////////////////////////////////////////////
// The comments container is not necessarily loaded before the script runs. Wait for it.
function waitForElement(selector) {
return new Promise(resolve => {
if (document.querySelector(selector))
return resolve(document.querySelector(selector));
const observer = new MutationObserver(() => {
if (document.querySelector(selector)) {
observer.disconnect();
resolve(document.querySelector(selector));
}
});
observer.observe(document.body, { childList: true, subtree: true });
});
}
const mutationObserver = new MutationObserver(mutations => {
for (const mutation of mutations) {
for (const node of mutation.addedNodes) {
if (node.nodeType === Node.ELEMENT_NODE) {
//console.log(node);
processAddedElementOldDesign(node);
}
}
}
});
function processAddedElementOldDesign(node) {
if (isGallery && node.classList.contains('children')) {
// Replies were expanded, or navigation to a new post loaded a whole, new set of comments. We can safely update just the new nodes.
updateComments(node);
} else if (isGallery && node.classList.contains('comment')) {
// The user navigated to the "context" or "permalink" of an already displayed comment. Imgur modifies the existing structure rather than replace the nodes.
updateComments(document.querySelector('#captions')); // The node that was added was a reply, not the top level comment, to replace all of them.
} else if (!isGallery && node.classList.length === 0 && node.tagName === 'DIV') {
// Comments on a user's "comments" or "replies" pages just loaded.
updateComments(node);
}
}
function getPointsDetailsConfig() {
return {
getSubElements: (node) => node.querySelectorAll('.caption'),
getCommentDataFunction: getCommentDataOldDesign,
};
}
function updateComments(node) {
let config = getPointsDetailsConfig();
let commentElements = config.getSubElements(node);
for (const element of commentElements) {
// Pull the comment data from the React objects.
let commentData = config.getCommentDataFunction(element);
if (commentData === undefined || commentData === null) continue; // no data found
// Update the text.
let text = element.querySelector('div.usertext > span > span');
if (text.innerHTML != null)
text.innerHTML = text.innerHTML.replaceAll('\n', '<br/>');
}
}
function getCommentDataOldDesign(node) {
// The rest of the name past the $ is not always identical.
for (const propertyKey in node) {
if (propertyKey.startsWith('__reactInternalInstance$'))
return node[propertyKey]._currentElement._owner._instance.props.comment;
}
return null;
}
})();