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';
27 import 'codemirror/mode/pascal/pascal'
30 import 'codemirror/addon/scroll/scrollpastend';
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',
46 javascript: 'javascript',
47 json: {name: 'javascript', json: true},
57 powershell: 'powershell',
74 pascal: 'text/x-pascal',
78 * Highlight pre elements on a page
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]);
88 * Add code highlighting to a single element.
89 * @param {HTMLElement} elem
91 function highlightElem(elem) {
92 let innerCodeElem = elem.querySelector('code[class^=language-]');
94 if (innerCodeElem !== null) {
95 let langName = innerCodeElem.className.replace('language-', '');
96 mode = getMode(langName);
98 elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
99 let content = elem.textContent.trim();
101 let cm = CodeMirror(function(elt) {
102 elem.parentNode.replaceChild(elt, elem);
115 * Add a button to a CodeMirror instance which copies the contents to the clipboard upon click.
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);
125 const clipboard = new Clipboard(copyButton, {
126 text: function(trigger) {
127 return cmInstance.getValue()
131 clipboard.on('success', event => {
132 copyButton.classList.add('success');
134 copyButton.classList.remove('success');
140 * Search for a codemirror code based off a user suggestion
144 function getMode(suggestion) {
145 suggestion = suggestion.trim().replace(/^\./g, '').toLowerCase();
146 return (typeof modeMap[suggestion] !== 'undefined') ? modeMap[suggestion] : '';
150 * Ge the theme to use for CodeMirror instances.
151 * @returns {*|string}
153 function getTheme() {
154 return window.codeTheme || 'base16-light';
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: *}}
163 function wysiwygView(elem) {
164 let doc = elem.ownerDocument;
165 let codeElem = elem.querySelector('code');
167 let lang = (elem.className || '').replace('language-', '');
168 if (lang === '' && codeElem) {
169 lang = (codeElem.className || '').replace('language-', '')
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');
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);
183 newWrap.appendChild(newTextArea);
184 newWrap.contentEditable = false;
185 newTextArea.textContent = content;
187 let cm = CodeMirror(function(elt) {
188 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 instace to use for the markdown editor.
246 * @param {HTMLElement} elem
249 function markdownEditor(elem) {
250 let content = elem.textContent;
252 return CodeMirror(function (elt) {
253 elem.parentNode.insertBefore(elt, elem);
254 elem.style.display = 'none';
266 * Get the 'meta' key dependant on the user's system.
269 function getMetaKey() {
270 let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
271 return mac ? "Cmd" : "Ctrl";
275 highlight: highlight,
276 wysiwygView: wysiwygView,
277 popupEditor: popupEditor,
279 setContent: setContent,
280 markdownEditor: markdownEditor,
281 getMetaKey: getMetaKey,