dynamic editor image drag

app/javascript/template_builder/builder.vue

@@ -3,8 +3,10 @@
     ref="dragContainer"
     style="max-width: 1600px"
     :class="nativeView ? (isSheetView ? 'bg-base-100' : 'px-4') : 'mx-auto pl-3 md:pl-4 h-full'"
+    @dragstart="isInternalDrag = true"
+    @dragend="isInternalDrag = false"
     @dragover="onDragover"
-    @drop="isDragFile = false"
+    @drop="[isDragFile = false, isInternalDrag = false]"
   >
     <HoverDropzone
       v-if="sortedDocuments.length && withUploadButton && editable && !isSheetView"
@@ -1390,6 +1392,7 @@ export default {
       drawOption: null,
       dragField: null,
       isDragFile: false,
+      isInternalDrag: false,
       isMathLoaded: false,
       isRevisionsModalOpen: false,
       isDocumentsDrawerOpen: false,
@@ -2039,8 +2042,18 @@ export default {
 
         ref.x = e.clientX - ref.offsetX
         ref.y = e.clientY - ref.offsetY
-      } else if (e.dataTransfer?.types?.includes('Files') && !this.editModalDocumentUuid) {
+      } else if (e.dataTransfer?.types?.includes('Files') && !this.editModalDocumentUuid && !this.isInternalDrag) {
-        this.isDragFile = true
+        const items = Array.from(e.dataTransfer.items)
+
+        if (this.dynamicDocuments.length && items.length && items.every((item) => item.type.startsWith('image/'))) {
+          if (!e.defaultPrevented) {
+            e.preventDefault()
+
+            e.dataTransfer.dropEffect = 'none'
+          }
+        } else {
+          this.isDragFile = true
+        }
       }
     },
     onWindowDragLeave (event) {

app/javascript/template_builder/dynamic_section.vue

@@ -639,6 +639,20 @@ export default {
 
       if (!file) return
 
+      const image = await this.uploadImage(file)
+
+      if (image) {
+        this.editor.chain().focus().insertContent(image).run()
+      }
+    },
+    async insertImageFiles (files, pos) {
+      const images = (await Promise.all(files.map(this.uploadImage))).filter(Boolean)
+
+      if (images.length) {
+        this.editor.chain().focus().insertContentAt(pos, images).run()
+      }
+    },
+    async uploadImage (file) {
       const formData = new FormData()
 
       formData.append('file', file)
@@ -656,9 +670,7 @@ export default {
 
       await this.$nextTick()
 
-      this.editor.chain().focus()
+      return { type: 'image', attrs: { htmlAttrs: { src: `blob:${data.uuid}`, style: 'max-width: 100%' } } }
-        .insertContent({ type: 'image', attrs: { htmlAttrs: { src: `blob:${data.uuid}`, style: 'max-width: 100%' } } })
-        .run()
     },
     setDynamicMenuCoords (editor) {
       const { from, to } = editor.state.selection
@@ -975,7 +987,7 @@ export default {
     onSelectedAreaChange () {
       this.save()
     },
-    onFieldDrop (view, event, _slice, moved) {
+    onFieldDrop (view, event, slice, moved) {
       this.isAreaDrag = false
 
       if (moved) {
@@ -983,8 +995,9 @@ export default {
       }
 
       const draggedField = this.fieldsDragFieldRef?.value || this.customDragFieldRef?.value || this.dragField
+      const imageFiles = slice.size ? [] : Array.from(event.dataTransfer.files).filter((file) => file.type.startsWith('image/'))
 
-      if (!draggedField) return false
+      if (!draggedField && !imageFiles.length) return false
 
       event.preventDefault()
 
@@ -992,14 +1005,18 @@ export default {
 
       if (!pos) return false
 
-      this.insertFieldAtRange({
+      if (draggedField) {
-        sourceField: draggedField,
+        this.insertFieldAtRange({
-        existingField: this.fieldsDragFieldRef?.value,
+          sourceField: draggedField,
-        from: pos.pos
+          existingField: this.fieldsDragFieldRef?.value,
-      })
+          from: pos.pos
+        })
 
-      this.fieldsDragFieldRef.value = null
+        this.fieldsDragFieldRef.value = null
-      this.customDragFieldRef.value = null
+        this.customDragFieldRef.value = null
+      } else {
+        this.insertImageFiles(imageFiles, pos.pos)
+      }
 
       return true
     },