2022-08-02 19:11:02 +00:00
|
|
|
import {EditorView} from "@codemirror/view"
|
2018-11-10 16:08:33 +00:00
|
|
|
import Clipboard from "clipboard/dist/clipboard.min";
|
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.
|
|
|
|
* @param cmInstance
|
|
|
|
*/
|
|
|
|
function addCopyIcon(cmInstance) {
|
2022-08-02 19:11:02 +00:00
|
|
|
// TODO
|
|
|
|
// 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');
|
|
|
|
// }, 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
|
2017-09-02 12:34:37 +00:00
|
|
|
* @returns {*}
|
|
|
|
*/
|
2023-04-10 14:01:44 +00:00
|
|
|
export function markdownEditor(elem, onChange, domEventHandlers) {
|
2019-10-16 17:01:35 +00:00
|
|
|
const content = elem.textContent;
|
|
|
|
|
2023-04-10 14:01:44 +00:00
|
|
|
// TODO - Change to pass something else that's useful, probably extension array?
|
|
|
|
// window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});
|
2019-10-16 17:01:35 +00:00
|
|
|
|
2023-04-10 14:01:44 +00:00
|
|
|
const ev = createView({
|
|
|
|
parent: elem.parentNode,
|
|
|
|
doc: content,
|
|
|
|
extensions: [
|
|
|
|
...editor('markdown'),
|
|
|
|
EditorView.updateListener.of((v) => {
|
|
|
|
onChange(v);
|
|
|
|
}),
|
|
|
|
EditorView.domEventHandlers(domEventHandlers),
|
|
|
|
],
|
|
|
|
});
|
|
|
|
|
|
|
|
elem.style.display = 'none';
|
|
|
|
|
|
|
|
return ev;
|
2017-09-02 12:34:37 +00:00
|
|
|
}
|
2017-05-28 15:02:46 +00:00
|
|
|
|
2017-09-02 12:34:37 +00:00
|
|
|
/**
|
2022-02-08 11:10:01 +00:00
|
|
|
* Get the 'meta' key dependent on the user's system.
|
2017-09-02 12:34:37 +00:00
|
|
|
* @returns {string}
|
|
|
|
*/
|
2022-02-08 11:10:01 +00:00
|
|
|
export function getMetaKey() {
|
2023-04-10 14:01:44 +00:00
|
|
|
// TODO - Redo, Is needed? No CodeMirror instance to use.
|
|
|
|
const mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
|
2017-07-02 18:35:13 +00:00
|
|
|
return mac ? "Cmd" : "Ctrl";
|
2022-02-08 11:10:01 +00:00
|
|
|
}
|