]> BookStack Code Mirror - bookstack/blob - resources/js/services/code.js
Reverted changes to codemirror line wrapping
[bookstack] / 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         lineWrapping: false,
106         theme: getTheme(),
107         readOnly: true
108     });
109
110     addCopyIcon(cm);
111 }
112
113 /**
114  * Add a button to a CodeMirror instance which copies the contents to the clipboard upon click.
115  * @param cmInstance
116  */
117 function addCopyIcon(cmInstance) {
118     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>`;
119     const copyButton = document.createElement('div');
120     copyButton.classList.add('CodeMirror-copy');
121     copyButton.innerHTML = copyIcon;
122     cmInstance.display.wrapper.appendChild(copyButton);
123
124     const clipboard = new Clipboard(copyButton, {
125         text: function(trigger) {
126             return cmInstance.getValue()
127         }
128     });
129
130     clipboard.on('success', event => {
131         copyButton.classList.add('success');
132         setTimeout(() => {
133             copyButton.classList.remove('success');
134         }, 240);
135     });
136 }
137
138 /**
139  * Search for a codemirror code based off a user suggestion
140  * @param suggestion
141  * @returns {string}
142  */
143 function getMode(suggestion) {
144     suggestion = suggestion.trim().replace(/^\./g, '').toLowerCase();
145     return (typeof modeMap[suggestion] !== 'undefined') ? modeMap[suggestion] : '';
146 }
147
148 /**
149  * Ge the theme to use for CodeMirror instances.
150  * @returns {*|string}
151  */
152 function getTheme() {
153     return window.codeTheme || 'base16-light';
154 }
155
156 /**
157  * Create a CodeMirror instance for showing inside the WYSIWYG editor.
158  *  Manages a textarea element to hold code content.
159  * @param {HTMLElement} elem
160  * @returns {{wrap: Element, editor: *}}
161  */
162 function wysiwygView(elem) {
163     let doc = elem.ownerDocument;
164     let codeElem = elem.querySelector('code');
165
166     let lang = (elem.className || '').replace('language-', '');
167     if (lang === '' && codeElem) {
168         lang = (codeElem.className || '').replace('language-', '')
169     }
170
171     elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
172     let content = elem.textContent;
173     let newWrap = doc.createElement('div');
174     let newTextArea = doc.createElement('textarea');
175
176     newWrap.className = 'CodeMirrorContainer';
177     newWrap.setAttribute('data-lang', lang);
178     newWrap.setAttribute('dir', 'ltr');
179     newTextArea.style.display = 'none';
180     elem.parentNode.replaceChild(newWrap, elem);
181
182     newWrap.appendChild(newTextArea);
183     newWrap.contentEditable = false;
184     newTextArea.textContent = content;
185
186     let cm = CodeMirror(function(elt) {
187         newWrap.appendChild(elt);
188     }, {
189         value: content,
190         mode:  getMode(lang),
191         lineNumbers: true,
192         lineWrapping: false,
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         lineWrapping: false,
219         theme: getTheme()
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 instance to use for the markdown editor.
246  * @param {HTMLElement} elem
247  * @returns {*}
248  */
249 function markdownEditor(elem) {
250     const content = elem.textContent;
251     const config = {
252         value: content,
253         mode: "markdown",
254         lineNumbers: true,
255         lineWrapping: true,
256         theme: getTheme(),
257         scrollPastEnd: true,
258     };
259
260     window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});
261
262     return CodeMirror(function (elt) {
263         elem.parentNode.insertBefore(elt, elem);
264         elem.style.display = 'none';
265     }, config);
266 }
267
268 /**
269  * Get the 'meta' key dependant on the user's system.
270  * @returns {string}
271  */
272 function getMetaKey() {
273     let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
274     return mac ? "Cmd" : "Ctrl";
275 }
276
277 export default {
278     highlight: highlight,
279     wysiwygView: wysiwygView,
280     popupEditor: popupEditor,
281     setMode: setMode,
282     setContent: setContent,
283     markdownEditor: markdownEditor,
284     getMetaKey: getMetaKey,
285 };