☰

GitHub Issue Add Details

A userscript that adds a button to insert a details block into comments

目前為 2022-10-24 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name        GitHub Issue Add Details
  3. // @version     1.0.12
  4. // @description A userscript that adds a button to insert a details block into comments
  5. // @license     MIT
  6. // @author      Rob Garrison
  7. // @namespace   https://github.com/Mottie
  8. // @include     https://github.com/*
  9. // @run-at      document-idle
  10. // @grant       none
  11. // @require     https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=1108163
  12. // @require     https://greasyfork.org/scripts/398877-utils-js/code/utilsjs.js?version=1079637
  13. // @require     https://greasyfork.org/scripts/28239-rangy-inputs-mod-js/code/rangy-inputs-modjs.js?version=181769
  14. // @icon        https://github.githubassets.com/pinned-octocat.svg
  15. // @supportURL  https://github.com/Mottie/GitHub-userscripts/issues
  16. // ==/UserScript==
  17. /* global $ $$ on make */
  18. (() => {
  19. 	"use strict";
  20.  
  21. 	const icon = `
  22. 		<svg class="octicon" style="pointer-events:none" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  23. 			<path d="M15.5 9h-7C8 9 8 8.6 8 8s0-1 .5-1h7c.5 0 .5.4.5 1s0 1-.5 1zm-5-5c-.5 0-.5-.4-.5-1s0-1 .5-1h5c.5 0 .5.4.5 1s0 1-.5 1h-5zM0 2h8L4 7 0 2zm8.5 10h7c.5 0 .5.4.5 1s0 1-.5 1h-7c-.5 0-.5-.4-.5-1s0-1 .5-1z"/>
  24. 		</svg>`,
  25.  
  26. 		detailsBlock = [
  27. 			// start details block
  28. 			"<details>\n<summary>Title</summary>\n\n<!-- leave a blank line above -->\n",
  29. 			// selected content/caret will be placed here
  30. 			"\n</details>\n"
  31. 		];
  32.  
  33. 	// Add insert details button
  34. 	const addDetailsButton = () => {
  35. 		const button = make({
  36. 			el: "button",
  37. 			className: "ghad-details btn-link toolbar-item btn-octicon no-underline tooltipped tooltipped-n",
  38. 			attrs: {
  39. 				"aria-label": "Add a details/summary block",
  40. 				tabindex: "-1",
  41. 				type: "button"
  42. 			},
  43. 			html: icon
  44. 		});
  45. 		$$(".toolbar-commenting").forEach(el => {
  46. 			if (el && !$(".ghad-details", el)) {
  47. 				const btn = $("md-quote", el);
  48. 				btn.before(button.cloneNode(true));
  49. 			}
  50. 		});
  51. 	};
  52.  
  53. 	const addBindings = () => {
  54. 		window.rangyInput.init();
  55. 		on($("body"), "click", event => {
  56. 			const { target } = event;
  57. 			if (target?.classList.contains("ghad-details")) {
  58. 				event.preventDefault();
  59. 				const form = target.closest(".previewable-comment-form");
  60. 				const textarea = $(".comment-form-textarea", form);
  61. 				setTimeout(() => {
  62. 					textarea.focus();
  63. 					window.rangyInput.surroundSelectedText(
  64. 						textarea,
  65. 						detailsBlock[0], // prefix
  66. 						detailsBlock[1] // suffix
  67. 					);
  68. 				}, 100);
  69. 				return false;
  70. 			}
  71. 		});
  72. 	};
  73.  
  74. 	on(document, "ghmo:container, ghmo:comments", addDetailsButton);
  75.  
  76. 	addDetailsButton();
  77. 	addBindings();
  78.  
  79. })();