Github Reply Comments

Easy reply to Github comments

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==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);
})();