X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/e91ef54cc9f8ce6b264bced8191275b6a33e594f..refs/pull/2283/head:/resources/js/components/wysiwyg-editor.js diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index 60a6743ea..a32e78161 100644 --- a/resources/js/components/wysiwyg-editor.js +++ b/resources/js/components/wysiwyg-editor.js @@ -1,5 +1,6 @@ import Code from "../services/code"; import DrawIO from "../services/drawio"; +import Clipboard from "../services/clipboard"; /** * Handle pasting images from clipboard. @@ -8,30 +9,33 @@ import DrawIO from "../services/drawio"; * @param editor */ function editorPaste(event, editor, wysiwygComponent) { - const clipboardItems = event.clipboardData.items; - if (!event.clipboardData || !clipboardItems) return; + const clipboard = new Clipboard(event.clipboardData || event.dataTransfer); - // Don't handle if clipboard includes text content - for (let clipboardItem of clipboardItems) { - if (clipboardItem.type.includes('text/')) { - return; - } + // Don't handle the event ourselves if no items exist of contains table-looking data + if (!clipboard.hasItems() || clipboard.containsTabularData()) { + return; } - for (let clipboardItem of clipboardItems) { - if (!clipboardItem.type.includes("image")) { - continue; - } + const images = clipboard.getImages(); + for (const imageFile of images) { const id = "image-" + Math.random().toString(16).slice(2); const loadingImage = window.baseUrl('/loading.gif'); - const file = clipboardItem.getAsFile(); + event.preventDefault(); setTimeout(() => { editor.insertContent(`

`); - uploadImageFile(file, wysiwygComponent).then(resp => { - editor.dom.setAttrib(id, 'src', resp.thumbs.display); + uploadImageFile(imageFile, wysiwygComponent).then(resp => { + const safeName = resp.name.replace(/"/g, ''); + const newImageHtml = `${safeName}`; + + const newEl = editor.dom.create('a', { + target: '_blank', + href: resp.url, + }, newImageHtml); + + editor.dom.replace(newEl, id); }).catch(err => { editor.dom.remove(id); window.$events.emit('error', trans('errors.image_upload_error')); @@ -94,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); }); } @@ -135,19 +133,21 @@ function codePlugin() { } function showPopup(editor) { - let selectedNode = editor.selection.getNode(); + const selectedNode = editor.selection.getNode(); if (!elemIsCodeBlock(selectedNode)) { - let providedCode = editor.selection.getNode().textContent; - window.vues['code-editor'].open(providedCode, '', (code, lang) => { - let wrap = document.createElement('div'); + const providedCode = editor.selection.getNode().textContent; + window.components.first('code-editor').open(providedCode, '', (code, lang) => { + const wrap = document.createElement('div'); wrap.innerHTML = `
`; wrap.querySelector('code').innerText = code; editor.formatter.toggle('pre'); - let node = editor.selection.getNode(); + const node = editor.selection.getNode(); editor.dom.setHTML(node, wrap.querySelector('pre').innerHTML); editor.fire('SetContent'); + + editor.focus() }); return; } @@ -155,16 +155,18 @@ function codePlugin() { let lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : ''; let currentCode = selectedNode.querySelector('textarea').textContent; - window.vues['code-editor'].open(currentCode, lang, (code, lang) => { - let editorElem = selectedNode.querySelector('.CodeMirror'); - let cmInstance = editorElem.CodeMirror; + window.components.first('code-editor').open(currentCode, lang, (code, lang) => { + const editorElem = selectedNode.querySelector('.CodeMirror'); + const cmInstance = editorElem.CodeMirror; if (cmInstance) { Code.setContent(cmInstance, code); - Code.setMode(cmInstance, lang); + Code.setMode(cmInstance, lang, code); } - let textArea = selectedNode.querySelector('textarea'); + const textArea = selectedNode.querySelector('textarea'); if (textArea) textArea.textContent = code; selectedNode.setAttribute('data-lang', lang); + + editor.focus() }); } @@ -234,7 +236,7 @@ function codePlugin() { }); } -function drawIoPlugin() { +function drawIoPlugin(drawioUrl, isDarkMode, pageId) { let pageEditor = null; let currentNode = null; @@ -262,13 +264,12 @@ function drawIoPlugin() { function showDrawingEditor(mceEditor, selectedNode = null) { pageEditor = mceEditor; currentNode = selectedNode; - DrawIO.show(drawingInit, updateContent); + DrawIO.show(drawioUrl, drawingInit, updateContent); } 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')); // Handle updating an existing image if (currentNode) { @@ -313,14 +314,17 @@ function drawIoPlugin() { 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: [ { @@ -397,32 +401,46 @@ 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; - const pageEditor = document.getElementById('page-editor'); - this.pageId = pageEditor.getAttribute('page-id'); - this.textDirection = pageEditor.getAttribute('text-direction'); + setup() { + this.elem = this.$el; - this.plugins = "image table textcolor paste link autolink fullscreen imagetools code customhr autosave lists codeeditor media"; + this.pageId = this.$opts.pageId; + this.textDirection = this.$opts.textDirection; + this.isDarkMode = document.documentElement.classList.contains('dark-mode'); + + this.plugins = "image 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); } loadPlugins() { codePlugin(); customHrPlugin(); - if (document.querySelector('[drawio-enabled]').getAttribute('drawio-enabled') === 'true') { - drawIoPlugin(); + + const drawioUrlElem = document.querySelector('[drawio-url]'); + if (drawioUrlElem) { + const url = drawioUrlElem.getAttribute('drawio-url'); + drawIoPlugin(url, this.isDarkMode, this.pageId); this.plugins += ' drawio'; } + if (this.textDirection === 'rtl') { this.plugins += ' directionality' } @@ -443,6 +461,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, @@ -459,7 +478,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"}, @@ -496,7 +515,15 @@ class WysiwygEditor { const originalField = win.document.getElementById(field_name); originalField.value = entity.link; const mceForm = originalField.closest('.mce-form'); - mceForm.querySelectorAll('input')[2].value = entity.name; + const inputs = mceForm.querySelectorAll('input'); + + // Set text to display if not empty + if (!inputs[1].value) { + inputs[1].value = entity.name; + } + + // Set title field + inputs[2].value = entity.name; }); } @@ -558,7 +585,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); } @@ -589,6 +619,7 @@ class WysiwygEditor { registerEditorShortcuts(editor); let wrap; + let draggedContentEditable; function hasTextContent(node) { return node && !!( node.textContent || node.innerText ); @@ -597,20 +628,28 @@ class WysiwygEditor { editor.on('dragstart', function () { let node = editor.selection.getNode(); - if (node.nodeName !== 'IMG') return; - wrap = editor.dom.getParent(node, '.mceTemp'); + if (node.nodeName === 'IMG') { + wrap = editor.dom.getParent(node, '.mceTemp'); + + if (!wrap && node.parentNode.nodeName === 'A' && !hasTextContent(node.parentNode)) { + wrap = node.parentNode; + } + } - if (!wrap && node.parentNode.nodeName === 'A' && !hasTextContent(node.parentNode)) { - wrap = node.parentNode; + // Track dragged contenteditable blocks + if (node.hasAttribute('contenteditable') && node.getAttribute('contenteditable') === 'false') { + draggedContentEditable = node; } + }); + // Custom drop event handling editor.on('drop', function (event) { let dom = editor.dom, rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc()); // Template insertion - const templateId = event.dataTransfer.getData('bookstack/template'); + const templateId = event.dataTransfer && event.dataTransfer.getData('bookstack/template'); if (templateId) { event.preventDefault(); window.$http.get(`/templates/${templateId}`).then(resp => { @@ -634,6 +673,26 @@ class WysiwygEditor { }); } + // Handle contenteditable section drop + if (!event.isDefaultPrevented() && draggedContentEditable) { + event.preventDefault(); + editor.undoManager.transact(function () { + const selectedNode = editor.selection.getNode(); + const range = editor.selection.getRng(); + const selectedNodeRoot = selectedNode.closest('body > *'); + if (range.startOffset > (range.startContainer.length / 2)) { + editor.$(selectedNodeRoot).after(draggedContentEditable); + } else { + editor.$(selectedNodeRoot).before(draggedContentEditable); + } + }); + } + + // Handle image insert + if (!event.isDefaultPrevented()) { + editorPaste(event, editor, context); + } + wrap = null; });