BookStack Code Mirror - bookstack/blob - resources/js/code/index.mjs

   1 import {EditorView, keymap} from '@codemirror/view';
   2
   3 import {copyTextToClipboard} from '../services/clipboard';
   4 import {viewerExtensions, editorExtensions} from './setups';
   5 import {createView} from './views';
   6 import {SimpleEditorInterface} from './simple-editor-interface';
   7
   8 /**
   9  * Add a button to a CodeMirror instance which copies the contents to the clipboard upon click.
  10  * @param {EditorView} editorView
  11  */
  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);
  20
  21     const notifyTime = 620;
  22     const transitionTime = 60;
  23     copyButton.addEventListener('click', () => {
  24         copyTextToClipboard(editorView.state.doc.toString());
  25         copyButton.classList.add('success');
  26
  27         setTimeout(() => {
  28             copyButton.innerHTML = checkIcon;
  29         }, transitionTime / 2);
  30
  31         setTimeout(() => {
  32             copyButton.classList.remove('success');
  33         }, notifyTime);
  34
  35         setTimeout(() => {
  36             copyButton.innerHTML = copyIcon;
  37         }, notifyTime + (transitionTime / 2));
  38     });
  39 }
  40
  41 /**
  42  * Add code highlighting to a single element.
  43  * @param {HTMLElement} elem
  44  */
  45 function highlightElem(elem) {
  46     const innerCodeElem = elem.querySelector('code[class^=language-]');
  47     elem.innerHTML = elem.innerHTML.replace(/<br\s*\/?>/gi, '\n');
  48     const content = elem.textContent.trimEnd();
  49
  50     let langName = '';
  51     let innerCodeDirection = '';
  52     if (innerCodeElem !== null) {
  53         langName = innerCodeElem.className.replace('language-', '');
  54         innerCodeDirection = innerCodeElem.getAttribute('dir');
  55     }
  56
  57     const wrapper = document.createElement('div');
  58     elem.parentNode.insertBefore(wrapper, elem);
  59
  60     const direction = innerCodeDirection || elem.getAttribute('dir') || '';
  61     if (direction) {
  62         wrapper.setAttribute('dir', direction);
  63     }
  64
  65     const ev = createView('content-code-block', {
  66         parent: wrapper,
  67         doc: content,
  68         extensions: viewerExtensions(wrapper),
  69     });
  70
  71     const editor = new SimpleEditorInterface(ev);
  72     editor.setMode(langName, content);
  73
  74     elem.remove();
  75     addCopyIcon(ev);
  76 }
  77
  78 /**
  79  * Highlight all code blocks within the given parent element
  80  * @param {HTMLElement} parent
  81  */
  82 export function highlightWithin(parent) {
  83     const codeBlocks = parent.querySelectorAll('pre');
  84     for (const codeBlock of codeBlocks) {
  85         highlightElem(codeBlock);
  86     }
  87 }
  88
  89 /**
  90  * Highlight pre elements on a page
  91  */
  92 export function highlight() {
  93     const codeBlocks = document.querySelectorAll('.page-content pre, .comment-box .content pre');
  94     for (const codeBlock of codeBlocks) {
  95         highlightElem(codeBlock);
  96     }
  97 }
  98
  99 /**
 100  * Create a CodeMirror instance for showing inside the WYSIWYG editor.
 101  * Manages a textarea element to hold code content.
 102  * @param {HTMLElement} cmContainer
 103  * @param {ShadowRoot} shadowRoot
 104  * @param {String} content
 105  * @param {String} language
 106  * @returns {SimpleEditorInterface}
 107  */
 108 export function wysiwygView(cmContainer, shadowRoot, content, language) {
 109     const ev = createView('content-code-block', {
 110         parent: cmContainer,
 111         doc: content,
 112         extensions: viewerExtensions(cmContainer),
 113         root: shadowRoot,
 114     });
 115
 116     const editor = new SimpleEditorInterface(ev);
 117     editor.setMode(language, content);
 118
 119     return editor;
 120 }
 121
 122 /**
 123  * Create a CodeMirror instance to show in the WYSIWYG pop-up editor
 124  * @param {HTMLElement} elem
 125  * @param {String} modeSuggestion
 126  * @returns {SimpleEditorInterface}
 127  */
 128 export function popupEditor(elem, modeSuggestion) {
 129     const content = elem.textContent;
 130     const config = {
 131         parent: elem.parentElement,
 132         doc: content,
 133         extensions: [
 134             ...editorExtensions(elem.parentElement),
 135         ],
 136     };
 137
 138     // Create editor, hide original input
 139     const editor = new SimpleEditorInterface(createView('code-editor', config));
 140     editor.setMode(modeSuggestion, content);
 141     elem.style.display = 'none';
 142
 143     return editor;
 144 }
 145
 146 /**
 147  * Create an inline editor to replace the given textarea.
 148  * @param {HTMLTextAreaElement} textArea
 149  * @param {String} mode
 150  * @returns {SimpleEditorInterface}
 151  */
 152 export function inlineEditor(textArea, mode) {
 153     const content = textArea.value;
 154     const config = {
 155         parent: textArea.parentElement,
 156         doc: content,
 157         extensions: [
 158             ...editorExtensions(textArea.parentElement),
 159             EditorView.updateListener.of(v => {
 160                 if (v.docChanged) {
 161                     textArea.value = v.state.doc.toString();
 162                 }
 163             }),
 164         ],
 165     };
 166
 167     // Create editor view, hide original input
 168     const ev = createView('code-input', config);
 169     const editor = new SimpleEditorInterface(ev);
 170     editor.setMode(mode, content);
 171     textArea.style.display = 'none';
 172
 173     return editor;
 174 }
 175
 176 /**
 177  * Get a CodeMirror instance to use for the markdown editor.
 178  * @param {HTMLElement} elem
 179  * @param {function} onChange
 180  * @param {object} domEventHandlers
 181  * @param {Array} keyBindings
 182  * @returns {EditorView}
 183  */
 184 export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
 185     const content = elem.textContent;
 186     const config = {
 187         parent: elem.parentElement,
 188         doc: content,
 189         extensions: [
 190             keymap.of(keyBindings),
 191             ...editorExtensions(elem.parentElement),
 192             EditorView.updateListener.of(v => {
 193                 onChange(v);
 194             }),
 195             EditorView.domEventHandlers(domEventHandlers),
 196         ],
 197     };
 198
 199     // Emit a pre-event public event to allow tweaking of the configure before view creation.
 200     window.$events.emitPublic(elem, 'editor-markdown-cm6::pre-init', {editorViewConfig: config});
 201
 202     // Create editor view, hide original input
 203     const ev = createView('markdown-editor', config);
 204     (new SimpleEditorInterface(ev)).setMode('markdown', '');
 205     elem.style.display = 'none';
 206
 207     return ev;
 208 }