BookStack Code Mirror - bookstack/blob - resources/assets/js/pages/page-form.js

   1 "use strict";
   2
   3 const Code = require('../code');
   4
   5 /**
   6  * Handle pasting images from clipboard.
   7  * @param e  - event
   8  * @param editor - editor instance
   9  */
  10 function editorPaste(e, editor) {
  11     if (!e.clipboardData) return;
  12     let items = e.clipboardData.items;
  13     if (!items) return;
  14     for (let i = 0; i < items.length; i++) {
  15         if (items[i].type.indexOf("image") === -1) return;
  16
  17         let file = items[i].getAsFile();
  18         let formData = new FormData();
  19         let ext = 'png';
  20         let xhr = new XMLHttpRequest();
  21
  22         if (file.name) {
  23             let fileNameMatches = file.name.match(/\.(.+)$/);
  24             if (fileNameMatches) {
  25                 ext = fileNameMatches[1];
  26             }
  27         }
  28
  29         let id = "image-" + Math.random().toString(16).slice(2);
  30         let loadingImage = window.baseUrl('/loading.gif');
  31         editor.execCommand('mceInsertContent', false, `<img src="${loadingImage}" id="${id}">`);
  32
  33         let remoteFilename = "image-" + Date.now() + "." + ext;
  34         formData.append('file', file, remoteFilename);
  35         formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content'));
  36
  37         xhr.open('POST', window.baseUrl('/images/gallery/upload'));
  38         xhr.onload = function () {
  39             if (xhr.status === 200 || xhr.status === 201) {
  40                 let result = JSON.parse(xhr.responseText);
  41                 editor.dom.setAttrib(id, 'src', result.thumbs.display);
  42             } else {
  43                 console.log('An error occurred uploading the image', xhr.responseText);
  44                 editor.dom.remove(id);
  45             }
  46         };
  47         xhr.send(formData);
  48
  49     }
  50 }
  51
  52 function registerEditorShortcuts(editor) {
  53     // Headers
  54     for (let i = 1; i < 5; i++) {
  55         editor.addShortcut('meta+' + i, '', ['FormatBlock', false, 'h' + i]);
  56     }
  57
  58     // Other block shortcuts
  59     editor.addShortcut('meta+q', '', ['FormatBlock', false, 'blockquote']);
  60     editor.addShortcut('meta+d', '', ['FormatBlock', false, 'p']);
  61     editor.addShortcut('meta+e', '', ['codeeditor', false, 'pre']);
  62     editor.addShortcut('meta+shift+E', '', ['FormatBlock', false, 'code']);
  63 }
  64
  65
  66 /**
  67  * Create and enable our custom code plugin
  68  */
  69 function codePlugin() {
  70
  71     function elemIsCodeBlock(elem) {
  72         return elem.className === 'CodeMirrorContainer';
  73     }
  74
  75     function showPopup(editor) {
  76         let selectedNode = editor.selection.getNode();
  77
  78         if (!elemIsCodeBlock(selectedNode)) {
  79             let providedCode = editor.selection.getNode().textContent;
  80             window.vues['code-editor'].open(providedCode, '', (code, lang) => {
  81                 let wrap = document.createElement('div');
  82                 wrap.innerHTML = `<pre><code class="language-${lang}"></code></pre>`;
  83                 wrap.querySelector('code').innerText = code;
  84
  85                 editor.formatter.toggle('pre');
  86                 let node = editor.selection.getNode();
  87                 editor.dom.setHTML(node, wrap.querySelector('pre').innerHTML);
  88                 editor.fire('SetContent');
  89             });
  90             return;
  91         }
  92
  93         let lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : '';
  94         let currentCode = selectedNode.querySelector('textarea').textContent;
  95
  96         window.vues['code-editor'].open(currentCode, lang, (code, lang) => {
  97             let editorElem = selectedNode.querySelector('.CodeMirror');
  98             let cmInstance = editorElem.CodeMirror;
  99             if (cmInstance) {
 100                 Code.setContent(cmInstance, code);
 101                 Code.setMode(cmInstance, lang);
 102             }
 103             let textArea = selectedNode.querySelector('textarea');
 104             if (textArea) textArea.textContent = code;
 105             selectedNode.setAttribute('data-lang', lang);
 106         });
 107     }
 108
 109     function codeMirrorContainerToPre($codeMirrorContainer) {
 110         let textArea = $codeMirrorContainer[0].querySelector('textarea');
 111         let code = textArea.textContent;
 112         let lang = $codeMirrorContainer[0].getAttribute('data-lang');
 113
 114         $codeMirrorContainer.removeAttr('contentEditable');
 115         let $pre = $('<pre></pre>');
 116         $pre.append($('<code></code>').each((index, elem) => {
 117             // Needs to be textContent since innerText produces BR:s
 118             elem.textContent = code;
 119         }).attr('class', `language-${lang}`));
 120         $codeMirrorContainer.replaceWith($pre);
 121     }
 122
 123     window.tinymce.PluginManager.add('codeeditor', (editor, url) => {
 124
 125         let $ = editor.$;
 126
 127         editor.addButton('codeeditor', {
 128             text: 'Code block',
 129             icon: false,
 130             cmd: 'codeeditor'
 131         });
 132
 133         editor.addCommand('codeeditor', () => {
 134             showPopup(editor);
 135         });
 136
 137         // Convert
 138         editor.on('PreProcess', function (e) {
 139             $('div.CodeMirrorContainer', e.node).
 140             each((index, elem) => {
 141                 let $elem = $(elem);
 142                 codeMirrorContainerToPre($elem);
 143             });
 144         });
 145
 146         editor.on('dblclick', event => {
 147             let selectedNode = editor.selection.getNode();
 148             if (!elemIsCodeBlock(selectedNode)) return;
 149             showPopup(editor);
 150         });
 151
 152         editor.on('SetContent', function () {
 153
 154             // Recover broken codemirror instances
 155             $('.CodeMirrorContainer').filter((index ,elem) => {
 156                 return typeof elem.querySelector('.CodeMirror').CodeMirror === 'undefined';
 157             }).each((index, elem) => {
 158                 codeMirrorContainerToPre($(elem));
 159             });
 160
 161             let codeSamples = $('body > pre').filter((index, elem) => {
 162                 return elem.contentEditable !== "false";
 163             });
 164
 165             if (!codeSamples.length) return;
 166             editor.undoManager.transact(function () {
 167                 codeSamples.each((index, elem) => {
 168                     Code.wysiwygView(elem);
 169                 });
 170             });
 171         });
 172
 173     });
 174 }
 175
 176 module.exports = function() {
 177     codePlugin();
 178     let settings = {
 179         selector: '#html-editor',
 180         content_css: [
 181             window.baseUrl('/css/styles.css'),
 182             window.baseUrl('/libs/material-design-iconic-font/css/material-design-iconic-font.min.css')
 183         ],
 184         branding: false,
 185         body_class: 'page-content',
 186         browser_spellcheck: true,
 187         relative_urls: false,
 188         remove_script_host: false,
 189         document_base_url: window.baseUrl('/'),
 190         statusbar: false,
 191         menubar: false,
 192         paste_data_images: false,
 193         extended_valid_elements: 'pre[*]',
 194         automatic_uploads: false,
 195         valid_children: "-div[p|h1|h2|h3|h4|h5|h6|blockquote],+div[pre]",
 196         plugins: "image table textcolor paste link autolink fullscreen imagetools code customhr autosave lists codeeditor",
 197         imagetools_toolbar: 'imageoptions',
 198         toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr | removeformat code fullscreen",
 199         content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
 200         style_formats: [
 201             {title: "Header Large", format: "h2"},
 202             {title: "Header Medium", format: "h3"},
 203             {title: "Header Small", format: "h4"},
 204             {title: "Header Tiny", format: "h5"},
 205             {title: "Paragraph", format: "p", exact: true, classes: ''},
 206             {title: "Blockquote", format: "blockquote"},
 207             {title: "Code Block", icon: "code", cmd: 'codeeditor', format: 'codeeditor'},
 208             {title: "Inline Code", icon: "code", inline: "code"},
 209             {title: "Callouts", items: [
 210                 {title: "Success", block: 'p', exact: true, attributes : {'class' : 'callout success'}},
 211                 {title: "Info", block: 'p', exact: true, attributes : {'class' : 'callout info'}},
 212                 {title: "Warning", block: 'p', exact: true, attributes : {'class' : 'callout warning'}},
 213                 {title: "Danger", block: 'p', exact: true, attributes : {'class' : 'callout danger'}}
 214             ]},
 215         ],
 216         style_formats_merge: false,
 217         formats: {
 218             codeeditor: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div'},
 219             alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'},
 220             aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'},
 221             alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'},
 222         },
 223         file_browser_callback: function (field_name, url, type, win) {
 224
 225             if (type === 'file') {
 226                 window.showEntityLinkSelector(function(entity) {
 227                     let originalField = win.document.getElementById(field_name);
 228                     originalField.value = entity.link;
 229                     $(originalField).closest('.mce-form').find('input').eq(2).val(entity.name);
 230                 });
 231             }
 232
 233             if (type === 'image') {
 234                 // Show image manager
 235                 window.ImageManager.showExternal(function (image) {
 236
 237                     // Set popover link input to image url then fire change event
 238                     // to ensure the new value sticks
 239                     win.document.getElementById(field_name).value = image.url;
 240                     if ("createEvent" in document) {
 241                         let evt = document.createEvent("HTMLEvents");
 242                         evt.initEvent("change", false, true);
 243                         win.document.getElementById(field_name).dispatchEvent(evt);
 244                     } else {
 245                         win.document.getElementById(field_name).fireEvent("onchange");
 246                     }
 247
 248                     // Replace the actively selected content with the linked image
 249                     let html = `<a href="${image.url}" target="_blank">`;
 250                     html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
 251                     html += '</a>';
 252                     win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
 253                 });
 254             }
 255
 256         },
 257         paste_preprocess: function (plugin, args) {
 258             let content = args.content;
 259             if (content.indexOf('<img src="file://') !== -1) {
 260                 args.content = '';
 261             }
 262         },
 263         extraSetups: [],
 264         setup: function (editor) {
 265
 266             // Run additional setup actions
 267             // Used by the angular side of things
 268             for (let i = 0; i < settings.extraSetups.length; i++) {
 269                 settings.extraSetups[i](editor);
 270             }
 271
 272             registerEditorShortcuts(editor);
 273
 274             let wrap;
 275
 276             function hasTextContent(node) {
 277                 return node && !!( node.textContent || node.innerText );
 278             }
 279
 280             editor.on('dragstart', function () {
 281                 let node = editor.selection.getNode();
 282
 283                 if (node.nodeName !== 'IMG') return;
 284                 wrap = editor.dom.getParent(node, '.mceTemp');
 285
 286                 if (!wrap && node.parentNode.nodeName === 'A' && !hasTextContent(node.parentNode)) {
 287                     wrap = node.parentNode;
 288                 }
 289             });
 290
 291             editor.on('drop', function (event) {
 292                 let dom = editor.dom,
 293                     rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());
 294
 295                 // Don't allow anything to be dropped in a captioned image.
 296                 if (dom.getParent(rng.startContainer, '.mceTemp')) {
 297                     event.preventDefault();
 298                 } else if (wrap) {
 299                     event.preventDefault();
 300
 301                     editor.undoManager.transact(function () {
 302                         editor.selection.setRng(rng);
 303                         editor.selection.setNode(wrap);
 304                         dom.remove(wrap);
 305                     });
 306                 }
 307
 308                 wrap = null;
 309             });
 310
 311             // Custom Image picker button
 312             editor.addButton('image-insert', {
 313                 title: 'My title',
 314                 icon: 'image',
 315                 tooltip: 'Insert an image',
 316                 onclick: function () {
 317                     window.ImageManager.showExternal(function (image) {
 318                         let html = `<a href="${image.url}" target="_blank">`;
 319                         html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
 320                         html += '</a>';
 321                         editor.execCommand('mceInsertContent', false, html);
 322                     });
 323                 }
 324             });
 325
 326             // Paste image-uploads
 327             editor.on('paste', function(event) {
 328                 editorPaste(event, editor);
 329             });
 330         }
 331     };
 332     return settings;
 333 };