scroll on preview image

app/javascript/template_builder/builder.vue

@@ -80,7 +80,7 @@
           :editable="editable"
           :template="template"
           :is-direct-upload="isDirectUpload"
-          @scroll-to="scrollIntoDocument(item)"
+          @scroll-to="scrollIntoDocument"
           @remove="onDocumentRemove"
           @replace="onDocumentReplace"
           @up="moveDocument(item, -1)"
@@ -448,10 +448,10 @@ export default {
         this.documentRefs.push(el)
       }
     },
-    scrollIntoDocument (item) {
+    scrollIntoDocument (item, page) {
-      const ref = this.documentRefs.find((e) => e.document.uuid === item.attachment_uuid)
+      const documentRef = this.documentRefs.find((e) => e.document.uuid === item.attachment_uuid)
-
+      documentRef.scrollIntoDocument(page)
-      ref.$el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      // pageRef.$el.scrollIntoView({ behavior: 'smooth', block: 'start' })
     },
     onKeyUp (e) {
       if (e.code === 'Escape') {

app/javascript/template_builder/document.vue

@@ -91,6 +91,10 @@ export default {
     scrollToArea (area) {
       this.pageRefs[area.page].areaRefs.find((e) => e.area === area).$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
     },
+    scrollIntoDocument (page) {
+      const ref = this.pageRefs.find((e) => e.image.uuid === page.uuid)
+      ref.$el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    },
     setPageRefs (el) {
       if (el) {
         this.pageRefs.push(el)

app/javascript/template_builder/preview.vue

@@ -13,7 +13,7 @@
       </div>
       <div
         class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1"
-        @click="$emit('scroll-to', item)"
+        @click="$emit('scroll-to', item, previewImage)"
       >
         <div
           v-if="editable && index==0"