Made it possible to drag in template content

diff --git a/resources/assets/js/components/markdown-editor.js b/resources/assets/js/components/markdown-editor.js
index ac77cb4594b2fb00875f09976b2634ac5a3d58e2..7f3d4ef247d15f9aea1c88d496de415fb0c15df3 100644 (file)
--- a/resources/assets/js/components/markdown-editor.js
+++ b/resources/assets/js/components/markdown-editor.js
@@ -222,16 +222,30 @@ class MarkdownEditor {
             }
         });
 
-        // Handle images on drag-drop
+        // Handle image & content drag n drop
         cm.on('drop', (cm, event) => {
-            event.stopPropagation();
-            event.preventDefault();
-            let cursorPos = cm.coordsChar({left: event.pageX, top: event.pageY});
-            cm.setCursor(cursorPos);
-            if (!event.dataTransfer || !event.dataTransfer.files) return;
-            for (let i = 0; i < event.dataTransfer.files.length; i++) {
-                uploadImage(event.dataTransfer.files[i]);
+
+            const templateId = event.dataTransfer.getData('bookstack/template');
+            if (templateId) {
+                const cursorPos = cm.coordsChar({left: event.pageX, top: event.pageY});
+                cm.setCursor(cursorPos);
+                event.preventDefault();
+                window.$http.get(`/templates/${templateId}`).then(resp => {
+                    const content = resp.data.markdown || resp.data.html;
+                    cm.replaceSelection(content);
+                });
             }
+
+            if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length > 0) {
+                const cursorPos = cm.coordsChar({left: event.pageX, top: event.pageY});
+                cm.setCursor(cursorPos);
+                event.stopPropagation();
+                event.preventDefault();
+                for (let i = 0; i < event.dataTransfer.files.length; i++) {
+                    uploadImage(event.dataTransfer.files[i]);
+                }
+            }
+
         });
 
         // Helper to replace editor content

diff --git a/resources/assets/js/components/template-manager.js b/resources/assets/js/components/template-manager.js
index b966762d2ccaac33e44b74a0cc0862f04530c488..d004a43076e2e788aa3983f08283eb304ee212a2 100644 (file)
--- a/resources/assets/js/components/template-manager.js
+++ b/resources/assets/js/components/template-manager.js
@@ -16,6 +16,9 @@ class TemplateManager {
         // Template list item content click
         DOM.onChildEvent(this.elem, '.template-item-content', 'click', this.handleTemplateItemClick.bind(this));
 
+        // Template list item drag start
+        DOM.onChildEvent(this.elem, '.template-item', 'dragstart', this.handleTemplateItemDragStart.bind(this));
+
         this.setupSearchBox();
     }
 
@@ -24,6 +27,12 @@ class TemplateManager {
         this.insertTemplate(templateId, 'replace');
     }
 
+    handleTemplateItemDragStart(event, templateItem) {
+        const templateId = templateItem.closest('[template-id]').getAttribute('template-id');
+        event.dataTransfer.setData('bookstack/template', templateId);
+        event.dataTransfer.setData('text/plain', templateId);
+    }
+
     handleTemplateActionClick(event, actionButton) {
         event.stopPropagation();
 

diff --git a/resources/assets/js/components/wysiwyg-editor.js b/resources/assets/js/components/wysiwyg-editor.js
index be0aaf18a1ebc742cd1adabe4b413e3466cbcaab..c03c0d2aa4e8bba75b8206e7060d50bb4dc26f06 100644 (file)
--- a/resources/assets/js/components/wysiwyg-editor.js
+++ b/resources/assets/js/components/wysiwyg-editor.js
@@ -608,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();

diff --git a/resources/assets/sass/_tinymce.scss b/resources/assets/sass/_tinymce.scss
index 4c50f14d2f020ed371b0e88a9ccdb4cb2fb5e10a..27c3b28d01b50874e035ce055362e3784f64967b 100644 (file)
--- a/resources/assets/sass/_tinymce.scss
+++ b/resources/assets/sass/_tinymce.scss
@@ -61,6 +61,7 @@
 
 .page-content.mce-content-body {
   padding-top: 16px;
+  outline: none;
 }
 
 // Fix to prevent 'No color' option from not being clickable.