2023-04-14 13:08:40 +00:00
|
|
|
import {EditorView, keymap} from "@codemirror/view";
|
|
|
|
import {copyTextToClipboard} from "../services/clipboard.js"
|
2018-09-22 22:24:51 +00:00
|
|
|
|
|
|
|
// Modes
|
2023-04-10 14:01:44 +00:00
|
|
|
import {viewer, editor} from "./setups.js";
|
2022-08-03 18:40:16 +00:00
|
|
|
import {createView, updateViewLanguage} from "./views.js";
|
2017-06-17 11:41:18 +00:00
|
|
|
|
2017-09-02 12:34:37 +00:00
|
|
|
/**
|
|
|
|
* Highlight pre elements on a page
|
|
|
|
*/
|
2022-02-08 11:10:01 +00:00
|
|
|
export function highlight() {
|
2020-01-15 20:18:02 +00: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
|
|
|
|
*/
|
2022-02-08 11:10:01 +00:00
|
|
|
export function highlightWithin(parent) {
|
2020-01-15 20:18:02 +00:00
|
|
|
const codeBlocks = parent.querySelectorAll('pre');
|
|
|
|
for (const codeBlock of codeBlocks) {
|
|
|
|
highlightElem(codeBlock);
|
2017-06-17 14:07:55 +00:00
|
|
|
}
|
2017-09-02 12:34:37 +00:00
|
|
|
}
|
2017-05-28 12:16:21 +00:00
|
|
|
|
2017-09-02 12:34:37 +00:00
|
|
|
/**
|
|
|
|
* Add code highlighting to a single element.
|
|
|
|
* @param {HTMLElement} elem
|
|
|
|
*/
|
2017-06-17 14:07:55 +00:00
|
|
|
function highlightElem(elem) {
|
2019-12-07 16:23:44 +00:00
|
|
|
const innerCodeElem = elem.querySelector('code[class^=language-]');
|
|
|
|
elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
|
2020-02-15 14:24:55 +00:00
|
|
|
const content = elem.textContent.trimEnd();
|
2019-12-07 16:23:44 +00:00
|
|
|
|
2022-08-03 18:40:16 +00:00
|
|
|
let langName = '';
|
2017-06-17 14:07:55 +00:00
|
|
|
if (innerCodeElem !== null) {
|
2022-08-03 18:40:16 +00:00
|
|
|
langName = innerCodeElem.className.replace('language-', '');
|
2017-05-28 12:16:21 +00:00
|
|
|
}
|
2017-06-17 14:07:55 +00:00
|
|
|
|
2022-08-02 19:11:02 +00:00
|
|
|
const wrapper = document.createElement('div');
|
|
|
|
elem.parentNode.insertBefore(wrapper, elem);
|
|
|
|
|
2022-08-03 18:40:16 +00:00
|
|
|
const ev = createView({
|
2022-08-02 19:11:02 +00:00
|
|
|
parent: wrapper,
|
|
|
|
doc: content,
|
|
|
|
extensions: viewer(),
|
2017-06-17 14:07:55 +00:00
|
|
|
});
|
2022-08-03 18:40:16 +00:00
|
|
|
setMode(ev, langName, content);
|
2018-06-09 09:41:01 +00:00
|
|
|
|
2022-08-02 19:11:02 +00:00
|
|
|
elem.remove();
|
|
|
|
|
2022-08-03 18:40:16 +00:00
|
|
|
addCopyIcon(ev);
|
2018-06-09 09:41:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Add a button to a CodeMirror instance which copies the contents to the clipboard upon click.
|
2023-04-14 13:08:40 +00:00
|
|
|
* @param {EditorView} editorView
|
2018-06-09 09:41:01 +00:00
|
|
|
*/
|
2023-04-14 13:08:40 +00:00
|
|
|
function addCopyIcon(editorView) {
|
|
|
|
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('button');
|
|
|
|
copyButton.setAttribute('type', 'button')
|
|
|
|
copyButton.classList.add('cm-copy-button');
|
|
|
|
copyButton.innerHTML = copyIcon;
|
|
|
|
editorView.dom.appendChild(copyButton);
|
|
|
|
|
|
|
|
copyButton.addEventListener('click', event => {
|
|
|
|
copyTextToClipboard(editorView.state.doc.toString());
|
|
|
|
copyButton.classList.add('success');
|
|
|
|
setTimeout(() => {
|
|
|
|
copyButton.classList.remove('success');
|
|
|
|
}, 240);
|
|
|
|
});
|
2017-06-17 14:07:55 +00:00
|
|
|
}
|
|
|
|
|
2017-09-02 12:34:37 +00:00
|
|
|
/**
|
|
|
|
* Ge the theme to use for CodeMirror instances.
|
|
|
|
* @returns {*|string}
|
|
|
|
*/
|
|
|
|
function getTheme() {
|
2020-04-10 21:38:29 +00:00
|
|
|
const darkMode = document.documentElement.classList.contains('dark-mode');
|
|
|
|
return window.codeTheme || (darkMode ? 'darcula' : 'default');
|
2017-09-02 12:34:37 +00:00
|
|
|
}
|
2017-05-28 12:16:21 +00:00
|
|
|
|
2017-09-02 12:34:37 +00:00
|
|
|
/**
|
|
|
|
* Create a CodeMirror instance for showing inside the WYSIWYG editor.
|
|
|
|
* Manages a textarea element to hold code content.
|
2022-02-09 19:24:27 +00:00
|
|
|
* @param {HTMLElement} cmContainer
|
|
|
|
* @param {String} content
|
|
|
|
* @param {String} language
|
2017-09-02 12:34:37 +00:00
|
|
|
* @returns {{wrap: Element, editor: *}}
|
|
|
|
*/
|
2022-02-09 19:24:27 +00:00
|
|
|
export function wysiwygView(cmContainer, content, language) {
|
|
|
|
return CodeMirror(cmContainer, {
|
2017-06-17 14:07:55 +00:00
|
|
|
value: content,
|
2022-02-09 19:24:27 +00:00
|
|
|
mode: getMode(language, content),
|
2017-06-17 14:07:55 +00:00
|
|
|
lineNumbers: true,
|
2019-10-17 13:41:39 +00:00
|
|
|
lineWrapping: false,
|
2017-09-02 12:34:37 +00:00
|
|
|
theme: getTheme(),
|
2017-06-17 14:07:55 +00:00
|
|
|
readOnly: true
|
|
|
|
});
|
2017-09-02 12:34:37 +00:00
|
|
|
}
|
2017-05-28 12:16:21 +00:00
|
|
|
|
2022-01-04 11:54:24 +00:00
|
|
|
|
2017-09-02 12:34:37 +00:00
|
|
|
/**
|
|
|
|
* Create a CodeMirror instance to show in the WYSIWYG pop-up editor
|
|
|
|
* @param {HTMLElement} elem
|
|
|
|
* @param {String} modeSuggestion
|
|
|
|
* @returns {*}
|
|
|
|
*/
|
2022-02-08 11:10:01 +00:00
|
|
|
export function popupEditor(elem, modeSuggestion) {
|
2019-12-07 16:23:44 +00:00
|
|
|
const content = elem.textContent;
|
2017-07-01 12:23:46 +00:00
|
|
|
|
|
|
|
return CodeMirror(function(elt) {
|
|
|
|
elem.parentNode.insertBefore(elt, elem);
|
|
|
|
elem.style.display = 'none';
|
|
|
|
}, {
|
|
|
|
value: content,
|
2019-12-07 16:23:44 +00:00
|
|
|
mode: getMode(modeSuggestion, content),
|
2017-07-01 12:23:46 +00:00
|
|
|
lineNumbers: true,
|
2019-10-17 13:41:39 +00:00
|
|
|
lineWrapping: false,
|
2019-08-15 04:45:48 +00:00
|
|
|
theme: getTheme()
|
2017-07-01 12:23:46 +00:00
|
|
|
});
|
2017-09-02 12:34:37 +00:00
|
|
|
}
|
2017-07-01 12:23:46 +00:00
|
|
|
|
2022-05-17 16:39:31 +00:00
|
|
|
/**
|
|
|
|
* Create an inline editor to replace the given textarea.
|
|
|
|
* @param {HTMLTextAreaElement} textArea
|
|
|
|
* @param {String} mode
|
|
|
|
* @returns {CodeMirror3}
|
|
|
|
*/
|
|
|
|
export function inlineEditor(textArea, mode) {
|
|
|
|
return CodeMirror.fromTextArea(textArea, {
|
|
|
|
mode: getMode(mode, textArea.value),
|
|
|
|
lineNumbers: true,
|
|
|
|
lineWrapping: false,
|
|
|
|
theme: getTheme(),
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-09-02 12:34:37 +00:00
|
|
|
/**
|
2022-08-03 18:40:16 +00:00
|
|
|
* Set the language mode of a codemirror EditorView.
|
|
|
|
*
|
|
|
|
* @param {EditorView} ev
|
|
|
|
* @param {string} modeSuggestion
|
|
|
|
* @param {string} content
|
2017-09-02 12:34:37 +00:00
|
|
|
*/
|
2022-08-03 18:40:16 +00:00
|
|
|
export function setMode(ev, modeSuggestion, content) {
|
|
|
|
updateViewLanguage(ev, modeSuggestion, content);
|
2017-09-02 12:34:37 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Set the content of a cm instance.
|
|
|
|
* @param cmInstance
|
|
|
|
* @param codeContent
|
|
|
|
*/
|
2022-02-08 11:10:01 +00:00
|
|
|
export function setContent(cmInstance, codeContent) {
|
2017-07-01 12:23:46 +00:00
|
|
|
cmInstance.setValue(codeContent);
|
|
|
|
setTimeout(() => {
|
2019-12-07 16:54:34 +00:00
|
|
|
updateLayout(cmInstance);
|
2017-07-01 12:23:46 +00:00
|
|
|
}, 10);
|
2017-09-02 12:34:37 +00:00
|
|
|
}
|
2017-06-17 14:07:55 +00:00
|
|
|
|
2019-12-07 16:54:34 +00:00
|
|
|
/**
|
|
|
|
* Update the layout (codemirror refresh) of a cm instance.
|
|
|
|
* @param cmInstance
|
|
|
|
*/
|
2022-02-08 11:10:01 +00:00
|
|
|
export function updateLayout(cmInstance) {
|
2019-12-07 16:54:34 +00:00
|
|
|
cmInstance.refresh();
|
|
|
|
}
|
|
|
|
|
2017-09-02 12:34:37 +00:00
|
|
|
/**
|
2019-10-16 17:01:35 +00:00
|
|
|
* Get a CodeMirror instance to use for the markdown editor.
|
2017-09-02 12:34:37 +00:00
|
|
|
* @param {HTMLElement} elem
|
2023-04-10 14:01:44 +00:00
|
|
|
* @param {function} onChange
|
|
|
|
* @param {object} domEventHandlers
|
2023-04-11 10:48:58 +00:00
|
|
|
* @param {Array} keyBindings
|
2017-09-02 12:34:37 +00:00
|
|
|
* @returns {*}
|
|
|
|
*/
|
2023-04-11 10:48:58 +00:00
|
|
|
export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
|
2019-10-16 17:01:35 +00:00
|
|
|
const content = elem.textContent;
|
2023-04-14 13:08:40 +00:00
|
|
|
const config = {
|
2023-04-10 14:01:44 +00:00
|
|
|
parent: elem.parentNode,
|
|
|
|
doc: content,
|
|
|
|
extensions: [
|
|
|
|
...editor('markdown'),
|
|
|
|
EditorView.updateListener.of((v) => {
|
|
|
|
onChange(v);
|
|
|
|
}),
|
|
|
|
EditorView.domEventHandlers(domEventHandlers),
|
2023-04-11 10:48:58 +00:00
|
|
|
keymap.of(keyBindings),
|
2023-04-10 14:01:44 +00:00
|
|
|
],
|
2023-04-14 13:08:40 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
// Emit a pre-event public event to allow tweaking of the configure before view creation.
|
|
|
|
window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {cmEditorViewConfig: config});
|
2023-04-10 14:01:44 +00:00
|
|
|
|
2023-04-14 13:08:40 +00:00
|
|
|
// Create editor view, hide original input
|
|
|
|
const ev = createView(config);
|
2023-04-14 17:08:57 +00:00
|
|
|
setMode(ev, 'markdown', '');
|
2023-04-10 14:01:44 +00:00
|
|
|
elem.style.display = 'none';
|
|
|
|
|
|
|
|
return ev;
|
2022-02-08 11:10:01 +00:00
|
|
|
}
|