2023-04-14 13:08:40 +00:00
|
|
|
import {EditorView, keymap} from "@codemirror/view";
|
2018-09-22 22:24:51 +00:00
|
|
|
|
2023-04-16 15:05:16 +00:00
|
|
|
import {copyTextToClipboard} from "../services/clipboard.js"
|
2023-04-17 12:24:29 +00:00
|
|
|
import {viewerExtensions, editorExtensions} from "./setups.js";
|
|
|
|
import {createView} from "./views.js";
|
|
|
|
import {SimpleEditorInterface} from "./simple-editor-interface.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,
|
2023-04-17 12:24:29 +00:00
|
|
|
extensions: viewerExtensions(wrapper),
|
2017-06-17 14:07:55 +00:00
|
|
|
});
|
2018-06-09 09:41:01 +00:00
|
|
|
|
2023-04-17 12:24:29 +00:00
|
|
|
const editor = new SimpleEditorInterface(ev);
|
|
|
|
editor.setMode(langName, content);
|
|
|
|
|
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) {
|
2023-04-16 15:05:16 +00:00
|
|
|
const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><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 checkIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>`;
|
2023-04-14 13:08:40 +00:00
|
|
|
const copyButton = document.createElement('button');
|
|
|
|
copyButton.setAttribute('type', 'button')
|
|
|
|
copyButton.classList.add('cm-copy-button');
|
|
|
|
copyButton.innerHTML = copyIcon;
|
|
|
|
editorView.dom.appendChild(copyButton);
|
|
|
|
|
2023-04-16 15:05:16 +00:00
|
|
|
const notifyTime = 620;
|
|
|
|
const transitionTime = 60;
|
2023-04-14 13:08:40 +00:00
|
|
|
copyButton.addEventListener('click', event => {
|
|
|
|
copyTextToClipboard(editorView.state.doc.toString());
|
|
|
|
copyButton.classList.add('success');
|
2023-04-16 15:05:16 +00:00
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
copyButton.innerHTML = checkIcon;
|
|
|
|
}, transitionTime / 2);
|
|
|
|
|
2023-04-14 13:08:40 +00:00
|
|
|
setTimeout(() => {
|
|
|
|
copyButton.classList.remove('success');
|
2023-04-16 15:05:16 +00:00
|
|
|
}, notifyTime);
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
copyButton.innerHTML = copyIcon;
|
|
|
|
}, notifyTime + (transitionTime / 2));
|
2023-04-14 13:08:40 +00:00
|
|
|
});
|
2017-06-17 14:07:55 +00:00
|
|
|
}
|
|
|
|
|
2017-09-02 12:34:37 +00:00
|
|
|
/**
|
|
|
|
* Create a CodeMirror instance for showing inside the WYSIWYG editor.
|
2023-04-17 12:24:29 +00:00
|
|
|
* Manages a textarea element to hold code content.
|
2022-02-09 19:24:27 +00:00
|
|
|
* @param {HTMLElement} cmContainer
|
2023-04-16 22:48:45 +00:00
|
|
|
* @param {ShadowRoot} shadowRoot
|
2022-02-09 19:24:27 +00:00
|
|
|
* @param {String} content
|
|
|
|
* @param {String} language
|
2023-04-17 12:24:29 +00:00
|
|
|
* @returns {SimpleEditorInterface}
|
2017-09-02 12:34:37 +00:00
|
|
|
*/
|
2023-04-16 22:48:45 +00:00
|
|
|
export function wysiwygView(cmContainer, shadowRoot, content, language) {
|
2023-04-16 15:05:16 +00:00
|
|
|
const ev = createView({
|
|
|
|
parent: cmContainer,
|
|
|
|
doc: content,
|
2023-04-17 12:24:29 +00:00
|
|
|
extensions: viewerExtensions(cmContainer),
|
2023-04-16 22:48:45 +00:00
|
|
|
root: shadowRoot,
|
2017-06-17 14:07:55 +00:00
|
|
|
});
|
2023-04-16 15:05:16 +00:00
|
|
|
|
2023-04-17 12:24:29 +00:00
|
|
|
const editor = new SimpleEditorInterface(ev);
|
|
|
|
editor.setMode(language, content);
|
2023-04-16 15:05:16 +00:00
|
|
|
|
2023-04-17 12:24:29 +00:00
|
|
|
return editor;
|
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
|
2023-04-17 12:24:29 +00:00
|
|
|
* @returns {SimpleEditorInterface}
|
2017-09-02 12:34:37 +00:00
|
|
|
*/
|
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;
|
2023-04-17 12:24:29 +00:00
|
|
|
const config = {
|
|
|
|
parent: elem.parentElement,
|
|
|
|
doc: content,
|
|
|
|
extensions: [
|
|
|
|
...editorExtensions(elem.parentElement),
|
|
|
|
EditorView.updateListener.of((v) => {
|
|
|
|
if (v.docChanged) {
|
|
|
|
// textArea.value = v.state.doc.toString();
|
|
|
|
}
|
|
|
|
}),
|
|
|
|
],
|
|
|
|
};
|
2017-07-01 12:23:46 +00:00
|
|
|
|
2023-04-17 12:24:29 +00:00
|
|
|
// Create editor, hide original input
|
|
|
|
const editor = new SimpleEditorInterface(createView(config));
|
|
|
|
editor.setMode(modeSuggestion, content);
|
|
|
|
elem.style.display = 'none';
|
|
|
|
|
|
|
|
return editor;
|
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
|
2023-04-17 12:24:29 +00:00
|
|
|
* @returns {SimpleEditorInterface}
|
2022-05-17 16:39:31 +00:00
|
|
|
*/
|
|
|
|
export function inlineEditor(textArea, mode) {
|
2023-04-16 15:05:16 +00:00
|
|
|
const content = textArea.value;
|
|
|
|
const config = {
|
2023-04-17 12:24:29 +00:00
|
|
|
parent: textArea.parentElement,
|
2023-04-16 15:05:16 +00:00
|
|
|
doc: content,
|
|
|
|
extensions: [
|
2023-04-17 12:24:29 +00:00
|
|
|
...editorExtensions(textArea.parentElement),
|
2023-04-16 15:05:16 +00:00
|
|
|
EditorView.updateListener.of((v) => {
|
|
|
|
if (v.docChanged) {
|
|
|
|
textArea.value = v.state.doc.toString();
|
|
|
|
}
|
|
|
|
}),
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
// Create editor view, hide original input
|
|
|
|
const ev = createView(config);
|
2023-04-17 12:24:29 +00:00
|
|
|
const editor = new SimpleEditorInterface(ev);
|
|
|
|
editor.setMode(mode, content);
|
2023-04-16 15:05:16 +00:00
|
|
|
textArea.style.display = 'none';
|
|
|
|
|
2023-04-17 12:24:29 +00:00
|
|
|
return editor;
|
2019-12-07 16:54:34 +00:00
|
|
|
}
|
|
|
|
|
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
|
2023-04-17 12:24:29 +00:00
|
|
|
* @returns {EditorView}
|
2017-09-02 12:34:37 +00:00
|
|
|
*/
|
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-17 12:24:29 +00:00
|
|
|
parent: elem.parentElement,
|
2023-04-10 14:01:44 +00:00
|
|
|
doc: content,
|
|
|
|
extensions: [
|
2023-04-18 13:21:22 +00:00
|
|
|
keymap.of(keyBindings),
|
2023-04-17 12:24:29 +00:00
|
|
|
...editorExtensions(elem.parentElement),
|
2023-04-10 14:01:44 +00:00
|
|
|
EditorView.updateListener.of((v) => {
|
|
|
|
onChange(v);
|
|
|
|
}),
|
|
|
|
EditorView.domEventHandlers(domEventHandlers),
|
|
|
|
],
|
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-17 12:24:29 +00:00
|
|
|
(new SimpleEditorInterface(ev)).setMode('markdown', '');
|
2023-04-10 14:01:44 +00:00
|
|
|
elem.style.display = 'none';
|
|
|
|
|
|
|
|
return ev;
|
2022-02-08 11:10:01 +00:00
|
|
|
}
|