X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/da1cea06ca5db56a9635bf8bb01da2516d601620..refs/pull/3193/head:/resources/js/components/wysiwyg-editor.js diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index be1bac6be..7a2b6ceba 100644 --- a/resources/js/components/wysiwyg-editor.js +++ b/resources/js/components/wysiwyg-editor.js @@ -38,7 +38,7 @@ function editorPaste(event, editor, wysiwygComponent) { editor.dom.replace(newEl, id); }).catch(err => { editor.dom.remove(id); - window.$events.emit('error', trans('errors.image_upload_error')); + window.$events.emit('error', wysiwygComponent.imageUploadErrorText); console.log(err); }); }, 10); @@ -98,21 +98,15 @@ function registerEditorShortcuts(editor) { // Loop through callout styles editor.shortcuts.add('meta+9', '', function() { - let selectedNode = editor.selection.getNode(); - let formats = ['info', 'success', 'warning', 'danger']; + const selectedNode = editor.selection.getNode(); + const callout = selectedNode ? selectedNode.closest('.callout') : null; - if (!selectedNode || selectedNode.className.indexOf('callout') === -1) { - editor.formatter.apply('calloutinfo'); - return; - } + const formats = ['info', 'success', 'warning', 'danger']; + const currentFormatIndex = formats.findIndex(format => callout && callout.classList.contains(format)); + const newFormatIndex = (currentFormatIndex + 1) % formats.length; + const newFormat = formats[newFormatIndex]; - for (let i = 0; i < formats.length; i++) { - if (selectedNode.className.indexOf(formats[i]) === -1) continue; - let newFormat = (i === formats.length -1) ? formats[0] : formats[i+1]; - editor.formatter.apply('callout' + newFormat); - return; - } - editor.formatter.apply('p'); + editor.formatter.apply('callout' + newFormat); }); } @@ -143,7 +137,7 @@ function codePlugin() { if (!elemIsCodeBlock(selectedNode)) { const providedCode = editor.selection.getNode().textContent; - window.vues['code-editor'].open(providedCode, '', (code, lang) => { + window.components.first('code-editor').open(providedCode, '', (code, lang) => { const wrap = document.createElement('div'); wrap.innerHTML = `
`; wrap.querySelector('code').innerText = code; @@ -158,10 +152,10 @@ function codePlugin() { return; } - let lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : ''; - let currentCode = selectedNode.querySelector('textarea').textContent; + const lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : ''; + const currentCode = selectedNode.querySelector('textarea').textContent; - window.vues['code-editor'].open(currentCode, lang, (code, lang) => { + window.components.first('code-editor').open(currentCode, lang, (code, lang) => { const editorElem = selectedNode.querySelector('.CodeMirror'); const cmInstance = editorElem.CodeMirror; if (cmInstance) { @@ -218,7 +212,7 @@ function codePlugin() { showPopup(editor); }); - editor.on('SetContent', function () { + function parseCodeMirrorInstances() { // Recover broken codemirror instances $('.CodeMirrorContainer').filter((index ,elem) => { @@ -231,18 +225,30 @@ function codePlugin() { return elem.contentEditable !== "false"; }); - if (!codeSamples.length) return; + codeSamples.each((index, elem) => { + Code.wysiwygView(elem); + }); + } + + editor.on('init', function() { + // 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 () { - codeSamples.each((index, elem) => { - Code.wysiwygView(elem); - }); + parseCodeMirrorInstances(); }); + // 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, 100); + }); + }, 200); }); }); } -function drawIoPlugin(drawioUrl) { +function drawIoPlugin(drawioUrl, isDarkMode, pageId, wysiwygComponent) { let pageEditor = null; let currentNode = null; @@ -276,7 +282,15 @@ function drawIoPlugin(drawioUrl) { async function updateContent(pngData) { const id = "image-" + Math.random().toString(16).slice(2); const loadingImage = window.baseUrl('/loading.gif'); - const pageId = Number(document.getElementById('page-editor').getAttribute('page-id')); + + const handleUploadError = (error) => { + if (error.status === 413) { + window.$events.emit('error', wysiwygComponent.serverUploadLimitText); + } else { + window.$events.emit('error', wysiwygComponent.imageUploadErrorText); + } + console.log(error); + }; // Handle updating an existing image if (currentNode) { @@ -287,8 +301,7 @@ function drawIoPlugin(drawioUrl) { pageEditor.dom.setAttrib(imgElem, 'src', img.url); pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', img.id); } catch (err) { - window.$events.emit('error', trans('errors.image_upload_error')); - console.log(err); + handleUploadError(err); } return; } @@ -302,8 +315,7 @@ function drawIoPlugin(drawioUrl) { pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id); } catch (err) { pageEditor.dom.remove(id); - window.$events.emit('error', trans('errors.image_upload_error')); - console.log(err); + handleUploadError(err); } }, 5); } @@ -321,14 +333,17 @@ function drawIoPlugin(drawioUrl) { window.tinymce.PluginManager.add('drawio', function(editor, url) { editor.addCommand('drawio', () => { - let selectedNode = editor.selection.getNode(); + const selectedNode = editor.selection.getNode(); showDrawingEditor(editor, isDrawing(selectedNode) ? selectedNode : null); }); editor.addButton('drawio', { type: 'splitbutton', tooltip: 'Drawing', - image: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMDAwMDAiICB4bWxucz0iaHR0cDovL3d3 dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTIzIDdWMWgtNnYySDdWMUgxdjZoMnYx MEgxdjZoNnYtMmgxMHYyaDZ2LTZoLTJWN2gyek0zIDNoMnYySDNWM3ptMiAxOEgzdi0yaDJ2Mnpt MTItMkg3di0ySDVWN2gyVjVoMTB2MmgydjEwaC0ydjJ6bTQgMmgtMnYtMmgydjJ6TTE5IDVWM2gy djJoLTJ6bS01LjI3IDloLTMuNDlsLS43MyAySDcuODlsMy40LTloMS40bDMuNDEgOWgtMS42M2wt Ljc0LTJ6bS0zLjA0LTEuMjZoMi42MUwxMiA4LjkxbC0xLjMxIDMuODN6Ii8+CiAgICA8cGF0aCBk PSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPg==`, + image: `data:image/svg+xml;base64,${btoa(` + + +`)}`, cmd: 'drawio', menu: [ { @@ -405,22 +420,33 @@ function listenForBookStackEditorEvents(editor) { editor.setContent(content); }); + // Insert editor content at the current location + window.$events.listen('editor::insert', ({html}) => { + editor.insertContent(html); + }); + + // Focus on the editor + window.$events.listen('editor::focus', () => { + editor.focus(); + }); } class WysiwygEditor { - constructor(elem) { - this.elem = elem; + setup() { + this.elem = this.$el; - const pageEditor = document.getElementById('page-editor'); - this.pageId = pageEditor.getAttribute('page-id'); - this.textDirection = pageEditor.getAttribute('text-direction'); + this.pageId = this.$opts.pageId; + this.textDirection = this.$opts.textDirection; + this.imageUploadErrorText = this.$opts.imageUploadErrorText; + this.serverUploadLimitText = this.$opts.serverUploadLimitText; + this.isDarkMode = document.documentElement.classList.contains('dark-mode'); - this.plugins = "image table textcolor paste link autolink fullscreen imagetools code customhr autosave lists codeeditor media"; + this.plugins = "image imagetools table textcolor paste link autolink fullscreen code customhr autosave lists codeeditor media"; this.loadPlugins(); this.tinyMceConfig = this.getTinyMceConfig(); - window.$events.emitPublic(elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig}); + window.$events.emitPublic(this.elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig}); window.tinymce.init(this.tinyMceConfig); } @@ -431,7 +457,7 @@ class WysiwygEditor { const drawioUrlElem = document.querySelector('[drawio-url]'); if (drawioUrlElem) { const url = drawioUrlElem.getAttribute('drawio-url'); - drawIoPlugin(url); + drawIoPlugin(url, this.isDarkMode, this.pageId, this); this.plugins += ' drawio'; } @@ -455,6 +481,7 @@ class WysiwygEditor { window.baseUrl('/dist/styles.css'), ], branding: false, + skin: this.isDarkMode ? 'dark' : 'lightgray', body_class: 'page-content', browser_spellcheck: true, relative_urls: false, @@ -471,7 +498,7 @@ class WysiwygEditor { plugins: this.plugins, imagetools_toolbar: 'imageoptions', toolbar: this.getToolBar(), - content_style: "html, body {background: #FFF;} body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}", + content_style: `html, body, html.dark-mode {background: ${this.isDarkMode ? '#222' : '#fff'};} body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}`, style_formats: [ {title: "Header Large", format: "h2"}, {title: "Header Medium", format: "h3"}, @@ -536,8 +563,9 @@ class WysiwygEditor { } // Replace the actively selected content with the linked image + const imageUrl = image.thumbs.display || image.url; let html = ``; - html += `${image.name}`; + html += `${image.name}`; html += ''; win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html); }, 'gallery'); @@ -578,7 +606,10 @@ class WysiwygEditor { }); function editorChange() { - let content = editor.getContent(); + const content = editor.getContent(); + if (context.isDarkMode) { + editor.contentDocument.documentElement.classList.add('dark-mode'); + } window.$events.emit('editor-html-change', content); } @@ -633,6 +664,7 @@ class WysiwygEditor { }); + // Custom drop event handling editor.on('drop', function (event) { let dom = editor.dom, rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc()); @@ -692,8 +724,9 @@ class WysiwygEditor { tooltip: 'Insert an image', onclick: function () { window.ImageManager.show(function (image) { + const imageUrl = image.thumbs.display || image.url; let html = ``; - html += `${image.name}`; + html += `${image.name}`; html += ''; editor.execCommand('mceInsertContent', false, html); }, 'gallery');