Github Reply Comments

Easy reply to Github comments

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

You will need to install an extension such as Tampermonkey to install this script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

// ==UserScript==
// @name             Github Reply Comments
// @namespace        https://github.com/jerone/UserScripts
// @description      Easy reply to Github comments
// @author           jerone
// @copyright        2016+, jerone (https://github.com/jerone)
// @license          CC-BY-NC-SA-4.0; https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode
// @license          GPL-3.0-or-later; http://www.gnu.org/licenses/gpl-3.0.txt
// @homepage         https://github.com/jerone/UserScripts/tree/master/Github_Reply_Comments
// @homepageURL      https://github.com/jerone/UserScripts/tree/master/Github_Reply_Comments
// @supportURL       https://github.com/jerone/UserScripts/issues
// @contributionURL  https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VCYMHWQ7ZMBKW
// @version          1.0.6
// @icon             https://github.githubassets.com/pinned-octocat.svg
// @grant            none
// @include          https://github.com/*
// @include          https://gist.github.com/*
// @require          https://unpkg.com/[email protected]/dist/turndown.js
// @require          https://unpkg.com/[email protected]/dist/turndown-plugin-gfm.js
// @require          https://unpkg.com/[email protected]/turndown-plugin-github-code-snippet.js
// ==/UserScript==

// cSpell:ignore textareas, previewable, tooltipped
/* eslint security/detect-object-injection: "off" */
/* global TurndownService,turndownPluginGfm,turndownPluginGithubCodeSnippet */

