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