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

   1 import Code from "../services/code";
   2
   3 function elemIsCodeBlock(elem) {
   4     return elem.className === 'CodeMirrorContainer';
   5 }
   6
   7 function showPopup(editor) {
   8     const selectedNode = editor.selection.getNode();
   9
  10     if (!elemIsCodeBlock(selectedNode)) {
  11         const providedCode = editor.selection.getNode().textContent;
  12         window.components.first('code-editor').open(providedCode, '', (code, lang) => {
  13             const wrap = document.createElement('div');
  14             wrap.innerHTML = `<pre><code class="language-${lang}"></code></pre>`;
  15             wrap.querySelector('code').innerText = code;
  16
  17             editor.formatter.toggle('pre');
  18             const node = editor.selection.getNode();
  19             editor.dom.setHTML(node, wrap.querySelector('pre').innerHTML);
  20             editor.fire('SetContent');
  21
  22             editor.focus()
  23         });
  24         return;
  25     }
  26
  27     const lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : '';
  28     const currentCode = selectedNode.querySelector('textarea').textContent;
  29
  30     window.components.first('code-editor').open(currentCode, lang, (code, lang) => {
  31         const editorElem = selectedNode.querySelector('.CodeMirror');
  32         const cmInstance = editorElem.CodeMirror;
  33         if (cmInstance) {
  34             Code.setContent(cmInstance, code);
  35             Code.setMode(cmInstance, lang, code);
  36         }
  37         const textArea = selectedNode.querySelector('textarea');
  38         if (textArea) textArea.textContent = code;
  39         selectedNode.setAttribute('data-lang', lang);
  40
  41         editor.focus()
  42     });
  43 }
  44
  45 function codeMirrorContainerToPre(codeMirrorContainer) {
  46     const textArea = codeMirrorContainer.querySelector('textarea');
  47     const code = textArea.textContent;
  48     const lang = codeMirrorContainer.getAttribute('data-lang');
  49
  50     codeMirrorContainer.removeAttribute('contentEditable');
  51     const pre = document.createElement('pre');
  52     const codeElem = document.createElement('code');
  53     codeElem.classList.add(`language-${lang}`);
  54     codeElem.textContent = code;
  55     pre.appendChild(codeElem);
  56
  57     codeMirrorContainer.parentElement.replaceChild(pre, codeMirrorContainer);
  58 }
  59
  60
  61 /**
  62  * @param {Editor} editor
  63  * @param {String} url
  64  */
  65 function register(editor, url) {
  66
  67     const $ = editor.$;
  68
  69     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>')
  70
  71     editor.ui.registry.addButton('codeeditor', {
  72         title: 'Insert code block',
  73         icon: 'codeblock',
  74         onAction() {
  75             editor.execCommand('codeeditor');
  76         }
  77     });
  78
  79     editor.addCommand('codeeditor', () => {
  80         showPopup(editor);
  81     });
  82
  83     // Convert
  84     editor.on('PreProcess', function (e) {
  85         $('div.CodeMirrorContainer', e.node).each((index, elem) => {
  86             codeMirrorContainerToPre(elem);
  87         });
  88     });
  89
  90     editor.on('dblclick', event => {
  91         let selectedNode = editor.selection.getNode();
  92         if (!elemIsCodeBlock(selectedNode)) return;
  93         showPopup(editor);
  94     });
  95
  96     function parseCodeMirrorInstances() {
  97
  98         // Recover broken codemirror instances
  99         $('.CodeMirrorContainer').filter((index ,elem) => {
 100             return typeof elem.querySelector('.CodeMirror').CodeMirror === 'undefined';
 101         }).each((index, elem) => {
 102             codeMirrorContainerToPre(elem);
 103         });
 104
 105         const codeSamples = $('body > pre').filter((index, elem) => {
 106             return elem.contentEditable !== "false";
 107         });
 108
 109         codeSamples.each((index, elem) => {
 110             Code.wysiwygView(elem);
 111         });
 112     }
 113
 114     editor.on('init', function() {
 115         // Parse code mirror instances on init, but delay a little so this runs after
 116         // initial styles are fetched into the editor.
 117         editor.undoManager.transact(function () {
 118             parseCodeMirrorInstances();
 119         });
 120         // Parsed code mirror blocks when content is set but wait before setting this handler
 121         // to avoid any init 'SetContent' events.
 122         setTimeout(() => {
 123             editor.on('SetContent', () => {
 124                 setTimeout(parseCodeMirrorInstances, 100);
 125             });
 126         }, 200);
 127     });
 128 }
 129
 130 /**
 131  * @param {WysiwygConfigOptions} options
 132  * @return {register}
 133  */
 134 export function getPlugin(options) {
 135     return register;
 136 }