BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/plugin-codeeditor.js

   1 function elemIsCodeBlock(elem) {
   2     return elem.className === 'CodeMirrorContainer';
   3 }
   4
   5 function showPopup(editor) {
   6     const selectedNode = editor.selection.getNode();
   7
   8     if (!elemIsCodeBlock(selectedNode)) {
   9         const providedCode = editor.selection.getContent({format: 'text'});
  10         window.components.first('code-editor').open(providedCode, '', (code, lang) => {
  11             const wrap = document.createElement('div');
  12             wrap.innerHTML = `<pre><code class="language-${lang}"></code></pre>`;
  13             wrap.querySelector('code').innerText = code;
  14
  15             editor.insertContent(wrap.innerHTML);
  16             editor.focus();
  17         });
  18         return;
  19     }
  20
  21     const lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : '';
  22     const currentCode = selectedNode.querySelector('textarea').textContent;
  23
  24     window.components.first('code-editor').open(currentCode, lang, (code, lang) => {
  25         const editorElem = selectedNode.querySelector('.CodeMirror');
  26         const cmInstance = editorElem.CodeMirror;
  27         if (cmInstance) {
  28             window.importVersioned('code').then(Code => {
  29                 Code.setContent(cmInstance, code);
  30                 Code.setMode(cmInstance, lang, code);
  31             });
  32         }
  33         const textArea = selectedNode.querySelector('textarea');
  34         if (textArea) textArea.textContent = code;
  35         selectedNode.setAttribute('data-lang', lang);
  36
  37         editor.focus()
  38     });
  39 }
  40
  41 function codeMirrorContainerToPre(codeMirrorContainer) {
  42     const textArea = codeMirrorContainer.querySelector('textarea');
  43     const code = textArea.textContent;
  44     const lang = codeMirrorContainer.getAttribute('data-lang');
  45
  46     codeMirrorContainer.removeAttribute('contentEditable');
  47     const pre = document.createElement('pre');
  48     const codeElem = document.createElement('code');
  49     codeElem.classList.add(`language-${lang}`);
  50     codeElem.textContent = code;
  51     pre.appendChild(codeElem);
  52
  53     codeMirrorContainer.parentElement.replaceChild(pre, codeMirrorContainer);
  54 }
  55
  56
  57 /**
  58  * @param {Editor} editor
  59  * @param {String} url
  60  */
  61 function register(editor, url) {
  62
  63     const $ = editor.$;
  64
  65     editor.ui.registry.addIcon('codeblock', '<svg width="24" height="24"><path d="M4 3h16c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1Zm1 2v14h14V5Z"/><path d="M11.103 15.423c.277.277.277.738 0 .922a.692.692 0 0 1-1.106 0l-4.057-3.78a.738.738 0 0 1 0-1.107l4.057-3.872c.276-.277.83-.277 1.106 0a.724.724 0 0 1 0 1.014L7.6 12.012ZM12.897 8.577c-.245-.312-.2-.675.08-.955.28-.281.727-.27 1.027.033l4.057 3.78a.738.738 0 0 1 0 1.107l-4.057 3.872c-.277.277-.83.277-1.107 0a.724.724 0 0 1 0-1.014l3.504-3.412z"/></svg>')
  66
  67     editor.ui.registry.addButton('codeeditor', {
  68         tooltip: 'Insert code block',
  69         icon: 'codeblock',
  70         onAction() {
  71             editor.execCommand('codeeditor');
  72         }
  73     });
  74
  75     editor.addCommand('codeeditor', () => {
  76         showPopup(editor);
  77     });
  78
  79     // Convert
  80     editor.on('PreProcess', function (e) {
  81         $('div.CodeMirrorContainer', e.node).each((index, elem) => {
  82             codeMirrorContainerToPre(elem);
  83         });
  84     });
  85
  86     editor.on('dblclick', event => {
  87         let selectedNode = editor.selection.getNode();
  88         if (!elemIsCodeBlock(selectedNode)) return;
  89         showPopup(editor);
  90     });
  91
  92     function parseCodeMirrorInstances(Code) {
  93
  94         // Recover broken codemirror instances
  95         $('.CodeMirrorContainer').filter((index ,elem) => {
  96             return typeof elem.querySelector('.CodeMirror').CodeMirror === 'undefined';
  97         }).each((index, elem) => {
  98             codeMirrorContainerToPre(elem);
  99         });
 100
 101         const codeSamples = $('body > pre').filter((index, elem) => {
 102             return elem.contentEditable !== "false";
 103         });
 104
 105         codeSamples.each((index, elem) => {
 106             Code.wysiwygView(elem);
 107         });
 108     }
 109
 110     editor.on('init', async function() {
 111         const Code = await window.importVersioned('code');
 112         // Parse code mirror instances on init, but delay a little so this runs after
 113         // initial styles are fetched into the editor.
 114         editor.undoManager.transact(function () {
 115             parseCodeMirrorInstances(Code);
 116         });
 117         // Parsed code mirror blocks when content is set but wait before setting this handler
 118         // to avoid any init 'SetContent' events.
 119         setTimeout(() => {
 120             editor.on('SetContent', () => {
 121                 setTimeout(() => parseCodeMirrorInstances(Code), 100);
 122             });
 123         }, 200);
 124     });
 125 }
 126
 127 /**
 128  * @param {WysiwygConfigOptions} options
 129  * @return {register}
 130  */
 131 export function getPlugin(options) {
 132     return register;
 133 }