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. var ghSchemeButtons = {
  18. 'light': 'dark',
  19. 'dark': 'darcula',
  20. 'solar': 'darcula',
  21. 'ocean': 'darcula',
  22. 'jade': 'default'
  23. };
  24.  
  25. function init() {
  26. var cmElement = document.querySelector('.CodeMirror');
  27. if(!cmElement){
  28. var textElement = document.getElementById('comment-box')
  29. || document.getElementById('post_content')
  30. || document.getElementById('second_hand_content')
  31. || document.getElementById('molecule_content')
  32. || document.getElementById('group_buy_content')
  33. || document.getElementById('service_content');
  34. if(textElement){
  35. var theme = '';
  36. for (var btn in ghSchemeButtons) {
  37. var schemeBtn = document.getElementById(btn);
  38. if (schemeBtn && !schemeBtn.classList.contains('hidden')) {
  39. theme = ghSchemeButtons[btn];
  40. break;
  41. }
  42. }
  43.  
  44. theme = theme || 'darcula';
  45. loadStyles('https://cdn.jsdelivr.net/npm/codemirror/lib/codemirror.css');
  46. loadStyles('https://cdn.jsdelivr.net/npm/codemirror/theme/darcula.css');
  47. var cm = CodeMirror.fromTextArea(textElement, {
  48. mode : {
  49. name : "gfm",
  50. tokenTypeOverrides : {
  51. emoji : "emoji"
  52. }
  53. },
  54. lineWrapping : true,
  55. lineNumbers : false,
  56. theme: theme
  57. });
  58. cm.on('change', function(){
  59. cm.save();
  60. });
  61. // TODO clear with textarea after submit
  62. }
  63. }
  64. }
  65. function loadStyles(url) {
  66. var link = document.createElement("link");
  67. link.type = "text/css";
  68. link.rel = "stylesheet";
  69. link.href = url;
  70. var head = document.getElementsByTagName("head")[0];
  71. head.appendChild(link);
  72. }
  73.  
  74. var observer = new MutationObserver(function(doc, observer) {
  75. init();
  76. });
  77.  
  78. observer.observe(document, {
  79. characterData: true,
  80. childList: true,
  81. attributes: true,
  82. subtree: true,
  83. attributeOldValue: true,
  84. characterDataOldValue: true
  85. });
  86.  
  87. init();
  88. })();