import CodeMirror from "codemirror"; import Clipboard from "clipboard/dist/clipboard.min"; // Modes import 'codemirror/mode/css/css'; import 'codemirror/mode/clike/clike'; import 'codemirror/mode/diff/diff'; import 'codemirror/mode/go/go'; import 'codemirror/mode/htmlmixed/htmlmixed'; import 'codemirror/mode/javascript/javascript'; import 'codemirror/mode/julia/julia'; import 'codemirror/mode/lua/lua'; import 'codemirror/mode/haskell/haskell'; import 'codemirror/mode/markdown/markdown'; import 'codemirror/mode/mllike/mllike'; import 'codemirror/mode/nginx/nginx'; import 'codemirror/mode/php/php'; import 'codemirror/mode/powershell/powershell'; import 'codemirror/mode/python/python'; import 'codemirror/mode/ruby/ruby'; import 'codemirror/mode/rust/rust'; import 'codemirror/mode/shell/shell'; import 'codemirror/mode/sql/sql'; import 'codemirror/mode/toml/toml'; import 'codemirror/mode/xml/xml'; import 'codemirror/mode/yaml/yaml'; // Addons import 'codemirror/addon/scroll/scrollpastend'; const modeMap = { css: 'css', c: 'text/x-csrc', java: 'text/x-java', scala: 'text/x-scala', kotlin: 'text/x-kotlin', 'c++': 'text/x-c++src', 'c#': 'text/x-csharp', csharp: 'text/x-csharp', diff: 'diff', go: 'go', haskell: 'haskell', hs: 'haskell', html: 'htmlmixed', javascript: 'javascript', json: {name: 'javascript', json: true}, js: 'javascript', jl: 'julia', julia: 'julia', lua: 'lua', md: 'markdown', mdown: 'markdown', markdown: 'markdown', ml: 'mllike', nginx: 'nginx', powershell: 'powershell', ocaml: 'mllike', php: 'php', py: 'python', python: 'python', ruby: 'ruby', rust: 'rust', rb: 'ruby', rs: 'rust', shell: 'shell', sh: 'shell', bash: 'shell', toml: 'toml', sql: 'text/x-sql', xml: 'xml', yaml: 'yaml', yml: 'yaml', }; /** * Highlight pre elements on a page */ function highlight() { let codeBlocks = document.querySelectorAll('.page-content pre, .comment-box .content pre'); for (let i = 0; i < codeBlocks.length; i++) { highlightElem(codeBlocks[i]); } } /** * Add code highlighting to a single element. * @param {HTMLElement} elem */ function highlightElem(elem) { let innerCodeElem = elem.querySelector('code[class^=language-]'); let mode = ''; if (innerCodeElem !== null) { let langName = innerCodeElem.className.replace('language-', ''); mode = getMode(langName); } elem.innerHTML = elem.innerHTML.replace(//gi ,'\n'); let content = elem.textContent.trim(); let cm = CodeMirror(function(elt) { elem.parentNode.replaceChild(elt, elem); }, { value: content, mode: mode, lineNumbers: true, lineWrapping: false, theme: getTheme(), readOnly: true }); addCopyIcon(cm); } /** * Add a button to a CodeMirror instance which copies the contents to the clipboard upon click. * @param cmInstance */ function addCopyIcon(cmInstance) { const copyIcon = ``; const copyButton = document.createElement('div'); copyButton.classList.add('CodeMirror-copy'); copyButton.innerHTML = copyIcon; cmInstance.display.wrapper.appendChild(copyButton); const clipboard = new Clipboard(copyButton, { text: function(trigger) { return cmInstance.getValue() } }); clipboard.on('success', event => { copyButton.classList.add('success'); setTimeout(() => { copyButton.classList.remove('success'); }, 240); }); } /** * Search for a codemirror code based off a user suggestion * @param suggestion * @returns {string} */ function getMode(suggestion) { suggestion = suggestion.trim().replace(/^\./g, '').toLowerCase(); return (typeof modeMap[suggestion] !== 'undefined') ? modeMap[suggestion] : ''; } /** * Ge the theme to use for CodeMirror instances. * @returns {*|string} */ function getTheme() { return window.codeTheme || 'base16-light'; } /** * Create a CodeMirror instance for showing inside the WYSIWYG editor. * Manages a textarea element to hold code content. * @param {HTMLElement} elem * @returns {{wrap: Element, editor: *}} */ function wysiwygView(elem) { let doc = elem.ownerDocument; let codeElem = elem.querySelector('code'); let lang = (elem.className || '').replace('language-', ''); if (lang === '' && codeElem) { lang = (codeElem.className || '').replace('language-', '') } elem.innerHTML = elem.innerHTML.replace(//gi ,'\n'); let content = elem.textContent; let newWrap = doc.createElement('div'); let newTextArea = doc.createElement('textarea'); newWrap.className = 'CodeMirrorContainer'; newWrap.setAttribute('data-lang', lang); newWrap.setAttribute('dir', 'ltr'); newTextArea.style.display = 'none'; elem.parentNode.replaceChild(newWrap, elem); newWrap.appendChild(newTextArea); newWrap.contentEditable = false; newTextArea.textContent = content; let cm = CodeMirror(function(elt) { newWrap.appendChild(elt); }, { value: content, mode: getMode(lang), lineNumbers: true, lineWrapping: false, theme: getTheme(), readOnly: true }); setTimeout(() => { cm.refresh(); }, 300); return {wrap: newWrap, editor: cm}; } /** * Create a CodeMirror instance to show in the WYSIWYG pop-up editor * @param {HTMLElement} elem * @param {String} modeSuggestion * @returns {*} */ function popupEditor(elem, modeSuggestion) { let content = elem.textContent; return CodeMirror(function(elt) { elem.parentNode.insertBefore(elt, elem); elem.style.display = 'none'; }, { value: content, mode: getMode(modeSuggestion), lineNumbers: true, lineWrapping: false, theme: getTheme() }); } /** * Set the mode of a codemirror instance. * @param cmInstance * @param modeSuggestion */ function setMode(cmInstance, modeSuggestion) { cmInstance.setOption('mode', getMode(modeSuggestion)); } /** * Set the content of a cm instance. * @param cmInstance * @param codeContent */ function setContent(cmInstance, codeContent) { cmInstance.setValue(codeContent); setTimeout(() => { cmInstance.refresh(); }, 10); } /** * Get a CodeMirror instance to use for the markdown editor. * @param {HTMLElement} elem * @returns {*} */ function markdownEditor(elem) { const content = elem.textContent; const config = { value: content, mode: "markdown", lineNumbers: true, lineWrapping: true, theme: getTheme(), scrollPastEnd: true, }; window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config}); return CodeMirror(function (elt) { elem.parentNode.insertBefore(elt, elem); elem.style.display = 'none'; }, config); } /** * Get the 'meta' key dependant on the user's system. * @returns {string} */ function getMetaKey() { let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault; return mac ? "Cmd" : "Ctrl"; } export default { highlight: highlight, wysiwygView: wysiwygView, popupEditor: popupEditor, setMode: setMode, setContent: setContent, markdownEditor: markdownEditor, getMetaKey: getMetaKey, };