Merge from docusealco/wip

This reverts commit 5212773d0a.

.rubocop.yml

@@ -48,6 +48,9 @@ Style/MultipleComparison:
 Style/NumericPredicate:
   Enabled: false
 
+Style/MinMaxComparison:
+  Enabled: false
+
 Naming/PredicateMethod:
   Enabled: false
 

Dockerfile

@@ -9,7 +9,7 @@ RUN apk --no-cache add fontforge wget && \
     wget https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSansSymbols2/hinted/ttf/NotoSansSymbols2-Regular.ttf && \
     wget https://github.com/Maxattax97/gnu-freefont/raw/master/ttf/FreeSans.ttf && \
     wget https://github.com/impallari/DancingScript/raw/master/OFL.txt && \
-    wget -O /model.onnx "https://github.com/docusealco/fields-detection/releases/download/2.0.0/model_704_int8.onnx" && \
+    wget -O /model.onnx "https://github.com/docusealco/fields-detection/releases/download/2.1.0/model_704_int8.onnx" && \
     wget -O pdfium-linux.tgz "https://github.com/docusealco/pdfium-binaries/releases/latest/download/pdfium-linux-$(uname -m | sed 's/x86_64/x64/;s/aarch64/arm64/').tgz" && \
     mkdir -p /pdfium-linux && \
     tar -xzf pdfium-linux.tgz -C /pdfium-linux
@@ -47,12 +47,14 @@ FROM ruby:3.4.2-alpine AS app
 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
 ENV LD_PRELOAD=/lib/libgcompat.so.0
-ENV OPENSSL_CONF=/app/openssl_legacy.cnf
+ENV OPENSSL_CONF=/etc/openssl_legacy.cnf
 
 WORKDIR /app
 
 RUN apk add --no-cache sqlite-dev libpq-dev mariadb-dev vips-dev yaml-dev redis libheif vips-heif gcompat ttf-freefont && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
 
+RUN addgroup -g 2000 docuseal && adduser -u 2000 -G docuseal -s /bin/sh -D -h /home/docuseal docuseal
+
 RUN echo $'.include = /etc/ssl/openssl.cnf\n\
 \n\
 [provider_sect]\n\
@@ -63,36 +65,38 @@ legacy = legacy_sect\n\
 activate = 1\n\
 \n\
 [legacy_sect]\n\
-activate = 1' >> /app/openssl_legacy.cnf
+activate = 1' >> /etc/openssl_legacy.cnf
 
-COPY ./Gemfile ./Gemfile.lock ./
+COPY --chown=docuseal:docuseal ./Gemfile ./Gemfile.lock ./
 
 RUN apk add --no-cache build-base && bundle install && apk del --no-cache build-base && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf && ln -sf /usr/lib/libonnxruntime.so.1 $(ruby -e "print Dir[Gem::Specification.find_by_name('onnxruntime').gem_dir + '/vendor/*.so'].first")
 
 RUN echo 'https://dl-cdn.alpinelinux.org/alpine/edge/main' >> /etc/apk/repositories && echo 'https://dl-cdn.alpinelinux.org/alpine/edge/community' >> /etc/apk/repositories && apk add --no-cache onnxruntime
 
-COPY ./bin ./bin
-COPY ./app ./app
-COPY ./config ./config
-COPY ./db/migrate ./db/migrate
-COPY ./log ./log
-COPY ./lib ./lib
-COPY ./public ./public
-COPY ./tmp ./tmp
-COPY LICENSE README.md Rakefile config.ru .version ./
-COPY .version ./public/version
+COPY --chown=docuseal:docuseal ./bin ./bin
+COPY --chown=docuseal:docuseal ./app ./app
+COPY --chown=docuseal:docuseal ./config ./config
+COPY --chown=docuseal:docuseal ./db/migrate ./db/migrate
+COPY --chown=docuseal:docuseal ./log ./log
+COPY --chown=docuseal:docuseal ./lib ./lib
+COPY --chown=docuseal:docuseal ./public ./public
+COPY --chown=docuseal:docuseal ./tmp ./tmp
+COPY --chown=docuseal:docuseal LICENSE README.md Rakefile config.ru .version ./
+COPY --chown=docuseal:docuseal .version ./public/version
 
-COPY --from=download /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts
+COPY --chown=docuseal:docuseal --from=download /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts
 COPY --from=download /fonts/FreeSans.ttf /usr/share/fonts/freefont
 COPY --from=download /pdfium-linux/lib/libpdfium.so /usr/lib/libpdfium.so
 COPY --from=download /pdfium-linux/licenses/pdfium.txt /usr/lib/libpdfium-LICENSE.txt
-COPY --from=download /model.onnx /app/tmp/model.onnx
-COPY --from=webpack /app/public/packs ./public/packs
+COPY --chown=docuseal:docuseal --from=download /model.onnx /app/tmp/model.onnx
+COPY --chown=docuseal:docuseal --from=webpack /app/public/packs ./public/packs
 
-RUN ln -s /fonts /app/public/fonts
-RUN bundle exec bootsnap precompile -j 1 --gemfile app/ lib/
+RUN ln -s /fonts /app/public/fonts && \
+    bundle exec bootsnap precompile -j 1 --gemfile app/ lib/ && \
+    chown -R docuseal:docuseal /app/tmp/cache
 
 WORKDIR /data/docuseal
+ENV HOME=/home/docuseal
 ENV WORKDIR=/data/docuseal
 
 EXPOSE 3000

app/controllers/api/submission_documents_controller.rb

@@ -5,34 +5,17 @@ module Api
     load_and_authorize_resource :submission
 
     def index
+      is_merge = params[:merge] == 'true' &&
+                 (@submission.schema_documents || @submission.template.schema_documents).size > 1
+
       documents =
         if @submission.submitters.all?(&:completed_at?)
-          last_submitter = @submission.submitters.max_by(&:completed_at)
-
-          if last_submitter.documents_attachments.blank?
-            last_submitter.documents_attachments = Submissions::EnsureResultGenerated.call(last_submitter)
-          end
-
-          last_submitter.documents_attachments
+          build_completed_documents(@submission, merge: is_merge)
         else
-          values_hash = Submissions::GeneratePreviewAttachments.build_values_hash(@submission)
-
-          if @submission.preview_documents.present? &&
-             @submission.preview_documents.all? { |s| s.metadata['values_hash'] == values_hash }
-            @submission.preview_documents
-          else
-            ApplicationRecord.no_touching do
-              @submission.preview_documents.each(&:destroy)
-            end
-
-            Submissions::GeneratePreviewAttachments.call(@submission, values_hash:)
-          end
+          build_preview_documents(@submission, merge: is_merge)
         end
 
-      ActiveRecord::Associations::Preloader.new(
-        records: documents,
-        associations: [:blob]
-      ).call
+      ActiveRecord::Associations::Preloader.new(records: documents, associations: [:blob]).call
 
       expires_at = Accounts.link_expires_at(current_account)
 
@@ -43,5 +26,50 @@ module Api
         end
       }
     end
+
+    private
+
+    def build_completed_documents(submission, merge: false)
+      last_submitter = submission.submitters.max_by(&:completed_at)
+
+      if merge
+        if submission.merged_document_attachment.blank?
+          submission.merged_document_attachment =
+            Submissions::GenerateCombinedAttachment.call(last_submitter, with_audit: false)
+        end
+
+        [submission.merged_document_attachment]
+      else
+        if last_submitter.documents_attachments.blank?
+          last_submitter.documents_attachments = Submissions::EnsureResultGenerated.call(last_submitter)
+        end
+
+        last_submitter.documents_attachments
+      end
+    end
+
+    def build_preview_documents(submission, merge: false)
+      values_hash = Submissions::GeneratePreviewAttachments.build_values_hash(submission)
+
+      if merge
+        if submission.preview_merged_document_attachment.present? &&
+           submission.preview_merged_document_attachment.metadata['values_hash'] == values_hash
+          [submission.preview_merged_document_attachment]
+        else
+          ApplicationRecord.no_touching { submission.preview_merged_document_attachment&.destroy }
+
+          Submissions::GeneratePreviewAttachments.call(submission, values_hash:, merge: true)
+        end
+      elsif submission.preview_documents.present? &&
+            submission.preview_documents.all? { |s| s.metadata['values_hash'] == values_hash }
+        submission.preview_documents
+      else
+        ApplicationRecord.no_touching do
+          submission.preview_documents.each(&:destroy)
+        end
+
+        Submissions::GeneratePreviewAttachments.call(submission, values_hash:)
+      end
+    end
   end
 end

app/controllers/application_controller.rb

@@ -17,6 +17,7 @@ class ApplicationController < ActionController::Base
 
   helper_method :button_title,
                 :current_account,
+                :true_ability,
                 :form_link_host,
                 :svg_icon
 
@@ -102,6 +103,10 @@ class ApplicationController < ActionController::Base
     current_user&.account
   end
 
+  def true_ability
+    @true_ability ||= Ability.new(true_user)
+  end
+
   def maybe_redirect_to_setup
     redirect_to setup_index_path unless User.exists?
   end

app/controllers/templates_clone_controller.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+class TemplatesCloneController < ApplicationController
+  load_and_authorize_resource :template, instance_name: :base_template
+
+  def new
+    authorize!(:create, Template)
+
+    @template = Template.new(name: "#{@base_template.name} (#{I18n.t('clone')})")
+  end
+
+  def create
+    ActiveRecord::Associations::Preloader.new(
+      records: [@base_template],
+      associations: [schema_documents: :preview_images_attachments]
+    ).call
+
+    @template = Templates::Clone.call(@base_template, author: current_user,
+                                                      name: params.dig(:template, :name),
+                                                      folder_name: params[:folder_name])
+
+    authorize!(:create, @template)
+
+    if params[:account_id].present? && true_ability.authorize!(:manage, Account.find(params[:account_id]))
+      @template.account_id = params[:account_id]
+      @template.author = true_user if true_user.account_id == @template.account_id
+      @template.folder = @template.account.default_template_folder if @template.account_id != current_account.id
+    else
+      @template.account = current_account
+    end
+
+    Templates.maybe_assign_access(@template)
+
+    if @template.save
+      Templates::CloneAttachments.call(template: @template, original_template: @base_template)
+
+      SearchEntries.enqueue_reindex(@template)
+
+      WebhookUrls.enqueue_events(@template, 'template.created')
+
+      maybe_redirect_to_template(@template)
+    else
+      render turbo_stream: turbo_stream.replace(:modal, partial: 'templates_clone/form'), status: :unprocessable_content
+    end
+  end
+
+  private
+
+  def maybe_redirect_to_template(template)
+    if template.account == current_account
+      redirect_to(edit_template_path(template))
+    else
+      redirect_back(fallback_location: root_path, notice: I18n.t('template_has_been_cloned'))
+    end
+  end
+end

app/controllers/templates_controller.rb

@@ -3,8 +3,6 @@
 class TemplatesController < ApplicationController
   load_and_authorize_resource :template
 
-  before_action :load_base_template, only: %i[new create]
-
   def show
     submissions = @template.submissions.accessible_by(current_ability)
     submissions = submissions.active if @template.archived_at.blank?
@@ -26,9 +24,7 @@ class TemplatesController < ApplicationController
     redirect_to root_path
   end
 
-  def new
-    @template.name = "#{@base_template.name} (#{I18n.t('clone')})" if @base_template
-  end
+  def new; end
 
   def edit
     ActiveRecord::Associations::Preloader.new(
@@ -48,37 +44,18 @@ class TemplatesController < ApplicationController
   end
 
   def create
-    if @base_template
-      ActiveRecord::Associations::Preloader.new(
-        records: [@base_template],
-        associations: [schema_documents: :preview_images_attachments]
-      ).call
-
-      @template = Templates::Clone.call(@base_template, author: current_user,
-                                                        name: params.dig(:template, :name),
-                                                        folder_name: params[:folder_name])
-    else
-      @template.author = current_user
-      @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
-    end
-
-    if params[:account_id].present? && authorized_clone_account_id?(params[:account_id])
-      @template.account_id = params[:account_id]
-      @template.folder = @template.account.default_template_folder if @template.account_id != current_account.id
-    else
-      @template.account = current_account
-    end
+    @template.author = current_user
+    @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
+    @template.account = current_account
 
     Templates.maybe_assign_access(@template)
 
     if @template.save
-      Templates::CloneAttachments.call(template: @template, original_template: @base_template) if @base_template
-
       SearchEntries.enqueue_reindex(@template)
 
       WebhookUrls.enqueue_events(@template, 'template.created')
 
-      maybe_redirect_to_template(@template)
+      redirect_to(edit_template_path(@template))
     else
       render turbo_stream: turbo_stream.replace(:modal, template: 'templates/new'), status: :unprocessable_content
     end
@@ -132,23 +109,4 @@ class TemplatesController < ApplicationController
                     areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]] }
     )
   end
-
-  def authorized_clone_account_id?(account_id)
-    true_user.account_id.to_s == account_id.to_s ||
-      true_user.account.linked_accounts.accessible_by(current_ability).exists?(id: account_id)
-  end
-
-  def maybe_redirect_to_template(template)
-    if template.account == current_account
-      redirect_to(edit_template_path(@template))
-    else
-      redirect_back(fallback_location: root_path, notice: I18n.t('template_has_been_cloned'))
-    end
-  end
-
-  def load_base_template
-    return if params[:base_template_id].blank?
-
-    @base_template = Template.accessible_by(current_ability).find_by(id: params[:base_template_id])
-  end
 end

app/controllers/templates_detect_fields_controller.rb

@@ -11,11 +11,14 @@ class TemplatesDetectFieldsController < ApplicationController
     sse = SSE.new(response.stream)
 
     documents = @template.schema_documents.preload(:blob)
+    documents = documents.where(uuid: params[:attachment_uuid]) if params[:attachment_uuid].present?
+
+    page_number = params[:page].present? ? params[:page].to_i : nil
 
     documents.each do |document|
       io = StringIO.new(document.download)
 
-      Templates::DetectFields.call(io, attachment: document) do |(attachment_uuid, page, fields)|
+      Templates::DetectFields.call(io, attachment: document, page_number:) do |(attachment_uuid, page, fields)|
         sse.write({ attachment_uuid:, page:, fields: })
       end
     end

