X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/9ec114641c35eaedfa5d6b00b82b06dad2b8c050..d6456e961afde217e045140fdf8cf88921897536:/resources/assets/js/components/wysiwyg-editor.js
diff --git a/resources/assets/js/components/wysiwyg-editor.js b/resources/assets/js/components/wysiwyg-editor.js
index 701a1fec6..c03c0d2aa 100644
--- a/resources/assets/js/components/wysiwyg-editor.js
+++ b/resources/assets/js/components/wysiwyg-editor.js
@@ -1,25 +1,36 @@
-const Code = require('../services/code');
-const DrawIO = require('../services/drawio');
+import Code from "../services/code";
+import DrawIO from "../services/drawio";
/**
* Handle pasting images from clipboard.
* @param {ClipboardEvent} event
+ * @param {WysiwygEditor} wysiwygComponent
* @param editor
*/
-function editorPaste(event, editor) {
- if (!event.clipboardData || !event.clipboardData.items) return;
- let items = event.clipboardData.items;
+function editorPaste(event, editor, wysiwygComponent) {
+ const clipboardItems = event.clipboardData.items;
+ if (!event.clipboardData || !clipboardItems) return;
- for (let i = 0; i < items.length; i++) {
- if (items[i].type.indexOf("image") === -1) continue;
- event.preventDefault();
+ // Don't handle if clipboard includes text content
+ for (let clipboardItem of clipboardItems) {
+ if (clipboardItem.type.includes('text/')) {
+ return;
+ }
+ }
+
+ for (let clipboardItem of clipboardItems) {
+ if (!clipboardItem.type.includes("image")) {
+ continue;
+ }
+
+ const id = "image-" + Math.random().toString(16).slice(2);
+ const loadingImage = window.baseUrl('/loading.gif');
+ const file = clipboardItem.getAsFile();
- let id = "image-" + Math.random().toString(16).slice(2);
- let loadingImage = window.baseUrl('/loading.gif');
- let file = items[i].getAsFile();
setTimeout(() => {
editor.insertContent(`
`);
- uploadImageFile(file).then(resp => {
+
+ uploadImageFile(file, wysiwygComponent).then(resp => {
editor.dom.setAttrib(id, 'src', resp.thumbs.display);
}).catch(err => {
editor.dom.remove(id);
@@ -33,9 +44,12 @@ function editorPaste(event, editor) {
/**
* Upload an image file to the server
* @param {File} file
+ * @param {WysiwygEditor} wysiwygComponent
*/
-function uploadImageFile(file) {
- if (file === null || file.type.indexOf('image') !== 0) return Promise.reject(`Not an image file`);
+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) {
@@ -43,11 +57,13 @@ function uploadImageFile(file) {
if (fileNameMatches.length > 1) ext = fileNameMatches[1];
}
- 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', wysiwygComponent.pageId);
- return window.$http.post(window.baseUrl('/images/gallery/upload'), formData).then(resp => (resp.data));
+ const resp = await window.$http.post(window.baseUrl('/images/gallery'), formData);
+ return resp.data;
}
function registerEditorShortcuts(editor) {
@@ -152,23 +168,24 @@ function codePlugin() {
});
}
- function codeMirrorContainerToPre($codeMirrorContainer) {
- let textArea = $codeMirrorContainer[0].querySelector('textarea');
- let code = textArea.textContent;
- let lang = $codeMirrorContainer[0].getAttribute('data-lang');
-
- $codeMirrorContainer.removeAttr('contentEditable');
- let $pre = $('');
- $pre.append($('
`;
html += '';
win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
- });
+ }, 'gallery');
}
},
@@ -458,13 +534,50 @@ class WysiwygEditor {
},
setup: function (editor) {
- editor.on('init ExecCommand change input NodeChange ObjectResized', editorChange);
+ editor.on('ExecCommand change input NodeChange ObjectResized', editorChange);
+
+ editor.on('init', () => {
+ editorChange();
+ // Scroll to the content if needed.
+ const queryParams = (new URL(window.location)).searchParams;
+ const scrollId = queryParams.get('content-id');
+ if (scrollId) {
+ scrollToText(scrollId);
+ }
+
+ // Override for touch events to allow scroll on mobile
+ const container = editor.getContainer();
+ const toolbarButtons = container.querySelectorAll('.mce-btn');
+ for (let button of toolbarButtons) {
+ button.addEventListener('touchstart', event => {
+ event.stopPropagation();
+ });
+ }
+ window.editor = editor;
+ });
function editorChange() {
let content = editor.getContent();
window.$events.emit('editor-html-change', content);
}
+ function scrollToText(scrollId) {
+ const element = editor.dom.get(encodeURIComponent(scrollId).replace(/!/g, '%21'));
+ if (!element) {
+ return;
+ }
+
+ // scroll the element into the view and put the cursor at the end.
+ element.scrollIntoView();
+ editor.selection.select(element, true);
+ editor.selection.collapse(false);
+ editor.focus();
+ }
+
+ listenForBookStackEditorEvents(editor);
+
+ // TODO - Update to standardise across both editors
+ // Use events within listenForBookStackEditorEvents instead (Different event signature)
window.$events.listen('editor-html-update', html => {
editor.setContent(html);
editor.selection.select(editor.getBody(), true);
@@ -495,6 +608,18 @@ class WysiwygEditor {
let dom = editor.dom,
rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());
+ // Template insertion
+ const templateId = event.dataTransfer.getData('bookstack/template');
+ if (templateId) {
+ event.preventDefault();
+ window.$http.get(`/templates/${templateId}`).then(resp => {
+ editor.selection.setRng(rng);
+ editor.undoManager.transact(function () {
+ editor.execCommand('mceInsertContent', false, resp.data.html);
+ });
+ });
+ }
+
// Don't allow anything to be dropped in a captioned image.
if (dom.getParent(rng.startContainer, '.mceTemp')) {
event.preventDefault();
@@ -522,16 +647,17 @@ class WysiwygEditor {
html += ``;
html += '';
editor.execCommand('mceInsertContent', false, html);
- });
+ }, 'gallery');
}
});
// Paste image-uploads
- editor.on('paste', event => editorPaste(event, editor));
+ editor.on('paste', event => editorPaste(event, editor, context));
+
}
};
}
}
-module.exports = WysiwygEditor;
+export default WysiwygEditor;