2018-11-09 22:17:35 +01:00
|
|
|
import CodeMirror from "codemirror";
|
2018-11-10 17:08:33 +01:00
|
|
|
import Clipboard from "clipboard/dist/clipboard.min";
|
2018-09-23 00:24:51 +02:00
|
|
|
|
|
|
|
// Modes
|
2018-11-09 22:17:35 +01:00
|
|
|
import 'codemirror/mode/css/css';
|
|
|
|
import 'codemirror/mode/clike/clike';
|
|
|
|
import 'codemirror/mode/diff/diff';
|
2020-02-07 13:45:19 +01:00
|
|
|
import 'codemirror/mode/fortran/fortran';
|
2018-11-09 22:17:35 +01:00
|
|
|
import 'codemirror/mode/go/go';
|
2020-02-07 13:45:19 +01:00
|
|
|
import 'codemirror/mode/haskell/haskell';
|
2018-11-09 22:17:35 +01:00
|
|
|
import 'codemirror/mode/htmlmixed/htmlmixed';
|
|
|
|
import 'codemirror/mode/javascript/javascript';
|
2019-03-22 09:42:02 +01:00
|
|
|
import 'codemirror/mode/julia/julia';
|
2019-03-02 09:52:14 +01:00
|
|
|
import 'codemirror/mode/lua/lua';
|
2018-11-09 22:17:35 +01:00
|
|
|
import 'codemirror/mode/markdown/markdown';
|
2019-03-22 09:42:02 +01:00
|
|
|
import 'codemirror/mode/mllike/mllike';
|
2018-11-09 22:17:35 +01:00
|
|
|
import 'codemirror/mode/nginx/nginx';
|
2020-01-19 06:41:18 +01:00
|
|
|
import 'codemirror/mode/perl/perl';
|
2020-02-07 13:45:19 +01:00
|
|
|
import 'codemirror/mode/pascal/pascal';
|
2018-11-09 22:17:35 +01:00
|
|
|
import 'codemirror/mode/php/php';
|
|
|
|
import 'codemirror/mode/powershell/powershell';
|
2019-09-16 02:20:11 +02:00
|
|
|
import 'codemirror/mode/properties/properties';
|
2018-11-09 22:17:35 +01:00
|
|
|
import 'codemirror/mode/python/python';
|
|
|
|
import 'codemirror/mode/ruby/ruby';
|
2019-03-22 09:42:02 +01:00
|
|
|
import 'codemirror/mode/rust/rust';
|
2018-11-09 22:17:35 +01:00
|
|
|
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';
|
2017-05-28 14:16:21 +02:00
|
|
|
|
2018-09-23 00:24:51 +02:00
|
|
|
// Addons
|
2018-11-09 22:17:35 +01:00
|
|
|
import 'codemirror/addon/scroll/scrollpastend';
|
2017-05-28 14:16:21 +02:00
|
|
|
|
2019-12-07 17:23:44 +01:00
|
|
|
// Mapping of possible languages or formats from user input to their codemirror modes.
|
|
|
|
// Value can be a mode string or a function that will receive the code content & return the mode string.
|
|
|
|
// The function option is used in the event the exact mode could be dynamic depending on the code.
|
2017-06-17 13:41:18 +02:00
|
|
|
const modeMap = {
|
|
|
|
css: 'css',
|
2018-05-20 10:32:15 +02:00
|
|
|
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',
|
2017-07-01 17:10:52 +02:00
|
|
|
diff: 'diff',
|
2020-02-07 13:45:19 +01:00
|
|
|
for: 'fortran',
|
|
|
|
fortran: 'fortran',
|
2017-06-17 13:41:18 +02:00
|
|
|
go: 'go',
|
2019-03-22 09:42:02 +01:00
|
|
|
haskell: 'haskell',
|
|
|
|
hs: 'haskell',
|
2017-06-17 13:41:18 +02:00
|
|
|
html: 'htmlmixed',
|
2019-10-17 22:16:55 +02:00
|
|
|
ini: 'properties',
|
2017-06-17 13:41:18 +02:00
|
|
|
javascript: 'javascript',
|
|
|
|
json: {name: 'javascript', json: true},
|
|
|
|
js: 'javascript',
|
2019-03-22 09:42:02 +01:00
|
|
|
jl: 'julia',
|
|
|
|
julia: 'julia',
|
2019-03-02 09:52:14 +01:00
|
|
|
lua: 'lua',
|
2017-06-17 13:41:18 +02:00
|
|
|
md: 'markdown',
|
|
|
|
mdown: 'markdown',
|
|
|
|
markdown: 'markdown',
|
2019-03-22 09:42:02 +01:00
|
|
|
ml: 'mllike',
|
2017-06-17 13:41:18 +02:00
|
|
|
nginx: 'nginx',
|
2020-01-19 06:41:18 +01:00
|
|
|
perl: 'perl',
|
|
|
|
pl: 'perl',
|
2017-06-17 13:41:18 +02:00
|
|
|
powershell: 'powershell',
|
2019-09-16 02:24:47 +02:00
|
|
|
properties: 'properties',
|
2019-03-22 09:42:02 +01:00
|
|
|
ocaml: 'mllike',
|
2019-12-27 18:14:34 +01:00
|
|
|
pascal: 'text/x-pascal',
|
|
|
|
pas: 'text/x-pascal',
|
2019-12-07 17:23:44 +01:00
|
|
|
php: (content) => {
|
|
|
|
return content.includes('<?php') ? 'php' : 'text/x-php';
|
|
|
|
},
|
2017-06-17 13:41:18 +02:00
|
|
|
py: 'python',
|
|
|
|
python: 'python',
|
|
|
|
ruby: 'ruby',
|
2019-03-22 09:42:02 +01:00
|
|
|
rust: 'rust',
|
2017-06-17 13:41:18 +02:00
|
|
|
rb: 'ruby',
|
2019-03-22 09:42:02 +01:00
|
|
|
rs: 'rust',
|
2017-06-17 13:41:18 +02:00
|
|
|
shell: 'shell',
|
2017-07-01 17:10:52 +02:00
|
|
|
sh: 'shell',
|
2017-06-17 13:41:18 +02:00
|
|
|
bash: 'shell',
|
|
|
|
toml: 'toml',
|
2018-12-16 16:38:49 +01:00
|
|
|
sql: 'text/x-sql',
|
2017-06-17 13:41:18 +02:00
|
|
|
xml: 'xml',
|
|
|
|
yaml: 'yaml',
|
|
|
|
yml: 'yaml',
|
|
|
|
};
|
|
|
|
|
2017-09-02 14:34:37 +02:00
|
|
|
/**
|
|
|
|
* Highlight pre elements on a page
|
|
|
|
*/
|
|
|
|
function highlight() {
|
2020-01-15 21:18:02 +01:00
|
|
|
const codeBlocks = document.querySelectorAll('.page-content pre, .comment-box .content pre');
|
|
|
|
for (const codeBlock of codeBlocks) {
|
|
|
|
highlightElem(codeBlock);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Highlight all code blocks within the given parent element
|
|
|
|
* @param {HTMLElement} parent
|
|
|
|
*/
|
|
|
|
function highlightWithin(parent) {
|
|
|
|
const codeBlocks = parent.querySelectorAll('pre');
|
|
|
|
for (const codeBlock of codeBlocks) {
|
|
|
|
highlightElem(codeBlock);
|
2017-06-17 16:07:55 +02:00
|
|
|
}
|
2017-09-02 14:34:37 +02:00
|
|
|
}
|
2017-05-28 14:16:21 +02:00
|
|
|
|
2017-09-02 14:34:37 +02:00
|
|
|
/**
|
|
|
|
* Add code highlighting to a single element.
|
|
|
|
* @param {HTMLElement} elem
|
|
|
|
*/
|
2017-06-17 16:07:55 +02:00
|
|
|
function highlightElem(elem) {
|
2019-12-07 17:23:44 +01:00
|
|
|
const innerCodeElem = elem.querySelector('code[class^=language-]');
|
|
|
|
elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
|
2020-02-15 15:24:55 +01:00
|
|
|
const content = elem.textContent.trimEnd();
|
2019-12-07 17:23:44 +01:00
|
|
|
|
2017-06-17 16:07:55 +02:00
|
|
|
let mode = '';
|
|
|
|
if (innerCodeElem !== null) {
|
2019-12-07 17:23:44 +01:00
|
|
|
const langName = innerCodeElem.className.replace('language-', '');
|
|
|
|
mode = getMode(langName, content);
|
2017-05-28 14:16:21 +02:00
|
|
|
}
|
2017-06-17 16:07:55 +02:00
|
|
|
|
2019-12-07 17:23:44 +01:00
|
|
|
const cm = CodeMirror(function(elt) {
|
2017-06-17 16:07:55 +02:00
|
|
|
elem.parentNode.replaceChild(elt, elem);
|
|
|
|
}, {
|
|
|
|
value: content,
|
|
|
|
mode: mode,
|
|
|
|
lineNumbers: true,
|
2019-10-17 15:41:39 +02:00
|
|
|
lineWrapping: false,
|
2017-09-02 14:34:37 +02:00
|
|
|
theme: getTheme(),
|
2017-06-17 16:07:55 +02:00
|
|
|
readOnly: true
|
|
|
|
});
|
2018-06-09 11:41:01 +02:00
|
|
|
|
|
|
|
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 = `<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>`;
|
|
|
|
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');
|
2018-09-22 15:55:33 +02:00
|
|
|
}, 240);
|
2018-06-09 11:41:01 +02:00
|
|
|
});
|
2017-06-17 16:07:55 +02:00
|
|
|
}
|
|
|
|
|
2017-07-01 14:23:46 +02:00
|
|
|
/**
|
|
|
|
* Search for a codemirror code based off a user suggestion
|
2019-12-07 17:23:44 +01:00
|
|
|
* @param {String} suggestion
|
|
|
|
* @param {String} content
|
2017-07-01 14:23:46 +02:00
|
|
|
* @returns {string}
|
|
|
|
*/
|
2019-12-07 17:23:44 +01:00
|
|
|
function getMode(suggestion, content) {
|
2017-07-01 14:23:46 +02:00
|
|
|
suggestion = suggestion.trim().replace(/^\./g, '').toLowerCase();
|
2019-12-07 17:23:44 +01:00
|
|
|
|
|
|
|
const modeMapType = typeof modeMap[suggestion];
|
|
|
|
|
|
|
|
if (modeMapType === 'undefined') {
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
|
|
|
|
if (modeMapType === 'function') {
|
|
|
|
return modeMap[suggestion](content);
|
|
|
|
}
|
|
|
|
|
|
|
|
return modeMap[suggestion];
|
2017-07-01 14:23:46 +02:00
|
|
|
}
|
|
|
|
|
2017-09-02 14:34:37 +02:00
|
|
|
/**
|
|
|
|
* Ge the theme to use for CodeMirror instances.
|
|
|
|
* @returns {*|string}
|
|
|
|
*/
|
|
|
|
function getTheme() {
|
2020-04-10 23:38:29 +02:00
|
|
|
const darkMode = document.documentElement.classList.contains('dark-mode');
|
|
|
|
return window.codeTheme || (darkMode ? 'darcula' : 'default');
|
2017-09-02 14:34:37 +02:00
|
|
|
}
|
2017-05-28 14:16:21 +02:00
|
|
|
|
2017-09-02 14:34:37 +02:00
|
|
|
/**
|
|
|
|
* 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) {
|
2019-12-07 17:23:44 +01:00
|
|
|
const doc = elem.ownerDocument;
|
|
|
|
const codeElem = elem.querySelector('code');
|
2017-07-01 14:23:46 +02:00
|
|
|
|
|
|
|
let lang = (elem.className || '').replace('language-', '');
|
|
|
|
if (lang === '' && codeElem) {
|
|
|
|
lang = (codeElem.className || '').replace('language-', '')
|
|
|
|
}
|
|
|
|
|
2017-06-17 16:07:55 +02:00
|
|
|
elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
|
2019-12-07 17:23:44 +01:00
|
|
|
const content = elem.textContent;
|
|
|
|
const newWrap = doc.createElement('div');
|
|
|
|
const newTextArea = doc.createElement('textarea');
|
2017-06-17 16:07:55 +02:00
|
|
|
|
|
|
|
newWrap.className = 'CodeMirrorContainer';
|
2017-07-01 14:23:46 +02:00
|
|
|
newWrap.setAttribute('data-lang', lang);
|
2018-09-22 14:18:26 +02:00
|
|
|
newWrap.setAttribute('dir', 'ltr');
|
2017-06-17 16:07:55 +02:00
|
|
|
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,
|
2019-12-07 17:23:44 +01:00
|
|
|
mode: getMode(lang, content),
|
2017-06-17 16:07:55 +02:00
|
|
|
lineNumbers: true,
|
2019-10-17 15:41:39 +02:00
|
|
|
lineWrapping: false,
|
2017-09-02 14:34:37 +02:00
|
|
|
theme: getTheme(),
|
2017-06-17 16:07:55 +02:00
|
|
|
readOnly: true
|
|
|
|
});
|
|
|
|
setTimeout(() => {
|
|
|
|
cm.refresh();
|
|
|
|
}, 300);
|
2017-07-01 14:23:46 +02:00
|
|
|
return {wrap: newWrap, editor: cm};
|
2017-09-02 14:34:37 +02:00
|
|
|
}
|
2017-05-28 14:16:21 +02:00
|
|
|
|
2017-09-02 14:34:37 +02:00
|
|
|
/**
|
|
|
|
* Create a CodeMirror instance to show in the WYSIWYG pop-up editor
|
|
|
|
* @param {HTMLElement} elem
|
|
|
|
* @param {String} modeSuggestion
|
|
|
|
* @returns {*}
|
|
|
|
*/
|
|
|
|
function popupEditor(elem, modeSuggestion) {
|
2019-12-07 17:23:44 +01:00
|
|
|
const content = elem.textContent;
|
2017-07-01 14:23:46 +02:00
|
|
|
|
|
|
|
return CodeMirror(function(elt) {
|
|
|
|
elem.parentNode.insertBefore(elt, elem);
|
|
|
|
elem.style.display = 'none';
|
|
|
|
}, {
|
|
|
|
value: content,
|
2019-12-07 17:23:44 +01:00
|
|
|
mode: getMode(modeSuggestion, content),
|
2017-07-01 14:23:46 +02:00
|
|
|
lineNumbers: true,
|
2019-10-17 15:41:39 +02:00
|
|
|
lineWrapping: false,
|
2019-08-15 06:45:48 +02:00
|
|
|
theme: getTheme()
|
2017-07-01 14:23:46 +02:00
|
|
|
});
|
2017-09-02 14:34:37 +02:00
|
|
|
}
|
2017-07-01 14:23:46 +02:00
|
|
|
|
2017-09-02 14:34:37 +02:00
|
|
|
/**
|
|
|
|
* Set the mode of a codemirror instance.
|
|
|
|
* @param cmInstance
|
|
|
|
* @param modeSuggestion
|
|
|
|
*/
|
2019-12-07 17:23:44 +01:00
|
|
|
function setMode(cmInstance, modeSuggestion, content) {
|
|
|
|
cmInstance.setOption('mode', getMode(modeSuggestion, content));
|
2017-09-02 14:34:37 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Set the content of a cm instance.
|
|
|
|
* @param cmInstance
|
|
|
|
* @param codeContent
|
|
|
|
*/
|
|
|
|
function setContent(cmInstance, codeContent) {
|
2017-07-01 14:23:46 +02:00
|
|
|
cmInstance.setValue(codeContent);
|
|
|
|
setTimeout(() => {
|
2019-12-07 17:54:34 +01:00
|
|
|
updateLayout(cmInstance);
|
2017-07-01 14:23:46 +02:00
|
|
|
}, 10);
|
2017-09-02 14:34:37 +02:00
|
|
|
}
|
2017-06-17 16:07:55 +02:00
|
|
|
|
2019-12-07 17:54:34 +01:00
|
|
|
/**
|
|
|
|
* Update the layout (codemirror refresh) of a cm instance.
|
|
|
|
* @param cmInstance
|
|
|
|
*/
|
|
|
|
function updateLayout(cmInstance) {
|
|
|
|
cmInstance.refresh();
|
|
|
|
}
|
|
|
|
|
2017-09-02 14:34:37 +02:00
|
|
|
/**
|
2019-10-16 19:01:35 +02:00
|
|
|
* Get a CodeMirror instance to use for the markdown editor.
|
2017-09-02 14:34:37 +02:00
|
|
|
* @param {HTMLElement} elem
|
|
|
|
* @returns {*}
|
|
|
|
*/
|
|
|
|
function markdownEditor(elem) {
|
2019-10-16 19:01:35 +02:00
|
|
|
const content = elem.textContent;
|
|
|
|
const config = {
|
2017-05-28 17:02:46 +02:00
|
|
|
value: content,
|
2017-07-01 14:23:46 +02:00
|
|
|
mode: "markdown",
|
2017-05-28 17:02:46 +02:00
|
|
|
lineNumbers: true,
|
2018-09-23 00:24:51 +02:00
|
|
|
lineWrapping: true,
|
2019-08-15 06:45:48 +02:00
|
|
|
theme: getTheme(),
|
2018-09-23 00:24:51 +02:00
|
|
|
scrollPastEnd: true,
|
2019-10-16 19:01:35 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});
|
|
|
|
|
|
|
|
return CodeMirror(function (elt) {
|
|
|
|
elem.parentNode.insertBefore(elt, elem);
|
|
|
|
elem.style.display = 'none';
|
|
|
|
}, config);
|
2017-09-02 14:34:37 +02:00
|
|
|
}
|
2017-05-28 17:02:46 +02:00
|
|
|
|
2017-09-02 14:34:37 +02:00
|
|
|
/**
|
|
|
|
* Get the 'meta' key dependant on the user's system.
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
|
|
|
function getMetaKey() {
|
2017-07-02 20:35:13 +02:00
|
|
|
let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
|
|
|
|
return mac ? "Cmd" : "Ctrl";
|
2017-09-02 14:34:37 +02:00
|
|
|
}
|
2017-05-28 17:02:46 +02:00
|
|
|
|
2018-11-09 22:17:35 +01:00
|
|
|
export default {
|
2017-09-02 14:34:37 +02:00
|
|
|
highlight: highlight,
|
2020-01-15 21:18:02 +01:00
|
|
|
highlightWithin: highlightWithin,
|
2017-09-02 14:34:37 +02:00
|
|
|
wysiwygView: wysiwygView,
|
|
|
|
popupEditor: popupEditor,
|
|
|
|
setMode: setMode,
|
|
|
|
setContent: setContent,
|
2019-12-07 17:54:34 +01:00
|
|
|
updateLayout: updateLayout,
|
2017-09-02 14:34:37 +02:00
|
|
|
markdownEditor: markdownEditor,
|
|
|
|
getMetaKey: getMetaKey,
|
2019-03-22 09:42:02 +01:00
|
|
|
};
|