1 import CodeMirror from "codemirror";
2 import Clipboard from "clipboard/dist/clipboard.min";
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';
29 import 'codemirror/addon/scroll/scrollpastend';
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',
45 javascript: 'javascript',
46 json: {name: 'javascript', json: true},
56 powershell: 'powershell',
76 * Highlight pre elements on a page
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]);
86 * Add code highlighting to a single element.
87 * @param {HTMLElement} elem
89 function highlightElem(elem) {
90 let innerCodeElem = elem.querySelector('code[class^=language-]');
92 if (innerCodeElem !== null) {
93 let langName = innerCodeElem.className.replace('language-', '');
94 mode = getMode(langName);
96 elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
97 let content = elem.textContent.trim();
99 let cm = CodeMirror(function(elt) {
100 elem.parentNode.replaceChild(elt, elem);
114 * Add a button to a CodeMirror instance which copies the contents to the clipboard upon click.
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);
124 const clipboard = new Clipboard(copyButton, {
125 text: function(trigger) {
126 return cmInstance.getValue()
130 clipboard.on('success', event => {
131 copyButton.classList.add('success');
133 copyButton.classList.remove('success');
139 * Search for a codemirror code based off a user suggestion
143 function getMode(suggestion) {
144 suggestion = suggestion.trim().replace(/^\./g, '').toLowerCase();
145 return (typeof modeMap[suggestion] !== 'undefined') ? modeMap[suggestion] : '';
149 * Ge the theme to use for CodeMirror instances.
150 * @returns {*|string}
152 function getTheme() {
153 return window.codeTheme || 'base16-light';
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: *}}
162 function wysiwygView(elem) {
163 let doc = elem.ownerDocument;
164 let codeElem = elem.querySelector('code');
166 let lang = (elem.className || '').replace('language-', '');
167 if (lang === '' && codeElem) {
168 lang = (codeElem.className || '').replace('language-', '')
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');
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);
182 newWrap.appendChild(newTextArea);
183 newWrap.contentEditable = false;
184 newTextArea.textContent = content;
186 let cm = CodeMirror(function(elt) {
187 newWrap.appendChild(elt);
199 return {wrap: newWrap, editor: cm};
203 * Create a CodeMirror instance to show in the WYSIWYG pop-up editor
204 * @param {HTMLElement} elem
205 * @param {String} modeSuggestion
208 function popupEditor(elem, modeSuggestion) {
209 let content = elem.textContent;
211 return CodeMirror(function(elt) {
212 elem.parentNode.insertBefore(elt, elem);
213 elem.style.display = 'none';
216 mode: getMode(modeSuggestion),
224 * Set the mode of a codemirror instance.
226 * @param modeSuggestion
228 function setMode(cmInstance, modeSuggestion) {
229 cmInstance.setOption('mode', getMode(modeSuggestion));
233 * Set the content of a cm instance.
237 function setContent(cmInstance, codeContent) {
238 cmInstance.setValue(codeContent);
240 cmInstance.refresh();
245 * Get a CodeMirror instance to use for the markdown editor.
246 * @param {HTMLElement} elem
249 function markdownEditor(elem) {
250 const content = elem.textContent;
260 window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});
262 return CodeMirror(function (elt) {
263 elem.parentNode.insertBefore(elt, elem);
264 elem.style.display = 'none';
269 * Get the 'meta' key dependant on the user's system.
272 function getMetaKey() {
273 let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
274 return mac ? "Cmd" : "Ctrl";
278 highlight: highlight,
279 wysiwygView: wysiwygView,
280 popupEditor: popupEditor,
282 setContent: setContent,
283 markdownEditor: markdownEditor,
284 getMetaKey: getMetaKey,