1 import {EditorView, keymap} from '@codemirror/view';
3 import {copyTextToClipboard} from '../services/clipboard.ts';
4 import {viewerExtensions, editorExtensions} from './setups';
5 import {createView} from './views';
6 import {SimpleEditorInterface} from './simple-editor-interface';
9 * Add a button to a CodeMirror instance which copies the contents to the clipboard upon click.
10 * @param {EditorView} editorView
12 function addCopyIcon(editorView) {
13 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>';
14 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>';
15 const copyButton = document.createElement('button');
16 copyButton.setAttribute('type', 'button');
17 copyButton.classList.add('cm-copy-button');
18 copyButton.innerHTML = copyIcon;
19 editorView.dom.appendChild(copyButton);
21 const notifyTime = 620;
22 const transitionTime = 60;
23 copyButton.addEventListener('click', () => {
24 copyTextToClipboard(editorView.state.doc.toString());
25 copyButton.classList.add('success');
28 copyButton.innerHTML = checkIcon;
29 }, transitionTime / 2);
32 copyButton.classList.remove('success');
36 copyButton.innerHTML = copyIcon;
37 }, notifyTime + (transitionTime / 2));
42 * @param {HTMLElement} codeElem
45 function getDirectionFromCodeBlock(codeElem) {
47 const innerCodeElem = codeElem.querySelector('code');
49 if (innerCodeElem && innerCodeElem.hasAttribute('dir')) {
50 dir = innerCodeElem.getAttribute('dir');
51 } else if (codeElem.hasAttribute('dir')) {
52 dir = codeElem.getAttribute('dir');
59 * Add code highlighting to a single element.
60 * @param {HTMLElement} elem
62 function highlightElem(elem) {
63 const innerCodeElem = elem.querySelector('code[class^=language-]');
64 elem.innerHTML = elem.innerHTML.replace(/<br\s*\/?>/gi, '\n');
65 const content = elem.textContent.trimEnd();
68 if (innerCodeElem !== null) {
69 langName = innerCodeElem.className.replace('language-', '');
72 const wrapper = document.createElement('div');
73 elem.parentNode.insertBefore(wrapper, elem);
75 const direction = getDirectionFromCodeBlock(elem);
77 wrapper.setAttribute('dir', direction);
80 const ev = createView('content-code-block', {
83 extensions: viewerExtensions(wrapper),
86 const editor = new SimpleEditorInterface(ev);
87 editor.setMode(langName, content);
94 * Highlight all code blocks within the given parent element
95 * @param {HTMLElement} parent
97 export function highlightWithin(parent) {
98 const codeBlocks = parent.querySelectorAll('pre');
99 for (const codeBlock of codeBlocks) {
100 highlightElem(codeBlock);
105 * Highlight pre elements on a page
107 export function highlight() {
108 const codeBlocks = document.querySelectorAll('.page-content pre, .comment-box .content pre');
109 for (const codeBlock of codeBlocks) {
110 highlightElem(codeBlock);
115 * Create a CodeMirror instance for showing inside the WYSIWYG editor.
116 * Manages a textarea element to hold code content.
117 * @param {HTMLElement} cmContainer
118 * @param {ShadowRoot} shadowRoot
119 * @param {String} content
120 * @param {String} language
121 * @returns {SimpleEditorInterface}
123 export function wysiwygView(cmContainer, shadowRoot, content, language) {
124 const ev = createView('content-code-block', {
127 extensions: viewerExtensions(cmContainer),
131 const editor = new SimpleEditorInterface(ev);
132 editor.setMode(language, content);
138 * Create a CodeMirror instance to show in the WYSIWYG pop-up editor
139 * @param {HTMLElement} elem
140 * @param {String} modeSuggestion
141 * @returns {SimpleEditorInterface}
143 export function popupEditor(elem, modeSuggestion) {
144 const content = elem.textContent;
146 parent: elem.parentElement,
149 ...editorExtensions(elem.parentElement),
153 // Create editor, hide original input
154 const editor = new SimpleEditorInterface(createView('code-editor', config));
155 editor.setMode(modeSuggestion, content);
156 elem.style.display = 'none';
162 * Create an inline editor to replace the given textarea.
163 * @param {HTMLTextAreaElement} textArea
164 * @param {String} mode
165 * @returns {SimpleEditorInterface}
167 export function inlineEditor(textArea, mode) {
168 const content = textArea.value;
170 parent: textArea.parentElement,
173 ...editorExtensions(textArea.parentElement),
174 EditorView.updateListener.of(v => {
176 textArea.value = v.state.doc.toString();
182 // Create editor view, hide original input
183 const ev = createView('code-input', config);
184 const editor = new SimpleEditorInterface(ev);
185 editor.setMode(mode, content);
186 textArea.style.display = 'none';
192 * Get a CodeMirror instance to use for the markdown editor.
193 * @param {HTMLElement} elem
194 * @param {function} onChange
195 * @param {object} domEventHandlers
196 * @param {Array} keyBindings
197 * @returns {EditorView}
199 export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
200 const content = elem.textContent;
202 parent: elem.parentElement,
205 keymap.of(keyBindings),
206 ...editorExtensions(elem.parentElement),
207 EditorView.updateListener.of(v => {
210 EditorView.domEventHandlers(domEventHandlers),
214 // Emit a pre-event public event to allow tweaking of the configure before view creation.
215 window.$events.emitPublic(elem, 'editor-markdown-cm6::pre-init', {editorViewConfig: config});
217 // Create editor view, hide original input
218 const ev = createView('markdown-editor', config);
219 (new SimpleEditorInterface(ev)).setMode('markdown', '');
220 elem.style.display = 'none';