X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/3a70e9d49ca41fcdecf1c12022ce86a4bc5121aa..refs/pull/3639/head:/resources/js/components/markdown-editor.js diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js index 4dc240d48..21cf37bb4 100644 --- a/resources/js/components/markdown-editor.js +++ b/resources/js/components/markdown-editor.js @@ -1,19 +1,19 @@ import MarkdownIt from "markdown-it"; import mdTasksLists from 'markdown-it-task-lists'; -import code from '../services/code'; import Clipboard from "../services/clipboard"; import {debounce} from "../services/util"; - +import {patchDomFromHtmlString} from "../services/vdom"; import DrawIO from "../services/drawio"; class MarkdownEditor { - 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.markdown = new MarkdownIt({html: true}); this.markdown.use(mdTasksLists, {label: true}); @@ -22,24 +22,36 @@ class MarkdownEditor { this.displayStylesLoaded = false; this.input = this.elem.querySelector('textarea'); - this.htmlInput = this.elem.querySelector('input[name=html]'); - this.cm = code.markdownEditor(this.input); + + this.cm = null; + this.Code = null; + const cmLoadPromise = window.importVersioned('code').then(Code => { + this.cm = Code.markdownEditor(this.input); + this.Code = Code; + return this.cm; + }); this.onMarkdownScroll = this.onMarkdownScroll.bind(this); - this.display.addEventListener('load', () => { + const displayLoad = () => { this.displayDoc = this.display.contentDocument; - this.init(); - }); + this.init(cmLoadPromise); + }; + + if (this.display.contentDocument.readyState === 'complete') { + displayLoad(); + } else { + this.display.addEventListener('load', displayLoad.bind(this)); + } - window.$events.emitPublic(elem, 'editor-markdown::setup', { + window.$events.emitPublic(this.elem, 'editor-markdown::setup', { markdownIt: this.markdown, displayEl: this.display, codeMirrorInstance: this.cm, }); } - init() { + init(cmLoadPromise) { let lastClick = 0; @@ -92,12 +104,15 @@ class MarkdownEditor { toolbarLabel.closest('.markdown-editor-wrap').classList.add('active'); }); - window.$events.listen('editor-markdown-update', value => { - this.cm.setValue(value); - this.updateAndRender(); + cmLoadPromise.then(cm => { + this.codeMirrorSetup(cm); + + // Refresh CodeMirror on container resize + const resizeDebounced = debounce(() => this.Code.updateLayout(cm), 100, false); + const observer = new ResizeObserver(resizeDebounced); + observer.observe(this.elem); }); - this.codeMirrorSetup(); this.listenForBookStackEditorEvents(); // Scroll to text if needed. @@ -112,19 +127,31 @@ class MarkdownEditor { updateAndRender() { const content = this.cm.getValue(); this.input.value = content; + const html = this.markdown.render(content); window.$events.emit('editor-html-change', html); window.$events.emit('editor-markdown-change', content); // Set body content + const target = this.getDisplayTarget(); this.displayDoc.body.className = 'page-content'; - this.displayDoc.body.innerHTML = html; - this.htmlInput.value = html; + patchDomFromHtmlString(target, html); // Copy styles from page head and set custom styles for editor this.loadStylesIntoDisplay(); } + getDisplayTarget() { + const body = this.displayDoc.body; + + if (body.children.length === 0) { + const wrap = document.createElement('div'); + this.displayDoc.body.append(wrap); + } + + return body.children[0]; + } + loadStylesIntoDisplay() { if (this.displayStylesLoaded) return; this.displayDoc.documentElement.classList.add('markdown-editor-display'); @@ -153,15 +180,14 @@ class MarkdownEditor { topElem.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth'}); } - codeMirrorSetup() { - const cm = this.cm; + codeMirrorSetup(cm) { const context = this; // Text direction // cm.setOption('direction', this.textDirection); cm.setOption('direction', 'ltr'); // Will force to remain as ltr for now due to issues when HTML is in editor. // Custom key commands - let metaKey = code.getMetaKey(); + let metaKey = this.Code.getMetaKey(); const extraKeys = {}; // Insert Image shortcut extraKeys[`${metaKey}-Alt-I`] = function(cm) { @@ -251,7 +277,7 @@ class MarkdownEditor { } const clipboard = new Clipboard(event.dataTransfer); - if (clipboard.hasItems()) { + if (clipboard.hasItems() && clipboard.getImages().length > 0) { const cursorPos = cm.coordsChar({left: event.pageX, top: event.pageY}); cm.setCursor(cursorPos); event.stopPropagation(); @@ -368,7 +394,7 @@ class MarkdownEditor { const newContent = `[![${selectedText}](${resp.data.thumbs.display})](${resp.data.url})`; replaceContent(placeHolderText, newContent); }).catch(err => { - window.$events.emit('error', trans('errors.image_upload_error')); + window.$events.emit('error', context.imageUploadErrorText); replaceContent(placeHolderText, selectedText); console.log(err); }); @@ -390,8 +416,9 @@ class MarkdownEditor { actionInsertImage() { const cursorPos = this.cm.getCursor('from'); window.ImageManager.show(image => { + const imageUrl = image.thumbs.display || image.url; let selectedText = this.cm.getSelection(); - let newText = "[![" + (selectedText || image.name) + "](" + image.thumbs.display + ")](" + image.url + ")"; + let newText = "[![" + (selectedText || image.name) + "](" + imageUrl + ")](" + image.url + ")"; this.cm.focus(); this.cm.replaceSelection(newText); this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length); @@ -435,15 +462,14 @@ class MarkdownEditor { const data = { image: pngData, - uploaded_to: Number(document.getElementById('page-editor').getAttribute('page-id')) + uploaded_to: Number(this.pageId), }; - window.$http.post(window.baseUrl('/images/drawio'), data).then(resp => { + window.$http.post("/images/drawio", data).then(resp => { this.insertDrawing(resp.data, cursorPos); DrawIO.close(); }).catch(err => { - window.$events.emit('error', trans('errors.image_upload_error')); - console.log(err); + this.handleDrawingUploadError(err); }); }); } @@ -471,10 +497,10 @@ class MarkdownEditor { let data = { image: pngData, - uploaded_to: Number(document.getElementById('page-editor').getAttribute('page-id')) + uploaded_to: Number(this.pageId), }; - window.$http.post(window.baseUrl(`/images/drawio`), data).then(resp => { + window.$http.post("/images/drawio", data).then(resp => { let newText = `
`; let newContent = this.cm.getValue().split('\n').map(line => { if (line.indexOf(`drawio-diagram="${drawingId}"`) !== -1) { @@ -487,12 +513,20 @@ class MarkdownEditor { this.cm.focus(); DrawIO.close(); }).catch(err => { - window.$events.emit('error', trans('errors.image_upload_error')); - console.log(err); + this.handleDrawingUploadError(err); }); }); } + handleDrawingUploadError(error) { + if (error.status === 413) { + window.$events.emit('error', this.serverUploadLimitText); + } else { + window.$events.emit('error', this.imageUploadErrorText); + } + console.log(error); + } + // Make the editor full screen actionFullScreen() { const alreadyFullscreen = this.elem.classList.contains('fullscreen'); @@ -557,6 +591,17 @@ class MarkdownEditor { const prependLineCount = markdown.split('\n').length; this.cm.setCursor(cursorPos.line + prependLineCount, cursorPos.ch); }); + + // Insert editor content at the current location + window.$events.listen('editor::insert', (eventContent) => { + const markdown = getContentToInsert(eventContent); + this.cm.replaceSelection(markdown); + }); + + // Focus on editor + window.$events.listen('editor::focus', () => { + this.cm.focus(); + }); } }