-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;
+
+ const pageEditor = document.getElementById('page-editor');
+ this.pageId = pageEditor.getAttribute('page-id');
+ this.textDirection = pageEditor.getAttribute('text-direction');
+
this.markdown = new MarkdownIt({html: true});
this.markdown.use(mdTasksLists, {label: true});
}
codeMirrorSetup() {
- let cm = this.cm;
+ const cm = this.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();
const extraKeys = {};
}
// Insert image into markdown
- let id = "image-" + Math.random().toString(16).slice(2);
- let placeholderImage = window.baseUrl(`/loading.gif#upload${id}`);
- let selectedText = cm.getSelection();
- let placeHolderText = ``;
- let cursor = cm.getCursor();
+ const id = "image-" + Math.random().toString(16).slice(2);
+ const placeholderImage = window.baseUrl(`/loading.gif#upload${id}`);
+ const selectedText = cm.getSelection();
+ const placeHolderText = ``;
+ const 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();
+ const remoteFilename = "image-" + Date.now() + "." + ext;
+ const formData = new FormData();
formData.append('file', file, remoteFilename);
+ formData.append('uploaded_to', context.pageId);
window.$http.post('/images/gallery/upload', formData).then(resp => {
- replaceContent(placeholderImage, resp.data.thumbs.display);
+ const newContent = `[](${resp.data.url})`;
+ replaceContent(placeHolderText, newContent);
}).catch(err => {
window.$events.emit('error', trans('errors.image_upload_error'));
replaceContent(placeHolderText, selectedText);
}
actionInsertImage() {
- let cursorPos = this.cm.getCursor('from');
+ const cursorPos = this.cm.getCursor('from');
window.ImageManager.show(image => {
let selectedText = this.cm.getSelection();
- let newText = "";
+ let newText = "[](" + image.url + ")";
this.cm.focus();
this.cm.replaceSelection(newText);
this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length);
}
actionShowImageManager() {
- let cursorPos = this.cm.getCursor('from');
+ const cursorPos = this.cm.getCursor('from');
window.ImageManager.show(image => {
this.insertDrawing(image, cursorPos);
}, 'drawio');
// Show the popup link selector and insert a link when finished
actionShowLinkSelector() {
- let cursorPos = this.cm.getCursor('from');
+ const cursorPos = this.cm.getCursor('from');
window.EntitySelectorPopup.show(entity => {
let selectedText = this.cm.getSelection() || entity.name;
let newText = `[${selectedText}](${entity.link})`;
}
insertDrawing(image, originalCursor) {
- let newText = `<div drawio-diagram="${image.id}"><img src="${image.url}"></div>`;
+ const newText = `<div drawio-diagram="${image.id}"><img src="${image.url}"></div>`;
this.cm.focus();
this.cm.replaceSelection(newText);
this.cm.setCursor(originalCursor.line, originalCursor.ch + newText.length);
// Show draw.io if enabled and handle save.
actionEditDrawing(imgContainer) {
- if (document.querySelector('[drawio-enabled]').getAttribute('drawio-enabled') !== 'true') return;
- let cursorPos = this.cm.getCursor('from');
- let drawingId = imgContainer.getAttribute('drawio-diagram');
+ const drawingDisabled = document.querySelector('[drawio-enabled]').getAttribute('drawio-enabled') !== 'true';
+ if (drawingDisabled) {
+ return;
+ }
+
+ const cursorPos = this.cm.getCursor('from');
+ const drawingId = imgContainer.getAttribute('drawio-diagram');
DrawIO.show(() => {
return window.$http.get(window.baseUrl(`/images/base64/${drawingId}`)).then(resp => {
}
// 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,
- }, 200);
- this.cm.focus();
- // set the cursor location.
- this.cm.setCursor({
- line: lineNumber,
- char: lines[lineNumber].length
- })
+ 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 ;