X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/db4093d523352a29cabddd79ad40262f6fa1b5c6..refs/pull/5280/head:/resources/js/components/wysiwyg-editor.js diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index 9d6f70e32..56dbe8d7c 100644 --- a/resources/js/components/wysiwyg-editor.js +++ b/resources/js/components/wysiwyg-editor.js @@ -1,762 +1,68 @@ -import Code from "../services/code"; -import DrawIO from "../services/drawio"; -import Clipboard from "../services/clipboard"; +import {Component} from './component'; -/** - * Handle pasting images from clipboard. - * @param {ClipboardEvent} event - * @param {WysiwygEditor} wysiwygComponent - * @param editor - */ -function editorPaste(event, editor, wysiwygComponent) { - const clipboard = new Clipboard(event.clipboardData || event.dataTransfer); +export class WysiwygEditor extends Component { - // Don't handle the event ourselves if no items exist of contains table-looking data - if (!clipboard.hasItems() || clipboard.containsTabularData()) { - return; - } - - const images = clipboard.getImages(); - for (const imageFile of images) { - - const id = "image-" + Math.random().toString(16).slice(2); - const loadingImage = window.baseUrl('/loading.gif'); - event.preventDefault(); - - setTimeout(() => { - editor.insertContent(`

`); - - 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', wysiwygComponent.imageUploadErrorText); - console.log(err); - }); - }, 10); - } -} - -/** - * Upload an image file to the server - * @param {File} file - * @param {WysiwygEditor} wysiwygComponent - */ -async function uploadImageFile(file, wysiwygComponent) { - if (file === null || file.type.indexOf('image') !== 0) { - throw new Error(`Not an image file`); - } - - let ext = 'png'; - if (file.name) { - let fileNameMatches = file.name.match(/\.(.+)$/); - if (fileNameMatches.length > 1) ext = fileNameMatches[1]; - } - - const remoteFilename = "image-" + Date.now() + "." + ext; - const formData = new FormData(); - formData.append('file', file, remoteFilename); - formData.append('uploaded_to', wysiwygComponent.pageId); - - const resp = await window.$http.post(window.baseUrl('/images/gallery'), formData); - return resp.data; -} - -function registerEditorShortcuts(editor) { - // Headers - for (let i = 1; i < 5; i++) { - editor.shortcuts.add('meta+' + i, '', ['FormatBlock', false, 'h' + (i+1)]); - } - - // Other block shortcuts - editor.shortcuts.add('meta+5', '', ['FormatBlock', false, 'p']); - editor.shortcuts.add('meta+d', '', ['FormatBlock', false, 'p']); - editor.shortcuts.add('meta+6', '', ['FormatBlock', false, 'blockquote']); - editor.shortcuts.add('meta+q', '', ['FormatBlock', false, 'blockquote']); - editor.shortcuts.add('meta+7', '', ['codeeditor', false, 'pre']); - editor.shortcuts.add('meta+e', '', ['codeeditor', false, 'pre']); - editor.shortcuts.add('meta+8', '', ['FormatBlock', false, 'code']); - editor.shortcuts.add('meta+shift+E', '', ['FormatBlock', false, 'code']); - - // Save draft shortcut - editor.shortcuts.add('meta+S', '', () => { - window.$events.emit('editor-save-draft'); - }); - - // Save page shortcut - editor.shortcuts.add('meta+13', '', () => { - window.$events.emit('editor-save-page'); - }); - - // Loop through callout styles - editor.shortcuts.add('meta+9', '', function() { - const selectedNode = editor.selection.getNode(); - const callout = selectedNode ? selectedNode.closest('.callout') : null; - - 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]; - - editor.formatter.apply('callout' + newFormat); - }); - -} - -/** - * Load custom HTML head content from the settings into the editor. - * @param editor - */ -function loadCustomHeadContent(editor) { - window.$http.get(window.baseUrl('/custom-head-content')).then(resp => { - if (!resp.data) return; - let head = editor.getDoc().querySelector('head'); - head.innerHTML += resp.data; - }); -} - -/** - * Create and enable our custom code plugin - */ -function codePlugin() { - - function elemIsCodeBlock(elem) { - return elem.className === 'CodeMirrorContainer'; - } - - function showPopup(editor) { - const selectedNode = editor.selection.getNode(); + setup() { + this.elem = this.$el; + this.editContainer = this.$refs.editContainer; + this.input = this.$refs.input; - if (!elemIsCodeBlock(selectedNode)) { - 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; + /** @var {SimpleWysiwygEditorInterface|null} */ + this.editor = null; - editor.formatter.toggle('pre'); - const node = editor.selection.getNode(); - editor.dom.setHTML(node, wrap.querySelector('pre').innerHTML); - editor.fire('SetContent'); + const translations = { + ...window.editor_translations, + imageUploadErrorText: this.$opts.imageUploadErrorText, + serverUploadLimitText: this.$opts.serverUploadLimitText, + }; - editor.focus() + window.importVersioned('wysiwyg').then(wysiwyg => { + const editorContent = this.input.value; + this.editor = wysiwyg.createPageEditorInstance(this.editContainer, editorContent, { + drawioUrl: this.getDrawIoUrl(), + pageId: Number(this.$opts.pageId), + darkMode: document.documentElement.classList.contains('dark-mode'), + textDirection: this.$opts.textDirection, + translations, }); - return; - } - - const lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : ''; - const currentCode = selectedNode.querySelector('textarea').textContent; - - 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); - } - const textArea = selectedNode.querySelector('textarea'); - if (textArea) textArea.textContent = code; - selectedNode.setAttribute('data-lang', lang); - - editor.focus() }); - } - - function codeMirrorContainerToPre(codeMirrorContainer) { - const textArea = codeMirrorContainer.querySelector('textarea'); - const code = textArea.textContent; - const lang = codeMirrorContainer.getAttribute('data-lang'); - codeMirrorContainer.removeAttribute('contentEditable'); - const pre = document.createElement('pre'); - const codeElem = document.createElement('code'); - codeElem.classList.add(`language-${lang}`); - codeElem.textContent = code; - pre.appendChild(codeElem); - - codeMirrorContainer.parentElement.replaceChild(pre, codeMirrorContainer); - } - - window.tinymce.PluginManager.add('codeeditor', function(editor, url) { - - const $ = editor.$; - - editor.ui.registry.addButton('codeeditor', { - text: 'Code block', - icon: false, - onAction() { - editor.execCommand('codeeditor'); + let handlingFormSubmit = false; + this.input.form.addEventListener('submit', event => { + if (!this.editor) { + return; } - }); - - editor.addCommand('codeeditor', () => { - showPopup(editor); - }); - - // Convert - editor.on('PreProcess', function (e) { - $('div.CodeMirrorContainer', e.node).each((index, elem) => { - codeMirrorContainerToPre(elem); - }); - }); - - editor.on('dblclick', event => { - let selectedNode = editor.selection.getNode(); - if (!elemIsCodeBlock(selectedNode)) return; - showPopup(editor); - }); - function parseCodeMirrorInstances() { - - // Recover broken codemirror instances - $('.CodeMirrorContainer').filter((index ,elem) => { - return typeof elem.querySelector('.CodeMirror').CodeMirror === 'undefined'; - }).each((index, elem) => { - codeMirrorContainerToPre(elem); - }); - - const codeSamples = $('body > pre').filter((index, elem) => { - return elem.contentEditable !== "false"; - }); - - 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 () { - 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); + if (!handlingFormSubmit) { + event.preventDefault(); + handlingFormSubmit = true; + this.editor.getContentAsHtml().then(html => { + this.input.value = html; + this.input.form.submit(); }); - }, 200); - }); - - }); -} - -function drawIoPlugin(drawioUrl, isDarkMode, pageId, wysiwygComponent) { - - let pageEditor = null; - let currentNode = null; - - function isDrawing(node) { - return node.hasAttribute('drawio-diagram'); - } - - function showDrawingManager(mceEditor, selectedNode = null) { - pageEditor = mceEditor; - currentNode = selectedNode; - // Show image manager - window.ImageManager.show(function (image) { - if (selectedNode) { - let imgElem = selectedNode.querySelector('img'); - pageEditor.dom.setAttrib(imgElem, 'src', image.url); - pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id); - } else { - let imgHTML = `
`; - pageEditor.insertContent(imgHTML); - } - }, 'drawio'); - } - - function showDrawingEditor(mceEditor, selectedNode = null) { - pageEditor = mceEditor; - currentNode = selectedNode; - 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 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) { - DrawIO.close(); - let imgElem = currentNode.querySelector('img'); - try { - const img = await DrawIO.upload(pngData, pageId); - pageEditor.dom.setAttrib(imgElem, 'src', img.url); - pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', img.id); - } catch (err) { - handleUploadError(err); - } - return; - } - - setTimeout(async () => { - pageEditor.insertContent(`
`); - DrawIO.close(); - try { - const img = await DrawIO.upload(pngData, pageId); - pageEditor.dom.setAttrib(id, 'src', img.url); - pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id); - } catch (err) { - pageEditor.dom.remove(id); - handleUploadError(err); - } - }, 5); - } - - - function drawingInit() { - if (!currentNode) { - return Promise.resolve(''); - } - - let drawingId = currentNode.getAttribute('drawio-diagram'); - return DrawIO.load(drawingId); - } - - window.tinymce.PluginManager.add('drawio', function(editor, url) { - - editor.addCommand('drawio', () => { - const selectedNode = editor.selection.getNode(); - showDrawingEditor(editor, isDrawing(selectedNode) ? selectedNode : null); - }); - - // editor.ui.registry.addIcon('diagram', ``) - editor.ui.registry.addIcon('diagram', ``) - - editor.ui.registry.addSplitButton('drawio', { - tooltip: 'Drawing', - icon: 'diagram', - onAction() { - editor.execCommand('drawio'); - }, - fetch(callback) { - callback([ - { - type: 'choiceitem', - text: 'Drawing Manager', - value: 'drawing-manager', - } - ]); - }, - onItemAction(api, value) { - if (value === 'drawing-manager') { - const selectedNode = editor.selection.getNode(); - showDrawingManager(editor, isDrawing(selectedNode) ? selectedNode : null); - } - } - }); - - editor.on('dblclick', event => { - let selectedNode = editor.selection.getNode(); - if (!isDrawing(selectedNode)) return; - showDrawingEditor(editor, selectedNode); - }); - - editor.on('SetContent', function () { - const drawings = editor.$('body > div[drawio-diagram]'); - if (!drawings.length) return; - - editor.undoManager.transact(function () { - drawings.each((index, elem) => { - elem.setAttribute('contenteditable', 'false'); - }); - }); - }); - - }); -} - -function customHrPlugin() { - window.tinymce.PluginManager.add('customhr', function (editor) { - editor.addCommand('InsertHorizontalRule', function () { - let hrElem = document.createElement('hr'); - let cNode = editor.selection.getNode(); - let parentNode = cNode.parentNode; - parentNode.insertBefore(hrElem, cNode); - }); - - editor.ui.registry.addButton('hr', { - icon: 'horizontal-rule', - tooltip: 'Horizontal line', - onAction() { - editor.execCommand('InsertHorizontalRule'); + handlingFormSubmit = false; } }); - - editor.ui.registry.addMenuItem('hr', { - icon: 'horizontal-rule', - text: 'Horizontal line', - context: 'insert', - onAction() { - editor.execCommand('InsertHorizontalRule'); - } - }); - }); -} - - -function listenForBookStackEditorEvents(editor) { - - // Replace editor content - window.$events.listen('editor::replace', ({html}) => { - editor.setContent(html); - }); - - // Append editor content - window.$events.listen('editor::append', ({html}) => { - const content = editor.getContent() + html; - editor.setContent(content); - }); - - // Prepend editor content - window.$events.listen('editor::prepend', ({html}) => { - const content = html + editor.getContent(); - 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 { - - setup() { - this.elem = this.$el; - - 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 imagetools table textcolor paste link autolink fullscreen code customhr autosave lists codeeditor media"; - this.loadPlugins(); - - this.tinyMceConfig = this.getTinyMceConfig(); - window.$events.emitPublic(this.elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig}); - window.tinymce.init(this.tinyMceConfig); } - loadPlugins() { - codePlugin(); - customHrPlugin(); - + getDrawIoUrl() { const drawioUrlElem = document.querySelector('[drawio-url]'); if (drawioUrlElem) { - const url = drawioUrlElem.getAttribute('drawio-url'); - drawIoPlugin(url, this.isDarkMode, this.pageId, this); - this.plugins += ' drawio'; - } - - if (this.textDirection === 'rtl') { - this.plugins += ' directionality' + return drawioUrlElem.getAttribute('drawio-url'); } + return ''; } - getToolBar() { - const textDirPlugins = this.textDirection === 'rtl' ? 'ltr rtl' : ''; - 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` - } - - getTinyMceConfig() { - - const context = this; - + /** + * Get the content of this editor. + * Used by the parent page editor component. + * @return {Promise<{html: String}>} + */ + async getContent() { return { - width: '100%', - height: '100%', - selector: '#html-editor', - content_css: [ - window.baseUrl('/dist/styles.css'), - ], - branding: false, - skin: this.isDarkMode ? 'oxide-dark' : 'oxide', - body_class: 'page-content', - browser_spellcheck: true, - relative_urls: false, - directionality : this.textDirection, - remove_script_host: false, - document_base_url: window.baseUrl('/'), - end_container_on_empty_block: true, - statusbar: false, - menubar: false, - paste_data_images: false, - extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram]', - automatic_uploads: false, - valid_children: "-div[p|h1|h2|h3|h4|h5|h6|blockquote],+div[pre],+div[img]", - plugins: this.plugins, - imagetools_toolbar: 'imageoptions', - toolbar: this.getToolBar(), - 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", preview: 'color: blue;'}, - {title: "Header Medium", format: "h3"}, - {title: "Header Small", format: "h4"}, - {title: "Header Tiny", format: "h5"}, - {title: "Paragraph", format: "p", exact: true, classes: ''}, - {title: "Blockquote", format: "blockquote"}, - {title: "", cmd: 'codeeditor', format: 'codeeditor'}, - {title: "Inline Code", inline: "code"}, - {title: "Callouts", items: [ - {title: "Info", format: 'calloutinfo'}, - {title: "Success", format: 'calloutsuccess'}, - {title: "Warning", format: 'calloutwarning'}, - {title: "Danger", format: 'calloutdanger'} - ]}, - ], - style_formats_merge: false, - media_alt_source: false, - media_poster: false, - formats: { - codeeditor: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div'}, - alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'}, - aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'}, - alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'}, - calloutsuccess: {block: 'p', exact: true, attributes: {class: 'callout success'}}, - calloutinfo: {block: 'p', exact: true, attributes: {class: 'callout info'}}, - calloutwarning: {block: 'p', exact: true, attributes: {class: 'callout warning'}}, - calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}} - }, - file_browser_callback: function (field_name, url, type, win) { - - if (type === 'file') { - window.EntitySelectorPopup.show(function(entity) { - const originalField = win.document.getElementById(field_name); - originalField.value = entity.link; - const mceForm = originalField.closest('.mce-form'); - 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; - }); - } - - if (type === 'image') { - // Show image manager - window.ImageManager.show(function (image) { - - // Set popover link input to image url then fire change event - // to ensure the new value sticks - win.document.getElementById(field_name).value = image.url; - if ("createEvent" in document) { - let evt = document.createEvent("HTMLEvents"); - evt.initEvent("change", false, true); - win.document.getElementById(field_name).dispatchEvent(evt); - } else { - win.document.getElementById(field_name).fireEvent("onchange"); - } - - // Replace the actively selected content with the linked image - const imageUrl = image.thumbs.display || image.url; - let html = ``; - html += `${image.name}`; - html += ''; - win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html); - }, 'gallery'); - } - - }, - paste_preprocess: function (plugin, args) { - let content = args.content; - if (content.indexOf('`; - html += `${image.name}`; - html += ''; - editor.execCommand('mceInsertContent', false, html); - }, 'gallery'); - } - }); - - // Paste image-uploads - editor.on('paste', event => editorPaste(event, editor, context)); - - // Custom handler hook - window.$events.emitPublic(context.elem, 'editor-tinymce::setup', {editor}); - } + html: await this.editor.getContentAsHtml(), }; } } - -export default WysiwygEditor;