☰

Geekhub Markdown Editor

add CodeMirror Editor for comment & topic

当前为 2020-10-10 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name     Geekhub Markdown Editor
  3. // @namespace https://geekhub.com/
  4. // @version  3
  5. // @description  add CodeMirror Editor for comment & topic
  6. // @author       dallaslu
  7. // @match        https://geekhub.com/*
  8. // @grant        none
  9. // @require      https://cdn.jsdelivr.net/npm/codemirror/lib/codemirror.min.js
  10. // @require      https://cdn.jsdelivr.net/npm/codemirror/mode/markdown/markdown.js
  11. // @require      https://cdn.jsdelivr.net/npm/codemirror/mode/gfm/gfm.js
  12. // @require      https://cdn.jsdelivr.net/npm/codemirror/addon/mode/overlay.js
  13. // ==/UserScript==
  14.  
  15. (function() {
  16. 	'use strict';
  17.   
  18.   	var ghSchemeButtons = {
  19.         'light': 'dark',
  20.         'dark': 'darcula',
  21.         'solar': 'darcula',
  22.         'ocean': 'darcula',
  23.         'jade': 'default'
  24.     };
  25.  
  26.     function init() {
  27.       	var cmElement = document.querySelector('.CodeMirror');
  28.       	if(!cmElement){
  29.             var textElement = document.getElementById('comment-box') 
  30.                 || document.getElementById('post_content')
  31.                 || document.getElementById('second_hand_content')
  32.                 || document.getElementById('molecule_content')
  33.                 || document.getElementById('group_buy_content')
  34.                 || document.getElementById('service_content');
  35.           
  36.           	if(textElement){
  37. 				var theme = '';
  38.                 for (var btn in ghSchemeButtons) {
  39.                     var schemeBtn = document.getElementById(btn);
  40.                     if (schemeBtn && !schemeBtn.classList.contains('hidden')) {
  41.                         theme = ghSchemeButtons[btn];
  42.                         break;
  43.                     }
  44.                 }
  45.  
  46. 				theme = theme || 'darcula';
  47.               
  48.               	loadStyles('https://cdn.jsdelivr.net/npm/codemirror/lib/codemirror.css');
  49.               	loadStyles('https://cdn.jsdelivr.net/npm/codemirror/theme/darcula.css');
  50.               
  51.       			var cm = CodeMirror.fromTextArea(textElement, {
  52.     				mode : {
  53. 						name : "gfm",
  54. 						tokenTypeOverrides : {
  55. 							emoji : "emoji"
  56. 						}
  57. 					},
  58. 					lineWrapping : true,
  59. 					lineNumbers : false,
  60.               	    theme: theme
  61.        		 	});
  62.               
  63.               	cm.on('change', function(){
  64.             		cm.save();
  65.                 });
  66.               	
  67.               	// TODO clear with textarea after submit
  68.             }
  69.         }
  70.     }
  71.   
  72.   	function loadStyles(url) {
  73. 		var link = document.createElement("link");
  74. 		link.type = "text/css";
  75. 		link.rel = "stylesheet";
  76. 		link.href = url;
  77. 		var head = document.getElementsByTagName("head")[0];
  78. 		head.appendChild(link);
  79. 	}
  80.  
  81.     var observer = new MutationObserver(function(doc, observer) {
  82. 		init();
  83.     });
  84.  
  85.     observer.observe(document, {
  86.         characterData: true,
  87.         childList: true,
  88.         attributes: true,
  89.         subtree: true,
  90.         attributeOldValue: true,
  91.         characterDataOldValue: true
  92.     });
  93.  
  94.     init();
  95. })();