From: Dan Brown <redacted>
Date: Tue, 8 Feb 2022 15:28:56 +0000 (+0000)
Subject: Merge branch 'tinymce' into development
X-Git-Tag: v22.02~1^2~16
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/c6ad16dba657c82512ae495a4a38b99b8cfa9eeb

Merge branch 'tinymce' into development
---

c6ad16dba657c82512ae495a4a38b99b8cfa9eeb
diff --cc resources/js/wysiwyg/plugin-codeeditor.js
index 000000000,f0ec78afc..0d591217a
mode 000000,100644..100644
--- a/resources/js/wysiwyg/plugin-codeeditor.js
+++ b/resources/js/wysiwyg/plugin-codeeditor.js
@@@ -1,0 -1,137 +1,133 @@@
+ function elemIsCodeBlock(elem) {
+     return elem.className === 'CodeMirrorContainer';
+ }
+ 
+ function showPopup(editor) {
+     const selectedNode = editor.selection.getNode();
+ 
+     if (!elemIsCodeBlock(selectedNode)) {
 -        const providedCode = editor.selection.getNode().textContent;
++        const providedCode = editor.selection.getContent({format: 'text'});
+         window.components.first('code-editor').open(providedCode, '', (code, lang) => {
+             const wrap = document.createElement('div');
+             wrap.innerHTML = `<pre><code class="language-${lang}"></code></pre>`;
+             wrap.querySelector('code').innerText = code;
+ 
 -            editor.formatter.toggle('pre');
 -            const node = editor.selection.getNode();
 -            editor.dom.setHTML(node, wrap.querySelector('pre').innerHTML);
 -            editor.fire('SetContent');
 -
 -            editor.focus()
++            editor.insertContent(wrap.innerHTML);
++            editor.focus();
+         });
+         return;
+     }
+ 
+     const lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : '';
+     const currentCode = selectedNode.querySelector('textarea').textContent;
+ 
+     window.components.first('code-editor').open(currentCode, lang, (code, lang) => {
+         const editorElem = selectedNode.querySelector('.CodeMirror');
+         const cmInstance = editorElem.CodeMirror;
+         if (cmInstance) {
+             window.importVersioned('code').then(Code => {
+                 Code.setContent(cmInstance, code);
+                 Code.setMode(cmInstance, lang, code);
+             });
+         }
+         const textArea = selectedNode.querySelector('textarea');
+         if (textArea) textArea.textContent = code;
+         selectedNode.setAttribute('data-lang', lang);
+ 
+         editor.focus()
+     });
+ }
+ 
+ function codeMirrorContainerToPre(codeMirrorContainer) {
+     const textArea = codeMirrorContainer.querySelector('textarea');
+     const code = textArea.textContent;
+     const lang = codeMirrorContainer.getAttribute('data-lang');
+ 
+     codeMirrorContainer.removeAttribute('contentEditable');
+     const pre = document.createElement('pre');
+     const codeElem = document.createElement('code');
+     codeElem.classList.add(`language-${lang}`);
+     codeElem.textContent = code;
+     pre.appendChild(codeElem);
+ 
+     codeMirrorContainer.parentElement.replaceChild(pre, codeMirrorContainer);
+ }
+ 
+ 
+ /**
+  * @param {Editor} editor
+  * @param {String} url
+  */
+ function register(editor, url) {
+ 
+     const $ = editor.$;
+ 
+     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>')
+ 
+     editor.ui.registry.addButton('codeeditor', {
+         tooltip: 'Insert code block',
+         icon: 'codeblock',
+         onAction() {
+             editor.execCommand('codeeditor');
+         }
+     });
+ 
+     editor.addCommand('codeeditor', () => {
+         showPopup(editor);
+     });
+ 
+     // Convert
+     editor.on('PreProcess', function (e) {
+         $('div.CodeMirrorContainer', e.node).each((index, elem) => {
+             codeMirrorContainerToPre(elem);
+         });
+     });
+ 
+     editor.on('dblclick', event => {
+         let selectedNode = editor.selection.getNode();
+         if (!elemIsCodeBlock(selectedNode)) return;
+         showPopup(editor);
+     });
+ 
+     function parseCodeMirrorInstances(Code) {
+ 
+         // Recover broken codemirror instances
+         $('.CodeMirrorContainer').filter((index ,elem) => {
+             return typeof elem.querySelector('.CodeMirror').CodeMirror === 'undefined';
+         }).each((index, elem) => {
+             codeMirrorContainerToPre(elem);
+         });
+ 
+         const codeSamples = $('body > pre').filter((index, elem) => {
+             return elem.contentEditable !== "false";
+         });
+ 
+         codeSamples.each((index, elem) => {
+             Code.wysiwygView(elem);
+         });
+     }
+ 
+     editor.on('init', async function() {
+         const Code = await window.importVersioned('code');
+         // Parse code mirror instances on init, but delay a little so this runs after
+         // initial styles are fetched into the editor.
+         editor.undoManager.transact(function () {
+             parseCodeMirrorInstances(Code);
+         });
+         // Parsed code mirror blocks when content is set but wait before setting this handler
+         // to avoid any init 'SetContent' events.
+         setTimeout(() => {
+             editor.on('SetContent', () => {
+                 setTimeout(() => parseCodeMirrorInstances(Code), 100);
+             });
+         }, 200);
+     });
+ }
+ 
+ /**
+  * @param {WysiwygConfigOptions} options
+  * @return {register}
+  */
+ export function getPlugin(options) {
+     return register;
+ }