☰

Markdown toolbar for GreasyFork

Select Markdown format by default, add help links, add toolbar formatting buttons for markdown

2021-03-08 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

  1. // ==UserScript==
  2. // @name              Markdown toolbar for GreasyFork
  3. // @name:ru           Markdown-тулбар для GreasyFork
  4. // @name:zh-CN        GreasyFork markdown
  5. // @namespace         darkred
  6. // @version           2.0.0
  7. // @description       Select Markdown format by default, add help links, add toolbar formatting buttons for markdown
  8. // @description:ru    Включает формат Markdown по умолчанию, добавляет справочные ссылки по форматам, добавляет панель кнопок форматирования markdown
  9. // @description:zh-CN 在论坛默认使用 Markdown 格式，添加格式帮助链接及 Markdown 工具栏
  10. // @author            wOxxOm, darkred
  11. // @contributor       JixunMoe
  12. // @license           MIT
  13. // @icon              https://raw.githubusercontent.com/dcurtis/markdown-mark/master/png/66x40-solid.png
  14. // @include           https://greatest.deepsurf.us/*discussions/*
  15. // @include           https://greatest.deepsurf.us/*scripts/*/versions/new*
  16. // @include           https://greatest.deepsurf.us/*script_versions/new*
  17. // @include           https://greatest.deepsurf.us/*/conversations/*
  18. // @include           https://greatest.deepsurf.us/en/users/edit
  19. // @grant             GM_addStyle
  20. // @run-at            document-start
  21. // @supportURL        https://github.com/darkred/Userscripts/issues
  22. // ==/UserScript==
  23.  
  24. /* jshint lastsemic:true, multistr:true, laxbreak:true, -W030, -W041, -W084 */
  25.  
  26.  
  27. // Previous inclure rules - kept for reference
  28. // @include           https://forum.userstyles.org/discussion/*
  29. // @include           https://forum.userstyles.org/post/discussion*
  30. // @include           https://forum.userstyles.org/messages/*
  31. // @include           https://forum.userstyles.org/messages/add*
  32. // @include           https://forum.userstyles.org/*/editdiscussion/*
  33.  
  34.  
  35.  
  36. var inForum = location.href.indexOf('/discussions') > 0;
  37.  
  38. window.addEventListener('DOMContentLoaded', function(e) {
  39. 	if (inForum){
  40. 		addFeatures(document.querySelector('.label-note > input').parentNode.appendChild(document.createElement('br')));
  41. 	}
  42. 	else {
  43.  
  44. 		if (nn = document.querySelectorAll('input[value="markdown"]'))
  45. 			for (var n, i=0; (i<nn.length) && (n=nn[i]); i++) {
  46. 				if (location.href.indexOf('/script_versions/')) {
  47. 					n.click();
  48. 				}
  49. 				n.click(); // posting a new script
  50. 				addFeatures(n.parentNode.appendChild(document.createElement('br')));
  51. 			}
  52.  
  53. 		// addFeatures(document.querySelector('.form-control'));
  54. 	}
  55.  
  56. 	new MutationObserver(function(mutations) {
  57. 		for (var i=0, ml=mutations.length, m; (i<ml) && (m=mutations[i]); i++) {
  58. 			for (var j=0, nodes=m.addedNodes, nl=nodes.length, n; (j<nl) && (n=nodes[j]); j++) {
  59. 				if (n.nodeType == 1) // Node.ELEMENT_NODE 1 An Element node like <p> or <div>.
  60. 					if (inForum) {
  61. 						if ((n.localName == 'label' && n.querySelector('input[value="Markdown"], input[value="Html"], input[value="markdown"], input[value="html"]'))
  62. 						|| (n = n.querySelector('input[value="Markdown"], input[value="markdown"]') || n.querySelector('input[value="Html"], input[value="html"]')))
  63. 							return addFeatures(n.closest('label'));
  64. 					} else {
  65. 						if (((n.localName == 'input') && (n.value.toLowerCase() == 'Markdown'))
  66. 						|| (n = n.querySelector('input[value="Markdown"], input[value="markdown"]'))) {
  67. 							if (location.href.indexOf('/script_versions/'))
  68. 								n.click();
  69. 							return addFeatures(n.parentNode.appendChild(document.createElement('br')));
  70. 						}
  71. 					}
  72. 			}
  73. 		}
  74. 	}).observe(document, {subtree:true, childList:true});
  75. });
  76.  
  77.  
  78.  
  79.  
  80.  
  81. function addFeatures(n) {
  82.  
  83. 	if (!n){
  84. 		return;
  85. 	}
  86.  
  87. /*
  88. 	if (!inForum) {
  89. */
  90. 		var form = n.closest('form');
  91. 		// span.current > a.write-tab
  92. 		// var form = n.querySelector('form');
  93. 		if (form.action.indexOf('/edit') < 0) {
  94. 			n.click();
  95. 		}
  96.  
  97. 		n.parentNode.textAreaNode = form.querySelector('textarea.TextBox, textarea.previewable');
  98. 		// add formatting help tooltips (the '(?)' )
  99. 		n.previousElementSibling.insertAdjacentHTML('beforeend',
  100. 					' (<a href="/help/allowed-markup" target="_blank" title="'+
  101. 					'* (name, title), a (href), abbr, b, blockquote (cite), br, center, cite, code, dd, del, dfn, div, dl, dt, em, '+
  102. 					'h1, h2, h3, h4, h5, h6, hr, i, ins, img (alt, height, src (https), width), kbd, li, mark, ol, p, pre, q (cite), '+
  103. 					'rp, rt, ruby, s, samp, small, span, strike, strong, tt, table, tbody, tfoot, thead, td, th, tr, sub, sup, '+
  104. 					'time (datetime, pubdate), u, ul, var">?</a>)');
  105. 		n.insertAdjacentHTML('beforeend',
  106. 					' (<a href="http://www.darkcoding.net/software/markdown-quick-reference/" target="_blank">?</a>)');
  107. 		// if (location.href.indexOf('/forum/messages/') > -1)
  108. 		if (location.href.indexOf('/conversations/') > -1)
  109. 			GM_addStyle('#ConversationForm label { display:inline-block; margin-right:2ex }\
  110. 						 #ConversationForm .TextBox { margin-top:0 }');
  111.  
  112.  
  113. /*
  114.  
  115. 	} else { // if not in forum
  116. */
  117. 		for (var wrapper=n; wrapper = wrapper.parentNode; )
  118. 			// if (t = wrapper.querySelector('textarea[id*="additional-info"]')) {
  119. 			if (t = wrapper.querySelector('textarea[id*="additional-info"], textarea[id*="conversation_messages_attributes_0_content"], textarea[id*="discussion_comments_attributes_0_text"], textarea[id*="comment_text"], textarea[id*="user_profile"]')) {
  120. 				n.parentNode.textAreaNode = t;
  121. 				break;
  122. 			}
  123. 		GM_addStyle('\
  124. 			.Button {\
  125. 					display: inline-block;\
  126. 					cursor: pointer;\
  127. 					margin: 0px;\
  128. 					font-size: 12px;\
  129. 					line-height: 1;\
  130. 					font-weight: bold;\
  131. 					padding: 4px 6px;\
  132. 					background: -moz-linear-gradient(center bottom , #CCC 0%, #FAFAFA 100%) repeat scroll 0% 0% #F8F8F8;\
  133. 					border: 1px solid #999;\
  134. 					border-radius: 2px;\
  135. 					white-space: nowrap;\
  136. 					text-shadow: 0px 1px 0px #FFF;\
  137. 					box-shadow: 0px 1px 0px #FFF inset, 0px -1px 2px #BBB inset;\
  138. 					color: #333;}'
  139. 					);
  140.  
  141. 	// }
  142.  
  143.  
  144.  
  145.  
  146. 	// add buttons
  147. 	// console.log(n);
  148. 	// debugger
  149. 	btnMake(n, '<b>'+__('B')+'</b>', __('Bold'), '**');
  150. 	btnMake(n, '<i>'+__('I')+'</i>', __('Italic'), '*');
  151. 	btnMake(n, '<u>'+__('U')+'</u>', __('Underline'), '<u>','</u>');
  152. 	btnMake(n, '<s>'+__('S')+'</s>', __('Strikethrough'), '<s>','</s>');
  153. 	btnMake(n, '&lt;br&gt;', __('Force line break'), '<br>','', true);
  154. 	btnMake(n, '---', __('Horizontal line'), '\n\n---\n\n', '', true);
  155. 	btnMake(n, __('URL'), __('Add URL to selected text'),
  156. 					function(e) {
  157. 						try {edWrapInTag('[', ']('+prompt(__('URL')+':')+')', edInit(e.target))}
  158. 						catch(ex) {}
  159. 					});
  160. 	btnMake(n, __('Image (https)'), __('Convert selected https://url to inline image'), '!['+__('image')+'](', ')');
  161. 	if (inForum)
  162. 		btnMake(n, __('Table'), __('Insert table template'), __('\n| head1 | head2 |\n|-------|-------|\n| cell1 | cell2 |\n| cell3 | cell4 |\n'), '', true);
  163. 	btnMake(n, __('Code'), __('Apply CODE markdown to selected text'),
  164. 					function(e){
  165. 						var ed = edInit(e.target);
  166. 						if (ed.sel.indexOf('\n') < 0)
  167. 							edWrapInTag('`', '`', ed);
  168. 						else
  169. 							edWrapInTag(((ed.sel1==0) || (ed.text.charAt(ed.sel1-1) == '\n') ? '' : '\n') + '```' + (ed.sel.charAt(0) == '\n' ? '' : '\n'),
  170. 													(ed.sel.substr(-1) == '\n' ? '' : '\n') + '```' + (ed.text.substr(ed.sel2,1) == '\n' ? '' : '\n'),
  171. 													ed);
  172. 					});
  173.  
  174.  
  175.  
  176.  
  177. 	var previewTab = document.querySelector('span > a.preview-tab > span');
  178. 	if (previewTab){
  179. 		previewTab.onclick = function(){
  180. 			document.querySelectorAll('.Button').forEach(element => element.style.display = 'none');
  181. 		};
  182. 	}
  183.  
  184. 	var writeTab = document.querySelector('span > a.write-tab > span');
  185. 	if (writeTab){
  186. 		writeTab.onclick = function(){
  187. 			document.querySelectorAll('.Button').forEach(element => element.style.display = 'inline-block');
  188. 		};
  189. 	}
  190.  
  191.  
  192.  
  193.  
  194. }
  195.  
  196.  
  197.  
  198.  
  199. function btnMake(afterNode, label, title, tag1_or_cb, tag2, noWrap) {
  200. 	var a = document.createElement('a');
  201. 	a.className = 'Button';
  202. 	a.innerHTML = label;
  203. 	a.title = title;
  204. 	// if (inForum)
  205. 		// a.style.setProperty('float','right');
  206. 	a.addEventListener('click',
  207. 						typeof(tag1_or_cb) == 'function' ? tag1_or_cb :   					// if
  208. 						noWrap ? function(e){edInsertText(tag1_or_cb, edInit(e.target))} : 	// else if
  209. 						function(e){edWrapInTag(tag1_or_cb, tag2, edInit(e.target))} 		// else
  210. 	);
  211. 	var nparent = afterNode.parentNode;
  212. 	console.log(nparent)
  213. 	// a.textAreaNode = nparent.textAreaNode ;
  214. 	a.textAreaNode = nparent.parentNode.querySelector('textArea');
  215. 	// console.log(a.textAreaNode)
  216. 	// inForum ? nparent.insertBefore(a, nparent.firstElementChild) : nparent.appendChild(a);
  217. 	// nparent.insertBefore(a, nparent.firstElementChild)
  218. 	nparent.appendChild(a);
  219. }
  220.  
  221.  
  222.  
  223.  
  224. function edInit(btn) {
  225. 	var ed = {node: btn.textAreaNode || btn.parentNode.textAreaNode};
  226. 	ed.sel1 = ed.node.selectionStart;
  227. 	ed.sel2 = ed.node.selectionEnd,
  228. 	ed.text = ed.node.value;
  229. 	ed.sel = ed.text.substring(ed.sel1, ed.sel2);
  230. 	return ed;
  231. }
  232.  
  233. function edWrapInTag(tag1, tag2, ed) {
  234. 	ed.node.value = ed.text.substr(0, ed.sel1) + tag1 + ed.sel + (tag2?tag2:tag1) + ed.text.substr(ed.sel2);
  235. 	ed.node.setSelectionRange(ed.sel1 + tag1.length, ed.sel1 + tag1.length + ed.sel.length);
  236. 	ed.node.focus();
  237. }
  238.  
  239. function edInsertText(text, ed) {
  240. 	ed.node.value = ed.text.substr(0, ed.sel2) + text + ed.text.substr(ed.sel2);
  241. 	ed.node.setSelectionRange(ed.sel2 + text.length, ed.sel2 + text.length);
  242. 	ed.node.focus();
  243. }
  244.  
  245. var __ = (function (l, langs) {
  246. 	var lang = langs[l] || langs[l.replace(/-.+/, '')];
  247. 	return lang ? function (text) { return lang[text] || text; }
  248. 		: function (text) { return text }; // No matching language, fallback to english
  249. })(location.pathname.match(/^\/(.+?)\//)[1], {
  250. 	// Can be full name, or just the beginning part.
  251. 	'zh-CN': {
  252. 		'Bold': '粗体',
  253. 		'Italic': '斜体',
  254. 		'Underline': '下划线',
  255. 		'Strikethrough': '删除线',
  256. 		'Force line break': '强制换行',
  257. 		'Horizontal line': '水平分割线',
  258. 		'URL': '链接',
  259. 		'Add URL to selected text': '为所选文字添加链接',
  260. 		'Image (https)': '图片 (https)',
  261. 		'Convert selected https://url to inline image': '将所选地址转换为行内图片',
  262. 		'image': '图片描述', // Default image alt value
  263. 		'Table': '表格',
  264. 		'Insert table template': '插入表格模板',
  265. 		'Code': '代码',
  266. 		'Apply CODE markdown to selected text': '将选中代码围起来',
  267.  
  268. 		'\n| head1 | head2 |\n|-------|-------|\n| cell1 | cell2 |\n| cell3 | cell4 |\n':
  269. 		'\n| 表头 1 | 表头 2 |\n|-------|-------|\n| 表格 1 | 表格 2 |\n| 表格 3 | 表格 4 |\n'
  270. 	},
  271. 	'ru': {
  272. 		'B': 'Ж',
  273. 		'I': 'К',
  274. 		'U': 'Ч',
  275. 		'S': 'П',
  276. 		'Bold': 'Жирный',
  277. 		'Italic': 'Курсив',
  278. 		'Underline': 'Подчеркнутый',
  279. 		'Strikethrough': 'Перечеркнутый',
  280. 		'Force line break': 'Новая строка',
  281. 		'Horizontal line': 'Горизонтальная линия',
  282. 		'URL': 'ссылка',
  283. 		'Add URL to selected text': 'Добавить ссылку к выделенному тексту',
  284. 		'Image (https)': 'Картинка (https)',
  285. 		'Convert selected https://url to inline image': 'Преобразовать выделенный https:// адрес в картинку',
  286. 		'image': 'картинка', // Default image alt value
  287. 		'Table': 'Таблица',
  288. 		'Insert table template': 'Вставить шаблон таблицы',
  289. 		'Code': 'Код',
  290. 		'Apply CODE markdown to selected text': 'Пометить выделенный фрагмент как программный код',
  291.  
  292. 		'\n| head1 | head2 |\n|-------|-------|\n| cell1 | cell2 |\n| cell3 | cell4 |\n':
  293. 		'\n| заголовок1 | заголовок2 |\n|-------|-------|\n| ячейка1 | ячейка2 |\n| ячейка3 | ячейка4 |\n'
  294. 	},
  295. 	'fr': {
  296. 		'B': 'G',
  297. 		'I': 'I',
  298. 		'U': 'S',
  299. 		'S': 'B',
  300. 		'Bold': 'Gras',
  301. 		'Italic': 'Italique',
  302. 		'Underline': 'Souligné',
  303. 		'Strikethrough': 'Barré',
  304. 		'Force line break': 'Forcer le saut de ligne',
  305. 		'Horizontal line': 'Ligne horizontale',
  306. 		'URL': 'URL',
  307. 		'Add URL to selected text': 'Ajouter URL au texte sélectionné',
  308. 		'Image (https)': 'Image (https)',
  309. 		'Convert selected https://url to inline image': 'Convertir https://url sélectionnés en images',
  310. 		'image': 'image', // Default image alt value
  311. 		'Table': 'Tableau',
  312. 		'Insert table template': 'Insérer un modèle de table',
  313. 		'Code': 'Code',
  314. 		'Apply CODE markdown to selected text': 'Appliquer CODE markdown au texte sélectionné',
  315.  
  316. 		'\n| head1 | head2 |\n|-------|-------|\n| cell1 | cell2 |\n| cell3 | cell4 |\n':
  317. 		'\n| En-tête 1 | En-tête 2 |\n|-------|-------|\n| cellule 1 | cellule 2 |\n| cellule 3 | cellule 4 |\n'
  318. 	}
  319. });