☰

GitHub RTL Comments

A userscript that adds a button to insert RTL text blocks in comments

  1. // ==UserScript==
  2. // @name        GitHub RTL Comments
  3. // @version     1.3.4
  4. // @description A userscript that adds a button to insert RTL text blocks in comments
  5. // @license     MIT
  6. // @author      Rob Garrison
  7. // @namespace   https://github.com/Mottie
  8. // @match       https://github.com/*
  9. // @match       https://gist.github.com/*
  10. // @run-at      document-idle
  11. // @grant       GM_addStyle
  12. // @grant       GM.addStyle
  13. // @connect     github.com
  14. // @require     https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js?updated=20180103
  15. // @require     https://greatest.deepsurf.us/scripts/28721-mutations/code/mutations.js?version=1108163
  16. // @require     https://greatest.deepsurf.us/scripts/28239-rangy-inputs-mod-js/code/rangy-inputs-modjs.js?version=181769
  17. // @icon        https://github.githubassets.com/pinned-octocat.svg
  18. // @supportURL  https://github.com/Mottie/GitHub-userscripts/issues
  19. // ==/UserScript==
  20.  
  21. (() => {
  22. 	"use strict";
  23.  
  24. 	const icon = `
  25. 		<svg class="octicon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
  26. 			<path d="M14 3v8l-4-4m-7 7V6C1 6 0 5 0 3s1-3 3-3h7v2H9v12H7V2H5v12H3z"/>
  27. 		</svg>`,
  28.  
  29. 		// maybe using &#x2067; RTL text &#x2066; (isolates) is a better combo?
  30. 		openRTL = "&rlm;",  // https://en.wikipedia.org/wiki/Right-to-left_mark
  31. 		closeRTL = "&lrm;", // https://en.wikipedia.org/wiki/Left-to-right_mark
  32.  
  33. 		regexOpen = /\u200f/ig,
  34. 		regexClose = /\u200e/ig,
  35. 		regexSplit = /(\u200f|\u200e)/ig;
  36.  
  37. 	GM.addStyle(`
  38. 		.ghu-rtl-css { direction:rtl; text-align:right; }
  39. 		/* delegated binding; ignore clicks on svg & path */
  40. 		.ghu-rtl > * { pointer-events:none; }
  41. 		/* override RTL on code blocks */
  42. 		.js-preview-body pre, .markdown-body pre,
  43. 		.js-preview-body code, .markdown-body code {
  44. 			direction:ltr;
  45. 			text-align:left;
  46. 			unicode-bidi:normal;
  47. 		}
  48. 	`);
  49.  
  50. 	// Add RTL button
  51. 	function addRtlButton() {
  52. 		let el, button,
  53. 			toolbars = $$(".toolbar-commenting"),
  54. 			indx = toolbars.length;
  55. 		if (indx) {
  56. 			button = document.createElement("button");
  57. 			button.type = "button";
  58. 			button.className = "btn-octicon ghu-rtl toolbar-item tooltipped tooltipped-n";
  59. 			button.setAttribute("aria-label", "RTL");
  60. 			button.setAttribute("tabindex", "-1");
  61. 			button.innerHTML = icon;
  62. 			while (indx--) {
  63. 				el = toolbars[indx];
  64. 				if (!$(".ghu-rtl", el)) {
  65. 					el.insertBefore(button.cloneNode(true), el.childNodes[0]);
  66. 				}
  67. 			}
  68. 		}
  69. 		checkRTL();
  70. 	}
  71.  
  72. 	function checkContent(el) {
  73. 		// check the contents, and wrap in either a span or div
  74. 		let indx, // useDiv,
  75. 			html = el.innerHTML,
  76. 			parts = html.split(regexSplit),
  77. 			len = parts.length;
  78. 		for (indx = 0; indx < len; indx++) {
  79. 			if (regexOpen.test(parts[indx])) {
  80. 				// check if the content contains HTML
  81. 				// useDiv = regexTestHTML.test(parts[indx + 1]);
  82. 				// parts[indx] = (useDiv ? "<div" : "<span") + " class='ghu-rtl-css'>";
  83. 				parts[indx] = "<div class='ghu-rtl-css'>";
  84. 			} else if (regexClose.test(parts[indx])) {
  85. 				// parts[indx] = useDiv ? "</div>" : "</span>";
  86. 				parts[indx] = "</div>";
  87. 			}
  88. 		}
  89. 		el.innerHTML = parts.join("");
  90. 		// remove empty paragraph wrappers (may have previously contained the mark)
  91. 		return el.innerHTML.replace(/<p><\/p>/g, "");
  92. 	}
  93.  
  94. 	function checkRTL() {
  95. 		let clone,
  96. 			indx = 0,
  97. 			div = document.createElement("div"),
  98. 			containers = $$(".js-preview-body, .markdown-body"),
  99. 			len = containers.length,
  100. 			// main loop
  101. 			loop = () => {
  102. 				let el, tmp,
  103. 					max = 0;
  104. 				while (max < 10 && indx < len) {
  105. 					if (indx > len) {
  106. 						return;
  107. 					}
  108. 					el = containers[indx];
  109. 					tmp = el.innerHTML;
  110. 					if (regexOpen.test(tmp) || regexClose.test(tmp)) {
  111. 						clone = div.cloneNode();
  112. 						clone.innerHTML = tmp;
  113. 						// now we can replace all instances
  114. 						el.innerHTML = checkContent(clone);
  115. 						max++;
  116. 					}
  117. 					indx++;
  118. 				}
  119. 				if (indx < len) {
  120. 					setTimeout(() => {
  121. 						loop();
  122. 					}, 200);
  123. 				}
  124. 			};
  125. 		loop();
  126. 	}
  127.  
  128. 	function addBindings() {
  129. 		window.rangyInput.init();
  130. 		$("body").addEventListener("click", event => {
  131. 			let textarea,
  132. 				target = event.target;
  133. 			if (target && target.classList.contains("ghu-rtl")) {
  134. 				textarea = closest(".previewable-comment-form", target);
  135. 				textarea = $(".comment-form-textarea", textarea);
  136. 				textarea.focus();
  137. 				// add extra white space around the tags
  138. 				window.rangyInput.surroundSelectedText(
  139. 					textarea,
  140. 					" " + openRTL + " ",
  141. 					" " + closeRTL + " "
  142. 				);
  143. 				return false;
  144. 			}
  145. 		});
  146. 	}
  147.  
  148. 	function $(selector, el) {
  149. 		return (el || document).querySelector(selector);
  150. 	}
  151.  
  152. 	function $$(selector, el) {
  153. 		return Array.from((el || document).querySelectorAll(selector));
  154. 	}
  155.  
  156. 	function closest(selector, el) {
  157. 		while (el && el.nodeType === 1) {
  158. 			if (el.matches(selector)) {
  159. 				return el;
  160. 			}
  161. 			el = el.parentNode;
  162. 		}
  163. 		return null;
  164. 	}
  165.  
  166. 	document.addEventListener("ghmo:container", addRtlButton);
  167. 	document.addEventListener("ghmo:preview", checkRTL);
  168. 	addBindings();
  169. 	addRtlButton();
  170.  
  171. })();