(function () {
	String.format = function (string) {
		var args = Array.prototype.slice.call(arguments, 1, arguments.length);
		return string.replace(/{(\d+)}/g, function (match, number) {
			return typeof args[number] !== "undefined" ? args[number] : match;
		});
	};

	function turndownPluginGitHubAlert(turndownService) {
		turndownService.addRule("gfm-alert", {
			filter: function (node, _options) {
				return (
					node.nodeName === "DIV" &&
					node.classList.contains("markdown-alert")
				);
			},
			replacement: function (content, node, options) {
				const variant = node
					.querySelector(".markdown-alert-title")
					.innerText.trim();
				content = content.replace(/^\n+|\n+$/g, "");
				content = content.replace(
					// eslint-disable-next-line security/detect-non-literal-regexp
					new RegExp("^" + variant),
					"[!" + variant.toUpperCase() + "]",
				);
				return options.rules.blockquote.replacement(content);
			},
		});
	}

	var turndownService = new TurndownService({
		headingStyle: "atx",
		codeBlockStyle: "fenced",
		hr: "***",
	});
	turndownService.use(turndownPluginGfm.gfm);
	turndownService.use(turndownPluginGithubCodeSnippet);
	turndownService.use(turndownPluginGitHubAlert);

	function getCommentTextarea(replyBtn) {
		var newComment = replyBtn;
		while (
			newComment &&
			!newComment.classList.contains("js-quote-selection-container")
		) {
			newComment = newComment.parentNode;
		}

		var inlineComment = newComment.querySelector(
			".js-inline-comment-form-container",
		);
		if (inlineComment) {
			inlineComment.classList.add("open");
		}

		var textareas = newComment.querySelectorAll(
			":scope > :not(.last-review-thread) .js-comment-field:not(.github-writer-ckeditor)",
		);
		return textareas[textareas.length - 1];
	}

	function getCommentMarkdown(comment) {
		var commentText = "";

		// Use raw comment when available.
		// Extra scope is needed to get the correct comment field, which is not an "Reference new issue" modal (with org rights).
		var commentForm = comment.querySelector(
			":scope > .js-comment-update .js-comment-field",
		);
		if (commentForm) {
			commentText = commentForm.value;
		}

		// Convert comment HTML to markdown.
		if (!commentText) {
			// Clone it, so we can alter the HTML a bit, without modifying the page.
			var commentBody = comment
				.querySelector(".comment-body")
				.cloneNode(true);

			// Skip empty PR description.
			if (
				commentBody
					.querySelector("em")
					?.innerText.includes("No description provided.")
			) {
				return "";
			}

			// Remove 'Toggle code wrap' buttons from https://greasyfork.org/en/scripts/18789-github-toggle-code-wrap
			Array.prototype.forEach.call(
				commentBody.querySelectorAll(".ghd-wrap-toggle"),
				function (ghd) {
					ghd.remove();
				},
			);

			// Refined GitHub adds a small avatar to username mention. See https://github.com/refined-github/refined-github/blob/main/source/features/small-user-avatars.tsx
			Array.prototype.forEach.call(
				commentBody.querySelectorAll(".rgh-small-user-avatars"),
				function (rgh) {
					rgh.remove();
				},
			);

			// GitHub add an extra new line, which is converted by Turndown.
			Array.prototype.forEach.call(
				commentBody.querySelectorAll("pre code"),
				function (pre) {
					pre.innerHTML = pre.innerHTML.replace(/\n$/g, "");
				},
			);

			commentText = turndownService.turndown(commentBody.innerHTML);
		}

		return commentText;
	}

	function addReplyButtons() {
		Array.prototype.forEach.call(
			document.querySelectorAll(".comment, .review-comment"),
			function (comment) {
				var oldReply = comment.querySelector(
					".GithubReplyComments, .GithubCommentEnhancerReply",
				);
				if (oldReply) {
					oldReply.parentNode.removeChild(oldReply);
				}

				var header = comment.querySelector(
						":scope > :not(.minimized-comment) .timeline-comment-header",
					),
					actions = comment.querySelector(
						":scope > :not(.minimized-comment) .timeline-comment-actions",
					);

				if (!header) {
					header = actions;
				}

				if (!actions) {
					if (!header) {
						return;
					}
					actions = document.createElement("div");
					actions.classList.add("timeline-comment-actions");
					header.insertBefore(actions, header.firstElementChild);
				}

				var reply = document.createElement("button");
				reply.setAttribute("type", "button");
				reply.setAttribute("title", "Reply to this comment");
				reply.setAttribute("aria-label", "Reply to this comment");
				reply.classList.add(
					"GithubReplyComments",
					"btn-link",
					"timeline-comment-action",
					"tooltipped",
					"tooltipped-ne",
				);
				reply.addEventListener("click", function (e) {
					e.preventDefault();

					var timestamp = comment.querySelector(
						".js-timestamp, .timestamp",
					);

					var commentText = getCommentMarkdown(comment);
					commentText = commentText
						.trim()
						.split("\n")
						.map(function (line) {
							return "> " + line;
						})
						.join("\n");

					var newComment = getCommentTextarea(this);

					var author = comment.querySelector(".author");
					var authorLink =
						location.origin +
						(author.getAttribute("href") ||
							"/" + author.textContent);

					var text = newComment.value.length > 0 ? "\n" : "";
					text += String.format(
						'[**@{0}**]({1}) commented on [{2}]({3} "{4} - Replied by Github Reply Comments"):\n{5}\n\n',
						author.textContent,
						authorLink,
						timestamp.firstElementChild.getAttribute("title"),
						timestamp.href,
						timestamp.firstElementChild.getAttribute("datetime"),
						commentText,
					);

					newComment.value += text;
					newComment.setSelectionRange(
						newComment.value.length,
						newComment.value.length,
					);
					//newComment.closest('.previewable-comment-form').querySelector('.js-write-tab').click();
					newComment.focus();

					// This will enable the "Comment" button, when there was no comment text yet.
					newComment.dispatchEvent(
						new CustomEvent("change", {
							bubbles: true,
							cancelable: false,
						}),
					);

					// This will render GitHub Writer - https://github.com/ckeditor/github-writer
					// https://github.com/ckeditor/github-writer/blob/8dbc12cb01b7903d0d6c90202078214a8637de6d/src/app/plugins/quoteselection.js#L116-L127
					const githubWriter = newComment.closest(
						[
							"form.js-new-comment-form[data-github-writer-id]",
							"form.js-inline-comment-form[data-github-writer-id]",
						].join(),
					);
					if (githubWriter) {
						window.postMessage(
							{
								type: "GitHub-Writer-Quote-Selection",
								id: Number(
									githubWriter.getAttribute(
										"data-github-writer-id",
									),
								),
								text: text,
							},
							"*",
						);
					}
				});

				var svg = document.createElementNS(
					"http://www.w3.org/2000/svg",
					"svg",
				);
				svg.classList.add("octicon", "octicon-mail-reply");
				svg.setAttribute("height", "16");
				svg.setAttribute("width", "16");
				reply.appendChild(svg);
				var path = document.createElementNS(
					"http://www.w3.org/2000/svg",
					"path",
				);
				path.setAttribute(
					"d",
					"M6 2.5l-6 4.5 6 4.5v-3c1.73 0 5.14 0.95 6 4.38 0-4.55-3.06-7.05-6-7.38v-3z",
				);
				svg.appendChild(path);

				actions.appendChild(reply);
			},
		);
	}

	// init;
	addReplyButtons();

	// on pjax;
	document.addEventListener("pjax:end", addReplyButtons);
})();