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

   1 "use strict";
   2
   3 /**
   4  * Handle pasting images from clipboard.
   5  * @param e  - event
   6  * @param editor - editor instance
   7  */
   8 function editorPaste(e, editor) {
   9     if (!e.clipboardData) return
  10     let items = e.clipboardData.items;
  11     if (!items) return;
  12     for (let i = 0; i < items.length; i++) {
  13         if (items[i].type.indexOf("image") === -1) return
  14
  15         let file = items[i].getAsFile();
  16         let formData = new FormData();
  17         let ext = 'png';
  18         let xhr = new XMLHttpRequest();
  19
  20         if (file.name) {
  21             let fileNameMatches = file.name.match(/\.(.+)$/);
  22             if (fileNameMatches) {
  23                 ext = fileNameMatches[1];
  24             }
  25         }
  26
  27         let id = "image-" + Math.random().toString(16).slice(2);
  28         let loadingImage = window.baseUrl('/loading.gif');
  29         editor.execCommand('mceInsertContent', false, `<img src="${loadingImage}" id="${id}">`);
  30
  31         let remoteFilename = "image-" + Date.now() + "." + ext;
  32         formData.append('file', file, remoteFilename);
  33         formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content'));
  34
  35         xhr.open('POST', window.baseUrl('/images/gallery/upload'));
  36         xhr.onload = function () {
  37             if (xhr.status === 200 || xhr.status === 201) {
  38                 let result = JSON.parse(xhr.responseText);
  39                 editor.dom.setAttrib(id, 'src', result.thumbs.display);
  40             } else {
  41                 console.log('An error occurred uploading the image', xhr.responseText);
  42                 editor.dom.remove(id);
  43             }
  44         };
  45         xhr.send(formData);
  46
  47     }
  48 }
  49
  50 function registerEditorShortcuts(editor) {
  51     // Headers
  52     for (let i = 1; i < 5; i++) {
  53         editor.addShortcut('meta+' + i, '', ['FormatBlock', false, 'h' + i]);
  54     }
  55
  56     // Other block shortcuts
  57     editor.addShortcut('meta+q', '', ['FormatBlock', false, 'blockquote']);
  58     editor.addShortcut('meta+d', '', ['FormatBlock', false, 'p']);
  59     editor.addShortcut('meta+e', '', ['FormatBlock', false, 'pre']);
  60     editor.addShortcut('meta+shift+E', '', ['FormatBlock', false, 'code']);
  61 }
  62
  63 var mceOptions = module.exports = {
  64     selector: '#html-editor',
  65     content_css: [
  66         window.baseUrl('/css/styles.css'),
  67         window.baseUrl('/libs/material-design-iconic-font/css/material-design-iconic-font.min.css')
  68     ],
  69     body_class: 'page-content',
  70     relative_urls: false,
  71     remove_script_host: false,
  72     document_base_url: window.baseUrl('/'),
  73     statusbar: false,
  74     menubar: false,
  75     paste_data_images: false,
  76     extended_valid_elements: 'pre[*]',
  77     automatic_uploads: false,
  78     valid_children: "-div[p|pre|h1|h2|h3|h4|h5|h6|blockquote]",
  79     plugins: "image table textcolor paste link fullscreen imagetools code customhr autosave lists",
  80     imagetools_toolbar: 'imageoptions',
  81     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",
  82     content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
  83     style_formats: [
  84         {title: "Header Large", format: "h2"},
  85         {title: "Header Medium", format: "h3"},
  86         {title: "Header Small", format: "h4"},
  87         {title: "Header Tiny", format: "h5"},
  88         {title: "Paragraph", format: "p", exact: true, classes: ''},
  89         {title: "Blockquote", format: "blockquote"},
  90         {title: "Code Block", icon: "code", format: "pre"},
  91         {title: "Inline Code", icon: "code", inline: "code"},
  92         {title: "Callouts", items: [
  93             {title: "Success", block: 'p', exact: true, attributes : {'class' : 'callout success'}},
  94             {title: "Info", block: 'p', exact: true, attributes : {'class' : 'callout info'}},
  95             {title: "Warning", block: 'p', exact: true, attributes : {'class' : 'callout warning'}},
  96             {title: "Danger", block: 'p', exact: true, attributes : {'class' : 'callout danger'}}
  97         ]}
  98     ],
  99     style_formats_merge: false,
 100     formats: {
 101         alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'},
 102         aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'},
 103         alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'},
 104     },
 105     file_browser_callback: function (field_name, url, type, win) {
 106
 107         if (type === 'file') {
 108             window.showEntityLinkSelector(function(entity) {
 109                 let originalField = win.document.getElementById(field_name);
 110                 originalField.value = entity.link;
 111                 $(originalField).closest('.mce-form').find('input').eq(2).val(entity.name);
 112             });
 113         }
 114
 115         if (type === 'image') {
 116             // Show image manager
 117             window.ImageManager.showExternal(function (image) {
 118
 119                 // Set popover link input to image url then fire change event
 120                 // to ensure the new value sticks
 121                 win.document.getElementById(field_name).value = image.url;
 122                 if ("createEvent" in document) {
 123                     let evt = document.createEvent("HTMLEvents");
 124                     evt.initEvent("change", false, true);
 125                     win.document.getElementById(field_name).dispatchEvent(evt);
 126                 } else {
 127                     win.document.getElementById(field_name).fireEvent("onchange");
 128                 }
 129
 130                 // Replace the actively selected content with the linked image
 131                 let html = `<a href="${image.url}" target="_blank">`;
 132                 html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
 133                 html += '</a>';
 134                 win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
 135             });
 136         }
 137
 138     },
 139     paste_preprocess: function (plugin, args) {
 140         let content = args.content;
 141         if (content.indexOf('<img src="file://') !== -1) {
 142             args.content = '';
 143         }
 144     },
 145     extraSetups: [],
 146     setup: function (editor) {
 147
 148         // Run additional setup actions
 149         // Used by the angular side of things
 150         for (let i = 0; i < mceOptions.extraSetups.length; i++) {
 151             mceOptions.extraSetups[i](editor);
 152         }
 153
 154         registerEditorShortcuts(editor);
 155
 156         (function () {
 157             var wrap;
 158
 159             function hasTextContent(node) {
 160                 return node && !!( node.textContent || node.innerText );
 161             }
 162
 163             editor.on('dragstart', function () {
 164                 var node = editor.selection.getNode();
 165
 166                 if (node.nodeName !== 'IMG') return;
 167                 wrap = editor.dom.getParent(node, '.mceTemp');
 168
 169                 if (!wrap && node.parentNode.nodeName === 'A' && !hasTextContent(node.parentNode)) {
 170                     wrap = node.parentNode;
 171                 }
 172             });
 173
 174             editor.on('drop', function (event) {
 175                 var dom = editor.dom,
 176                     rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());
 177
 178                 // Don't allow anything to be dropped in a captioned image.
 179                 if (dom.getParent(rng.startContainer, '.mceTemp')) {
 180                     event.preventDefault();
 181                 } else if (wrap) {
 182                     event.preventDefault();
 183
 184                     editor.undoManager.transact(function () {
 185                         editor.selection.setRng(rng);
 186                         editor.selection.setNode(wrap);
 187                         dom.remove(wrap);
 188                     });
 189                 }
 190
 191                 wrap = null;
 192             });
 193         })();
 194
 195         // Custom Image picker button
 196         editor.addButton('image-insert', {
 197             title: 'My title',
 198             icon: 'image',
 199             tooltip: 'Insert an image',
 200             onclick: function () {
 201                 window.ImageManager.showExternal(function (image) {
 202                     let html = `<a href="${image.url}" target="_blank">`;
 203                     html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
 204                     html += '</a>';
 205                     editor.execCommand('mceInsertContent', false, html);
 206                 });
 207             }
 208         });
 209
 210         // Paste image-uploads
 211         editor.on('paste', function(event) {
 212             editorPaste(event, editor);
 213         });
 214     }
 215 };