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

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