BookStack Code Mirror - bookstack/blob - resources/assets/js/components/wysiwyg-editor.js

   1 const Code = require('../services/code');
   2 const DrawIO = require('../services/drawio');
   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(window.baseUrl('/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  * Load custom HTML head content from the settings into the editor.
 102  * @param editor
 103  */
 104 function loadCustomHeadContent(editor) {
 105     window.$http.get(window.baseUrl('/custom-head-content')).then(resp => {
 106         if (!resp.data) return;
 107         let head = editor.getDoc().querySelector('head');
 108         head.innerHTML += resp.data;
 109     });
 110 }
 111
 112 /**
 113  * Create and enable our custom code plugin
 114  */
 115 function codePlugin() {
 116
 117     function elemIsCodeBlock(elem) {
 118         return elem.className === 'CodeMirrorContainer';
 119     }
 120
 121     function showPopup(editor) {
 122         let selectedNode = editor.selection.getNode();
 123
 124         if (!elemIsCodeBlock(selectedNode)) {
 125             let providedCode = editor.selection.getNode().textContent;
 126             window.vues['code-editor'].open(providedCode, '', (code, lang) => {
 127                 let wrap = document.createElement('div');
 128                 wrap.innerHTML = `<pre><code class="language-${lang}"></code></pre>`;
 129                 wrap.querySelector('code').innerText = code;
 130
 131                 editor.formatter.toggle('pre');
 132                 let node = editor.selection.getNode();
 133                 editor.dom.setHTML(node, wrap.querySelector('pre').innerHTML);
 134                 editor.fire('SetContent');
 135             });
 136             return;
 137         }
 138
 139         let lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : '';
 140         let currentCode = selectedNode.querySelector('textarea').textContent;
 141
 142         window.vues['code-editor'].open(currentCode, lang, (code, lang) => {
 143             let editorElem = selectedNode.querySelector('.CodeMirror');
 144             let cmInstance = editorElem.CodeMirror;
 145             if (cmInstance) {
 146                 Code.setContent(cmInstance, code);
 147                 Code.setMode(cmInstance, lang);
 148             }
 149             let textArea = selectedNode.querySelector('textarea');
 150             if (textArea) textArea.textContent = code;
 151             selectedNode.setAttribute('data-lang', lang);
 152         });
 153     }
 154
 155     function codeMirrorContainerToPre($codeMirrorContainer) {
 156         let textArea = $codeMirrorContainer[0].querySelector('textarea');
 157         let code = textArea.textContent;
 158         let lang = $codeMirrorContainer[0].getAttribute('data-lang');
 159
 160         $codeMirrorContainer.removeAttr('contentEditable');
 161         let $pre = $('<pre></pre>');
 162         $pre.append($('<code></code>').each((index, elem) => {
 163             // Needs to be textContent since innerText produces BR:s
 164             elem.textContent = code;
 165         }).attr('class', `language-${lang}`));
 166         $codeMirrorContainer.replaceWith($pre);
 167     }
 168
 169     window.tinymce.PluginManager.add('codeeditor', function(editor, url) {
 170
 171         let $ = editor.$;
 172
 173         editor.addButton('codeeditor', {
 174             text: 'Code block',
 175             icon: false,
 176             cmd: 'codeeditor'
 177         });
 178
 179         editor.addCommand('codeeditor', () => {
 180             showPopup(editor);
 181         });
 182
 183         // Convert
 184         editor.on('PreProcess', function (e) {
 185             $('div.CodeMirrorContainer', e.node).
 186             each((index, elem) => {
 187                 let $elem = $(elem);
 188                 codeMirrorContainerToPre($elem);
 189             });
 190         });
 191
 192         editor.on('dblclick', event => {
 193             let selectedNode = editor.selection.getNode();
 194             if (!elemIsCodeBlock(selectedNode)) return;
 195             showPopup(editor);
 196         });
 197
 198         editor.on('SetContent', function () {
 199
 200             // Recover broken codemirror instances
 201             $('.CodeMirrorContainer').filter((index ,elem) => {
 202                 return typeof elem.querySelector('.CodeMirror').CodeMirror === 'undefined';
 203             }).each((index, elem) => {
 204                 codeMirrorContainerToPre($(elem));
 205             });
 206
 207             let codeSamples = $('body > pre').filter((index, elem) => {
 208                 return elem.contentEditable !== "false";
 209             });
 210
 211             if (!codeSamples.length) return;
 212             editor.undoManager.transact(function () {
 213                 codeSamples.each((index, elem) => {
 214                     Code.wysiwygView(elem);
 215                 });
 216             });
 217         });
 218
 219     });
 220 }
 221
 222 function drawIoPlugin() {
 223
 224     let pageEditor = null;
 225     let currentNode = null;
 226
 227     function isDrawing(node) {
 228         return node.hasAttribute('drawio-diagram');
 229     }
 230
 231     function showDrawingManager(mceEditor, selectedNode = null) {
 232         pageEditor = mceEditor;
 233         currentNode = selectedNode;
 234         // Show image manager
 235         window.ImageManager.show(function (image) {
 236             if (selectedNode) {
 237                 let imgElem = selectedNode.querySelector('img');
 238                 pageEditor.dom.setAttrib(imgElem, 'src', image.url);
 239                 pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id);
 240             } else {
 241                 let imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}"></div>`;
 242                 pageEditor.insertContent(imgHTML);
 243             }
 244         }, 'drawio');
 245     }
 246
 247     function showDrawingEditor(mceEditor, selectedNode = null) {
 248         pageEditor = mceEditor;
 249         currentNode = selectedNode;
 250         DrawIO.show(drawingInit, updateContent);
 251     }
 252
 253     function updateContent(pngData) {
 254         let id = "image-" + Math.random().toString(16).slice(2);
 255         let loadingImage = window.baseUrl('/loading.gif');
 256         let data = {
 257             image: pngData,
 258             uploaded_to: Number(document.getElementById('page-editor').getAttribute('page-id'))
 259         };
 260
 261         // Handle updating an existing image
 262         if (currentNode) {
 263             DrawIO.close();
 264             let imgElem = currentNode.querySelector('img');
 265             window.$http.post(window.baseUrl(`/images/drawing/upload`), data).then(resp => {
 266                 pageEditor.dom.setAttrib(imgElem, 'src', resp.data.url);
 267                 pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', resp.data.id);
 268             }).catch(err => {
 269                 window.$events.emit('error', trans('errors.image_upload_error'));
 270                 console.log(err);
 271             });
 272             return;
 273         }
 274
 275         setTimeout(() => {
 276             pageEditor.insertContent(`<div drawio-diagram contenteditable="false"><img src="${loadingImage}" id="${id}"></div>`);
 277             DrawIO.close();
 278             window.$http.post(window.baseUrl('/images/drawing/upload'), data).then(resp => {
 279                 pageEditor.dom.setAttrib(id, 'src', resp.data.url);
 280                 pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', resp.data.id);
 281             }).catch(err => {
 282                 pageEditor.dom.remove(id);
 283                 window.$events.emit('error', trans('errors.image_upload_error'));
 284                 console.log(err);
 285             });
 286         }, 5);
 287     }
 288
 289
 290     function drawingInit() {
 291         if (!currentNode) {
 292             return Promise.resolve('');
 293         }
 294
 295         let drawingId = currentNode.getAttribute('drawio-diagram');
 296         return window.$http.get(window.baseUrl(`/images/base64/${drawingId}`)).then(resp => {
 297             return `data:image/png;base64,${resp.data.content}`;
 298         });
 299     }
 300
 301     window.tinymce.PluginManager.add('drawio', function(editor, url) {
 302
 303         editor.addCommand('drawio', () => {
 304             let selectedNode = editor.selection.getNode();
 305             showDrawingEditor(editor, isDrawing(selectedNode) ? selectedNode : null);
 306         });
 307
 308         editor.addButton('drawio', {
 309             type: 'splitbutton',
 310             tooltip: 'Drawing',
 311             image: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMDAwMDAiICB4bWxucz0iaHR0cDovL3d3 dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTIzIDdWMWgtNnYySDdWMUgxdjZoMnYx MEgxdjZoNnYtMmgxMHYyaDZ2LTZoLTJWN2gyek0zIDNoMnYySDNWM3ptMiAxOEgzdi0yaDJ2Mnpt MTItMkg3di0ySDVWN2gyVjVoMTB2MmgydjEwaC0ydjJ6bTQgMmgtMnYtMmgydjJ6TTE5IDVWM2gy djJoLTJ6bS01LjI3IDloLTMuNDlsLS43MyAySDcuODlsMy40LTloMS40bDMuNDEgOWgtMS42M2wt Ljc0LTJ6bS0zLjA0LTEuMjZoMi42MUwxMiA4LjkxbC0xLjMxIDMuODN6Ii8+CiAgICA8cGF0aCBk PSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPg==`,
 312             cmd: 'drawio',
 313             menu: [
 314                 {
 315                     text: 'Drawing Manager',
 316                     onclick() {
 317                         let selectedNode = editor.selection.getNode();
 318                         showDrawingManager(editor, isDrawing(selectedNode) ? selectedNode : null);
 319                     }
 320                 }
 321             ]
 322         });
 323
 324         editor.on('dblclick', event => {
 325             let selectedNode = editor.selection.getNode();
 326             if (!isDrawing(selectedNode)) return;
 327             showDrawingEditor(editor, selectedNode);
 328         });
 329
 330         editor.on('SetContent', function () {
 331             let drawings = editor.$('body > div[drawio-diagram]');
 332             if (!drawings.length) return;
 333
 334             editor.undoManager.transact(function () {
 335                 drawings.each((index, elem) => {
 336                     elem.setAttribute('contenteditable', 'false');
 337                 });
 338             });
 339         });
 340
 341     });
 342 }
 343
 344 function customHrPlugin() {
 345     window.tinymce.PluginManager.add('customhr', function (editor) {
 346         editor.addCommand('InsertHorizontalRule', function () {
 347             let hrElem = document.createElement('hr');
 348             let cNode = editor.selection.getNode();
 349             let parentNode = cNode.parentNode;
 350             parentNode.insertBefore(hrElem, cNode);
 351         });
 352
 353         editor.addButton('hr', {
 354             icon: 'hr',
 355             tooltip: 'Horizontal line',
 356             cmd: 'InsertHorizontalRule'
 357         });
 358
 359         editor.addMenuItem('hr', {
 360             icon: 'hr',
 361             text: 'Horizontal line',
 362             cmd: 'InsertHorizontalRule',
 363             context: 'insert'
 364         });
 365     });
 366 }
 367
 368
 369 class WysiwygEditor {
 370
 371     constructor(elem) {
 372         this.elem = elem;
 373         this.textDirection = document.getElementById('page-editor').getAttribute('text-direction');
 374
 375         this.plugins = "image table textcolor paste link autolink fullscreen imagetools code customhr autosave lists codeeditor media";
 376         this.loadPlugins();
 377
 378         this.tinyMceConfig = this.getTinyMceConfig();
 379         window.tinymce.init(this.tinyMceConfig);
 380     }
 381
 382     loadPlugins() {
 383         codePlugin();
 384         customHrPlugin();
 385         if (document.querySelector('[drawio-enabled]').getAttribute('drawio-enabled') === 'true') {
 386             drawIoPlugin();
 387             this.plugins += ' drawio';
 388         }
 389         if (this.textDirection === 'rtl') {
 390             this.plugins += ' directionality'
 391         }
 392     }
 393
 394     getToolBar() {
 395         const textDirPlugins = this.textDirection === 'rtl' ? 'ltr rtl' : '';
 396         return `undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr drawio media | removeformat code ${textDirPlugins} fullscreen`
 397     }
 398
 399     getTinyMceConfig() {
 400         return {
 401             selector: '#html-editor',
 402             content_css: [
 403                 window.baseUrl('/dist/styles.css'),
 404             ],
 405             branding: false,
 406             body_class: 'page-content',
 407             browser_spellcheck: true,
 408             relative_urls: false,
 409             directionality : this.textDirection,
 410             remove_script_host: false,
 411             document_base_url: window.baseUrl('/'),
 412             statusbar: false,
 413             menubar: false,
 414             paste_data_images: false,
 415             extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram]',
 416             automatic_uploads: false,
 417             valid_children: "-div[p|h1|h2|h3|h4|h5|h6|blockquote],+div[pre],+div[img]",
 418             plugins: this.plugins,
 419             imagetools_toolbar: 'imageoptions',
 420             toolbar: this.getToolBar(),
 421             content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
 422             style_formats: [
 423                 {title: "Header Large", format: "h2"},
 424                 {title: "Header Medium", format: "h3"},
 425                 {title: "Header Small", format: "h4"},
 426                 {title: "Header Tiny", format: "h5"},
 427                 {title: "Paragraph", format: "p", exact: true, classes: ''},
 428                 {title: "Blockquote", format: "blockquote"},
 429                 {title: "Code Block", icon: "code", cmd: 'codeeditor', format: 'codeeditor'},
 430                 {title: "Inline Code", icon: "code", inline: "code"},
 431                 {title: "Callouts", items: [
 432                         {title: "Info", format: 'calloutinfo'},
 433                         {title: "Success", format: 'calloutsuccess'},
 434                         {title: "Warning", format: 'calloutwarning'},
 435                         {title: "Danger", format: 'calloutdanger'}
 436                     ]},
 437             ],
 438             style_formats_merge: false,
 439             media_alt_source: false,
 440             media_poster: false,
 441             formats: {
 442                 codeeditor: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div'},
 443                 alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'},
 444                 aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'},
 445                 alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'},
 446                 calloutsuccess: {block: 'p', exact: true, attributes: {class: 'callout success'}},
 447                 calloutinfo: {block: 'p', exact: true, attributes: {class: 'callout info'}},
 448                 calloutwarning: {block: 'p', exact: true, attributes: {class: 'callout warning'}},
 449                 calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}}
 450             },
 451             file_browser_callback: function (field_name, url, type, win) {
 452
 453                 if (type === 'file') {
 454                     window.EntitySelectorPopup.show(function(entity) {
 455                         let originalField = win.document.getElementById(field_name);
 456                         originalField.value = entity.link;
 457                         $(originalField).closest('.mce-form').find('input').eq(2).val(entity.name);
 458                     });
 459                 }
 460
 461                 if (type === 'image') {
 462                     // Show image manager
 463                     window.ImageManager.show(function (image) {
 464
 465                         // Set popover link input to image url then fire change event
 466                         // to ensure the new value sticks
 467                         win.document.getElementById(field_name).value = image.url;
 468                         if ("createEvent" in document) {
 469                             let evt = document.createEvent("HTMLEvents");
 470                             evt.initEvent("change", false, true);
 471                             win.document.getElementById(field_name).dispatchEvent(evt);
 472                         } else {
 473                             win.document.getElementById(field_name).fireEvent("onchange");
 474                         }
 475
 476                         // Replace the actively selected content with the linked image
 477                         let html = `<a href="${image.url}" target="_blank">`;
 478                         html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
 479                         html += '</a>';
 480                         win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
 481                     }, 'gallery');
 482                 }
 483
 484             },
 485             paste_preprocess: function (plugin, args) {
 486                 let content = args.content;
 487                 if (content.indexOf('<img src="file://') !== -1) {
 488                     args.content = '';
 489                 }
 490             },
 491             init_instance_callback: function(editor) {
 492                 loadCustomHeadContent(editor);
 493             },
 494             setup: function (editor) {
 495
 496                 editor.on('ExecCommand change input NodeChange ObjectResized', editorChange);
 497
 498                 editor.on('init', () => {
 499                     editorChange();
 500                     // Scroll to the content if needed.
 501                     const queryParams = (new URL(window.location)).searchParams;
 502                     const scrollId = queryParams.get('content-id');
 503                     if (scrollId) {
 504                         scrollToText(scrollId);
 505                     }
 506                 });
 507
 508                 function editorChange() {
 509                     let content = editor.getContent();
 510                     window.$events.emit('editor-html-change', content);
 511                 }
 512
 513                 function scrollToText(scrollId) {
 514                     const element = editor.dom.get(encodeURIComponent(scrollId).replace(/!/g, '%21'));
 515                     if (!element) {
 516                         return;
 517                     }
 518
 519                     // scroll the element into the view and put the cursor at the end.
 520                     element.scrollIntoView();
 521                     editor.selection.select(element, true);
 522                     editor.selection.collapse(false);
 523                     editor.focus();
 524                 }
 525
 526                 window.$events.listen('editor-html-update', html => {
 527                     editor.setContent(html);
 528                     editor.selection.select(editor.getBody(), true);
 529                     editor.selection.collapse(false);
 530                     editorChange(html);
 531                 });
 532
 533                 registerEditorShortcuts(editor);
 534
 535                 let wrap;
 536
 537                 function hasTextContent(node) {
 538                     return node && !!( node.textContent || node.innerText );
 539                 }
 540
 541                 editor.on('dragstart', function () {
 542                     let node = editor.selection.getNode();
 543
 544                     if (node.nodeName !== 'IMG') return;
 545                     wrap = editor.dom.getParent(node, '.mceTemp');
 546
 547                     if (!wrap && node.parentNode.nodeName === 'A' && !hasTextContent(node.parentNode)) {
 548                         wrap = node.parentNode;
 549                     }
 550                 });
 551
 552                 editor.on('drop', function (event) {
 553                     let dom = editor.dom,
 554                         rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());
 555
 556                     // Don't allow anything to be dropped in a captioned image.
 557                     if (dom.getParent(rng.startContainer, '.mceTemp')) {
 558                         event.preventDefault();
 559                     } else if (wrap) {
 560                         event.preventDefault();
 561
 562                         editor.undoManager.transact(function () {
 563                             editor.selection.setRng(rng);
 564                             editor.selection.setNode(wrap);
 565                             dom.remove(wrap);
 566                         });
 567                     }
 568
 569                     wrap = null;
 570                 });
 571
 572                 // Custom Image picker button
 573                 editor.addButton('image-insert', {
 574                     title: 'My title',
 575                     icon: 'image',
 576                     tooltip: 'Insert an image',
 577                     onclick: function () {
 578                         window.ImageManager.show(function (image) {
 579                             let html = `<a href="${image.url}" target="_blank">`;
 580                             html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
 581                             html += '</a>';
 582                             editor.execCommand('mceInsertContent', false, html);
 583                         }, 'gallery');
 584                     }
 585                 });
 586
 587                 // Paste image-uploads
 588                 editor.on('paste', event => editorPaste(event, editor));
 589             }
 590         };
 591     }
 592
 593 }
 594
 595 module.exports = WysiwygEditor;