X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/b936e1f403e0565adc9a619d8b9426dfd6b9492c..7f95b51b00d0d5fa1e7bcf5574f2d58bddcbd504:/resources/assets/js/components/markdown-editor.js diff --git a/resources/assets/js/components/markdown-editor.js b/resources/assets/js/components/markdown-editor.js index 4e0ba83ba..9228cfe2c 100644 --- a/resources/assets/js/components/markdown-editor.js +++ b/resources/assets/js/components/markdown-editor.js @@ -1,13 +1,14 @@ -const MarkdownIt = require("markdown-it"); -const mdTasksLists = require('markdown-it-task-lists'); -const code = require('../services/code'); +import MarkdownIt from "markdown-it"; +import mdTasksLists from 'markdown-it-task-lists'; +import code from '../services/code'; -const DrawIO = require('../services/drawio'); +import DrawIO from "../services/drawio"; class MarkdownEditor { constructor(elem) { this.elem = elem; + this.textDirection = document.getElementById('page-editor').getAttribute('text-direction'); this.markdown = new MarkdownIt({html: true}); this.markdown.use(mdTasksLists, {label: true}); @@ -98,6 +99,9 @@ class MarkdownEditor { codeMirrorSetup() { let cm = this.cm; + // 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(); const extraKeys = {}; @@ -268,14 +272,15 @@ class MarkdownEditor { let placeHolderText = `![${selectedText}](${placeholderImage})`; let cursor = cm.getCursor(); cm.replaceSelection(placeHolderText); - cm.setCursor({line: cursor.line, ch: cursor.ch + selectedText.length + 2}); + cm.setCursor({line: cursor.line, ch: cursor.ch + selectedText.length + 3}); let remoteFilename = "image-" + Date.now() + "." + ext; let formData = new FormData(); formData.append('file', file, remoteFilename); window.$http.post('/images/gallery/upload', formData).then(resp => { - replaceContent(placeholderImage, resp.data.thumbs.display); + const newContent = `[![${selectedText}](${resp.data.thumbs.display})](${resp.data.url})`; + replaceContent(placeHolderText, newContent); }).catch(err => { window.$events.emit('error', trans('errors.image_upload_error')); replaceContent(placeHolderText, selectedText); @@ -300,7 +305,7 @@ class MarkdownEditor { let cursorPos = this.cm.getCursor('from'); window.ImageManager.show(image => { let selectedText = this.cm.getSelection(); - let newText = "![" + (selectedText || image.name) + "](" + image.thumbs.display + ")"; + let newText = "[![" + (selectedText || image.name) + "](" + image.thumbs.display + ")](" + image.url + ")"; this.cm.focus(); this.cm.replaceSelection(newText); this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length); @@ -395,33 +400,32 @@ class MarkdownEditor { } // Scroll to a specified text - scrollToText(searchText) {; + scrollToText(searchText) { if (!searchText) { return; } + const content = this.cm.getValue(); const lines = content.split(/\r?\n/); - let lineNumber = -1; - for (let i = 0; i !== lines.length; ++i) { - const line = lines[i]; - if (!line) { - continue; - } - if (line.indexOf(searchText) !== -1) { - lineNumber = i; - break; - } - } + let lineNumber = lines.findIndex(line => { + return line && line.indexOf(searchText) !== -1; + }); - if (lineNumber !== -1) { - this.cm.scrollIntoView({ - line: lineNumber, - char: lines[lineNumber].length - }, 200); - this.cm.focus(); + if (lineNumber === -1) { + return; } + + this.cm.scrollIntoView({ + line: lineNumber, + }, 200); + this.cm.focus(); + // set the cursor location. + this.cm.setCursor({ + line: lineNumber, + char: lines[lineNumber].length + }) } } -module.exports = MarkdownEditor ; \ No newline at end of file +export default MarkdownEditor ;