app/javascript/submission_form/area.vue

@@ -461,7 +461,7 @@ export default {
         phone: IconPhoneCheck,
         payment: IconCreditCard,
         verification: IconId,
-        kba: IconUserScan,
+        kba: IconUserScan
       }
     },
     image () {

app/javascript/submission_form/form.vue

@@ -1244,17 +1244,31 @@ export default {
       } else if (['equal', 'contains'].includes(condition.action) && field) {
         if (field.options) {
           const option = field.options.find((o) => o.uuid === condition.value)
-          const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
 
-          return values.includes(this.optionValue(option, field.options.indexOf(option)))
+          if (option) {
+            const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
+
+            return values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else {
+            return false
+          }
         } else {
           return [this.values[condition.field_uuid] ?? defaultValue].flat().includes(condition.value)
         }
       } else if (['not_equal', 'does_not_contain'].includes(condition.action) && field) {
-        const option = field.options.find((o) => o.uuid === condition.value)
-        const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
+        if (field.options) {
+          const option = field.options.find((o) => o.uuid === condition.value)
 
-        return !values.includes(this.optionValue(option, field.options.indexOf(option)))
+          if (option) {
+            const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
+
+            return !values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else {
+            return false
+          }
+        } else {
+          return false
+        }
       } else {
         return true
       }

app/javascript/submission_form/kba_step.vue

@@ -10,9 +10,15 @@
     <template v-else>{{ field.name || 'Knowledge Based Authentication' }}</template>
     <span
       v-if="questions"
-      class="float-right text-base font-normal text-neutral-500 mt-1 whitespace-nowrap"
+      class="float-right font-normal text-neutral-500 mt-1 whitespace-nowrap text-right text-sm"
     >
-      Question {{ currentQuestionIndex + 1 }} / {{ questions.length }}
+      <span>Question {{ currentQuestionIndex + 1 }} / {{ questions.length }}</span>
+      <span
+        v-if="timeLeftSeconds !== null"
+        class="block"
+      >
+        Time left: {{ formattedTimeLeft }}
+      </span>
     </span>
   </label>
   <div
@@ -54,7 +60,9 @@
   <div v-else-if="questions && !error">
     <form @submit.prevent="nextQuestion">
       <div class="mb-6 px-1">
-        <p class="font-semibold mb-4 text-lg">{{ currentQuestion.prompt }}</p>
+        <p class="font-semibold mb-4 text-lg">
+          {{ currentQuestion.prompt }}
+        </p>
         <div class="space-y-3.5 mx-auto">
           <div
             v-for="(answer, index) in currentQuestion.answers"
@@ -316,6 +324,8 @@ export default {
       reference: null,
       answers: {},
       error: null,
+      timeLeftSeconds: null,
+      countdownIntervalId: null,
       form: {
         fn: '',
         ln: '',
@@ -337,6 +347,9 @@ export default {
     isRequiredFieldEmpty () {
       return this.emptyValueRequiredStep && this.emptyValueRequiredStep[0] !== this.field
     },
+    kbaTimeLimitSeconds () {
+      return 90
+    },
     states () {
       return [
         { code: 'AL', name: 'Alabama' },
@@ -394,9 +407,53 @@ export default {
     },
     isLastQuestion () {
       return this.questions && this.currentQuestionIndex === this.questions.length - 1
+    },
+    formattedTimeLeft () {
+      if (this.timeLeftSeconds === null) return ''
+
+      const minutes = Math.floor(this.timeLeftSeconds / 60)
+      const seconds = this.timeLeftSeconds % 60
+
+      return `${minutes}:${String(seconds).padStart(2, '0')}`
     }
   },
+  beforeUnmount () {
+    this.clearCountdown()
+  },
   methods: {
+    clearCountdown () {
+      if (this.countdownIntervalId) {
+        clearInterval(this.countdownIntervalId)
+        this.countdownIntervalId = null
+      }
+
+      this.timeLeftSeconds = null
+    },
+    startCountdown () {
+      this.clearCountdown()
+
+      this.timeLeftSeconds = this.kbaTimeLimitSeconds
+
+      this.countdownIntervalId = setInterval(() => {
+        if (this.timeLeftSeconds === null) return
+
+        this.timeLeftSeconds -= 1
+
+        if (this.timeLeftSeconds <= 0) {
+          this.handleTimeout()
+        }
+      }, 1000)
+    },
+    handleTimeout () {
+      this.clearCountdown()
+
+      this.questions = null
+      this.token = null
+      this.reference = null
+      this.answers = {}
+      this.currentQuestionIndex = 0
+      this.error = `Knowledge Based Authentication timed out. You only have ${this.kbaTimeLimitSeconds} seconds to complete the verification. Please retry.`
+    },
     nextQuestion () {
       if (this.isLastQuestion) {
         this.$emit('submit')
@@ -405,6 +462,8 @@ export default {
       }
     },
     restartKba () {
+      this.clearCountdown()
+
       this.questions = null
       this.token = null
       this.reference = null
@@ -415,6 +474,7 @@ export default {
     async startKba () {
       this.isLoading = true
       this.error = null
+      this.clearCountdown()
 
       try {
         const payload = { ...this.form, submitter_slug: this.submitterSlug }
@@ -457,6 +517,8 @@ export default {
           this.questions.forEach(q => {
             this.answers[q.id] = null
           })
+
+          this.startCountdown()
         } else {
           throw new Error('Invalid KBA response')
         }
@@ -467,6 +529,8 @@ export default {
       }
     },
     async submit () {
+      this.clearCountdown()
+
       this.isSubmitting = true
       this.error = null
 

app/javascript/template_builder/area.vue

@@ -8,7 +8,7 @@
     @touchstart="startTouchDrag"
   >
     <div
-      v-if="isSelected || isDraw"
+      v-if="isSelected || isDraw || isInMultiSelection"
       class="top-0 bottom-0 right-0 left-0 absolute border border-1.5 pointer-events-none"
       :class="activeBorderClasses"
     />
@@ -24,7 +24,7 @@
         :style="{ left: (cellW / area.w * 100) + '%' }"
       >
         <span
-          v-if="index === 0 && editable"
+          v-if="index === 0 && editable && !isInMultiSelection"
           class="h-2.5 w-2.5 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-ew-resize z-10"
           style="left: -4px"
           @mousedown.stop="startResizeCell"
@@ -32,7 +32,7 @@
       </div>
     </div>
     <div
-      v-if="field?.type && (isSelected || isNameFocus)"
+      v-if="field?.type && (isSelected || isNameFocus) && !isInMultiSelection"
       class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10 field-area-controls"
       style="top: -25px; height: 25px"
       @mousedown.stop
@@ -48,7 +48,7 @@
         :menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px] mt-[1px]'"
         :submitters="template.submitters"
         @update:model-value="save"
-        @click="selectedAreaRef.value = area"
+        @click="selectedAreasRef.value = [area]"
       />
       <FieldType
         v-model="field.type"
@@ -57,7 +57,7 @@
         :button-classes="'px-1'"
         :menu-classes="'bg-white rounded-t-none'"
         @update:model-value="[maybeUpdateOptions(), save()]"
-        @click="selectedAreaRef.value = area"
+        @click="selectedAreasRef.value = [area]"
       />
       <span
         v-if="field.type !== 'checkbox' || field.name"
@@ -146,7 +146,7 @@
               @click-font="isShowFontModal = true"
               @click-description="isShowDescriptionModal = true"
               @click-condition="isShowConditionsModal = true"
-              @scroll-to="[selectedAreaRef.value = $event, $emit('scroll-to', $event)]"
+              @scroll-to="[selectedAreasRef.value = [$event], $emit('scroll-to', $event)]"
             />
           </ul>
         </span>
@@ -266,7 +266,7 @@
               ref="defaultValueSelect"
               class="bg-transparent outline-none focus:outline-none w-full"
               @change="[field.default_value = $event.target.value, field.readonly = !!field.default_value?.length, save()]"
-              @focus="selectedAreaRef.value = area"
+              @focus="selectedAreasRef.value = [area]"
               @keydown.enter="onDefaultValueEnter"
             >
               <option
@@ -293,7 +293,7 @@
               :class="{ 'cursor-text': isValueInput }"
               :placeholder="withFieldPlaceholder && !isValueInput ? defaultField?.title || field.title || field.name || defaultName : (field.type === 'date' ? field.preferences?.format || t('type_value') : t('type_value'))"
               @blur="onDefaultValueBlur"
-              @focus="selectedAreaRef.value = area"
+              @focus="selectedAreasRef.value = [area]"
               @paste.prevent="onPaste"
               @keydown.enter="onDefaultValueEnter"
             >{{ field.default_value }}</span>
@@ -319,6 +319,7 @@
     <span
       v-if="field?.type && editable"
       class="h-4 w-4 lg:h-2.5 lg:w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
+      :class="{ 'z-30': isInMultiSelection }"
       @mousedown.stop="startResize"
       @touchstart="startTouchResize"
     />
@@ -398,7 +399,7 @@ export default {
     FieldSubmitter,
     IconX
   },
-  inject: ['template', 'selectedAreaRef', 'save', 't', 'isInlineSize'],
+  inject: ['template', 'save', 't', 'isInlineSize', 'selectedAreasRef', 'isCmdKeyRef'],
   props: {
     area: {
       type: Object,
@@ -463,6 +464,11 @@ export default {
       type: Object,
       required: false,
       default: null
+    },
+    isSelectMode: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to'],
@@ -646,7 +652,10 @@ export default {
       ]
     },
     isSelected () {
-      return this.selectedAreaRef.value === this.area
+      return this.selectedAreasRef.value.includes(this.area)
+    },
+    isInMultiSelection () {
+      return this.selectedAreasRef.value.length >= 2 && this.isSelected
     },
     positionStyle () {
       const { x, y, w, h } = this.area
@@ -683,10 +692,10 @@ export default {
     buildAreaOptionValue (area) {
       const option = this.optionsUuidIndex[area.option_uuid]
 
-      return option.value || `${this.t('option')} ${this.field.options.indexOf(option) + 1}`
+      return option?.value || `${this.t('option')} ${this.field.options.indexOf(option) + 1}`
     },
     maybeToggleDefaultValue () {
-      if (!this.editable) {
+      if (!this.editable || this.isCmdKeyRef.value) {
         return
       }
 
@@ -770,7 +779,7 @@ export default {
       }
     },
     onNameFocus (e) {
-      this.selectedAreaRef.value = this.area
+      this.selectedAreasRef.value = [this.area]
 
       this.isNameFocus = true
       this.$refs.name.style.minWidth = this.$refs.name.clientWidth + 'px'
@@ -906,6 +915,15 @@ export default {
       if (e.target.id === 'mask') {
         this.area.w = e.offsetX / e.target.clientWidth - this.area.x
         this.area.h = e.offsetY / e.target.clientHeight - this.area.y
+
+        if (this.isInMultiSelection) {
+          this.selectedAreasRef.value.forEach((area) => {
+            if (area !== this.area) {
+              area.w = this.area.w
+              area.h = this.area.h
+            }
+          })
+        }
       }
     },
     drag (e) {
@@ -931,7 +949,7 @@ export default {
 
       const rect = e.target.getBoundingClientRect()
 
-      this.selectedAreaRef.value = this.area
+      this.selectedAreasRef.value = [this.area]
 
       this.dragFrom = { x: rect.left - e.touches[0].clientX, y: rect.top - e.touches[0].clientY }
 
@@ -980,13 +998,23 @@ export default {
 
       e.preventDefault()
 
+      if (e.metaKey || e.ctrlKey) {
+        if (!this.selectedAreasRef.value.includes(this.area)) {
+          this.selectedAreasRef.value.push(this.area)
+        } else {
+          this.selectedAreasRef.value.splice(this.selectedAreasRef.value.indexOf(this.area), 1)
+        }
+
+        return
+      }
+
       if (this.editable) {
         this.isDragged = true
       }
 
       const rect = e.target.getBoundingClientRect()
 
-      this.selectedAreaRef.value = this.area
+      this.selectedAreasRef.value = [this.area]
 
       this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY }
 
@@ -1055,7 +1083,9 @@ export default {
       this.$emit('stop-drag')
     },
     startResize () {
-      this.selectedAreaRef.value = this.area
+      if (!this.selectedAreasRef.value.includes(this.area)) {
+        this.selectedAreasRef.value = [this.area]
+      }
 
       this.$el.getRootNode().addEventListener('mousemove', this.resize)
       this.$el.getRootNode().addEventListener('mouseup', this.stopResize)
@@ -1071,7 +1101,9 @@ export default {
       this.save()
     },
     startTouchResize (e) {
-      this.selectedAreaRef.value = this.area
+      if (!this.selectedAreasRef.value.includes(this.area)) {
+        this.selectedAreasRef.value = [this.area]
+      }
 
       this.$refs?.name?.blur()
 
@@ -1088,6 +1120,15 @@ export default {
 
       this.area.w = (e.touches[0].clientX - rect.left) / rect.width - this.area.x
       this.area.h = (e.touches[0].clientY - rect.top) / rect.height - this.area.y
+
+      if (this.isInMultiSelection) {
+        this.selectedAreasRef.value.forEach((area) => {
+          if (area !== this.area) {
+            area.w = this.area.w
+            area.h = this.area.h
+          }
+        })
+      }
     },
     stopTouchResize () {
       this.$el.getRootNode().removeEventListener('touchmove', this.touchResize)

app/javascript/template_builder/conditions_modal.vue

@@ -168,9 +168,19 @@ export default {
     buildDefaultName: {
       type: Function,
       required: true
+    },
+    withClickSaveEvent: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    excludeFieldUuids: {
+      type: Array,
+      required: false,
+      default: () => []
     }
   },
-  emits: ['close'],
+  emits: ['close', 'click-save'],
   data () {
     return {
       conditions: this.item.conditions?.[0] ? JSON.parse(JSON.stringify(this.item.conditions)) : [{}]
@@ -183,14 +193,14 @@ export default {
     fields () {
       if (this.item.submitter_uuid) {
         return this.template.fields.reduce((acc, f) => {
-          if (f !== this.item && !this.excludeTypes.includes(f.type) && (!f.conditions?.length || !f.conditions.find((c) => c.field_uuid === this.item.uuid))) {
+          if (f !== this.item && !this.excludeTypes.includes(f.type) && !this.excludeFieldUuids.includes(f.uuid) && (!f.conditions?.length || !f.conditions.find((c) => c.field_uuid === this.item.uuid))) {
             acc.push(f)
           }
 
           return acc
         }, [])
       } else {
-        return this.template.fields
+        return this.template.fields.filter((f) => !this.excludeFieldUuids.includes(f.uuid))
       }
     }
   },
@@ -234,7 +244,12 @@ export default {
         delete this.item.conditions
       }
 
-      this.save()
+      if (this.withClickSaveEvent) {
+        this.$emit('click-save')
+      } else {
+        this.save()
+      }
+
       this.$emit('close')
     }
   }

app/javascript/template_builder/context_menu.vue

@@ -0,0 +1,546 @@
+<template>
+  <div>
+    <div
+      v-if="!isShowFormulaModal && !isShowFontModal && !isShowConditionsModal && !isShowDescriptionModal"
+      ref="menu"
+      class="fixed z-50 p-1 bg-white shadow-lg rounded-lg border border-base-300 min-w-[170px] cursor-default"
+      :style="menuStyle"
+      @mousedown.stop
+      @pointerdown.stop
+    >
+      <label
+        v-if="showRequired"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm cursor-pointer"
+        @click.stop
+      >
+        <input
+          :checked="isRequired"
+          type="checkbox"
+          class="toggle toggle-xs"
+          @change="handleToggleRequired($event.target.checked)"
+          @click.stop
+        >
+        <span>{{ t('required') }}</span>
+      </label>
+      <label
+        v-if="showReadOnly"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm cursor-pointer"
+        @click.stop
+      >
+        <input
+          :checked="isReadOnly"
+          type="checkbox"
+          class="toggle toggle-xs"
+          @change="handleToggleReadOnly($event.target.checked)"
+          @click.stop
+        >
+        <span>{{ t('read_only') }}</span>
+      </label>
+      <hr
+        v-if="(showRequired || showReadOnly) && (showFont || showDescription || showCondition || showFormula)"
+        class="my-1 border-base-300"
+      >
+      <button
+        v-if="showFont && !isMultiSelection"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
+        @click.stop="openFontModal"
+      >
+        <IconTypography class="w-4 h-4" />
+        <span>{{ t('font') }}</span>
+      </button>
+      <button
+        v-if="showDescription"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
+        @click.stop="openDescriptionModal"
+      >
+        <IconInfoCircle class="w-4 h-4" />
+        <span>{{ t('description') }}</span>
+      </button>
+      <button
+        v-if="showCondition && !isMultiSelection"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
+        @click.stop="openConditionModal"
+      >
+        <IconRouteAltLeft class="w-4 h-4" />
+        <span>{{ t('condition') }}</span>
+      </button>
+      <button
+        v-if="showFormula"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
+        @click.stop="openFormulaModal"
+      >
+        <IconMathFunction class="w-4 h-4" />
+        <span>{{ t('formula') }}</span>
+      </button>
+      <hr
+        v-if="((showFont && !isMultiSelection) || showDescription || (showCondition && !isMultiSelection) || showFormula) && (showCopy || showDelete || showPaste)"
+        class="my-1 border-base-300"
+      >
+      <button
+        v-if="isMultiSelection"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
+        @click.stop="$emit('align', 'left')"
+      >
+        <IconLayoutAlignLeft class="w-4 h-4" />
+        <span>{{ t('align_left') }}</span>
+      </button>
+      <button
+        v-if="isMultiSelection"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
+        @click.stop="$emit('align', 'right')"
+      >
+        <IconLayoutAlignRight class="w-4 h-4" />
+        <span>{{ t('align_right') }}</span>
+      </button>
+      <button
+        v-if="isMultiSelection"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
+        @click.stop="$emit('align', 'top')"
+      >
+        <IconLayoutAlignTop class="w-4 h-4" />
+        <span>{{ t('align_top') }}</span>
+      </button>
+      <button
+        v-if="isMultiSelection"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
+        @click.stop="$emit('align', 'bottom')"
+      >
+        <IconLayoutAlignBottom class="w-4 h-4" />
+        <span>{{ t('align_bottom') }}</span>
+      </button>
+      <hr
+        v-if="isMultiSelection && (showFont || showCondition)"
+        class="my-1 border-base-300"
+      >
+      <button
+        v-if="showFont && isMultiSelection"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
+        @click.stop="openFontModal"
+      >
+        <IconTypography class="w-4 h-4" />
+        <span>{{ t('font') }}</span>
+      </button>
+      <button
+        v-if="showCondition && isMultiSelection"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
+        @click.stop="openConditionModal"
+      >
+        <IconRouteAltLeft class="w-4 h-4" />
+        <span>{{ t('condition') }}</span>
+      </button>
+      <hr
+        v-if="isMultiSelection"
+        class="my-1 border-base-300"
+      >
+      <button
+        v-if="showCopy"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center justify-between text-sm"
+        @click.stop="$emit('copy')"
+      >
+        <span class="flex items-center space-x-2">
+          <IconCopy class="w-4 h-4" />
+          <span>{{ t('copy') }}</span>
+        </span>
+        <span class="text-xs text-base-content/60 ml-4">{{ isMac ? '⌘C' : 'Ctrl+C' }}</span>
+      </button>
+      <button
+        v-if="showDelete"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center justify-between text-sm text-red-600"
+        @click.stop="$emit('delete')"
+      >
+        <span class="flex items-center space-x-2">
+          <IconTrashX class="w-4 h-4" />
+          <span>{{ t('remove') }}</span>
+        </span>
+        <span class="text-xs text-base-content/60 ml-4">Del</span>
+      </button>
+      <button
+        v-if="showPaste"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center justify-between text-sm"
+        :class="!hasClipboardData ? 'opacity-50 cursor-not-allowed' : 'hover:bg-base-100'"
+        :disabled="!hasClipboardData"
+        @click.stop="!hasClipboardData ? null : $emit('paste')"
+      >
+        <span class="flex items-center space-x-2">
+          <IconClipboard class="w-4 h-4" />
+          <span>{{ t('paste') }}</span>
+        </span>
+        <span class="text-xs text-base-content/60 ml-4">{{ isMac ? '⌘V' : 'Ctrl+V' }}</span>
+      </button>
+      <button
+        v-if="showSelectFields"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center justify-between text-sm"
+        @click.stop="handleToggleSelectMode"
+      >
+        <span class="flex items-center space-x-2">
+          <IconClick
+            v-if="!isSelectModeRef.value"
+            class="w-4 h-4"
+          />
+          <IconNewSection
+            v-else
+            class="w-4 h-4"
+          />
+          <span>{{ isSelectModeRef.value ? t('draw_fields') : t('select_fields') }}</span>
+        </span>
+        <span class="text-xs text-base-content/60 ml-4">Tab</span>
+      </button>
+      <hr
+        v-if="showAutodetectFields"
+        class="my-1 border-base-300"
+      >
+      <button
+        v-if="showAutodetectFields"
+        class="w-full px-2 py-1 rounded-md hover:bg-base-100 flex items-center space-x-2 text-sm"
+        @click.stop="$emit('autodetect-fields')"
+      >
+        <IconSparkles class="w-4 h-4" />
+        <span>{{ t('autodetect_fields') }}</span>
+      </button>
+    </div>
+    <Teleport
+      v-if="isShowFormulaModal"
+      :to="modalContainerEl"
+    >
+      <FormulaModal
+        :field="field"
+        :editable="editable"
+        :build-default-name="buildDefaultName"
+        @close="closeModal"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowFontModal"
+      :to="modalContainerEl"
+    >
+      <FontModal
+        :field="multiSelectField || field"
+        :area="contextMenu.area"
+        :editable="editable"
+        :build-default-name="buildDefaultName"
+        :with-click-save-event="isMultiSelection"
+        @click-save="handleSaveMultiSelectFontModal"
+        @close="closeModal"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowConditionsModal"
+      :to="modalContainerEl"
+    >
+      <ConditionsModal
+        :item="multiSelectField || field"
+        :build-default-name="buildDefaultName"
+        :exclude-field-uuids="isMultiSelection ? selectedFields.map(f => f.uuid) : []"
+        :with-click-save-event="isMultiSelection"
+        @click-save="handleSaveMultiSelectConditionsModal"
+        @close="closeModal"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowDescriptionModal"
+      :to="modalContainerEl"
+    >
+      <DescriptionModal
+        :field="field"
+        :editable="editable"
+        :build-default-name="buildDefaultName"
+        @close="closeModal"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script>
+import { IconCopy, IconClipboard, IconTrashX, IconTypography, IconInfoCircle, IconRouteAltLeft, IconMathFunction, IconClick, IconNewSection, IconLayoutAlignLeft, IconLayoutAlignRight, IconLayoutAlignTop, IconLayoutAlignBottom, IconSparkles } from '@tabler/icons-vue'
+import FormulaModal from './formula_modal'
+import FontModal from './font_modal'
+import ConditionsModal from './conditions_modal'
+import DescriptionModal from './description_modal'
+import Field from './field'
+import FieldType from './field_type.vue'
+
+export default {
+  name: 'ContextMenu',
+  components: {
+    IconCopy,
+    IconClipboard,
+    IconTrashX,
+    IconTypography,
+    IconInfoCircle,
+    IconRouteAltLeft,
+    IconMathFunction,
+    IconClick,
+    IconNewSection,
+    IconLayoutAlignLeft,
+    IconLayoutAlignRight,
+    IconLayoutAlignTop,
+    IconLayoutAlignBottom,
+    IconSparkles,
+    FormulaModal,
+    FontModal,
+    ConditionsModal,
+    DescriptionModal
+  },
+  inject: ['t', 'save', 'selectedAreasRef', 'isSelectModeRef'],
+  props: {
+    contextMenu: {
+      type: Object,
+      default: null,
+      required: true
+    },
+    field: {
+      type: Object,
+      default: null
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    isMultiSelection: {
+      type: Boolean,
+      default: false
+    },
+    selectedAreas: {
+      type: Array,
+      default: () => []
+    },
+    template: {
+      type: Object,
+      default: null
+    },
+    withFieldsDetection: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['copy', 'paste', 'delete', 'close', 'align', 'autodetect-fields'],
+  data () {
+    return {
+      isShowFormulaModal: false,
+      isShowFontModal: false,
+      isShowConditionsModal: false,
+      isShowDescriptionModal: false,
+      multiSelectField: null
+    }
+  },
+  computed: {
+    fieldNames: FieldType.computed.fieldNames,
+    fieldLabels: FieldType.computed.fieldLabels,
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
+    },
+    selectedFields () {
+      if (!this.isMultiSelection) return []
+
+      return this.selectedAreasRef.value.map((area) => {
+        return this.template.fields.find((f) => f.areas?.includes(area))
+      }).filter(Boolean)
+    },
+    isMac () {
+      return (navigator.userAgentData?.platform || navigator.platform)?.toLowerCase()?.includes('mac')
+    },
+    hasClipboardData () {
+      try {
+        const clipboard = localStorage.getItem('docuseal_clipboard')
+
+        if (clipboard) {
+          const data = JSON.parse(clipboard)
+
+          return Date.now() - data.timestamp < 3600000
+        }
+
+        return false
+      } catch {
+        return false
+      }
+    },
+    menuStyle () {
+      return {
+        left: this.contextMenu.x + 'px',
+        top: this.contextMenu.y + 'px'
+      }
+    },
+    showCopy () {
+      return !!this.contextMenu.area || this.isMultiSelection
+    },
+    showPaste () {
+      return !this.contextMenu.area && !this.isMultiSelection
+    },
+    showDelete () {
+      return !!this.contextMenu.area || this.isMultiSelection
+    },
+    showFont () {
+      if (this.isMultiSelection) return true
+      if (!this.field) return false
+
+      return ['text', 'number', 'date', 'select', 'heading'].includes(this.field.type)
+    },
+    showDescription () {
+      if (!this.field) return false
+
+      return !['stamp', 'heading', 'strikethrough'].includes(this.field.type)
+    },
+    showCondition () {
+      if (this.isMultiSelection) return true
+      if (!this.field) return false
+
+      return !['stamp', 'heading'].includes(this.field.type)
+    },
+    showFormula () {
+      if (!this.field) return false
+
+      return this.field.type === 'number'
+    },
+    showRequired () {
+      if (!this.field) return false
+
+      return !['phone', 'stamp', 'verification', 'strikethrough', 'heading'].includes(this.field.type)
+    },
+    showReadOnly () {
+      if (!this.field) return false
+
+      return ['text', 'number'].includes(this.field.type)
+    },
+    isRequired () {
+      return this.field?.required || false
+    },
+    isReadOnly () {
+      return this.field?.readonly || false
+    },
+    showSelectFields () {
+      return !this.contextMenu.area && !this.isMultiSelection
+    },
+    showAutodetectFields () {
+      return this.withFieldsDetection && this.editable && !this.contextMenu.area && !this.isMultiSelection
+    }
+  },
+  mounted () {
+    document.addEventListener('keydown', this.onKeyDown)
+    document.addEventListener('mousedown', this.handleClickOutside)
+
+    this.$nextTick(() => {
+      this.checkMenuPosition()
+    })
+  },
+  beforeUnmount () {
+    document.removeEventListener('keydown', this.onKeyDown)
+    document.removeEventListener('mousedown', this.handleClickOutside)
+  },
+  methods: {
+    buildDefaultName: Field.methods.buildDefaultName,
+    checkMenuPosition () {
+      if (this.$refs.menu) {
+        const rect = this.$refs.menu.getBoundingClientRect()
+
+        if (rect.bottom > window.innerHeight) {
+          this.contextMenu.y = this.contextMenu.y - rect.height
+        }
+
+        if (rect.right > window.innerWidth) {
+          this.contextMenu.x = this.contextMenu.x - rect.width
+        }
+      }
+    },
+    handleToggleRequired (value) {
+      if (this.field) {
+        this.field.required = value
+        this.save()
+      }
+    },
+    handleToggleReadOnly (value) {
+      if (this.field) {
+        this.field.readonly = value
+        this.save()
+      }
+    },
+    onKeyDown (event) {
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        this.$emit('close')
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v' && this.hasClipboardData) {
+        event.preventDefault()
+        event.stopPropagation()
+
+        this.$emit('paste')
+      }
+    },
+    handleClickOutside (event) {
+      if (this.$refs.menu && !this.$refs.menu.contains(event.target)) {
+        this.$emit('close')
+      }
+    },
+    openFontModal () {
+      if (this.isMultiSelection) {
+        this.multiSelectField = {
+          name: this.t('fields_selected').replace('{count}', this.selectedFields.length),
+          preferences: {}
+        }
+
+        const preferencesStrings = this.selectedFields.map((f) => JSON.stringify(f.preferences || {}))
+
+        if (preferencesStrings.every((s) => s === preferencesStrings[0])) {
+          this.multiSelectField.preferences = JSON.parse(preferencesStrings[0])
+        }
+      }
+
+      this.isShowFontModal = true
+    },
+    openDescriptionModal () {
+      this.isShowDescriptionModal = true
+    },
+    openConditionModal () {
+      if (this.isMultiSelection) {
+        this.multiSelectField = {
+          name: this.t('fields_selected').replace('{count}', this.selectedFields.length),
+          conditions: []
+        }
+
+        const conditionStrings = this.selectedFields.map((f) => JSON.stringify(f.conditions || []))
+
+        if (conditionStrings.every((s) => s === conditionStrings[0])) {
+          this.multiSelectField.conditions = JSON.parse(conditionStrings[0])
+        }
+      }
+
+      this.isShowConditionsModal = true
+    },
+    openFormulaModal () {
+      this.isShowFormulaModal = true
+    },
+    closeModal () {
+      this.isShowFormulaModal = false
+      this.isShowFontModal = false
+      this.isShowConditionsModal = false
+      this.isShowDescriptionModal = false
+      this.multiSelectField = null
+
+      this.$emit('close')
+    },
+    handleSaveMultiSelectFontModal () {
+      this.selectedFields.forEach((field) => {
+        field.preferences = { ...field.preferences, ...this.multiSelectField.preferences }
+      })
+
+      this.save()
+
+      this.closeModal()
+    },
+    handleSaveMultiSelectConditionsModal () {
+      this.selectedFields.forEach((field) => {
+        field.conditions = JSON.parse(JSON.stringify(this.multiSelectField.conditions))
+      })
+
+      this.save()
+
+      this.closeModal()
+    },
+    handleToggleSelectMode () {
+      this.isSelectModeRef.value = !this.isSelectModeRef.value
+
+      this.$emit('close')
+    }
+  }
+}
+</script>

app/javascript/template_builder/document.vue

@@ -22,8 +22,16 @@
       :selected-submitter="selectedSubmitter"
       :total-pages="sortedPreviewImages.length"
       :image="image"
-      @drop-field="$emit('drop-field', {...$event, attachment_uuid: document.uuid })"
+      :attachment-uuid="document.uuid"
+      :with-fields-detection="withFieldsDetection"
+      @drop-field="$emit('drop-field', { ...$event, attachment_uuid: document.uuid })"
       @remove-area="$emit('remove-area', $event)"
+      @copy-field="$emit('copy-field', $event)"
+      @paste-field="$emit('paste-field', { ...$event, attachment_uuid: document.uuid })"
+      @copy-selected-areas="$emit('copy-selected-areas')"
+      @delete-selected-areas="$emit('delete-selected-areas')"
+      @align-selected-areas="$emit('align-selected-areas', $event)"
+      @autodetect-fields="$emit('autodetect-fields', $event)"
       @scroll-to="scrollToArea"
       @draw="$emit('draw', { area: {...$event.area, attachment_uuid: document.uuid }, isTooSmall: $event.isTooSmall })"
     />
@@ -116,9 +124,14 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    withFieldsDetection: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  emits: ['draw', 'drop-field', 'remove-area'],
+  emits: ['draw', 'drop-field', 'remove-area', 'paste-field', 'copy-field', 'copy-selected-areas', 'delete-selected-areas', 'align-selected-areas', 'autodetect-fields'],
   data () {
     return {
       pageRefs: []

app/javascript/template_builder/field.vue

@@ -330,7 +330,7 @@ export default {
     IconMathFunction,
     FieldType
   },
-  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't', 'locale'],
+  inject: ['template', 'save', 'backgroundColor', 'selectedAreasRef', 't', 'locale'],
   props: {
     field: {
       type: Object,
@@ -451,7 +451,7 @@ export default {
       const area = this.field.areas.find((a) => a.option_uuid === option.uuid)
 
       if (area) {
-        this.selectedAreaRef.value = area
+        this.selectedAreasRef.value = [area]
       }
     },
     scrollToFirstArea () {

app/javascript/template_builder/field_type.vue

@@ -160,7 +160,7 @@ export default {
         payment: IconCreditCard,
         phone: IconPhoneCheck,
         verification: IconId,
-        kba: IconUserScan,
+        kba: IconUserScan
       }
     },
     skipTypes () {

app/javascript/template_builder/fields.vue

@@ -283,7 +283,7 @@ export default {
     IconDrag,
     IconLock
   },
-  inject: ['save', 'backgroundColor', 'withPhone', 'withVerification', 'withKba', 'withPayment', 't', 'fieldsDragFieldRef', 'baseFetch'],
+  inject: ['save', 'backgroundColor', 'withPhone', 'withVerification', 'withKba', 'withPayment', 't', 'fieldsDragFieldRef', 'baseFetch', 'selectedAreasRef'],
   props: {
     fields: {
       type: Array,
@@ -610,6 +610,10 @@ export default {
         })
       })
 
+      field.areas?.forEach((area) => {
+        this.selectedAreasRef.value.splice(this.selectedAreasRef.value.indexOf(area), 1)
+      })
+
       if (save) {
         this.save()
       }

app/javascript/template_builder/font_modal.vue

@@ -212,12 +212,17 @@ export default {
       required: false,
       default: true
     },
+    withClickSaveEvent: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     buildDefaultName: {
       type: Function,
       required: true
     }
   },
-  emits: ['close'],
+  emits: ['close', 'click-save'],
   data () {
     return {
       preferences: {}
@@ -322,7 +327,11 @@ export default {
 
       Object.assign(this.field.preferences, this.preferences)
 
-      this.save()
+      if (this.withClickSaveEvent) {
+        this.$emit('click-save')
+      } else {
+        this.save()
+      }
 
       this.$emit('close')
     }

app/javascript/template_builder/i18n.js

@@ -185,7 +185,18 @@ const en = {
   start_tour: 'Start Tour',
   or_add_from: 'Or add from',
   sync: 'Sync',
-  syncing: 'Syncing...'
+  syncing: 'Syncing...',
+  copy: 'Copy',
+  paste: 'Paste',
+  select_fields: 'Select Fields',
+  draw_fields: 'Draw Fields',
+  align_left: 'Align Left',
+  align_right: 'Align Right',
+  align_top: 'Align Top',
+  align_bottom: 'Align Bottom',
+  fields_selected: '{count} Fields Selected',
+  field_added: '{count} Field Added',
+  fields_added: '{count} Fields Added'
 }
 
 const es = {
@@ -375,7 +386,18 @@ const es = {
   start_tour: 'Iniciar guía',
   or_add_from: 'O agregar desde',
   sync: 'Sincronizar',
-  syncing: 'Sincronizando...'
+  syncing: 'Sincronizando...',
+  copy: 'Copiar',
+  paste: 'Pegar',
+  select_fields: 'Seleccionar Campos',
+  draw_fields: 'Dibujar Campos',
+  align_left: 'Alinear a la izquierda',
+  align_right: 'Alinear a la derecha',
+  align_top: 'Alinear arriba',
+  align_bottom: 'Alinear abajo',
+  fields_selected: '{count} Campos Seleccionados',
+  field_added: '{count} Campo Añadido',
+  fields_added: '{count} Campos Añadidos'
 }
 
 const it = {
@@ -565,7 +587,18 @@ const it = {
   start_tour: 'Inizia il tour',
   or_add_from: 'O aggiungi da',
   sync: 'Sincronizza',
-  syncing: 'Sincronizzazione...'
+  syncing: 'Sincronizzazione...',
+  copy: 'Copia',
+  paste: 'Incolla',
+  select_fields: 'Seleziona Campi',
+  draw_fields: 'Disegna Campi',
+  align_left: 'Allinea a sinistra',
+  align_right: 'Allinea a destra',
+  align_top: 'Allinea in alto',
+  align_bottom: 'Allinea in basso',
+  fields_selected: '{count} Campi Selezionati',
+  field_added: '{count} Campo Aggiunto',
+  fields_added: '{count} Campi Aggiunti'
 }
 
 const pt = {
@@ -755,7 +788,18 @@ const pt = {
   start_tour: 'Iniciar tour',
   or_add_from: 'Ou adicionar de',
   sync: 'Sincronizar',
-  syncing: 'Sincronizando...'
+  syncing: 'Sincronizando...',
+  copy: 'Copiar',
+  paste: 'Colar',
+  select_fields: 'Selecionar Campos',
+  draw_fields: 'Desenhar Campos',
+  align_left: 'Alinhar à esquerda',
+  align_right: 'Alinhar à direita',
+  align_top: 'Alinhar ao topo',
+  align_bottom: 'Alinhar à parte inferior',
+  fields_selected: '{count} Campos Selecionados',
+  field_added: '{count} Campo Adicionado',
+  fields_added: '{count} Campos Adicionados'
 }
 
 const fr = {
@@ -945,7 +989,18 @@ const fr = {
   start_tour: 'Démarrer',
   or_add_from: 'Ou ajouter depuis',
   sync: 'Synchroniser',
-  syncing: 'Synchronisation...'
+  syncing: 'Synchronisation...',
+  copy: 'Copier',
+  paste: 'Coller',
+  select_fields: 'Sélectionner Champs',
+  draw_fields: 'Dessiner Champs',
+  align_left: 'Aligner à gauche',
+  align_right: 'Aligner à droite',
+  align_top: 'Aligner en haut',
+  align_bottom: 'Aligner en bas',
+  fields_selected: '{count} Champs Sélectionnés',
+  field_added: '{count} Champ Ajouté',
+  fields_added: '{count} Champs Ajoutés'
 }
 
 const de = {
@@ -1135,7 +1190,18 @@ const de = {
   start_tour: 'Tour starten',
   or_add_from: 'Oder hinzufügen aus',
   sync: 'Synchronisieren',
-  syncing: 'Synchronisiere...'
+  syncing: 'Synchronisiere...',
+  copy: 'Kopieren',
+  paste: 'Einfügen',
+  select_fields: 'Felder Auswählen',
+  draw_fields: 'Felder Zeichnen',
+  align_left: 'Links ausrichten',
+  align_right: 'Rechts ausrichten',
+  align_top: 'Oben ausrichten',
+  align_bottom: 'Unten ausrichten',
+  fields_selected: '{count} Felder Ausgewählt',
+  field_added: '{count} Feld Hinzugefügt',
+  fields_added: '{count} Felder Hinzugefügt'
 }
 
 const nl = {
@@ -1325,7 +1391,18 @@ const nl = {
   start_tour: 'Rondleiding starten',
   or_add_from: 'Of toevoegen van',
   sync: 'Synchroniseren',
-  syncing: 'Synchroniseren...'
+  syncing: 'Synchroniseren...',
+  copy: 'Kopiëren',
+  paste: 'Plakken',
+  select_fields: 'Velden Selecteren',
+  draw_fields: 'Velden Tekenen',
+  align_left: 'Links uitlijnen',
+  align_right: 'Rechts uitlijnen',
+  align_top: 'Boven uitlijnen',
+  align_bottom: 'Onder uitlijnen',
+  fields_selected: '{count} Velden Geselecteerd',
+  field_added: '{count} Veld Toegevoegd',
+  fields_added: '{count} Velden Toegevoegd'
 }
 
 export { en, es, it, pt, fr, de, nl }

app/javascript/template_builder/page.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="relative select-none mb-4 before:border before:rounded before:top-0 before:bottom-0 before:left-0 before:right-0 before:absolute"
-    :class="{ 'cursor-crosshair': allowDraw && editable, 'touch-none': !!drawField }"
+    :class="{ 'cursor-crosshair': allowDraw && editable && !isSelectMode, 'touch-none': !!drawField }"
     style="container-type: size"
     :style="{ aspectRatio: `${width} / ${height}`}"
   >
@@ -17,7 +17,20 @@
     <div
       class="top-0 bottom-0 left-0 right-0 absolute"
       @pointerdown="onStartDraw"
+      @contextmenu="openContextMenu"
     >
+      <SelectionBox
+        v-if="showSelectionBox"
+        :selection-box="selectionBox"
+        :page-width="width"
+        :page-height="height"
+        :is-resizing="!!resizeDirection"
+        :is-drawing="!!drawFieldType"
+        :is-drag="isDrag"
+        @move="onSelectionBoxMove"
+        @contextmenu="openSelectionContextMenu"
+        @close-context-menu="closeSelectionContextMenu"
+      />
       <FieldArea
         v-for="(item, i) in areas"
         :key="i"
@@ -34,10 +47,12 @@
         :default-field="defaultFieldsIndex[item.field.name]"
         :default-submitters="defaultSubmitters"
         :max-page="totalPages - 1"
+        :is-select-mode="isSelectMode"
         @start-resize="resizeDirection = $event"
         @stop-resize="resizeDirection = null"
         @remove="$emit('remove-area', item.area)"
         @scroll-to="$emit('scroll-to', $event)"
+        @contextmenu="openAreaContextMenu($event, item.area, item.field)"
       />
       <FieldArea
         v-if="newArea"
@@ -47,15 +62,45 @@
         :field="{ submitter_uuid: selectedSubmitter.uuid, type: drawField?.type || dragFieldPlaceholder?.type || defaultFieldType }"
         :area="newArea"
       />
+      <div
+        v-if="selectionRect"
+        class="absolute outline-dashed outline-gray-400 pointer-events-none z-20"
+        :style="selectionRectStyle"
+      />
+      <ContextMenu
+        v-if="contextMenu"
+        :context-menu="contextMenu"
+        :field="contextMenu.field"
+        :editable="editable"
+        :with-fields-detection="withFieldsDetection"
+        @copy="handleCopy"
+        @delete="handleDelete"
+        @paste="handlePaste"
+        @autodetect-fields="handleAutodetectFields"
+        @close="closeContextMenu"
+      />
+      <ContextMenu
+        v-if="selectionContextMenu"
+        :context-menu="selectionContextMenu"
+        :editable="editable"
+        :is-multi-selection="true"
+        :selected-areas="selectedAreasRef.value"
+        :template="template"
+        @copy="handleSelectionCopy"
+        @delete="handleSelectionDelete"
+        @align="handleSelectionAlign"
+        @close="closeSelectionContextMenu"
+      />
     </div>
     <div
-      v-show="resizeDirection || isDrag || showMask || (drawField && isMobile) || fieldsDragFieldRef.value"
+      v-show="resizeDirection || isDrag || showMask || (drawField && isMobile) || fieldsDragFieldRef.value || selectionRect"
       id="mask"
       ref="mask"
       class="top-0 bottom-0 left-0 right-0 absolute"
-      :class="{ 'z-10': !isMobile, 'cursor-grab': isDrag, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
+      :class="{ 'z-10': !isMobile, 'cursor-grab': isDrag, 'cursor-nwse-resize': drawField && !isSelectMode, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
       @pointermove="onPointermove"
       @pointerdown="onStartDraw"
+      @contextmenu="openContextMenu"
       @dragover.prevent="onDragover"
       @dragenter="onDragenter"
       @dragleave="newArea = null"
@@ -67,13 +112,17 @@
 
 <script>
 import FieldArea from './area'
+import ContextMenu from './context_menu'
+import SelectionBox from './selection_box'
 
 export default {
   name: 'TemplatePage',
   components: {
-    FieldArea
+    FieldArea,
+    ContextMenu,
+    SelectionBox
   },
-  inject: ['fieldTypes', 'defaultDrawFieldType', 'fieldsDragFieldRef', 'assignDropAreaSize'],
+  inject: ['fieldTypes', 'defaultDrawFieldType', 'fieldsDragFieldRef', 'assignDropAreaSize', 'selectedAreasRef', 'template', 'isSelectModeRef'],
   props: {
     image: {
       type: Object,
@@ -155,18 +204,69 @@ export default {
     number: {
       type: Number,
       required: true
+    },
+    attachmentUuid: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    withFieldsDetection: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  emits: ['draw', 'drop-field', 'remove-area', 'scroll-to'],
+  emits: ['draw', 'drop-field', 'remove-area', 'copy-field', 'paste-field', 'scroll-to', 'copy-selected-areas', 'delete-selected-areas', 'align-selected-areas', 'autodetect-fields'],
   data () {
     return {
       areaRefs: [],
       showMask: false,
       resizeDirection: null,
-      newArea: null
+      newArea: null,
+      contextMenu: null,
+      selectionRect: null,
+      selectionContextMenu: null
     }
   },
   computed: {
+    isSelectMode () {
+      return this.isSelectModeRef.value && !this.drawFieldType && this.editable && !this.drawField
+    },
+    pageSelectedAreas () {
+      if (!this.selectedAreasRef.value) return []
+
+      return this.selectedAreasRef.value.filter((a) =>
+        a.attachment_uuid === this.attachmentUuid && a.page === this.number
+      )
+    },
+    showSelectionBox () {
+      return this.pageSelectedAreas.length >= 2 && this.editable
+    },
+    minSelectionBoxHeight () {
+      const ys = this.pageSelectedAreas.map((a) => a.y)
+
+      return Math.max(...ys) - Math.min(...ys)
+    },
+    minSelectionBoxWidth () {
+      const xs = this.pageSelectedAreas.map((a) => a.x)
+
+      return Math.max(...xs) - Math.min(...xs)
+    },
+    selectionBox () {
+      if (!this.pageSelectedAreas.length) return null
+
+      const minX = Math.min(...this.pageSelectedAreas.map((a) => a.x))
+      const minY = Math.min(...this.pageSelectedAreas.map((a) => a.y))
+      const maxX = Math.max(...this.pageSelectedAreas.map((a) => a.x + a.w))
+      const maxY = Math.max(...this.pageSelectedAreas.map((a) => a.y + a.h))
+
+      return {
+        x: minX,
+        y: minY,
+        w: Math.max(maxX - minX, this.minSelectionBoxWidth),
+        h: Math.max(maxY - minY, this.minSelectionBoxHeight)
+      }
+    },
     defaultFieldsIndex () {
       return this.defaultFields.reduce((acc, field) => {
         acc[field.name] = field
@@ -201,6 +301,16 @@ export default {
     },
     height () {
       return this.image.metadata.height
+    },
+    selectionRectStyle () {
+      if (!this.selectionRect) return {}
+
+      return {
+        left: this.selectionRect.x * 100 + '%',
+        top: this.selectionRect.y * 100 + '%',
+        width: this.selectionRect.w * 100 + '%',
+        height: this.selectionRect.h * 100 + '%'
+      }
     }
   },
   beforeUpdate () {
@@ -211,6 +321,114 @@ export default {
       this.image.metadata.width = e.target.naturalWidth
       this.image.metadata.height = e.target.naturalHeight
     },
+    openContextMenu (event) {
+      if (!this.editable) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+
+      const rect = this.$refs.image.getBoundingClientRect()
+
+      this.newArea = null
+      this.showMask = false
+
+      this.contextMenu = {
+        x: event.clientX,
+        y: event.clientY,
+        relativeX: (event.clientX - rect.left) / rect.width,
+        relativeY: (event.clientY - rect.top) / rect.height
+      }
+    },
+    openAreaContextMenu (event, area, field) {
+      if (!this.editable) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+
+      const rect = this.$refs.image.getBoundingClientRect()
+
+      this.newArea = null
+      this.showMask = false
+
+      this.contextMenu = {
+        x: event.clientX,
+        y: event.clientY,
+        relativeX: (event.clientX - rect.left) / rect.width,
+        relativeY: (event.clientY - rect.top) / rect.height,
+        area,
+        field
+      }
+    },
+    openSelectionContextMenu (event) {
+      const rect = this.$el.getBoundingClientRect()
+
+      this.selectionContextMenu = {
+        x: event.clientX,
+        y: event.clientY,
+        relativeX: (event.clientX - rect.left) / rect.width,
+        relativeY: (event.clientY - rect.top) / rect.height
+      }
+    },
+    closeSelectionContextMenu () {
+      this.selectionContextMenu = null
+    },
+    handleSelectionCopy () {
+      this.$emit('copy-selected-areas')
+      this.closeSelectionContextMenu()
+    },
+    handleSelectionDelete () {
+      this.$emit('delete-selected-areas')
+      this.closeSelectionContextMenu()
+    },
+    handleSelectionAlign (direction) {
+      this.$emit('align-selected-areas', direction)
+      this.closeSelectionContextMenu()
+    },
+    closeContextMenu () {
+      this.contextMenu = null
+      this.newArea = null
+      this.showMask = false
+    },
+    handleCopy () {
+      if (this.contextMenu.area) {
+        this.selectedAreasRef.value = [this.contextMenu.area]
+
+        this.$emit('copy-field')
+      }
+
+      this.closeContextMenu()
+    },
+    handleDelete () {
+      if (this.contextMenu.area) {
+        this.$emit('remove-area', this.contextMenu.area)
+      }
+
+      this.closeContextMenu()
+    },
+    handlePaste () {
+      this.newArea = null
+      this.showMask = false
+
+      this.$emit('paste-field', {
+        page: this.number,
+        x: this.contextMenu.relativeX,
+        y: this.contextMenu.relativeY
+      })
+
+      this.closeContextMenu()
+    },
+    handleAutodetectFields () {
+      this.$emit('autodetect-fields', {
+        page: this.number,
+        attachmentUuid: this.attachmentUuid
+      })
+
+      this.closeContextMenu()
+    },
     setAreaRefs (el) {
       if (el) {
         this.areaRefs.push(el)
@@ -243,6 +461,20 @@ export default {
       })
     },
     onStartDraw (e) {
+      if (e.button === 2) {
+        return
+      }
+
+      if (this.selectedAreasRef.value.length >= 2) {
+        this.selectedAreasRef.value = []
+      }
+
+      if (this.isSelectMode) {
+        this.startSelectionRect(e)
+
+        return
+      }
+
       if (!this.allowDraw) {
         return
       }
@@ -268,7 +500,69 @@ export default {
         }
       })
     },
+    startSelectionRect (e) {
+      this.selectedAreasRef.value = []
+
+      this.showMask = true
+
+      this.$nextTick(() => {
+        const x = e.offsetX / this.$refs.mask.clientWidth
+        const y = e.offsetY / this.$refs.mask.clientHeight
+
+        this.selectionRect = {
+          initialX: x,
+          initialY: y,
+          x,
+          y,
+          w: 0,
+          h: 0
+        }
+      })
+    },
+    onSelectionBoxMove (dx, dy) {
+      let clampedDx = dx
+      let clampedDy = dy
+
+      this.pageSelectedAreas.forEach((area) => {
+        const maxDxLeft = -area.x
+        const maxDxRight = 1 - area.w - area.x
+        const maxDyTop = -area.y
+        const maxDyBottom = 1 - area.h - area.y
+
+        if (dx < maxDxLeft) clampedDx = Math.max(clampedDx, maxDxLeft)
+        if (dx > maxDxRight) clampedDx = Math.min(clampedDx, maxDxRight)
+        if (dy < maxDyTop) clampedDy = Math.max(clampedDy, maxDyTop)
+        if (dy > maxDyBottom) clampedDy = Math.min(clampedDy, maxDyBottom)
+      })
+
+      this.pageSelectedAreas.forEach((area) => {
+        area.x += clampedDx
+        area.y += clampedDy
+      })
+    },
     onPointermove (e) {
+      if (this.selectionRect) {
+        const dx = e.offsetX / this.$refs.mask.clientWidth - this.selectionRect.initialX
+        const dy = e.offsetY / this.$refs.mask.clientHeight - this.selectionRect.initialY
+
+        if (dx > 0) {
+          this.selectionRect.x = this.selectionRect.initialX
+        } else {
+          this.selectionRect.x = e.offsetX / this.$refs.mask.clientWidth
+        }
+
+        if (dy > 0) {
+          this.selectionRect.y = this.selectionRect.initialY
+        } else {
+          this.selectionRect.y = e.offsetY / this.$refs.mask.clientHeight
+        }
+
+        this.selectionRect.w = Math.abs(dx)
+        this.selectionRect.h = Math.abs(dy)
+
+        return
+      }
+
       if (this.newArea) {
         const dx = e.offsetX / this.$refs.mask.clientWidth - this.newArea.initialX
         const dy = e.offsetY / this.$refs.mask.clientHeight - this.newArea.initialY
@@ -294,7 +588,20 @@ export default {
       }
     },
     onPointerup (e) {
-      if (this.newArea) {
+      if (this.selectionRect) {
+        const selRect = this.selectionRect
+        const areasToSelect = this.areas || []
+
+        areasToSelect.forEach((item) => {
+          const area = item.area
+
+          if (this.rectsOverlap(selRect, area)) {
+            this.selectedAreasRef.value.push(area)
+          }
+        })
+
+        this.selectionRect = null
+      } else if (this.newArea) {
         const area = {
           x: this.newArea.x,
           y: this.newArea.y,
@@ -317,6 +624,14 @@ export default {
 
       this.showMask = false
       this.newArea = null
+    },
+    rectsOverlap (r1, r2) {
+      return !(
+        r1.x + r1.w < r2.x ||
+        r2.x + r2.w < r1.x ||
+        r1.y + r1.h < r2.y ||
+        r2.y + r2.h < r1.y
+      )
     }
   }
 }

app/javascript/template_builder/selection_box.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    class="absolute outline-dashed outline-gray-400 cursor-move"
+    :class="[isResizing || isCmdKeyRef.value ? 'z-0' : 'z-20', { 'pointer-events-none': isDrawing || fieldsDragFieldRef.value || isDrag }]"
+    :style="positionStyle"
+    @pointerdown.stop.prevent="onPointerDown"
+    @contextmenu.stop.prevent="openContextMenu"
+  />
+</template>
+
+<script>
+export default {
+  name: 'SelectionBox',
+  inject: ['save', 'selectedAreasRef', 'isCmdKeyRef', 'fieldsDragFieldRef'],
+  props: {
+    selectionBox: {
+      type: Object,
+      required: true
+    },
+    pageWidth: {
+      type: Number,
+      required: true
+    },
+    pageHeight: {
+      type: Number,
+      required: true
+    },
+    isResizing: {
+      type: Boolean,
+      default: false
+    },
+    isDrag: {
+      type: Boolean,
+      default: false
+    },
+    isDrawing: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['move', 'contextmenu', 'close-context-menu'],
+  data () {
+    return {
+      isDragging: false,
+      dragStart: { x: 0, y: 0 }
+    }
+  },
+  computed: {
+    positionStyle () {
+      const { x, y, w, h } = this.selectionBox
+
+      return {
+        top: y * 100 + '%',
+        left: x * 100 + '%',
+        width: w * 100 + '%',
+        height: h * 100 + '%'
+      }
+    }
+  },
+  methods: {
+    openContextMenu (e) {
+      this.$emit('contextmenu', e)
+    },
+    onPointerDown (e) {
+      this.$emit('close-context-menu')
+
+      this.startDrag(e)
+    },
+    startDrag (e) {
+      this.isDragging = true
+      this.dragStart = { x: e.clientX, y: e.clientY }
+
+      document.addEventListener('pointermove', this.onDrag)
+      document.addEventListener('pointerup', this.stopDrag)
+    },
+    onDrag (e) {
+      if (!this.isDragging) return
+
+      const parent = this.$el.parentElement
+
+      const rect = parent.getBoundingClientRect()
+
+      const dx = (e.clientX - this.dragStart.x) / rect.width
+      const dy = (e.clientY - this.dragStart.y) / rect.height
+
+      this.$emit('move', dx, dy)
+
+      this.dragStart = { x: e.clientX, y: e.clientY }
+    },
+    stopDrag () {
+      this.isDragging = false
+
+      document.removeEventListener('pointermove', this.onDrag)
+      document.removeEventListener('pointerup', this.stopDrag)
+
+      this.save()
+    }
+  }
+}
+</script>

app/models/submission.rb

@@ -63,6 +63,8 @@ class Submission < ApplicationRecord
 
   has_one_attached :audit_trail
   has_one_attached :combined_document
+  has_one_attached :merged_document
+  has_one_attached :preview_merged_document
 
   has_many_attached :preview_documents
   has_many_attached :documents
@@ -76,8 +78,9 @@ class Submission < ApplicationRecord
   scope :active, -> { where(archived_at: nil) }
   scope :archived, -> { where.not(archived_at: nil) }
   scope :pending, lambda {
-    where(Submitter.where(Submitter.arel_table[:submission_id].eq(Submission.arel_table[:id])
-     .and(Submitter.arel_table[:completed_at].eq(nil))).select(1).arel.exists)
+    where(expire_at: nil).or(where(expire_at: Time.current..))
+                         .where(Submitter.where(Submitter.arel_table[:submission_id].eq(Submission.arel_table[:id])
+                                         .and(Submitter.arel_table[:completed_at].eq(nil))).select(1).arel.exists)
   }
   scope :completed, lambda {
     where.not(Submitter.where(Submitter.arel_table[:submission_id].eq(Submission.arel_table[:id])

app/views/accounts/show.html.erb

@@ -235,7 +235,7 @@
             <% end %>
           <% end %>
         <% end %>
-        <% if can?(:manage, :personalization_advanced) %>
+        <% if !Docuseal.multitenant? || can?(:manage, :personalization_advanced) %>
           <% account_config = AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::WITH_FILE_LINKS_KEY) %>
           <% if can?(:manage, account_config) %>
             <%= form_for account_config, url: account_configs_path, method: :post do |f| %>

app/views/shared/_settings_nav.html.erb

@@ -135,7 +135,7 @@
       <a href="mailto:<%= Docuseal::SUPPORT_EMAIL %>" target="_blank" class="w-full block mt-4 underline text-center">
         <%= Docuseal::SUPPORT_EMAIL %>
       </a>
-      <% if Docuseal.version.present? %>
+      <% if Docuseal.version.present? && !Docuseal.multitenant? && can?(:manage, EncryptedConfig) %>
         <a href="https://github.com/docusealco/docuseal/releases" target="_blank" class="badge badge-outline text-xs block mx-auto mt-4">
           v<%= Docuseal.version %>
         </a>

app/views/submissions/_detailed_form.html.erb

@@ -30,14 +30,14 @@
                   <div class="grid <%= 'md:grid-cols-2 gap-1' if submitters.size == 1 %>">
                     <submitters-autocomplete data-field="email">
                       <linked-input data-target-id="<%= "detailed_email_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
-                        <%= tag.input type: 'email', multiple: true, name: 'submission[1][submitters][][email]', autocomplete: 'off', class: 'base-input !h-10 mt-1.5 w-full', placeholder: (local_assigns[:require_email_2fa] == true || local_assigns[:prefillable_fields].present? ? t(:email) : "#{t('email')} (#{t('optional')})"), value: item['email'].presence || ((params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.email : ''), id: "detailed_email_#{item['uuid']}", required: local_assigns[:require_email_2fa] == true %>
+                        <%= tag.input type: 'email', multiple: true, name: 'submission[1][submitters][][email]', autocomplete: 'off', class: 'base-input !h-10 mt-1.5 w-full', placeholder: (local_assigns[:require_email_2fa] == true || local_assigns[:prefillable_fields].present? ? t(:email) : "#{t('email')} (#{t('optional')})"), value: item['email'].presence || ((params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.email : ''), id: "detailed_email_#{item['uuid']}", required: local_assigns[:require_email_2fa] == true && index.zero? %>
                       </linked-input>
                     </submitters-autocomplete>
                     <% has_phone_field = true %>
                     <custom-validation data-invalid-message="<%= t('use_international_format_1xxx_') %>">
                       <submitters-autocomplete data-field="phone">
                         <linked-input data-target-id="<%= "detailed_phone_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
-                          <%= tag.input type: 'tel', pattern: '^\+[0-9\s\-]+$', name: 'submission[1][submitters][][phone]', autocomplete: 'off', class: 'base-input !h-10 mt-1.5 w-full', placeholder: local_assigns[:require_phone_2fa] == true || local_assigns[:prefillable_fields].present? ? t(:phone) : "#{t('phone')} (#{t('optional')})", id: "detailed_phone_#{item['uuid']}", required: local_assigns[:require_phone_2fa] == true %>
+                          <%= tag.input type: 'tel', pattern: '^\+[0-9\s\-]+$', name: 'submission[1][submitters][][phone]', autocomplete: 'off', class: 'base-input !h-10 mt-1.5 w-full', placeholder: local_assigns[:require_phone_2fa] == true || local_assigns[:prefillable_fields].present? ? t(:phone) : "#{t('phone')} (#{t('optional')})", id: "detailed_phone_#{item['uuid']}", required: local_assigns[:require_phone_2fa] == true && index.zero? %>
                         </linked-input>
                       </submitters-autocomplete>
                     </custom-validation>
@@ -99,6 +99,7 @@
     <% if has_phone_field %>
       <%= render 'send_sms', f: %>
     <% end %>
+    <%= render 'extra_fields', f: %>
   </div>
   <div class="form-control">
     <%= f.button button_title(title: t('add_recipients')), class: 'base-button' %>

app/views/submissions/_email_form.html.erb

@@ -47,8 +47,9 @@
     </dynamic-list>
   <% end %>
   <div>
-    <%= render 'send_email', f:, template: %>
     <%= render('submitters_order', f:, template:) if Accounts.can_send_emails?(current_account) %>
+    <%= render 'send_email', f:, template: %>
+    <%= render 'extra_fields', f: %>
   </div>
   <div class="form-control">
     <%= content_for(:submit_button) || capture do %>

app/views/submissions/_phone_form.html.erb

@@ -58,7 +58,8 @@
   </dynamic-list>
   <div>
     <%= render('submitters_order', f:, template:) if Accounts.can_send_emails?(current_account) %>
-    <%= render 'send_sms', f: %>
+    <%= render 'send_sms', f:, checked: true %>
+    <%= render 'extra_phone_fields', f: %>
   </div>
   <div class="form-control">
     <%= f.button button_title(title: t('add_recipients')), class: 'base-button' %>

app/views/submissions/show.html.erb

@@ -133,7 +133,7 @@
                     <% bg_class = bg_classes[submitter_index % bg_classes.size] %>
                     <div class="absolute overflow-visible" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%;">
                       <div class="flex h-full w-full bg-opacity-80 justify-center items-center <%= bg_class %>">
-                        <%= svg_icon(SubmissionsController::FIELD_ICONS[field['type']], class: 'max-h-10 w-full h-full stroke-2 opacity-50') %>
+                        <%= svg_icon(SubmissionsController::FIELD_ICONS.fetch(field['type'], 'text_size'), class: 'max-h-10 w-full h-full stroke-2 opacity-50') %>
                       </div>
                     </div>
                   <% end %>

app/views/templates/_file_form.html.erb

@@ -1,12 +1,4 @@
 <%= form_for @template, data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
-  <% if @base_template %>
-    <%= hidden_field_tag :base_template_id, @base_template.id %>
-  <% end %>
-  <% if @base_template && (can?(:manage, :tenants) || true_user != current_user) && true_user.account.linked_accounts.active.accessible_by(current_ability).exists? %>
-    <div class="form-control -mb-2 mt-2">
-      <%= select_tag :account_id, options_for_select([true_user.account, *true_user.account.linked_accounts.active.accessible_by(current_ability)].uniq.map { |e| [e.name, e.id] }, current_account.id), required: true, class: 'base-select' %>
-    </div>
-  <% end %>
   <div class="form-control mt-4">
     <%= f.text_field :name, required: true, placeholder: t('document_name'), class: 'base-input', dir: 'auto' %>
   </div>
@@ -16,7 +8,7 @@
     </label>
     <folder-autocomplete class="flex justify-between w-full">
       <set-value data-on="blur" data-value="<%= TemplateFolder::DEFAULT_NAME %>" data-empty-only="true" class="peer w-full whitespace-nowrap">
-        <input id="folder_name" placeholder="<%= t('folder_name') %>" type="text" class="w-full outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.full_name || TemplateFolder::DEFAULT_NAME %>" autocomplete="off">
+        <input id="folder_name" placeholder="<%= t('folder_name') %>" type="text" class="w-full outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1" name="folder_name" value="<%= params[:folder_name].presence || TemplateFolder::DEFAULT_NAME %>" autocomplete="off">
       </set-value>
       <set-value data-on="click" data-value="" data-input-id="folder_name" class="peer-focus-within:hidden whitespace-nowrap">
         <label for="folder_name" data-clear-on-focus="true" class="shrink-0 link mr-1.5 cursor-pointer">
@@ -26,6 +18,6 @@
     </folder-autocomplete>
   </div>
   <div class="form-control">
-    <%= f.button button_title(title: @base_template ? t('submit') : t('create'), disabled_with: t('creating')), class: 'base-button' %>
+    <%= f.button button_title(title: t('create'), disabled_with: t('creating')), class: 'base-button' %>
   </div>
 <% end %>

app/views/templates/_template.html.erb

@@ -53,7 +53,7 @@
       <% end %>
       <% if can?(:create, template) %>
         <span class="tooltip tooltip-left" data-tip="<%= t('clone') %>">
-          <a href="<%= new_template_path(base_template_id: template.id) %>" data-turbo-frame="modal" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
+          <a href="<%= new_template_clone_path(template) %>" data-turbo-frame="modal" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
             <%= svg_icon('copy', class: 'w-4 h-4') %>
           </a>
         </span>

app/views/templates/_title.html.erb

@@ -63,7 +63,7 @@
       <%= button_to button_title(title: t('archive'), disabled_with: t('archiving'), title_class: 'inline', icon: svg_icon('archive', class: 'w-6 h-6')), template_path(template), class: 'btn btn-outline btn-sm w-full', form_class: 'flex-1', method: :delete, data: { turbo_confirm: t('are_you_sure_') } %>
     <% end %>
     <% if can?(:create, current_account.templates.new(author: current_user)) %>
-      <%= link_to new_template_path(base_template_id: template.id), class: 'btn btn-outline btn-sm flex-1', data: { turbo_frame: :modal } do %>
+      <%= link_to new_template_clone_path(template), class: 'btn btn-outline btn-sm flex-1', data: { turbo_frame: :modal } do %>
         <span class="flex items-center justify-center space-x-2">
           <%= svg_icon('copy', class: 'w-6 h-6') %>
           <span class="inline"><%= t('clone') %></span>

app/views/templates_clone/_form.html.erb

@@ -0,0 +1,29 @@
+<%= form_for @template, url: template_clone_index_path(@base_template), data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
+  <% accounts = Account.accessible_by(true_ability).where.not(id: true_user.account.testing_accounts).where(User.where(User.arel_table[:account_id].eq(Account.arel_table[:id])).arel.exists).active %>
+  <% if (can?(:manage, :tenants) || true_user != current_user) && accounts.where.not(id: current_account.id).exists? %>
+    <div class="form-control -mb-2 mt-2">
+      <%= select_tag :account_id, options_for_select([current_account, *accounts.order(:name)].uniq.map { |e| [e.name, e.id] }, current_account.id), required: true, class: 'base-select' %>
+    </div>
+  <% end %>
+  <div class="form-control mt-4">
+    <%= f.text_field :name, required: true, placeholder: t('document_name'), class: 'base-input', dir: 'auto' %>
+  </div>
+  <div class="mt-3 mb-4 flex items-center justify-between">
+    <label for="folder_name" class="cursor-pointer">
+      <%= svg_icon('folder', class: 'w-6 h-6') %>
+    </label>
+    <folder-autocomplete class="flex justify-between w-full">
+      <set-value data-on="blur" data-value="<%= TemplateFolder::DEFAULT_NAME %>" data-empty-only="true" class="peer w-full whitespace-nowrap">
+        <input id="folder_name" placeholder="<%= t('folder_name') %>" type="text" class="w-full outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.full_name || TemplateFolder::DEFAULT_NAME %>" autocomplete="off">
+      </set-value>
+      <set-value data-on="click" data-value="" data-input-id="folder_name" class="peer-focus-within:hidden whitespace-nowrap">
+        <label for="folder_name" data-clear-on-focus="true" class="shrink-0 link mr-1.5 cursor-pointer">
+          <%= t('change_folder') %>
+        </label>
+      </set-value>
+    </folder-autocomplete>
+  </div>
+  <div class="form-control">
+    <%= f.button button_title(title: t('submit'), disabled_with: t('creating')), class: 'base-button' %>
+  </div>
+<% end %>

app/views/templates_clone/new.html.erb

@@ -0,0 +1,3 @@
+<%= render 'shared/turbo_modal', title: t('clone_template') do %>
+  <%= render 'templates_clone/form' %>
+<% end %>

config/dotenv.rb

@@ -1,6 +1,20 @@
 # frozen_string_literal: true
 
 if ENV['RAILS_ENV'] == 'production'
+  if Process.uid.zero?
+    begin
+      workdir = ENV.fetch('WORKDIR', '.')
+
+      if File.exist?(workdir) && File.stat(workdir).uid != 2000
+        puts 'Changing the owner of the docuseal directory...' unless Dir.empty?(workdir)
+
+        FileUtils.chown_R(2000, 2000, workdir)
+      end
+    rescue StandardError
+      puts 'Unable to change docuseal directory owner'
+    end
+  end
+
   if !ENV['AWS_SECRET_MANAGER_ID'].to_s.empty?
     require 'aws-sdk-secretsmanager'
 
@@ -30,12 +44,30 @@ if ENV['RAILS_ENV'] == 'production'
       File.write(dotenv_path, default_env)
     end
 
+    if Process.uid.zero?
+      begin
+        File.chown(0, 0, dotenv_path)
+        File.chmod(0o600, dotenv_path)
+      rescue StandardError
+        puts 'Unable to set dotenv mod'
+      end
+    end
+
     database_url = ENV.fetch('DATABASE_URL', nil)
 
     Dotenv.load(dotenv_path)
 
     ENV['DATABASE_URL'] = ENV['DATABASE_URL'].to_s.empty? ? database_url : ENV.fetch('DATABASE_URL', nil)
   end
+
+  unless Process.uid == 2000
+    begin
+      Process::Sys.setgid(2000)
+      Process::Sys.setuid(2000)
+    rescue StandardError
+      puts 'Unable to run as 2000:2000'
+    end
+  end
 end
 
 if ENV['DATABASE_URL'].to_s.split('@').last.to_s.split('/').first.to_s.include?('_')

config/locales/i18n.yml

@@ -29,6 +29,10 @@ en: &en
   pro: Pro
   thanks: Thanks
   private: Private
+  require_email_2fa: Require email 2FA
+  when_checked_each_signer_must_verify_their_email_with_a_one_time_code_before_accessing_the_document: When checked, each signer must verify their email with a one-time code before accessing the document.
+  require_phone_2fa: Require phone 2FA
+  when_checked_each_signer_must_verify_their_phone_with_a_one_time_code_before_accessing_the_document: When checked, each signer must verify their phone with a one-time code before accessing the document.
   select: Select
   enabled: Enabled
   disabled: Disabled
@@ -1025,6 +1029,10 @@ es: &es
   stripe_account_has_been_connected: La cuenta de Stripe ha sido conectada.
   re_connect_stripe: Volver a conectar Stripe
   private: Privado
+  require_email_2fa: Requerir 2FA por correo electrónico
+  when_checked_each_signer_must_verify_their_email_with_a_one_time_code_before_accessing_the_document: Cuando está marcado, cada firmante debe verificar su correo electrónico con un código de un solo uso antes de acceder al documento.
+  require_phone_2fa: Requerir 2FA por teléfono
+  when_checked_each_signer_must_verify_their_phone_with_a_one_time_code_before_accessing_the_document: Cuando está marcado, cada firmante debe verificar su teléfono con un código de un solo uso antes de acceder al documento.
   resend_pending: Reenviar pendiente
   ensure_unique_recipients: Asegurar destinatarios únicos
   require_phone_2fa_to_open: Requiere 2FA por teléfono para abrir
@@ -2003,6 +2011,10 @@ it: &it
   stripe_account_has_been_connected: L'account Stripe è stato collegato.
   re_connect_stripe: Ricollega Stripe
   private: Privato
+  require_email_2fa: Richiedi 2FA email
+  when_checked_each_signer_must_verify_their_email_with_a_one_time_code_before_accessing_the_document: Quando selezionato, ogni firmatario deve verificare la propria email con un codice monouso prima di accedere al documento.
+  require_phone_2fa: Richiedi 2FA telefono
+  when_checked_each_signer_must_verify_their_phone_with_a_one_time_code_before_accessing_the_document: Quando selezionato, ogni firmatario deve verificare il proprio numero di telefono con un codice monouso prima di accedere al documento.
   resend_pending: Reinvia in sospeso
   ensure_unique_recipients: Assicurarsi destinatari unici
   require_phone_2fa_to_open: Richiedi l'autenticazione a due fattori tramite telefono per aprire
@@ -2982,6 +2994,10 @@ fr: &fr
   stripe_account_has_been_connected: Le compte Stripe a été connecté.
   re_connect_stripe: Reconnecter Stripe
   private: Privé
+  require_email_2fa: Exiger la 2FA par email
+  when_checked_each_signer_must_verify_their_email_with_a_one_time_code_before_accessing_the_document: Lorsque coché, chaque signataire doit vérifier son email avec un code à usage unique avant d'accéder au document.
+  require_phone_2fa: Exiger la 2FA par téléphone
+  when_checked_each_signer_must_verify_their_phone_with_a_one_time_code_before_accessing_the_document: Lorsque coché, chaque signataire doit vérifier son numéro de téléphone avec un code à usage unique avant d'accéder au document.
   resend_pending: Renvoyer en attente
   ensure_unique_recipients: Garantir des destinataires uniques
   require_phone_2fa_to_open: Exiger la 2FA par téléphone pour ouvrir
@@ -3957,6 +3973,10 @@ pt: &pt
   stripe_account_has_been_connected: Conta Stripe foi conectada.
   re_connect_stripe: Reconectar Stripe
   private: Privado
+  require_email_2fa: Exigir 2FA por email
+  when_checked_each_signer_must_verify_their_email_with_a_one_time_code_before_accessing_the_document: Quando marcado, cada signatário deve verificar seu email com um código de uso único antes de acessar o documento.
+  require_phone_2fa: Exigir 2FA por telefone
+  when_checked_each_signer_must_verify_their_phone_with_a_one_time_code_before_accessing_the_document: Quando marcado, cada signatário deve verificar seu telefone com um código de uso único antes de acessar o documento.
   resend_pending: Re-enviar pendente
   ensure_unique_recipients: Garantir destinatários únicos
   require_phone_2fa_to_open: Necessário autenticação de dois fatores via telefone para abrir
@@ -4921,6 +4941,10 @@ de: &de
   pro: Pro
   thanks: Danke
   private: Privat
+  require_email_2fa: E-Mail 2FA erforderlich
+  when_checked_each_signer_must_verify_their_email_with_a_one_time_code_before_accessing_the_document: Wenn aktiviert, muss jeder Unterzeichner seine E-Mail mit einem einmaligen Code verifizieren, bevor er auf das Dokument zugreifen kann.
+  require_phone_2fa: Telefon 2FA erforderlich
+  when_checked_each_signer_must_verify_their_phone_with_a_one_time_code_before_accessing_the_document: Wenn aktiviert, muss jeder Unterzeichner sein Telefon mit einem einmaligen Code verifizieren, bevor er auf das Dokument zugreifen kann.
   select: Auswählen
   enabled: Aktiviert
   disabled: Deaktiviert
@@ -6287,6 +6311,10 @@ nl: &nl
   pro: Pro
   thanks: Bedankt
   private: Privé
+  require_email_2fa: E-mail 2FA vereist
+  when_checked_each_signer_must_verify_their_email_with_a_one_time_code_before_accessing_the_document: Wanneer aangevinkt, moet elke ondertekenaar zijn e-mail verifiëren met een eenmalige code voordat hij toegang krijgt tot het document.
+  require_phone_2fa: Telefoon 2FA vereist
+  when_checked_each_signer_must_verify_their_phone_with_a_one_time_code_before_accessing_the_document: Wanneer aangevinkt, moet elke ondertekenaar zijn telefoon verifiëren met een eenmalige code voordat hij toegang krijgt tot het document.
   select: Selecteer
   enabled: Ingeschakeld
   disabled: Uitgeschakeld

config/routes.rb

@@ -92,6 +92,7 @@ Rails.application.routes.draw do
   resources :templates, only: %i[index], controller: 'templates_dashboard'
   resources :submissions_filters, only: %i[show], param: 'name'
   resources :templates, only: %i[new create edit update show destroy] do
+    resources :clone, only: %i[new create], controller: 'templates_clone'
     resource :debug, only: %i[show], controller: 'templates_debug' if Rails.env.development?
     resources :documents, only: %i[index create], controller: 'template_documents'
     resources :clone_and_replace, only: %i[create], controller: 'templates_clone_and_replace'

docker-compose.yml

@@ -13,9 +13,9 @@ services:
       - DATABASE_URL=postgresql://postgres:postgres@postgres:5432/docuseal
 
   postgres:
-    image: postgres:15
+    image: postgres:18
     volumes:
-      - './pg_data:/var/lib/postgresql/data'
+      - './pg_data:/var/lib/postgresql/18/docker'
     environment:
       POSTGRES_USER: postgres
       POSTGRES_PASSWORD: postgres
@@ -34,6 +34,6 @@ services:
       - 443:443
       - 443:443/udp
     volumes:
-      - .:/data
+      - ./caddy:/data/caddy
     environment:
       - HOST=${HOST}

lib/docuseal.rb

@@ -39,6 +39,7 @@ module Docuseal
   CERTS = JSON.parse(ENV.fetch('CERTS', '{}'))
   TIMESERVER_URL = ENV.fetch('TIMESERVER_URL', nil)
   VERSION_FILE_PATH = Rails.root.join('.version')
+  VERSION_FILE2_PATH = Rails.public_path.join('version')
 
   DEFAULT_URL_OPTIONS = {
     host: HOST,
@@ -48,7 +49,12 @@ module Docuseal
   module_function
 
   def version
-    @version ||= VERSION_FILE_PATH.read.strip if VERSION_FILE_PATH.exist?
+    @version ||=
+      if VERSION_FILE_PATH.exist?
+        VERSION_FILE_PATH.read.strip
+      elsif VERSION_FILE2_PATH.exist?
+        VERSION_FILE2_PATH.each_line.first.to_s.strip
+      end
   end
 
   def multitenant?

lib/submissions/generate_combined_attachment.rb

@@ -4,8 +4,8 @@ module Submissions
   module GenerateCombinedAttachment
     module_function
 
-    def call(submitter)
-      pdf = build_combined_pdf(submitter)
+    def call(submitter, with_audit: true)
+      pdf = build_combined_pdf(submitter, with_audit:)
 
       submission = submitter.submission
       account = submission.account
@@ -39,7 +39,7 @@ module Submissions
         blob: ActiveStorage::Blob.create_and_upload!(
           io: io.tap(&:rewind), filename: "#{submission.name || submission.template.name}.pdf"
         ),
-        name: 'combined_document',
+        name: with_audit ? 'combined_document' : 'merged_document',
         record: submission
       )
     end
@@ -58,14 +58,16 @@ module Submissions
       pdf.sign(io, write_options: { validate: false }, **sign_params)
     end
 
-    def build_combined_pdf(submitter)
+    def build_combined_pdf(submitter, with_audit:)
       pdfs_index = Submissions::GenerateResultAttachments.generate_pdfs(submitter)
 
-      audit_trail = I18n.with_locale(submitter.account.locale) do
-        Submissions::GenerateAuditTrail.build_audit_trail(submitter.submission)
-      end
+      if with_audit
+        audit_trail = I18n.with_locale(submitter.account.locale) do
+          Submissions::GenerateAuditTrail.build_audit_trail(submitter.submission)
+        end
 
-      audit_trail.dispatch_message(:complete_objects)
+        audit_trail.dispatch_message(:complete_objects)
+      end
 
       result = HexaPDF::Document.new
 
@@ -79,7 +81,7 @@ module Submissions
         pdf.pages.each { |page| result.pages << result.import(page) }
       end
 
-      audit_trail.pages.each { |page| result.pages << result.import(page) }
+      audit_trail&.pages&.each { |page| result.pages << result.import(page) }
 
       result
     end

lib/submissions/generate_preview_attachments.rb

@@ -5,7 +5,7 @@ module Submissions
     module_function
 
     # rubocop:disable Metrics
-    def call(submission, values_hash: nil, submitter: nil)
+    def call(submission, values_hash: nil, submitter: nil, merge: false)
       values_hash ||= if submitter
                         build_submitter_values_hash(submitter)
                       else
@@ -42,48 +42,74 @@ module Submissions
 
       template = submission.template
 
-      image_pdfs = []
-      original_documents = submission.schema_documents.preload(:blob)
+      if merge
+        result = HexaPDF::Document.new
 
-      result_attachments =
-        (submission.template_schema || template.schema).filter_map do |item|
+        (submission.template_schema || template.schema).each do |item|
           pdf = pdfs_index[item['attachment_uuid']]
 
-          next if pdf.nil?
+          next unless pdf
 
-          if original_documents.find { |a| a.uuid == item['attachment_uuid'] }.image?
-            pdf = GenerateResultAttachments.normalize_image_pdf(pdf)
+          pdf.dispatch_message(:complete_objects)
 
-            image_pdfs << pdf
-          end
-
-          build_pdf_attachment(pdf:, submission:, submitter:,
-                               uuid: item['attachment_uuid'],
-                               values_hash:,
-                               name: item['name'])
+          pdf.pages.each { |page| result.pages << result.import(page) }
         end
 
-      return ApplicationRecord.no_touching { result_attachments.map { |e| e.tap(&:save!) } } if image_pdfs.size < 2
-
-      images_pdf =
-        image_pdfs.each_with_object(HexaPDF::Document.new) do |pdf, doc|
-          pdf.pages.each { |page| doc.pages << doc.import(page) }
-        end
-
-      images_pdf = GenerateResultAttachments.normalize_image_pdf(images_pdf)
-
-      images_pdf_attachment =
-        build_pdf_attachment(
-          pdf: images_pdf,
+        attachment = build_pdf_attachment(
+          pdf: result,
           submission:,
-          submitter:,
-          uuid: GenerateResultAttachments.images_pdf_uuid(original_documents.select(&:image?)),
           values_hash:,
-          name: submission.name || template.name
+          name: 'preview_merged_document',
+          filename: "#{submission.name || template.name}.pdf"
         )
 
-      ApplicationRecord.no_touching do
-        (result_attachments + [images_pdf_attachment]).map { |e| e.tap(&:save!) }
+        ApplicationRecord.no_touching { attachment.save! }
+
+        [attachment]
+      else
+        image_pdfs = []
+        original_documents = submission.schema_documents.preload(:blob)
+
+        result_attachments =
+          (submission.template_schema || template.schema).filter_map do |item|
+            pdf = pdfs_index[item['attachment_uuid']]
+
+            next if pdf.nil?
+
+            if original_documents.find { |a| a.uuid == item['attachment_uuid'] }.image?
+              pdf = GenerateResultAttachments.normalize_image_pdf(pdf)
+
+              image_pdfs << pdf
+            end
+
+            build_pdf_attachment(pdf:, submission:, submitter:,
+                                 uuid: item['attachment_uuid'],
+                                 values_hash:,
+                                 filename: "#{item['name']}.pdf")
+          end
+
+        return ApplicationRecord.no_touching { result_attachments.map { |e| e.tap(&:save!) } } if image_pdfs.size < 2
+
+        images_pdf =
+          image_pdfs.each_with_object(HexaPDF::Document.new) do |pdf, doc|
+            pdf.pages.each { |page| doc.pages << doc.import(page) }
+          end
+
+        images_pdf = GenerateResultAttachments.normalize_image_pdf(images_pdf)
+
+        images_pdf_attachment =
+          build_pdf_attachment(
+            pdf: images_pdf,
+            submission:,
+            submitter:,
+            uuid: GenerateResultAttachments.images_pdf_uuid(original_documents.select(&:image?)),
+            values_hash:,
+            filename: "#{submission.name || template.name}.pdf"
+          )
+
+        ApplicationRecord.no_touching do
+          (result_attachments + [images_pdf_attachment]).map { |e| e.tap(&:save!) }
+        end
       end
     end
 
@@ -102,7 +128,8 @@ module Submissions
       )
     end
 
-    def build_pdf_attachment(pdf:, submission:, submitter:, uuid:, name:, values_hash:)
+    def build_pdf_attachment(pdf:, submission:, filename:, values_hash:, submitter: nil, uuid: nil,
+                             name: 'preview_documents')
       io = StringIO.new
 
       begin
@@ -114,13 +141,13 @@ module Submissions
       end
 
       ActiveStorage::Attachment.new(
-        blob: ActiveStorage::Blob.create_and_upload!(io: io.tap(&:rewind), filename: "#{name}.pdf"),
+        blob: ActiveStorage::Blob.create_and_upload!(io: io.tap(&:rewind), filename:),
         io_data: io.string,
         metadata: { original_uuid: uuid,
                     values_hash:,
                     analyzed: true,
-                    sha256: Base64.urlsafe_encode64(Digest::SHA256.digest(io.string)) },
-        name: 'preview_documents',
+                    sha256: Base64.urlsafe_encode64(Digest::SHA256.digest(io.string)) }.compact,
+        name: name,
         record: submitter || submission
       )
     end

lib/submissions/generate_result_attachments.rb

@@ -318,7 +318,7 @@ module Submissions
                 timezone = submitter.account.timezone
                 timezone = submitter.timezone || submitter.account.timezone if with_submitter_timezone
 
-                if with_signature_id_reason
+                if with_signature_id_reason || field.dig('preferences', 'reasons').present?
                   "#{"#{I18n.t('reason')}: " if reason_value}#{reason_value || I18n.t('digitally_signed_by')} " \
                     "#{submitter.name}#{" <#{submitter.email}>" if submitter.email.present?}\n" \
                     "#{I18n.l(attachment.created_at.in_time_zone(timezone), format: :long)} " \

lib/submissions/normalize_param_utils.rb

@@ -33,14 +33,18 @@ module Submissions
       return submitter_params if default_values.blank?
 
       values, new_attachments, new_fields =
-        Submitters::NormalizeValues.call(template,
-                                         default_values,
-                                         submitter_name: submitter_params[:role] ||
-                                                         template.submitters.dig(index, 'name'),
-                                         role_names: submitter_params[:roles],
-                                         for_submitter:,
-                                         add_fields:,
-                                         throw_errors: !with_values)
+        Submitters::NormalizeValues.call(
+          template,
+          default_values,
+          submitter_name: submitter_params[:role] ||
+                          (submitter_params[:uuid] &&
+                           template.submitters.find { |s| s['uuid'] == submitter_params[:uuid] }&.dig('name')) ||
+                          template.submitters.dig(index, 'name'),
+          role_names: submitter_params[:roles],
+          for_submitter:,
+          add_fields:,
+          throw_errors: !with_values
+        )
 
       submitter_params[:values] = values
 

lib/submitters/submit_values.rb

@@ -318,21 +318,38 @@ module Submitters
     end
 
     def check_field_condition(condition, submitter_values, fields_uuid_index)
+      value = submitter_values[condition['field_uuid']]
+
       case condition['action']
       when 'empty', 'unchecked'
-        submitter_values[condition['field_uuid']].blank?
+        value.blank?
       when 'not_empty', 'checked'
-        submitter_values[condition['field_uuid']].present?
+        value.present?
       when 'equal', 'contains'
         field = fields_uuid_index[condition['field_uuid']]
+
+        return true unless field
+
+        values = Array.wrap(value)
+
+        return values.include?(condition['value']) unless field['options']
+
         option = field['options'].find { |o| o['uuid'] == condition['value'] }
-        values = Array.wrap(submitter_values[condition['field_uuid']])
+
+        return false unless option
 
         values.include?(option['value'].presence || "#{I18n.t('option')} #{field['options'].index(option) + 1}")
       when 'not_equal', 'does_not_contain'
         field = fields_uuid_index[condition['field_uuid']]
+
+        return true unless field
+        return false unless field['options']
+
         option = field['options'].find { |o| o['uuid'] == condition['value'] }
-        values = Array.wrap(submitter_values[condition['field_uuid']])
+
+        return false unless option
+
+        values = Array.wrap(value)
 
         values.exclude?(option['value'].presence || "#{I18n.t('option')} #{field['options'].index(option) + 1}")
       else

lib/templates/detect_fields.rb

@@ -60,24 +60,26 @@ module Templates
 
     # rubocop:disable Metrics, Style
     def call(io, attachment: nil, confidence: 0.3, temperature: 1, inference: Templates::ImageToFields, nms: 0.1,
-             split_page: false, aspect_ratio: true, padding: 20, regexp_type: true, &)
+             nmm: 0.5, split_page: false, aspect_ratio: true, padding: 20, regexp_type: true, page_number: nil, &)
       fields, head_node =
         if attachment&.image?
-          process_image_attachment(io, attachment:, confidence:, nms:, split_page:, inference:,
-                                       temperature:, aspect_ratio:, padding:, &)
+          process_image_attachment(io, attachment:, confidence:, nms:, nmm:, split_page:, inference:,
+                                       temperature:, aspect_ratio:, padding:, page_number:, &)
         else
-          process_pdf_attachment(io, attachment:, confidence:, nms:, split_page:, inference:,
-                                     temperature:, aspect_ratio:, regexp_type:, padding:, &)
+          process_pdf_attachment(io, attachment:, confidence:, nms:, nmm:, split_page:, inference:,
+                                     temperature:, aspect_ratio:, regexp_type:, padding:, page_number:, &)
         end
 
       [fields, head_node]
     end
 
-    def process_image_attachment(io, attachment:, confidence:, nms:, temperature:, inference:,
-                                 split_page: false, aspect_ratio: false, padding: nil)
+    def process_image_attachment(io, attachment:, confidence:, nms:, nmm:, temperature:, inference:,
+                                 split_page: false, aspect_ratio: false, padding: nil, page_number: nil)
+      return [[], nil] if page_number && page_number != 0
+
       image = Vips::Image.new_from_buffer(io.read, '')
 
-      fields = inference.call(image, confidence:, nms:, split_page:,
+      fields = inference.call(image, confidence:, nms:, nmm:, split_page:,
                                      temperature:, aspect_ratio:, padding:)
 
       fields = sort_fields(fields, y_threshold: 10.0 / image.height)
@@ -104,15 +106,20 @@ module Templates
       [fields, nil]
     end
 
-    def process_pdf_attachment(io, attachment:, confidence:, nms:, temperature:, inference:,
-                               split_page: false, aspect_ratio: false, padding: nil, regexp_type: false)
+    def process_pdf_attachment(io, attachment:, confidence:, nms:, nmm:, temperature:, inference:,
+                               split_page: false, aspect_ratio: false, padding: nil, regexp_type: false,
+                               page_number: nil)
       doc = Pdfium::Document.open_bytes(io.read)
 
       head_node = PageNode.new(elem: ''.b, page: 0, attachment_uuid: attachment&.uuid)
       tail_node = head_node
 
-      fields = doc.page_count.times.flat_map do |page_number|
-        page = doc.get_page(page_number)
+      page_range = page_number ? [page_number] : (0...doc.page_count)
+
+      fields = page_range.flat_map do |current_page_number|
+        next [] if current_page_number >= doc.page_count
+
+        page = doc.get_page(current_page_number)
 
         size_key = page.width > page.height ? :width : :height
         size = padding ? inference.resolution * 1.5 : inference.resolution
@@ -121,7 +128,7 @@ module Templates
 
         image = Vips::Image.new_from_memory(data, width, height, 4, :uchar)
 
-        fields = inference.call(image, confidence: confidence / 3.0, nms:, split_page:,
+        fields = inference.call(image, confidence: confidence / 3.0, nms:, nmm:, split_page:,
                                        temperature:, aspect_ratio:, padding:)
 
         text_fields = extract_text_fields_from_page(page)
@@ -149,13 +156,13 @@ module Templates
             areas: [{
               x: field.x, y: field.y,
               w: field.w, h: field.h,
-              page: page_number,
+              page: current_page_number,
               attachment_uuid: attachment&.uuid
             }]
           }
         end
 
-        yield [attachment&.uuid, page_number, fields] if block_given?
+        yield [attachment&.uuid, current_page_number, fields] if block_given?
 
         fields
       ensure

lib/templates/image_to_fields.rb

@@ -26,7 +26,7 @@ module Templates
     CPU_THREADS = Etc.nprocessors
 
     # rubocop:disable Metrics
-    def call(image, confidence: 0.3, nms: 0.1, temperature: 1,
+    def call(image, confidence: 0.3, nms: 0.1, nmm: 0.9, temperature: 1,
              split_page: false, aspect_ratio: true, padding: nil, resolution: self.resolution)
       image = image.extract_band(0, n: 3) if image.bands > 3
 
@@ -68,7 +68,7 @@ module Templates
         detections = postprocess_outputs(boxes, logits, transform_info, confidence:, temperature:, resolution:)
       end
 
-      detections = apply_nms(detections, nms)
+      detections = apply_nms_nmm(detections, nms_threshold: nms, nmm_threshold: nmm)
 
       build_fields_from_detections(detections, image)
     end
@@ -245,7 +245,7 @@ module Templates
 
       left, top, trim_width, trim_height = image.find_trim(threshold: 10, background: [255, 255, 255])
 
-      trim_width = [trim_width, image.width * 0.7].max
+      trim_width = [trim_width, image.width - (left * 1.9)].max
 
       padded_left = [left - padding, 0].max
       padded_top = [top - padding, 0].max
@@ -297,7 +297,10 @@ module Templates
       [img_array.reshape(1, 3, resolution, resolution), transform_info]
     end
 
-    def nms(boxes, scores, iou_threshold = 0.5)
+    def nms(detections, iou_threshold = 0.5)
+      boxes = detections[:xyxy]
+      scores = detections[:confidence]
+
       return Numo::Int32[] if boxes.shape[0].zero?
 
       x1 = boxes[true, 0]
@@ -333,7 +336,73 @@ module Templates
         order = order[inds + 1]
       end
 
-      Numo::Int32.cast(keep)
+      {
+        xyxy: detections[:xyxy][keep, true],
+        confidence: detections[:confidence][keep],
+        class_id: detections[:class_id][keep]
+      }
+    end
+
+    def nmm(detections, overlap_threshold = 0.9, confidence: 0.3)
+      boxes = detections[:xyxy]
+      scores = detections[:confidence]
+      classes = detections[:class_id]
+
+      return detections if boxes.shape[0].zero?
+
+      x1 = boxes[true, 0]
+      y1 = boxes[true, 1]
+      x2 = boxes[true, 2]
+      y2 = boxes[true, 3]
+
+      areas = (x2 - x1) * (y2 - y1)
+      order = areas.sort_index.reverse
+
+      keep = []
+
+      while order.size.positive?
+        i = order[0]
+        keep << i
+        break if order.size == 1
+
+        xx1 = Numo::SFloat.maximum(x1[i], x1[order[1..]])
+        yy1 = Numo::SFloat.maximum(y1[i], y1[order[1..]])
+        xx2 = Numo::SFloat.minimum(x2[i], x2[order[1..]])
+        yy2 = Numo::SFloat.minimum(y2[i], y2[order[1..]])
+
+        w = Numo::SFloat.maximum(0.0, xx2 - xx1)
+        h = Numo::SFloat.maximum(0.0, yy2 - yy1)
+
+        intersection = w * h
+
+        overlap = intersection / areas[order[1..]]
+
+        merge_mask = scores[i] > confidence ? (overlap.gt(overlap_threshold) & classes[order[1..]].eq(classes[i])) : nil
+
+        if merge_mask && (merge_inds = merge_mask.where).size.positive?
+          candidates = order[merge_inds + 1]
+
+          scores[i] = [scores[i], scores[candidates].max].max
+
+          x1[i] = [x1[i], x1[candidates].min].min
+          y1[i] = [y1[i], y1[candidates].min].min
+          x2[i] = [x2[i], x2[candidates].max].max
+          y2[i] = [y2[i], y2[candidates].max].max
+        end
+
+        if merge_mask
+          inds = (~merge_mask).where
+          order = order[inds + 1]
+        else
+          order = order[1..]
+        end
+      end
+
+      {
+        xyxy: detections[:xyxy][keep, true],
+        confidence: detections[:confidence][keep],
+        class_id: detections[:class_id][keep]
+      }
     end
 
     def postprocess_outputs(boxes, logits, transform_info, detections = nil, confidence: 0.3, temperature: 1,
@@ -429,25 +498,21 @@ module Templates
       end
     end
 
-    def apply_nms(detections, threshold = 0.5)
+    def apply_nms_nmm(detections, nms_threshold: 0.5, nmm_threshold: 0.7, confidence: 0.3)
       return detections if detections[:xyxy].shape[0].zero?
 
-      keep_indices = nms(detections[:xyxy], detections[:confidence], threshold)
+      nms_result = nms(detections, nms_threshold)
 
-      {
-        xyxy: detections[:xyxy][keep_indices, true],
-        confidence: detections[:confidence][keep_indices],
-        class_id: detections[:class_id][keep_indices]
-      }
+      nmm(nms_result, nmm_threshold, confidence:)
     end
 
     def model
       @model ||= OnnxRuntime::Model.new(
         MODEL_PATH.to_s,
-        inter_op_num_threads: CPU_THREADS,
+        inter_op_num_threads: 1,
         intra_op_num_threads: CPU_THREADS,
         enable_mem_pattern: false,
-        enable_cpu_mem_arena: false,
+        enable_cpu_mem_arena: Docuseal.multitenant? || Rails.env.development?,
         providers: ['CPUExecutionProvider']
       )
     end