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