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

   1 require('codemirror/mode/css/css');
   2 require('codemirror/mode/clike/clike');
   3 require('codemirror/mode/go/go');
   4 require('codemirror/mode/htmlmixed/htmlmixed');
   5 require('codemirror/mode/javascript/javascript');
   6 require('codemirror/mode/markdown/markdown');
   7 require('codemirror/mode/nginx/nginx');
   8 require('codemirror/mode/php/php');
   9 require('codemirror/mode/powershell/powershell');
  10 require('codemirror/mode/python/python');
  11 require('codemirror/mode/ruby/ruby');
  12 require('codemirror/mode/shell/shell');
  13 require('codemirror/mode/sql/sql');
  14 require('codemirror/mode/toml/toml');
  15 require('codemirror/mode/xml/xml');
  16 require('codemirror/mode/yaml/yaml');
  17
  18 const CodeMirror = require('codemirror');
  19
  20 const modeMap = {
  21     css: 'css',
  22     c: 'clike',
  23     java: 'clike',
  24     scala: 'clike',
  25     kotlin: 'clike',
  26     'c++': 'clike',
  27     'c#': 'clike',
  28     csharp: 'clike',
  29     go: 'go',
  30     html: 'htmlmixed',
  31     javascript: 'javascript',
  32     json: {name: 'javascript', json: true},
  33     js: 'javascript',
  34     php: 'php',
  35     md: 'markdown',
  36     mdown: 'markdown',
  37     markdown: 'markdown',
  38     nginx: 'nginx',
  39     powershell: 'powershell',
  40     py: 'python',
  41     python: 'python',
  42     ruby: 'ruby',
  43     rb: 'ruby',
  44     shell: 'shell',
  45     bash: 'shell',
  46     toml: 'toml',
  47     sql: 'sql',
  48     xml: 'xml',
  49     yaml: 'yaml',
  50     yml: 'yaml',
  51 };
  52
  53 module.exports.highlight = function() {
  54     let codeBlocks = document.querySelectorAll('.page-content pre');
  55     for (let i = 0; i < codeBlocks.length; i++) {
  56         highlightElem(codeBlocks[i]);
  57     }
  58 };
  59
  60 function highlightElem(elem) {
  61     let innerCodeElem = elem.querySelector('code[class^=language-]');
  62     let mode = '';
  63     if (innerCodeElem !== null) {
  64         let langName = innerCodeElem.className.replace('language-', '');
  65         if (typeof modeMap[langName] !== 'undefined') mode = modeMap[langName];
  66     }
  67     elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
  68     let content = elem.textContent;
  69
  70     CodeMirror(function(elt) {
  71         elem.parentNode.replaceChild(elt, elem);
  72     }, {
  73         value: content,
  74         mode:  mode,
  75         lineNumbers: true,
  76         theme: 'base16-light',
  77         readOnly: true
  78     });
  79 }
  80
  81 module.exports.highlightElem = highlightElem;
  82
  83 module.exports.wysiwygView = function(elem) {
  84     let doc = elem.ownerDocument;
  85     elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
  86     let content = elem.textContent;
  87     let newWrap = doc.createElement('div');
  88     let newTextArea = doc.createElement('textarea');
  89
  90     newWrap.className = 'CodeMirrorContainer';
  91     newTextArea.style.display = 'none';
  92     elem.parentNode.replaceChild(newWrap, elem);
  93
  94     newWrap.appendChild(newTextArea);
  95     newWrap.contentEditable = false;
  96     newTextArea.textContent = content;
  97
  98     let cm = CodeMirror(function(elt) {
  99         newWrap.appendChild(elt);
 100     }, {
 101         value: content,
 102         mode:  '',
 103         lineNumbers: true,
 104         theme: 'base16-light',
 105         readOnly: true
 106     });
 107     setTimeout(() => {
 108         cm.refresh();
 109     }, 300);
 110     return newWrap;
 111 };
 112
 113 // module.exports.wysiwygEditor = function(elem) {
 114 //     let doc = elem.ownerDocument;
 115 //     let newWrap = doc.createElement('div');
 116 //     newWrap.className = 'CodeMirrorContainer';
 117 //     let newTextArea = doc.createElement('textarea');
 118 //     newTextArea.style.display = 'none';
 119 //     elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
 120 //     let content = elem.textContent;
 121 //     elem.parentNode.replaceChild(newWrap, elem);
 122 //     newWrap.appendChild(newTextArea);
 123 //     let cm = CodeMirror(function(elt) {
 124 //         newWrap.appendChild(elt);
 125 //     }, {
 126 //         value: content,
 127 //         mode:  '',
 128 //         lineNumbers: true,
 129 //         theme: 'base16-light',
 130 //         readOnly: true
 131 //     });
 132 //     cm.on('change', event => {
 133 //         newTextArea.innerText = cm.getValue();
 134 //     });
 135 //     setTimeout(() => {
 136 //         cm.refresh();
 137 //     }, 300);
 138 // };
 139
 140 module.exports.markdownEditor = function(elem) {
 141     let content = elem.textContent;
 142
 143     let cm = CodeMirror(function(elt) {
 144         elem.parentNode.insertBefore(elt, elem);
 145         elem.style.display = 'none';
 146     }, {
 147         value: content,
 148         mode:  "markdown",
 149         lineNumbers: true,
 150         theme: 'base16-light',
 151         lineWrapping: true
 152     });
 153     return cm;
 154
 155 };
 156