X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/4ef362143bf9f2508b69da260e07ba0330ca6edf..refs/pull/2303/head:/resources/js/components/wysiwyg-editor.js diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index 1c8c71099..a32e78161 100644 --- a/resources/js/components/wysiwyg-editor.js +++ b/resources/js/components/wysiwyg-editor.js @@ -137,7 +137,7 @@ function codePlugin() { if (!elemIsCodeBlock(selectedNode)) { const providedCode = editor.selection.getNode().textContent; - window.vues['code-editor'].open(providedCode, '', (code, lang) => { + window.components.first('code-editor').open(providedCode, '', (code, lang) => { const wrap = document.createElement('div'); wrap.innerHTML = `
`;
wrap.querySelector('code').innerText = code;
@@ -155,7 +155,7 @@ function codePlugin() {
let lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : '';
let currentCode = selectedNode.querySelector('textarea').textContent;
- window.vues['code-editor'].open(currentCode, lang, (code, lang) => {
+ window.components.first('code-editor').open(currentCode, lang, (code, lang) => {
const editorElem = selectedNode.querySelector('.CodeMirror');
const cmInstance = editorElem.CodeMirror;
if (cmInstance) {
@@ -236,7 +236,7 @@ function codePlugin() {
});
}
-function drawIoPlugin(drawioUrl, isDarkMode) {
+function drawIoPlugin(drawioUrl, isDarkMode, pageId) {
let pageEditor = null;
let currentNode = null;
@@ -270,7 +270,6 @@ function drawIoPlugin(drawioUrl, isDarkMode) {
async function updateContent(pngData) {
const id = "image-" + Math.random().toString(16).slice(2);
const loadingImage = window.baseUrl('/loading.gif');
- const pageId = Number(document.getElementById('page-editor').getAttribute('page-id'));
// Handle updating an existing image
if (currentNode) {
@@ -402,6 +401,11 @@ function listenForBookStackEditorEvents(editor) {
editor.setContent(content);
});
+ // Insert editor content at the current location
+ window.$events.listen('editor::insert', ({html}) => {
+ editor.insertContent(html);
+ });
+
// Focus on the editor
window.$events.listen('editor::focus', () => {
editor.focus();
@@ -410,19 +414,19 @@ function listenForBookStackEditorEvents(editor) {
class WysiwygEditor {
- constructor(elem) {
- this.elem = elem;
- const pageEditor = document.getElementById('page-editor');
- this.pageId = pageEditor.getAttribute('page-id');
- this.textDirection = pageEditor.getAttribute('text-direction');
+ setup() {
+ this.elem = this.$el;
+
+ this.pageId = this.$opts.pageId;
+ this.textDirection = this.$opts.textDirection;
this.isDarkMode = document.documentElement.classList.contains('dark-mode');
- this.plugins = "image table textcolor paste link autolink fullscreen imagetools code customhr autosave lists codeeditor media";
+ this.plugins = "image table textcolor paste link autolink fullscreen code customhr autosave lists codeeditor media";
this.loadPlugins();
this.tinyMceConfig = this.getTinyMceConfig();
- window.$events.emitPublic(elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig});
+ window.$events.emitPublic(this.elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig});
window.tinymce.init(this.tinyMceConfig);
}
@@ -433,7 +437,7 @@ class WysiwygEditor {
const drawioUrlElem = document.querySelector('[drawio-url]');
if (drawioUrlElem) {
const url = drawioUrlElem.getAttribute('drawio-url');
- drawIoPlugin(url, this.isDarkMode);
+ drawIoPlugin(url, this.isDarkMode, this.pageId);
this.plugins += ' drawio';
}
@@ -639,6 +643,7 @@ class WysiwygEditor {
});
+ // Custom drop event handling
editor.on('drop', function (event) {
let dom = editor.dom,
rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());