BookStack Code Mirror - bookstack/blob - resources/js/services/code.js

   1 import CodeMirror from "codemirror";
   2 import Clipboard from "clipboard/dist/clipboard.min";
   3
   4 // Modes
   5 import 'codemirror/mode/css/css';
   6 import 'codemirror/mode/clike/clike';
   7 import 'codemirror/mode/diff/diff';
   8 import 'codemirror/mode/go/go';
   9 import 'codemirror/mode/htmlmixed/htmlmixed';
  10 import 'codemirror/mode/javascript/javascript';
  11 import 'codemirror/mode/julia/julia';
  12 import 'codemirror/mode/lua/lua';
  13 import 'codemirror/mode/haskell/haskell';
  14 import 'codemirror/mode/markdown/markdown';
  15 import 'codemirror/mode/mllike/mllike';
  16 import 'codemirror/mode/nginx/nginx';
  17 import 'codemirror/mode/php/php';
  18 import 'codemirror/mode/powershell/powershell';
  19 import 'codemirror/mode/python/python';
  20 import 'codemirror/mode/ruby/ruby';
  21 import 'codemirror/mode/rust/rust';
  22 import 'codemirror/mode/shell/shell';
  23 import 'codemirror/mode/sql/sql';
  24 import 'codemirror/mode/toml/toml';
  25 import 'codemirror/mode/xml/xml';
  26 import 'codemirror/mode/yaml/yaml';
  27
  28 // Addons
  29 import 'codemirror/addon/scroll/scrollpastend';
  30
  31 const modeMap = {
  32     css: 'css',
  33     c: 'text/x-csrc',
  34     java: 'text/x-java',
  35     scala: 'text/x-scala',
  36     kotlin: 'text/x-kotlin',
  37     'c++': 'text/x-c++src',
  38     'c#': 'text/x-csharp',
  39     csharp: 'text/x-csharp',
  40     diff: 'diff',
  41     go: 'go',
  42     haskell: 'haskell',
  43     hs: 'haskell',
  44     html: 'htmlmixed',
  45     javascript: 'javascript',
  46     json: {name: 'javascript', json: true},
  47     js: 'javascript',
  48     jl: 'julia',
  49     julia: 'julia',
  50     lua: 'lua',
  51     md: 'markdown',
  52     mdown: 'markdown',
  53     markdown: 'markdown',
  54     ml: 'mllike',
  55     nginx: 'nginx',
  56     powershell: 'powershell',
  57     ocaml: 'mllike',
  58     php: 'php',
  59     py: 'python',
  60     python: 'python',
  61     ruby: 'ruby',
  62     rust: 'rust',
  63     rb: 'ruby',
  64     rs: 'rust',
  65     shell: 'shell',
  66     sh: 'shell',
  67     bash: 'shell',
  68     toml: 'toml',
  69     sql: 'text/x-sql',
  70     xml: 'xml',
  71     yaml: 'yaml',
  72     yml: 'yaml',
  73 };
  74
  75 /**
  76  * Highlight pre elements on a page
  77  */
  78 function highlight() {
  79     let codeBlocks = document.querySelectorAll('.page-content pre, .comment-box .content pre');
  80     for (let i = 0; i < codeBlocks.length; i++) {
  81         highlightElem(codeBlocks[i]);
  82     }
  83 }
  84
  85 /**
  86  * Add code highlighting to a single element.
  87  * @param {HTMLElement} elem
  88  */
  89 function highlightElem(elem) {
  90     let innerCodeElem = elem.querySelector('code[class^=language-]');
  91     let mode = '';
  92     if (innerCodeElem !== null) {
  93         let langName = innerCodeElem.className.replace('language-', '');
  94         mode = getMode(langName);
  95     }
  96     elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
  97     let content = elem.textContent.trim();
  98
  99     let cm = CodeMirror(function(elt) {
 100         elem.parentNode.replaceChild(elt, elem);
 101     }, {
 102         value: content,
 103         mode:  mode,
 104         lineNumbers: true,
 105         theme: getTheme(),
 106         readOnly: true
 107     });
 108
 109     addCopyIcon(cm);
 110 }
 111
 112 /**
 113  * Add a button to a CodeMirror instance which copies the contents to the clipboard upon click.
 114  * @param cmInstance
 115  */
 116 function addCopyIcon(cmInstance) {
 117     const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
 118     const copyButton = document.createElement('div');
 119     copyButton.classList.add('CodeMirror-copy');
 120     copyButton.innerHTML = copyIcon;
 121     cmInstance.display.wrapper.appendChild(copyButton);
 122
 123     const clipboard = new Clipboard(copyButton, {
 124         text: function(trigger) {
 125             return cmInstance.getValue()
 126         }
 127     });
 128
 129     clipboard.on('success', event => {
 130         copyButton.classList.add('success');
 131         setTimeout(() => {
 132             copyButton.classList.remove('success');
 133         }, 240);
 134     });
 135 }
 136
 137 /**
 138  * Search for a codemirror code based off a user suggestion
 139  * @param suggestion
 140  * @returns {string}
 141  */
 142 function getMode(suggestion) {
 143     suggestion = suggestion.trim().replace(/^\./g, '').toLowerCase();
 144     return (typeof modeMap[suggestion] !== 'undefined') ? modeMap[suggestion] : '';
 145 }
 146
 147 /**
 148  * Ge the theme to use for CodeMirror instances.
 149  * @returns {*|string}
 150  */
 151 function getTheme() {
 152     return window.codeTheme || 'base16-light';
 153 }
 154
 155 /**
 156  * Create a CodeMirror instance for showing inside the WYSIWYG editor.
 157  *  Manages a textarea element to hold code content.
 158  * @param {HTMLElement} elem
 159  * @returns {{wrap: Element, editor: *}}
 160  */
 161 function wysiwygView(elem) {
 162     let doc = elem.ownerDocument;
 163     let codeElem = elem.querySelector('code');
 164
 165     let lang = (elem.className || '').replace('language-', '');
 166     if (lang === '' && codeElem) {
 167         lang = (codeElem.className || '').replace('language-', '')
 168     }
 169
 170     elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
 171     let content = elem.textContent;
 172     let newWrap = doc.createElement('div');
 173     let newTextArea = doc.createElement('textarea');
 174
 175     newWrap.className = 'CodeMirrorContainer';
 176     newWrap.setAttribute('data-lang', lang);
 177     newWrap.setAttribute('dir', 'ltr');
 178     newTextArea.style.display = 'none';
 179     elem.parentNode.replaceChild(newWrap, elem);
 180
 181     newWrap.appendChild(newTextArea);
 182     newWrap.contentEditable = false;
 183     newTextArea.textContent = content;
 184
 185     let cm = CodeMirror(function(elt) {
 186         newWrap.appendChild(elt);
 187     }, {
 188         value: content,
 189         mode:  getMode(lang),
 190         lineNumbers: true,
 191         theme: getTheme(),
 192         readOnly: true
 193     });
 194     setTimeout(() => {
 195         cm.refresh();
 196     }, 300);
 197     return {wrap: newWrap, editor: cm};
 198 }
 199
 200 /**
 201  * Create a CodeMirror instance to show in the WYSIWYG pop-up editor
 202  * @param {HTMLElement} elem
 203  * @param {String} modeSuggestion
 204  * @returns {*}
 205  */
 206 function popupEditor(elem, modeSuggestion) {
 207     let content = elem.textContent;
 208
 209     return CodeMirror(function(elt) {
 210         elem.parentNode.insertBefore(elt, elem);
 211         elem.style.display = 'none';
 212     }, {
 213         value: content,
 214         mode:  getMode(modeSuggestion),
 215         lineNumbers: true,
 216         theme: getTheme(),
 217         lineWrapping: true
 218     });
 219 }
 220
 221 /**
 222  * Set the mode of a codemirror instance.
 223  * @param cmInstance
 224  * @param modeSuggestion
 225  */
 226 function setMode(cmInstance, modeSuggestion) {
 227       cmInstance.setOption('mode', getMode(modeSuggestion));
 228 }
 229
 230 /**
 231  * Set the content of a cm instance.
 232  * @param cmInstance
 233  * @param codeContent
 234  */
 235 function setContent(cmInstance, codeContent) {
 236     cmInstance.setValue(codeContent);
 237     setTimeout(() => {
 238         cmInstance.refresh();
 239     }, 10);
 240 }
 241
 242 /**
 243  * Get a CodeMirror instance to use for the markdown editor.
 244  * @param {HTMLElement} elem
 245  * @returns {*}
 246  */
 247 function markdownEditor(elem) {
 248     const content = elem.textContent;
 249     const config = {
 250         value: content,
 251         mode: "markdown",
 252         lineNumbers: true,
 253         theme: getTheme(),
 254         lineWrapping: true,
 255         scrollPastEnd: true,
 256     };
 257
 258     window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});
 259
 260     return CodeMirror(function (elt) {
 261         elem.parentNode.insertBefore(elt, elem);
 262         elem.style.display = 'none';
 263     }, config);
 264 }
 265
 266 /**
 267  * Get the 'meta' key dependant on the user's system.
 268  * @returns {string}
 269  */
 270 function getMetaKey() {
 271     let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
 272     return mac ? "Cmd" : "Ctrl";
 273 }
 274
 275 export default {
 276     highlight: highlight,
 277     wysiwygView: wysiwygView,
 278     popupEditor: popupEditor,
 279     setMode: setMode,
 280     setContent: setContent,
 281     markdownEditor: markdownEditor,
 282     getMetaKey: getMetaKey,
 283 };