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