X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/a6633642232efd164d4708967ab59e498fbff896..3b8ee3954e3f2834dae4b7a56d4fcecd5e8d03e6:/resources/js/components/markdown-editor.js diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js index bd107f2bf..ee2f0ced2 100644 --- a/resources/js/components/markdown-editor.js +++ b/resources/js/components/markdown-editor.js @@ -1,12 +1,12 @@ 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"; +import {Component} from "./component"; -class MarkdownEditor { +export class MarkdownEditor extends Component { setup() { this.elem = this.$el; @@ -14,6 +14,7 @@ class MarkdownEditor { 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,14 +23,20 @@ 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); const displayLoad = () => { this.displayDoc = this.display.contentDocument; - this.init(); + this.init(cmLoadPromise); }; if (this.display.contentDocument.readyState === 'complete') { @@ -45,7 +52,7 @@ class MarkdownEditor { }); } - init() { + init(cmLoadPromise) { let lastClick = 0; @@ -98,12 +105,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. @@ -118,19 +128,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'); @@ -159,15 +181,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) { @@ -191,13 +212,15 @@ class MarkdownEditor { extraKeys[`${metaKey}-3`] = cm => {replaceLineStart('####');}; extraKeys[`${metaKey}-4`] = cm => {replaceLineStart('#####');}; extraKeys[`${metaKey}-5`] = cm => {replaceLineStart('');}; - extraKeys[`${metaKey}-d`] = cm => {replaceLineStart('');}; + extraKeys[`${metaKey}-D`] = cm => {replaceLineStart('');}; extraKeys[`${metaKey}-6`] = cm => {replaceLineStart('>');}; - extraKeys[`${metaKey}-q`] = cm => {replaceLineStart('>');}; + extraKeys[`${metaKey}-Q`] = cm => {replaceLineStart('>');}; extraKeys[`${metaKey}-7`] = cm => {wrapSelection('\n```\n', '\n```');}; extraKeys[`${metaKey}-8`] = cm => {wrapSelection('`', '`');}; extraKeys[`Shift-${metaKey}-E`] = cm => {wrapSelection('`', '`');}; extraKeys[`${metaKey}-9`] = cm => {wrapSelection('

', '

');}; + extraKeys[`${metaKey}-P`] = cm => {replaceLineStart('-')} + extraKeys[`${metaKey}-O`] = cm => {replaceLineStartForOrderedList()} cm.setOption('extraKeys', extraKeys); // Update data on content change @@ -346,6 +369,19 @@ class MarkdownEditor { cm.setSelections([selections]); } + function replaceLineStartForOrderedList() { + const cursor = cm.getCursor(); + const prevLineContent = cm.getLine(cursor.line - 1) || ''; + const listMatch = prevLineContent.match(/^(\s*)(\d)([).])\s/) || []; + + const number = (Number(listMatch[2]) || 0) + 1; + const whiteSpace = listMatch[1] || ''; + const listMark = listMatch[3] || '.' + + const prefix = `${whiteSpace}${number}${listMark}`; + return replaceLineStart(prefix); + } + // Handle image upload and add image into markdown content function uploadImage(file) { if (file === null || file.type.indexOf('image') !== 0) return; @@ -396,8 +432,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); @@ -448,8 +485,7 @@ class MarkdownEditor { this.insertDrawing(resp.data, cursorPos); DrawIO.close(); }).catch(err => { - window.$events.emit('error', trans('errors.image_upload_error')); - console.log(err); + this.handleDrawingUploadError(err); }); }); } @@ -493,12 +529,20 @@ class MarkdownEditor { this.cm.focus(); DrawIO.close(); }).catch(err => { - window.$events.emit('error', this.imageUploadErrorText); - 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'); @@ -576,5 +620,3 @@ class MarkdownEditor { }); } } - -export default MarkdownEditor ;