Merge from docusealco/wip

Dockerfile

@@ -36,6 +36,7 @@ COPY ./config/shakapacker.yml ./config/shakapacker.yml
 COPY ./postcss.config.js ./postcss.config.js
 COPY ./tailwind.config.js ./tailwind.config.js
 COPY ./tailwind.form.config.js ./tailwind.form.config.js
+COPY ./tailwind.dynamic.config.js ./tailwind.dynamic.config.js
 COPY ./tailwind.application.config.js ./tailwind.application.config.js
 COPY ./app/javascript ./app/javascript
 COPY ./app/views ./app/views
@@ -48,7 +49,7 @@ ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
 ENV LD_PRELOAD=/lib/libgcompat.so.0
 ENV OPENSSL_CONF=/etc/openssl_legacy.cnf
-ENV VIPS_MAX_COORD=10000
+ENV VIPS_MAX_COORD=15000
 
 WORKDIR /app
 
@@ -80,7 +81,7 @@ 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 LICENSE LICENSE_ADDITIONAL_TERMS README.md Rakefile config.ru .version ./
 COPY --chown=docuseal:docuseal .version ./public/version
 
 COPY --chown=docuseal:docuseal --from=download /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts

LICENSE_ADDITIONAL_TERMS

@@ -0,0 +1,5 @@
+Additional Terms
+
+In accordance with Section 7(b) of the GNU Affero General Public License,
+a covered work must retain the original DocuSeal attribution in interactive
+user interfaces.

README.md

@@ -97,8 +97,8 @@ At DocuSeal we have expertise and technologies to make documents creation, filli
 
 ## License
 
-Distributed under the AGPLv3 License. See [LICENSE](https://github.com/docusealco/docuseal/blob/master/LICENSE) for more information.
-Unless otherwise noted, all files © 2023 DocuSeal LLC.
+Distributed under the AGPLv3 License with Section 7(b) Additional Terms. See [LICENSE](https://github.com/docusealco/docuseal/blob/master/LICENSE) and [LICENSE_ADDITIONAL_TERMS](https://github.com/docusealco/docuseal/blob/master/LICENSE_ADDITIONAL_TERMS) for more information.
+Unless otherwise noted, all files © 2023-2026 DocuSeal LLC.
 
 ## Tools
 

app/controllers/account_configs_controller.rb

@@ -23,7 +23,8 @@ class AccountConfigsController < ApplicationController
     AccountConfig::WITH_SIGNATURE_ID,
     AccountConfig::COMBINE_PDF_RESULT_KEY,
     AccountConfig::REQUIRE_SIGNING_REASON_KEY,
-    AccountConfig::DOCUMENT_FILENAME_FORMAT_KEY
+    AccountConfig::DOCUMENT_FILENAME_FORMAT_KEY,
+    AccountConfig::ENABLE_MCP_KEY
   ].freeze
 
   InvalidKey = Class.new(StandardError)

app/controllers/api/templates_controller.rb

@@ -117,7 +117,7 @@ module Api
                       conditions: [%i[field_uuid value action operation]],
                       options: [%i[value uuid]],
                       validation: %i[message pattern min max step],
-                      areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]]
+                      areas: [%i[uuid x y w h cell_w attachment_uuid option_uuid page]] }]]
         }
       ]
 

app/controllers/mcp_controller.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+class McpController < ActionController::API
+  before_action :authenticate_user!
+  before_action :verify_mcp_enabled!
+
+  before_action do
+    authorize!(:manage, :mcp)
+  end
+
+  def call
+    return head :ok if request.raw_post.blank?
+
+    body = JSON.parse(request.raw_post)
+
+    result = Mcp::HandleRequest.call(body, current_user, current_ability)
+
+    if result
+      render json: result
+    else
+      head :accepted
+    end
+  rescue CanCan::AccessDenied
+    render json: { jsonrpc: '2.0', id: nil, error: { code: -32_603, message: 'Forbidden' } }, status: :forbidden
+  rescue JSON::ParserError
+    render json: { jsonrpc: '2.0', id: nil, error: { code: -32_700, message: 'Parse error' } }, status: :bad_request
+  end
+
+  private
+
+  def authenticate_user!
+    render json: { error: 'Not authenticated' }, status: :unauthorized unless current_user
+  end
+
+  def verify_mcp_enabled!
+    return if Docuseal.multitenant?
+
+    return if AccountConfig.exists?(account_id: current_user.account_id,
+                                    key: AccountConfig::ENABLE_MCP_KEY,
+                                    value: true)
+
+    render json: { error: 'MCP is disabled' }, status: :forbidden
+  end
+
+  def current_user
+    @current_user ||= user_from_api_key
+  end
+
+  def user_from_api_key
+    token = request.headers['Authorization'].to_s[/\ABearer\s+(.+)\z/, 1]
+
+    return if token.blank?
+
+    sha256 = Digest::SHA256.hexdigest(token)
+
+    User.joins(:mcp_tokens).active.find_by(mcp_tokens: { sha256:, archived_at: nil })
+  end
+end

app/controllers/mcp_settings_controller.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+class McpSettingsController < ApplicationController
+  load_and_authorize_resource :mcp_token, parent: false
+
+  before_action do
+    authorize!(:manage, :mcp)
+  end
+
+  def index
+    @mcp_tokens = @mcp_tokens.active.order(id: :desc)
+  end
+
+  def create
+    @mcp_token = current_user.mcp_tokens.new(mcp_token_params)
+
+    if @mcp_token.save
+      @mcp_tokens = [@mcp_token]
+
+      render :index, status: :created
+    else
+      render turbo_stream: turbo_stream.replace(:modal, template: 'mcp_settings/new'), status: :unprocessable_content
+    end
+  end
+
+  def destroy
+    @mcp_token.update!(archived_at: Time.current)
+
+    redirect_back fallback_location: settings_mcp_index_path, notice: I18n.t('mcp_token_has_been_removed')
+  end
+
+  private
+
+  def mcp_token_params
+    params.require(:mcp_token).permit(:name)
+  end
+end

app/controllers/preview_document_page_controller.rb

@@ -6,9 +6,17 @@ class PreviewDocumentPageController < ActionController::API
   FORMAT = Templates::ProcessDocument::FORMAT
 
   def show
-    attachment_uuid = ApplicationRecord.signed_id_verifier.verified(params[:signed_uuid], purpose: :attachment)
+    result_data =
+      ApplicationRecord.signed_id_verifier.verified(params[:signed_key], purpose: :attachment)
 
-    attachment = ActiveStorage::Attachment.find_by(uuid: attachment_uuid) if attachment_uuid
+    attachment =
+      if result_data.is_a?(Array) && result_data.compact_blank.size == 2
+        attachment_id, attachment_uuid = result_data
+
+        ActiveStorage::Attachment.find_by(id: attachment_id, uuid: attachment_uuid)
+      elsif result_data
+        ActiveStorage::Attachment.find_by(uuid: result_data)
+      end
 
     return head :not_found unless attachment
 

app/controllers/start_form_controller.rb

@@ -172,6 +172,8 @@ class StartFormController < ApplicationController
                                             submitters: [submitter],
                                             source: :link)
 
+    Submissions::CreateFromSubmitters.maybe_set_dynamic_documents(submitter.submission)
+
     submitter.account_id = submitter.submission.account_id
 
     submitter

app/controllers/submissions_controller.rb

@@ -51,18 +51,7 @@ class SubmissionsController < ApplicationController
                                        emails: params[:emails],
                                        params: params.merge('send_completed_email' => true))
       else
-        submissions_attrs = submissions_params[:submission].to_h.values
-
-        submissions_attrs, _, new_fields =
-          Submissions::NormalizeParamUtils.normalize_submissions_params!(submissions_attrs, @template, add_fields: true)
-
-        Submissions.create_from_submitters(template: @template,
-                                           user: current_user,
-                                           source: :invite,
-                                           submitters_order: params[:preserve_order] == '1' ? 'preserved' : 'random',
-                                           submissions_attrs:,
-                                           new_fields:,
-                                           params: params.merge('send_completed_email' => true))
+        create_submissions(@template, submissions_params, params)
       end
 
     WebhookUrls.enqueue_events(submissions, 'submission.created')
@@ -97,6 +86,21 @@ class SubmissionsController < ApplicationController
 
   private
 
+  def create_submissions(template, submissions_params, params)
+    submissions_attrs = submissions_params[:submission].to_h.values
+
+    submissions_attrs, _, new_fields =
+      Submissions::NormalizeParamUtils.normalize_submissions_params!(submissions_attrs, template, add_fields: true)
+
+    Submissions.create_from_submitters(template: template,
+                                       user: current_user,
+                                       source: :invite,
+                                       submitters_order: params[:preserve_order] == '1' ? 'preserved' : 'random',
+                                       submissions_attrs:,
+                                       new_fields:,
+                                       params: params.merge('send_completed_email' => true))
+  end
+
   def save_template_message(template, params)
     template.preferences['request_email_subject'] = params[:subject] if params[:subject].present?
     template.preferences['request_email_body'] = params[:body] if params[:body].present?

app/controllers/submissions_export_controller.rb

@@ -5,10 +5,11 @@ class SubmissionsExportController < ApplicationController
   load_and_authorize_resource :submission, through: :template, parent: false, only: :index
 
   def index
-    submissions = @submissions.active
-                              .preload(submitters: { documents_attachments: :blob,
-                                                     attachments_attachments: :blob })
-                              .order(id: :asc)
+    submissions = params[:archived] == 'true' ? @submissions.archived : @submissions.active
+
+    submissions = submissions.preload(submitters: { documents_attachments: :blob,
+                                                    attachments_attachments: :blob })
+                             .order(id: :asc)
 
     submissions = Submissions.search(current_user, submissions, params[:q], search_values: true)
     submissions = Submissions::Filter.call(submissions, current_user, params)

app/controllers/submitters_autocomplete_controller.rb

@@ -7,25 +7,34 @@ class SubmittersAutocompleteController < ApplicationController
   LIMIT = 100
 
   def index
-    submitters = search_submitters(@submitters)
+    field = SELECT_COLUMNS.find { |c| c == params[:field] }
+
+    submitters = search_submitters(@submitters, field)
 
     arel_columns = SELECT_COLUMNS.map { |col| Submitter.arel_table[col] }
-    values = submitters.limit(LIMIT).group(arel_columns).pluck(arel_columns)
+
+    values =
+      if field
+        max_ids = submitters.group(field).limit(LIMIT).select(Submitter.arel_table[:id].maximum)
+
+        submitters.where(id: max_ids).order(id: :desc).pluck(arel_columns)
+      else
+        submitters.limit(LIMIT).group(arel_columns).pluck(arel_columns)
+      end
 
     attrs = values.map { |row| SELECT_COLUMNS.zip(row).to_h }
-    attrs = attrs.uniq { |e| e[params[:field]] } if params[:field].present?
 
     render json: attrs
   end
 
   private
 
-  def search_submitters(submitters)
-    if SELECT_COLUMNS.include?(params[:field])
+  def search_submitters(submitters, field)
+    if field
       if Docuseal.fulltext_search?
-        Submitters.fulltext_search_field(current_user, submitters, params[:q], params[:field])
+        Submitters.fulltext_search_field(current_user, submitters, params[:q], field)
       else
-        column = Submitter.arel_table[params[:field].to_sym]
+        column = Submitter.arel_table[field.to_sym]
 
         term = "#{params[:q].downcase}%"
 

app/controllers/template_documents_controller.rb

@@ -16,7 +16,7 @@ class TemplateDocumentsController < ApplicationController
 
     old_fields_hash = @template.fields.hash
 
-    documents = Templates::CreateAttachments.call(@template, params, extract_fields: true)
+    documents, = Templates::CreateAttachments.call(@template, params, extract_fields: true)
 
     schema = documents.map do |doc|
       { attachment_uuid: doc.uuid, name: doc.filename.base }
@@ -27,7 +27,7 @@ class TemplateDocumentsController < ApplicationController
       fields: old_fields_hash == @template.fields.hash ? nil : @template.fields,
       submitters: old_fields_hash == @template.fields.hash ? nil : @template.submitters,
       documents: documents.as_json(
-        methods: %i[metadata signed_uuid],
+        methods: %i[metadata signed_key],
         include: {
           preview_images: { methods: %i[url metadata filename] }
         }

app/controllers/templates_clone_controller.rb

@@ -21,7 +21,7 @@ class TemplatesCloneController < ApplicationController
 
     authorize!(:create, @template)
 
-    if params[:account_id].present? && true_ability.authorize!(:manage, Account.find(params[:account_id]))
+    if params[:account_id].present? && true_ability.can?(: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

app/controllers/templates_controller.rb

@@ -35,7 +35,7 @@ class TemplatesController < ApplicationController
     @template_data =
       @template.as_json.merge(
         documents: @template.schema_documents.as_json(
-          methods: %i[metadata signed_uuid],
+          methods: %i[metadata signed_key],
           include: { preview_images: { methods: %i[url metadata filename] } }
         )
       ).to_json
@@ -95,10 +95,11 @@ class TemplatesController < ApplicationController
   def template_params
     params.require(:template).permit(
       :name,
-      { schema: [[:attachment_uuid, :google_drive_file_id, :name,
+      { schema: [[:attachment_uuid, :google_drive_file_id, :name, :dynamic,
                   { conditions: [%i[field_uuid value action operation]] }]],
         submitters: [%i[name uuid is_requester linked_to_uuid invite_via_field_uuid
                         invite_by_uuid optional_invite_by_uuid email order]],
+        variables_schema: {},
         fields: [[:uuid, :submitter_uuid, :name, :type,
                   :required, :readonly, :default_value,
                   :title, :description, :prefillable,
@@ -107,7 +108,7 @@ class TemplatesController < ApplicationController
                     conditions: [%i[field_uuid value action operation]],
                     options: [%i[value uuid]],
                     validation: %i[message pattern min max step],
-                    areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]] }
+                    areas: [%i[uuid x y w h cell_w attachment_uuid option_uuid page]] }]] }
     )
   end
 end

app/controllers/templates_debug_controller.rb

@@ -9,21 +9,23 @@ class TemplatesDebugController < ApplicationController
     schema_uuids = @template.schema.index_by { |e| e['attachment_uuid'] }
     attachment = @template.documents.find { |a| schema_uuids[a.uuid] }
 
-    data = attachment.download
+    if attachment
+      data = attachment.download
 
-    unless attachment.image?
-      pdf = HexaPDF::Document.new(io: StringIO.new(data))
+      unless attachment.image?
+        pdf = HexaPDF::Document.new(io: StringIO.new(data))
 
-      fields = Templates::FindAcroFields.call(pdf, attachment, data)
+        fields = Templates::FindAcroFields.call(pdf, attachment, data)
+      end
+
+      # fields, = Templates::DetectFields.call(StringIO.new(data), attachment:) if fields.blank?
+
+      attachment.metadata['pdf'] ||= {}
+      attachment.metadata['pdf']['fields'] = fields
+
+      @template.update!(fields: Templates::ProcessDocument.normalize_attachment_fields(@template, [attachment]))
     end
 
-    fields, = Templates::DetectFields.call(StringIO.new(data), attachment:) if fields.blank?
-
-    attachment.metadata['pdf'] ||= {}
-    attachment.metadata['pdf']['fields'] = fields
-
-    @template.update!(fields: Templates::ProcessDocument.normalize_attachment_fields(@template, [attachment]))
-
     debug_file if DEBUG_FILE.present?
 
     ActiveRecord::Associations::Preloader.new(
@@ -34,7 +36,7 @@ class TemplatesDebugController < ApplicationController
     @template_data =
       @template.as_json.merge(
         documents: @template.schema_documents.as_json(
-          methods: %i[metadata signed_uuid],
+          methods: %i[metadata signed_key],
           include: { preview_images: { methods: %i[url metadata filename] } }
         )
       ).to_json
@@ -58,9 +60,16 @@ class TemplatesDebugController < ApplicationController
 
     params = { files: [file] }
 
-    documents = Templates::CreateAttachments.call(@template, params)
+    documents, dynamic_documents = Templates::CreateAttachments.call(@template, params,
+                                                                     dynamic: DEBUG_FILE.ends_with?('.docx'))
 
-    schema = documents.map { |doc| { attachment_uuid: doc.uuid, name: doc.filename.base } }
+    schema = documents.map do |doc|
+      {
+        attachment_uuid: doc.uuid,
+        name: doc.filename.base,
+        dynamic: dynamic_documents.find { |e| e.uuid == doc.uuid }.present?
+      }
+    end
 
     @template.update!(schema:)
   end

app/controllers/templates_preview_controller.rb

@@ -12,7 +12,7 @@ class TemplatesPreviewController < ApplicationController
     @template_data =
       @template.as_json.merge(
         documents: @template.schema_documents.as_json(
-          methods: %i[metadata signed_uuid],
+          methods: %i[metadata signed_key],
           include: { preview_images: { methods: %i[url metadata filename] } }
         )
       ).to_json

app/controllers/templates_uploads_controller.rb

@@ -12,7 +12,7 @@ class TemplatesUploadsController < ApplicationController
 
     save_template!(@template, url_params)
 
-    documents = Templates::CreateAttachments.call(@template, url_params || params, extract_fields: true)
+    documents, = Templates::CreateAttachments.call(@template, url_params || params, extract_fields: true)
     schema = documents.map { |doc| { attachment_uuid: doc.uuid, name: doc.filename.base } }
 
     if @template.fields.blank?

app/javascript/application.js

@@ -155,12 +155,16 @@ safeRegisterElement('template-builder', class extends HTMLElement {
 
     this.appElem.classList.add('md:h-screen')
 
+    const template = reactive(JSON.parse(this.dataset.template))
+
     this.app = createApp(TemplateBuilder, {
-      template: reactive(JSON.parse(this.dataset.template)),
+      template,
       customFields: reactive(JSON.parse(this.dataset.customFields || '[]')),
+      dynamicDocuments: reactive(JSON.parse(this.dataset.dynamicDocuments || '[]')),
       backgroundColor: '#faf7f5',
       locale: this.dataset.locale,
       withPhone: this.dataset.withPhone === 'true',
+      withPrefillable: template.fields?.some((f) => f.prefillable),
       withVerification: ['true', 'false'].includes(this.dataset.withVerification) ? this.dataset.withVerification === 'true' : null,
       withKba: ['true', 'false'].includes(this.dataset.withKba) ? this.dataset.withKba === 'true' : null,
       withLogo: this.dataset.withLogo !== 'false',
@@ -174,6 +178,7 @@ safeRegisterElement('template-builder', class extends HTMLElement {
       withSendButton: this.dataset.withSendButton !== 'false',
       withSignYourselfButton: this.dataset.withSignYourselfButton !== 'false',
       withConditions: this.dataset.withConditions === 'true',
+      withDynamicDocuments: this.dataset.withDynamicDocuments === 'true',
       withGoogleDrive: this.dataset.withGoogleDrive === 'true',
       withReplaceAndCloneUpload: true,
       withDownload: true,

app/javascript/elements/markdown_editor.js

@@ -36,15 +36,11 @@ function loadTiptap () {
 }
 
 class LinkTooltip {
-  constructor (container, editor) {
+  constructor (container, editor, templateEl) {
     this.container = container
     this.editor = editor
 
-    const template = document.createElement('template')
-
-    template.innerHTML = container.dataset.linkTooltipHtml
-
-    this.tooltip = template.content.firstElementChild
+    this.tooltip = templateEl.content.firstElementChild.cloneNode(true)
 
     this.input = this.tooltip.querySelector('input')
     this.saveButton = this.tooltip.querySelector('[data-role="link-save"]')
@@ -140,7 +136,8 @@ export default actionable(targetable(class extends HTMLElement {
     'boldButton',
     'italicButton',
     'underlineButton',
-    'linkButton'
+    'linkButton',
+    'linkTooltipTemplate'
   ]
 
   async connectedCallback () {
@@ -256,7 +253,7 @@ export default actionable(targetable(class extends HTMLElement {
       }
     })
 
-    this.linkTooltip = new LinkTooltip(this, this.editor)
+    this.linkTooltip = new LinkTooltip(this, this.editor, this.linkTooltipTemplate)
   }
 
   adjustShortcutsForPlatform () {

app/javascript/template_builder/area.vue

@@ -31,144 +31,26 @@
         />
       </div>
     </div>
-    <div
-      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
-      @pointerdown.stop
-    >
-      <FieldSubmitter
-        v-if="field.type != 'heading' && field.type != 'strikethrough'"
-        v-model="field.submitter_uuid"
-        class="border-r roles-dropdown"
-        :compact="true"
-        :editable="editable && (!defaultField || defaultField.role !== submitter?.name)"
-        :allow-add-new="!defaultSubmitters.length"
-        :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="selectedAreasRef.value = [area]"
-      />
-      <FieldType
-        v-model="field.type"
-        :button-width="27"
-        :editable="editable && !defaultField"
-        :button-classes="'px-1'"
-        :menu-classes="'bg-white rounded-t-none'"
-        @update:model-value="[maybeUpdateOptions(), save()]"
-        @click="selectedAreasRef.value = [area]"
-      />
-      <span
-        v-if="field.type !== 'checkbox' || field.name"
-        ref="name"
-        :contenteditable="editable && !defaultField && field.type !== 'heading'"
-        dir="auto"
-        class="pr-1 cursor-text outline-none block"
-        style="min-width: 2px"
-        @paste.prevent="onPaste"
-        @keydown.enter.prevent="onNameEnter"
-        @focus="onNameFocus"
-        @blur="onNameBlur"
-      >{{ optionIndexText }} {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || defaultName }}</span>
-      <div
-        v-if="isSettingsFocus || isSelectInput || (isValueInput && field.type !== 'heading') || (isNameFocus && !['checkbox', 'phone'].includes(field.type))"
-        class="flex items-center ml-1.5"
-      >
-        <input
-          v-if="!isValueInput && !isSelectInput"
-          :id="`required-checkbox-${field.uuid}`"
-          v-model="field.required"
-          type="checkbox"
-          class="checkbox checkbox-xs no-animation rounded"
-          @mousedown.prevent
-        >
-        <label
-          v-if="!isValueInput && !isSelectInput"
-          :for="`required-checkbox-${field.uuid}`"
-          class="label text-xs"
-          @click.prevent="field.required = !field.required"
-          @mousedown.prevent
-        >{{ t('required') }}</label>
-        <input
-          v-if="isValueInput || isSelectInput"
-          :id="`readonly-checkbox-${field.uuid}`"
-          type="checkbox"
-          class="checkbox checkbox-xs no-animation rounded"
-          :checked="!(field.readonly ?? true)"
-          @change="field.readonly = !(field.readonly ?? true)"
-          @mousedown.prevent
-        >
-        <label
-          v-if="isValueInput || isSelectInput"
-          :for="`readonly-checkbox-${field.uuid}`"
-          class="label text-xs"
-          @click.prevent="field.readonly = !(field.readonly ?? true)"
-          @mousedown.prevent
-        >{{ t('editable') }}</label>
-        <span
-          v-if="field.type !== 'payment' && !isValueInput"
-          class="dropdown dropdown-end field-area-settings-dropdown"
-          @mouseenter="renderDropdown = true"
-          @touchstart="renderDropdown = true"
-        >
-          <label
-            ref="settingsButton"
-            tabindex="0"
-            :title="t('settings')"
-            class="cursor-pointer flex items-center"
-            style="height: 25px"
-            @focus="isSettingsFocus = true"
-            @blur="maybeBlurSettings"
-          >
-            <IconDotsVertical class="w-5 h-5" />
-          </label>
-          <ul
-            v-if="renderDropdown"
-            ref="settingsDropdown"
-            tabindex="0"
-            class="dropdown-content menu menu-xs px-2 pb-2 pt-1 shadow rounded-box w-52 z-10 rounded-t-none"
-            :style="{ backgroundColor: 'white' }"
-            @dragstart.prevent.stop
-            @click="closeDropdown"
-            @focusout="maybeBlurSettings"
-          >
-            <FieldSettings
-              v-if="isMobile"
-              :field="field"
-              :default-field="defaultField"
-              :editable="editable"
-              :background-color="'white'"
-              :with-required="false"
-              :with-areas="false"
-              :with-signature-id="withSignatureId"
-              :with-prefillable="withPrefillable"
-              @click-formula="isShowFormulaModal = true"
-              @click-font="isShowFontModal = true"
-              @click-description="isShowDescriptionModal = true"
-              @add-custom-field="$emit('add-custom-field')"
-              @click-condition="isShowConditionsModal = true"
-              @save="save"
-              @scroll-to="[selectedAreasRef.value = [$event], $emit('scroll-to', $event)]"
-            />
-            <div
-              v-else
-              class="whitespace-normal"
-            >
-              The dots menu is retired in favor of the field context menu. Right-click the field to access field settings. Double-click the field to set a default value.
-            </div>
-          </ul>
-        </span>
-      </div>
-      <button
-        v-else-if="editable"
-        class="pr-1"
-        :title="t('remove')"
-        @click.prevent="$emit('remove')"
-      >
-        <IconX width="14" />
-      </button>
-    </div>
+    <AreaTitle
+      ref="title"
+      :area="area"
+      :field="field"
+      :template="template"
+      :selected-areas-ref="selectedAreasRef"
+      :get-field-type-index="getFieldTypeIndex"
+      :default-field="defaultField"
+      :with-signature-id="withSignatureId"
+      :with-prefillable="withPrefillable"
+      :default-submitters="defaultSubmitters"
+      :editable="editable"
+      :is-mobile="isMobile"
+      :is-value-input="isValueInput"
+      :is-select-input="isSelectInput"
+      @change="save"
+      @remove="$emit('remove')"
+      @scroll-to="$emit('scroll-to', $event)"
+      @add-custom-field="$emit('add-custom-field')"
+    />
     <div
       ref="touchValueTarget"
       class="flex h-full w-full field-area"
@@ -333,85 +215,20 @@
       @mousedown.stop="startResize"
       @touchstart="startTouchResize"
     />
-    <Teleport
-      v-if="isShowFormulaModal"
-      :to="modalContainerEl"
-    >
-      <FormulaModal
-        :field="field"
-        :editable="editable && !defaultField"
-        :default-field="defaultField"
-        :build-default-name="buildDefaultName"
-        @save="save"
-        @close="isShowFormulaModal = false"
-      />
-    </Teleport>
-    <Teleport
-      v-if="isShowFontModal"
-      :to="modalContainerEl"
-    >
-      <FontModal
-        :field="field"
-        :editable="editable && !defaultField"
-        :default-field="defaultField"
-        :build-default-name="buildDefaultName"
-        @save="save"
-        @close="isShowFontModal = false"
-      />
-    </Teleport>
-    <Teleport
-      v-if="isShowConditionsModal"
-      :to="modalContainerEl"
-    >
-      <ConditionsModal
-        :item="field"
-        :build-default-name="buildDefaultName"
-        :default-field="defaultField"
-        @save="save"
-        @close="isShowConditionsModal = false"
-      />
-    </Teleport>
-    <Teleport
-      v-if="isShowDescriptionModal"
-      :to="modalContainerEl"
-    >
-      <DescriptionModal
-        :field="field"
-        :editable="editable && !defaultField"
-        :default-field="defaultField"
-        :build-default-name="buildDefaultName"
-        @save="save"
-        @close="isShowDescriptionModal = false"
-      />
-    </Teleport>
   </div>
 </template>
 
 <script>
-import FieldSubmitter from './field_submitter'
 import FieldType from './field_type'
 import Field from './field'
-import FieldSettings from './field_settings'
-import FormulaModal from './formula_modal'
-import FontModal from './font_modal'
-import ConditionsModal from './conditions_modal'
-import DescriptionModal from './description_modal'
-import { IconX, IconCheck, IconDotsVertical } from '@tabler/icons-vue'
-import { v4 } from 'uuid'
+import AreaTitle from './area_title'
+import { IconCheck } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
   components: {
-    FieldType,
     IconCheck,
-    FieldSettings,
-    FormulaModal,
-    FontModal,
-    IconDotsVertical,
-    DescriptionModal,
-    ConditionsModal,
-    FieldSubmitter,
-    IconX
+    AreaTitle
   },
   inject: ['template', 'save', 't', 'isInlineSize', 'selectedAreasRef', 'isCmdKeyRef', 'getFieldTypeIndex'],
   props: {
@@ -493,17 +310,10 @@ export default {
   emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to', 'add-custom-field'],
   data () {
     return {
-      isShowFormulaModal: false,
-      isShowFontModal: false,
-      isShowConditionsModal: false,
       isContenteditable: false,
-      isSettingsFocus: false,
-      isShowDescriptionModal: false,
       isResize: false,
       isDragged: false,
       isMoved: false,
-      renderDropdown: false,
-      isNameFocus: false,
       isHeadingSelected: false,
       textOverflowChars: 0,
       dragFrom: { x: 0, y: 0 }
@@ -592,9 +402,6 @@ export default {
       return (this.field.type === 'heading' && this.isHeadingSelected) || this.isContenteditable ||
         (this.inputMode && (['text', 'number'].includes(this.field.type) || (this.field.type === 'date' && this.field.default_value !== '{{date}}')))
     },
-    modalContainerEl () {
-      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
-    },
     defaultName () {
       return this.buildDefaultName(this.field)
     },
@@ -616,13 +423,6 @@ export default {
         italic: ['bold_italic', 'italic'].includes(this.field.preferences.font_type)
       }
     },
-    optionIndexText () {
-      if (this.area.option_uuid && this.field.options) {
-        return `${this.field.options.findIndex((o) => o.uuid === this.area.option_uuid) + 1}.`
-      } else {
-        return ''
-      }
-    },
     cells () {
       const cells = []
 
@@ -705,9 +505,6 @@ export default {
   },
   methods: {
     buildDefaultName: Field.methods.buildDefaultName,
-    closeDropdown () {
-      this.$el.getRootNode().activeElement.blur()
-    },
     buildAreaOptionValue (area) {
       const option = this.optionsUuidIndex[area.option_uuid]
 
@@ -792,23 +589,6 @@ export default {
         return number
       }
     },
-    maybeBlurSettings (e) {
-      if (!e.relatedTarget || !this.$refs.settingsDropdown.contains(e.relatedTarget)) {
-        this.isSettingsFocus = false
-      }
-    },
-    onNameFocus (e) {
-      this.selectedAreasRef.value = [this.area]
-
-      this.isNameFocus = true
-      this.$refs.name.style.minWidth = this.$refs.name.clientWidth + 'px'
-
-      if (!this.field.name) {
-        setTimeout(() => {
-          this.$refs.name.innerText = ' '
-        }, 1)
-      }
-    },
     startResizeCell (e) {
       this.$el.getRootNode().addEventListener('mousemove', this.onResizeCell)
       this.$el.getRootNode().addEventListener('mouseup', this.stopResizeCell)
@@ -843,53 +623,6 @@ export default {
         }
       }
     },
-    maybeUpdateOptions () {
-      delete this.field.default_value
-
-      if (!['radio', 'multiple', 'select'].includes(this.field.type)) {
-        delete this.field.options
-      }
-
-      if (this.field.type === 'heading') {
-        this.field.readonly = true
-      }
-
-      if (this.field.type === 'strikethrough') {
-        this.field.readonly = true
-        this.field.default_value = true
-      }
-
-      if (['select', 'multiple', 'radio'].includes(this.field.type)) {
-        this.field.options ||= [{ value: '', uuid: v4() }]
-      }
-
-      (this.field.areas || []).forEach((area) => {
-        if (this.field.type === 'cells') {
-          area.cell_w = area.w * 2 / Math.floor(area.w / area.h)
-        } else {
-          delete area.cell_w
-        }
-      })
-    },
-    onNameBlur (e) {
-      if (e.relatedTarget === this.$refs.settingsButton) {
-        this.isSettingsFocus = true
-      }
-
-      const text = this.$refs.name.innerText.trim()
-
-      this.isNameFocus = false
-      this.$refs.name.style.minWidth = ''
-
-      if (text) {
-        this.field.name = text
-      } else {
-        this.field.name = ''
-        this.$refs.name.innerText = this.defaultName
-      }
-
-      this.save()
-    },
     onDefaultValueBlur (e) {
       const text = this.$refs.defaultValue.innerText.trim()
 
@@ -927,9 +660,6 @@ export default {
         this.$refs.defaultValue.blur()
       }
     },
-    onNameEnter (e) {
-      this.$refs.name.blur()
-    },
     resize (e) {
       if (e.target.id === 'mask') {
         this.area.w = e.offsetX / e.target.clientWidth - this.area.x
@@ -1124,7 +854,7 @@ export default {
         this.selectedAreasRef.value = [this.area]
       }
 
-      this.$refs?.name?.blur()
+      this.$refs?.title?.$refs?.name?.blur()
 
       e.preventDefault()
 

app/javascript/template_builder/area_title.vue

@@ -0,0 +1,404 @@
+<template>
+  <div
+    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
+    @pointerdown.stop
+  >
+    <FieldSubmitter
+      v-if="field.type != 'heading' && field.type != 'strikethrough'"
+      v-model="field.submitter_uuid"
+      class="border-r roles-dropdown"
+      :compact="true"
+      :editable="editable && (!defaultField || defaultField.role !== submitter?.name)"
+      :allow-add-new="!defaultSubmitters.length"
+      :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="$emit('change')"
+      @click="selectedAreasRef.value = [area]"
+    />
+    <FieldType
+      v-model="field.type"
+      :button-width="27"
+      :editable="editable && !defaultField"
+      :button-classes="'px-1'"
+      :menu-classes="'bg-white rounded-t-none'"
+      @update:model-value="[maybeUpdateOptions(), $emit('change')]"
+      @click="selectedAreasRef.value = [area]"
+    />
+    <span
+      v-if="field.type !== 'checkbox' || field.name"
+      ref="name"
+      :contenteditable="editable && !defaultField && field.type !== 'heading'"
+      dir="auto"
+      class="pr-1 cursor-text outline-none block"
+      style="min-width: 2px"
+      @paste.prevent="onPaste"
+      @keydown.enter.prevent="onNameEnter"
+      @focus="onNameFocus"
+      @blur="onNameBlur"
+    >{{ optionIndexText }} {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || defaultName }}</span>
+    <div
+      v-if="isSettingsFocus || isSelectInput || (isValueInput && field.type !== 'heading') || (isNameFocus && !['checkbox', 'phone'].includes(field.type))"
+      class="flex items-center ml-1.5"
+    >
+      <input
+        v-if="!isValueInput && !isSelectInput"
+        :id="`required-checkbox-${field.uuid}`"
+        v-model="field.required"
+        type="checkbox"
+        class="checkbox checkbox-xs no-animation rounded"
+        @mousedown.prevent
+      >
+      <label
+        v-if="!isValueInput && !isSelectInput"
+        :for="`required-checkbox-${field.uuid}`"
+        class="label text-xs"
+        @click.prevent="field.required = !field.required"
+        @mousedown.prevent
+      >{{ t('required') }}</label>
+      <input
+        v-if="isValueInput || isSelectInput"
+        :id="`readonly-checkbox-${field.uuid}`"
+        type="checkbox"
+        class="checkbox checkbox-xs no-animation rounded"
+        :checked="!(field.readonly ?? true)"
+        @change="field.readonly = !(field.readonly ?? true)"
+        @mousedown.prevent
+      >
+      <label
+        v-if="isValueInput || isSelectInput"
+        :for="`readonly-checkbox-${field.uuid}`"
+        class="label text-xs"
+        @click.prevent="field.readonly = !(field.readonly ?? true)"
+        @mousedown.prevent
+      >{{ t('editable') }}</label>
+      <span
+        v-if="field.type !== 'payment' && !isValueInput"
+        class="dropdown dropdown-end field-area-settings-dropdown"
+        @mouseenter="renderDropdown = true"
+        @touchstart="renderDropdown = true"
+      >
+        <label
+          ref="settingsButton"
+          tabindex="0"
+          :title="t('settings')"
+          class="cursor-pointer flex items-center"
+          style="height: 25px"
+          @focus="isSettingsFocus = true"
+          @blur="maybeBlurSettings"
+        >
+          <IconDotsVertical class="w-5 h-5" />
+        </label>
+        <ul
+          v-if="renderDropdown"
+          ref="settingsDropdown"
+          tabindex="0"
+          class="dropdown-content menu menu-xs px-2 pb-2 pt-1 shadow rounded-box w-52 z-10 rounded-t-none"
+          :style="{ backgroundColor: 'white' }"
+          @dragstart.prevent.stop
+          @click="closeDropdown"
+          @focusout="maybeBlurSettings"
+        >
+          <FieldSettings
+            v-if="isMobile"
+            :field="field"
+            :default-field="defaultField"
+            :editable="editable"
+            :background-color="'white'"
+            :with-required="false"
+            :with-areas="false"
+            :with-signature-id="withSignatureId"
+            :with-prefillable="withPrefillable"
+            @click-formula="isShowFormulaModal = true"
+            @click-font="isShowFontModal = true"
+            @click-description="isShowDescriptionModal = true"
+            @add-custom-field="$emit('add-custom-field')"
+            @click-condition="isShowConditionsModal = true"
+            @save="$emit('change')"
+            @scroll-to="[selectedAreasRef.value = [$event], $emit('scroll-to', $event)]"
+          />
+          <div
+            v-else
+            class="whitespace-normal"
+          >
+            The dots menu is retired in favor of the field context menu. Right-click the field to access field settings. Double-click the field to set a default value.
+          </div>
+        </ul>
+      </span>
+    </div>
+    <button
+      v-else-if="editable"
+      class="pr-1"
+      :title="t('remove')"
+      @click.prevent="$emit('remove')"
+    >
+      <IconX width="14" />
+    </button>
+    <Teleport
+      v-if="isShowFormulaModal"
+      :to="modalContainerEl"
+    >
+      <FormulaModal
+        :field="field"
+        :editable="editable && !defaultField"
+        :default-field="defaultField"
+        :build-default-name="buildDefaultName"
+        @save="$emit('change')"
+        @close="isShowFormulaModal = false"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowFontModal"
+      :to="modalContainerEl"
+    >
+      <FontModal
+        :field="field"
+        :editable="editable && !defaultField"
+        :default-field="defaultField"
+        :build-default-name="buildDefaultName"
+        @save="$emit('change')"
+        @close="isShowFontModal = false"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowConditionsModal"
+      :to="modalContainerEl"
+    >
+      <ConditionsModal
+        :item="field"
+        :build-default-name="buildDefaultName"
+        :default-field="defaultField"
+        @save="$emit('change')"
+        @close="isShowConditionsModal = false"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowDescriptionModal"
+      :to="modalContainerEl"
+    >
+      <DescriptionModal
+        :field="field"
+        :editable="editable && !defaultField"
+        :default-field="defaultField"
+        :build-default-name="buildDefaultName"
+        @save="$emit('change')"
+        @close="isShowDescriptionModal = false"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script>
+import FieldSubmitter from './field_submitter'
+import FieldType from './field_type'
+import Field from './field'
+import FieldSettings from './field_settings'
+import FormulaModal from './formula_modal'
+import FontModal from './font_modal'
+import ConditionsModal from './conditions_modal'
+import DescriptionModal from './description_modal'
+import { IconX, IconDotsVertical } from '@tabler/icons-vue'
+import { v4 } from 'uuid'
+
+export default {
+  name: 'AreaTitle',
+  components: {
+    FieldType,
+    FieldSettings,
+    FormulaModal,
+    FontModal,
+    IconDotsVertical,
+    DescriptionModal,
+    ConditionsModal,
+    FieldSubmitter,
+    IconX
+  },
+  inject: ['t'],
+  props: {
+    template: {
+      type: Object,
+      required: true
+    },
+    selectedAreasRef: {
+      type: Object,
+      required: true
+    },
+    getFieldTypeIndex: {
+      type: Function,
+      required: true
+    },
+    area: {
+      type: Object,
+      required: true
+    },
+    field: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    defaultField: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    withPrefillable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    defaultSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    isMobile: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isValueInput: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isSelectInput: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ['remove', 'scroll-to', 'add-custom-field', 'change'],
+  data () {
+    return {
+      isShowFormulaModal: false,
+      isShowFontModal: false,
+      isShowConditionsModal: false,
+      isShowDescriptionModal: false,
+      isSettingsFocus: false,
+      renderDropdown: false,
+      isNameFocus: false
+    }
+  },
+  computed: {
+    fieldNames: FieldType.computed.fieldNames,
+    fieldLabels: FieldType.computed.fieldLabels,
+    submitter () {
+      return this.template.submitters.find((s) => s.uuid === this.field.submitter_uuid)
+    },
+    isSelected () {
+      return this.selectedAreasRef.value.includes(this.area)
+    },
+    isInMultiSelection () {
+      return this.selectedAreasRef.value.length >= 2 && this.isSelected
+    },
+    optionIndexText () {
+      if (this.area.option_uuid && this.field.options) {
+        return `${this.field.options.findIndex((o) => o.uuid === this.area.option_uuid) + 1}.`
+      } else {
+        return ''
+      }
+    },
+    defaultName () {
+      return this.buildDefaultName(this.field)
+    },
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
+    }
+  },
+  methods: {
+    buildDefaultName: Field.methods.buildDefaultName,
+    closeDropdown () {
+      this.$el.getRootNode().activeElement.blur()
+    },
+    maybeBlurSettings (e) {
+      if (!e.relatedTarget || !this.$refs.settingsDropdown.contains(e.relatedTarget)) {
+        this.isSettingsFocus = false
+      }
+    },
+    onNameFocus (e) {
+      this.selectedAreasRef.value = [this.area]
+
+      this.isNameFocus = true
+      this.$refs.name.style.minWidth = this.$refs.name.clientWidth + 'px'
+
+      if (!this.field.name) {
+        setTimeout(() => {
+          this.$refs.name.innerText = ' '
+        }, 1)
+      }
+    },
+    onNameBlur (e) {
+      if (e.relatedTarget === this.$refs.settingsButton) {
+        this.isSettingsFocus = true
+      }
+
+      const text = this.$refs.name.innerText.trim()
+
+      this.isNameFocus = false
+      this.$refs.name.style.minWidth = ''
+
+      if (text) {
+        this.field.name = text
+      } else {
+        this.field.name = ''
+        this.$refs.name.innerText = this.defaultName
+      }
+
+      this.$emit('change')
+    },
+    onNameEnter (e) {
+      this.$refs.name.blur()
+    },
+    onPaste (e) {
+      const text = (e.clipboardData || window.clipboardData).getData('text/plain')
+      const selection = this.$el.getRootNode().getSelection()
+
+      if (selection.rangeCount) {
+        selection.deleteFromDocument()
+        selection.getRangeAt(0).insertNode(document.createTextNode(text))
+        selection.collapseToEnd()
+      }
+    },
+    maybeUpdateOptions () {
+      delete this.field.default_value
+
+      if (!['radio', 'multiple', 'select'].includes(this.field.type)) {
+        delete this.field.options
+      }
+
+      if (this.field.type === 'heading') {
+        this.field.readonly = true
+      }
+
+      if (this.field.type === 'strikethrough') {
+        this.field.readonly = true
+        this.field.default_value = true
+      }
+
+      if (['select', 'multiple', 'radio'].includes(this.field.type)) {
+        this.field.options ||= [{ value: '', uuid: v4() }]
+      }
+
+      (this.field.areas || []).forEach((area) => {
+        if (this.field.type === 'cells') {
+          area.cell_w = area.w * 2 / Math.floor(area.w / area.h)
+        } else {
+          delete area.cell_w
+        }
+      })
+    }
+  }
+}
+</script>

app/javascript/template_builder/builder.vue

@@ -81,7 +81,7 @@
         />
         <template v-else>
           <form
-            v-if="withSignYourselfButton && undefinedSubmitters.length < 2"
+            v-if="withSignYourselfButton && undefinedSubmitters.length < 2 && (!template.variables_schema || Object.keys(template.variables_schema).length === 0)"
             target="_blank"
             data-turbo="false"
             class="inline"
@@ -274,6 +274,8 @@
           :accept-file-types="acceptFileTypes"
           :with-replace-button="withUploadButton"
           :editable="editable"
+          :dynamic-documents="dynamicDocuments"
+          :with-dynamic-documents="withDynamicDocuments"
           :template="template"
           @scroll-to="scrollIntoDocument(item)"
           @remove="onDocumentRemove"
@@ -352,10 +354,20 @@
           </template>
           <template v-else>
             <template
-              v-for="document in sortedDocuments"
+              v-for="(document, index) in sortedDocuments"
               :key="document.uuid"
             >
+              <DynamicDocument
+                v-if="template.schema[index].dynamic"
+                :ref="setDocumentRefs"
+                :editable="editable"
+                :document="dynamicDocuments.find((dynamicDocument) => dynamicDocument.uuid === document.uuid)"
+                :selected-submitter="selectedSubmitter"
+                :drag-field="dragField"
+                @update="onDynamicDocumentUpdate"
+              />
               <Document
+                v-else
                 :ref="setDocumentRefs"
                 :areas-index="fieldAreasIndex[document.uuid]"
                 :selected-submitter="selectedSubmitter"
@@ -505,6 +517,7 @@
             @change-submitter="selectedSubmitter = $event"
             @drag-end="[dragField = null, $refs.dragPlaceholder.dragPlaceholder = null]"
             @scroll-to-area="scrollToArea"
+            @rebuild-variables-schema="rebuildVariablesSchema"
           />
         </div>
       </div>
@@ -592,12 +605,13 @@ import MobileFields from './mobile_fields'
 import FieldSubmitter from './field_submitter'
 import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
-import { ref, computed, toRaw } from 'vue'
+import { ref, computed, toRaw, defineAsyncComponent } from 'vue'
 import * as i18n from './i18n'
 
 export default {
   name: 'TemplateBuilder',
   components: {
+    DynamicDocument: defineAsyncComponent(() => import(/* webpackChunkName: "dynamic-editor" */ './dynamic_document')),
     Upload,
     DragPlaceholder,
     Document,
@@ -720,6 +734,16 @@ export default {
       required: false,
       default: false
     },
+    withPrefillable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    dynamicDocuments: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     customFields: {
       type: Array,
       required: false,
@@ -778,7 +802,7 @@ export default {
     acceptFileTypes: {
       type: String,
       required: false,
-      default: 'image/*, application/pdf, application/zip'
+      default: 'image/*, application/pdf, application/zip, application/json'
     },
     baseUrl: {
       type: String,
@@ -841,6 +865,11 @@ export default {
       required: false,
       default: ''
     },
+    withDynamicDocuments: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withDocumentsList: {
       type: Boolean,
       required: false,
@@ -948,13 +977,6 @@ export default {
           !submitter.email
       })
     },
-    withPrefillable () {
-      if (this.template.fields) {
-        return this.template.fields.some((f) => f.prefillable)
-      } else {
-        return false
-      }
-    },
     isInlineSize () {
       return CSS.supports('container-type: size')
     },
@@ -2522,7 +2544,7 @@ export default {
     onDocumentReplace (data) {
       const { replaceSchemaItem, schema, documents } = data
       // eslint-disable-next-line camelcase
-      const { google_drive_file_id, ...cleanedReplaceSchemaItem } = replaceSchemaItem
+      const { google_drive_file_id, dynamic, ...cleanedReplaceSchemaItem } = replaceSchemaItem
 
       this.template.schema.splice(this.template.schema.indexOf(replaceSchemaItem), 1, { ...cleanedReplaceSchemaItem, ...schema[0] })
       this.template.documents.push(...documents)
@@ -2656,7 +2678,12 @@ export default {
         } else {
           this.isSaving = true
 
-          this.save().then(() => {
+          this.documentRefs.filter((ref) => ref.update).map((ref) => ref.update())
+          this.rebuildVariablesSchema({ disable: false })
+
+          const dynamicDocumentSaves = this.documentRefs.filter((ref) => ref.saveBody).map((ref) => ref.saveBody())
+
+          Promise.all([this.save(), ...dynamicDocumentSaves]).then(() => {
             window.Turbo.visit(`/templates/${this.template.id}`)
           }).finally(() => {
             this.isSaving = false
@@ -2895,7 +2922,8 @@ export default {
             name: this.template.name,
             schema: this.template.schema,
             submitters: this.template.submitters,
-            fields: this.template.fields
+            fields: this.template.fields,
+            variables_schema: this.template.variables_schema
           }
         }),
         headers: { 'Content-Type': 'application/json' }
@@ -2904,6 +2932,102 @@ export default {
           this.onSave(this.template)
         }
       })
+    },
+    onDynamicDocumentUpdate () {
+      this.rebuildVariablesSchema()
+
+      this.$nextTick(() => {
+        if (this.$el.closest('template-builder')) {
+          this.$el.closest('template-builder').dataset.dynamicDocuments = JSON.stringify(this.dynamicDocuments)
+        }
+      })
+
+      this.reconcileDynamicFields()
+    },
+    rebuildVariablesSchema ({ disable = true } = {}) {
+      const parsed = {}
+
+      const dynamicDocumentRef = this.documentRefs.find((e) => e.mergeSchemaProperties)
+
+      this.documentRefs.forEach((ref) => {
+        if (ref.updateVariablesSchema) {
+          ref.updateVariablesSchema()
+        }
+      })
+
+      this.dynamicDocuments.forEach((doc) => {
+        if (doc.variables_schema) {
+          dynamicDocumentRef.mergeSchemaProperties(parsed, doc.variables_schema)
+        }
+      })
+
+      if (!this.template.variables_schema) {
+        this.template.variables_schema = parsed
+      } else {
+        this.syncVariablesSchema(this.template.variables_schema, parsed, { disable })
+      }
+    },
+    syncVariablesSchema (existing, parsed, { disable = true } = {}) {
+      for (const key of Object.keys(parsed)) {
+        if (!existing[key]) {
+          existing[key] = parsed[key]
+        }
+      }
+
+      for (const key of Object.keys(existing)) {
+        if (!parsed[key]) {
+          if (disable) {
+            existing[key].disabled = true
+          } else {
+            delete existing[key]
+          }
+        } else {
+          delete existing[key].disabled
+
+          if (!existing[key].form_type) {
+            existing[key].type = parsed[key].type
+          }
+
+          if (parsed[key].items) {
+            if (!existing[key].items) {
+              existing[key].items = parsed[key].items
+            } else if (existing[key].items.properties && parsed[key].items.properties) {
+              this.syncVariablesSchema(existing[key].items.properties, parsed[key].items.properties, { disable })
+            } else if (!existing[key].items.properties && !parsed[key].items.properties) {
+              existing[key].items.type = parsed[key].items.type
+            }
+          }
+
+          if (existing[key].properties && parsed[key].properties) {
+            this.syncVariablesSchema(existing[key].properties, parsed[key].properties, { disable })
+          }
+        }
+      }
+    },
+    reconcileDynamicFields () {
+      const dynamicFieldUuids = new Set()
+
+      this.dynamicDocuments.forEach((doc) => {
+        const body = doc.body || ''
+        const uuidRegex = /uuid="([^"]+)"/g
+        let match
+
+        while ((match = uuidRegex.exec(body)) !== null) {
+          dynamicFieldUuids.add(match[1])
+        }
+      })
+
+      const toRemove = this.template.fields.filter((field) => {
+        if (field.areas && field.areas.length > 0) return false
+
+        return field.uuid && !dynamicFieldUuids.has(field.uuid)
+      })
+
+      toRemove.forEach((field) => {
+        this.template.fields.splice(this.template.fields.indexOf(field), 1)
+      })
+
+      this.save()
     }
   }
 }

app/javascript/template_builder/controls.vue

@@ -66,7 +66,7 @@ export default {
     acceptFileTypes: {
       type: String,
       required: false,
-      default: 'image/*, application/pdf, application/zip'
+      default: 'image/*, application/pdf, application/zip, application/json'
     },
     withReplaceButton: {
       type: Boolean,

app/javascript/template_builder/document.vue

@@ -168,7 +168,7 @@ export default {
         return this.previewImagesIndex[i] || reactive({
           metadata: { ...lazyloadMetadata },
           id: Math.random().toString(),
-          url: this.basePreviewUrl + `/preview/${this.document.signed_uuid || this.document.uuid}/${i}.jpg`
+          url: this.basePreviewUrl + `/preview/${this.document.signed_key || this.document.signed_uuid || this.document.uuid}/${i}.jpg`
         })
       })
     },

app/javascript/template_builder/dropzone.vue

@@ -122,7 +122,7 @@ export default {
     acceptFileTypes: {
       type: String,
       required: false,
-      default: 'image/*, application/pdf, application/zip'
+      default: 'image/*, application/pdf, application/zip, application/json'
     }
   },
   emits: ['success', 'error', 'loading', 'click-google-drive'],
@@ -146,7 +146,7 @@ export default {
     message () {
       if (this.isLoading) {
         return this.t('uploading')
-      } else if (this.acceptFileTypes === 'image/*, application/pdf, application/zip') {
+      } else if (this.acceptFileTypes === 'image/*, application/pdf, application/zip, application/json') {
         return this.title || this.t('add_pdf_documents_or_images')
       } else {
         return this.title || this.t('add_documents_or_images')
@@ -161,7 +161,7 @@ export default {
   methods: {
     upload: Upload.methods.upload,
     onDropFiles (e) {
-      if (this.acceptFileTypes !== 'image/*, application/pdf, application/zip' || [...e.dataTransfer.files].every((f) => f.type.match(/(?:image\/)|(?:application\/pdf)|(?:application\/zip)/))) {
+      if (this.acceptFileTypes !== 'image/*, application/pdf, application/zip, application/json' || [...e.dataTransfer.files].every((f) => f.type.match(/(?:image\/)|(?:application\/pdf)|(?:application\/zip)|(?:application\/json)/))) {
         this.$refs.input.files = e.dataTransfer.files
 
         this.upload()

app/javascript/template_builder/dynamic_area.vue

@@ -0,0 +1,282 @@
+<template>
+  <span
+    class="items-center select-none cursor-pointer relative overflow-visible text-base-content/80 font-sans"
+    :class="[bgColorClass, iconOnlyField ? 'justify-center' : '']"
+    :draggable="editable"
+    :style="[nodeStyle]"
+    @mousedown="selectArea"
+    @click.stop
+    @dragstart="onDragStart"
+    @contextmenu.prevent.stop="onContextMenu"
+  >
+    <span
+      class="absolute inset-0 pointer-events-none border-solid"
+      :class="borderColorClass"
+      :style="{ borderWidth: (isSelected ? 1 : 0) + 'px' }"
+    />
+    <component
+      :is="fieldIcons[field?.type || 'text']"
+      v-if="field && !field.default_value"
+      width="100%"
+      height="100%"
+      :stroke-width="1.5"
+      :class="iconOnlyField ? 'shrink min-h-0 max-h-full max-w-6 opacity-70 m-auto p-0.5' : 'shrink min-h-0 max-h-full max-w-4 opacity-70 mx-0.5 pl-0.5'"
+    />
+    <span
+      v-if="field?.default_value"
+      class="text-xs overflow-hidden text-ellipsis whitespace-nowrap pr-1 font-normal pl-0.5"
+    >{{ field.default_value }}</span>
+    <span
+      v-else-if="field && !iconOnlyField"
+      class="text-xs overflow-hidden text-ellipsis whitespace-nowrap pr-1 opacity-70 font-normal pl-0.5"
+    >{{ displayLabel }}</span>
+    <span
+      class="absolute rounded-full bg-white border border-gray-400 shadow-md cursor-nwse-resize z-10"
+      :style="{ width: resizeHandleSize + 'px', height: resizeHandleSize + 'px', right: (-4 / zoom) + 'px', bottom: (-4 / zoom) + 'px' }"
+      @pointerdown.prevent.stop="onResizeStart"
+    />
+  </span>
+</template>
+
+<script>
+import FieldArea from './area'
+import FieldType from './field_type'
+
+export default {
+  name: 'DynamicArea',
+  props: {
+    fieldUuid: {
+      type: String,
+      required: true
+    },
+    areaUuid: {
+      type: String,
+      required: true
+    },
+    template: {
+      type: Object,
+      required: true
+    },
+    nodeStyle: {
+      type: Object,
+      required: true
+    },
+    selectedAreasRef: {
+      type: Object,
+      required: true
+    },
+    getPos: {
+      type: Function,
+      required: true
+    },
+    editor: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    getZoom: {
+      type: Function,
+      required: true
+    },
+    onAreaContextMenu: {
+      type: Function,
+      required: true
+    },
+    onAreaResize: {
+      type: Function,
+      required: true
+    },
+    onAreaDragStart: {
+      type: Function,
+      required: true
+    },
+    t: {
+      type: Function,
+      required: true
+    },
+    findFieldArea: {
+      type: Function,
+      required: true
+    },
+    getFieldTypeIndex: {
+      type: Function,
+      required: true
+    }
+  },
+  data () {
+    return {
+      isResizing: false
+    }
+  },
+  computed: {
+    fieldArea () {
+      return this.findFieldArea(this.areaUuid)
+    },
+    area () {
+      return this.fieldArea?.area
+    },
+    field () {
+      return this.fieldArea?.field
+    },
+    fieldIcons: FieldArea.computed.fieldIcons,
+    fieldNames: FieldArea.computed.fieldNames,
+    fieldLabels: FieldType.computed.fieldLabels,
+    borderColors () {
+      return [
+        'border-red-500/80',
+        'border-sky-500/80',
+        'border-emerald-500/80',
+        'border-yellow-300/80',
+        'border-purple-600/80',
+        'border-pink-500/80',
+        'border-cyan-500/80',
+        'border-orange-500/80',
+        'border-lime-500/80',
+        'border-indigo-500/80'
+      ]
+    },
+    bgColors () {
+      return [
+        'bg-red-100',
+        'bg-sky-100',
+        'bg-emerald-100',
+        'bg-yellow-100',
+        'bg-purple-100',
+        'bg-pink-100',
+        'bg-cyan-100',
+        'bg-orange-100',
+        'bg-lime-100',
+        'bg-indigo-100'
+      ]
+    },
+    isSelected () {
+      return this.selectedAreasRef.value.some((a) => a === this.area)
+    },
+    zoom () {
+      return this.getZoom()
+    },
+    submitterIndex () {
+      if (!this.field) return 0
+
+      const submitter = this.template.submitters.find((s) => s.uuid === this.field.submitter_uuid)
+
+      return submitter ? this.template.submitters.indexOf(submitter) : 0
+    },
+    borderColorClass () {
+      return this.borderColors[this.submitterIndex % this.borderColors.length]
+    },
+    bgColorClass () {
+      return this.bgColors[this.submitterIndex % this.bgColors.length]
+    },
+    resizeHandleSize () {
+      return this.zoom > 0 ? Math.round(10 / this.zoom) : 10
+    },
+    iconOnlyField () {
+      return ['radio', 'multiple', 'checkbox', 'initials'].includes(this.field?.type)
+    },
+    defaultName () {
+      if (!this.field) return 'text'
+
+      const typeIndex = this.getFieldTypeIndex(this.field)
+
+      return `${this.fieldLabels[this.field.type] || this.fieldNames[this.field.type] || this.field.type} ${typeIndex + 1}`
+    },
+    displayLabel () {
+      return this.field?.name || this.defaultName
+    }
+  },
+  methods: {
+    selectArea () {
+      this.editor.commands.setNodeSelection(this.getPos())
+    },
+    onDragStart (e) {
+      if (this.isResizing) {
+        e.preventDefault()
+
+        return
+      }
+
+      const pos = this.getPos()
+
+      if (pos == null) {
+        e.preventDefault()
+
+        return
+      }
+
+      const root = this.$el
+      const rect = root.getBoundingClientRect()
+      const zoom = this.zoom || 1
+      const clone = root.cloneNode(true)
+
+      clone.querySelector('[class*="cursor-nwse-resize"]')?.remove()
+      clone.style.cssText = `position:fixed;top:-1000px;width:${rect.width / zoom}px;height:${rect.height / zoom}px;display:${root.style.display};vertical-align:${root.style.verticalAlign};zoom:${zoom}`
+
+      document.body.appendChild(clone)
+
+      e.dataTransfer.setDragImage(clone, e.offsetX, e.offsetY)
+
+      requestAnimationFrame(() => clone.remove())
+
+      e.dataTransfer.effectAllowed = 'move'
+
+      this.onAreaDragStart()
+    },
+    onContextMenu (e) {
+      this.onAreaContextMenu(this.area, e)
+    },
+    onResizeStart (e) {
+      if (!this.editable) return
+
+      this.isResizing = true
+
+      this.selectArea()
+
+      const handle = e.target
+
+      handle.setPointerCapture(e.pointerId)
+
+      const startX = e.clientX
+      const startY = e.clientY
+      const startWidth = this.$el.offsetWidth
+      const startHeight = this.$el.offsetHeight
+
+      const onResizeMove = (e) => {
+        e.preventDefault()
+
+        this.nodeStyle.width = startWidth + (e.clientX - startX) / this.zoom + 'px'
+        this.nodeStyle.height = startHeight + (e.clientY - startY) / this.zoom + 'px'
+
+        this.onAreaResize(this.$el.getBoundingClientRect())
+      }
+
+      const onResizeEnd = () => {
+        if (!this.isResizing) return
+
+        this.isResizing = false
+
+        handle.removeEventListener('pointermove', onResizeMove)
+        handle.removeEventListener('pointerup', onResizeEnd)
+
+        const pos = this.getPos()
+
+        const tr = this.editor.view.state.tr.setNodeMarkup(pos, undefined, {
+          ...this.editor.view.state.doc.nodeAt(pos)?.attrs,
+          width: this.nodeStyle.width,
+          height: this.nodeStyle.height
+        })
+
+        this.editor.view.dispatch(tr)
+        this.editor.commands.setNodeSelection(pos)
+      }
+
+      handle.addEventListener('pointermove', onResizeMove)
+      handle.addEventListener('pointerup', onResizeEnd)
+    }
+  }
+}
+</script>

app/javascript/template_builder/dynamic_document.vue

@@ -0,0 +1,225 @@
+<template>
+  <div
+    ref="container"
+    class="relative"
+    style="container-type: inline-size;"
+  >
+    <div ref="shadow" />
+    <template
+      v-for="style in styles"
+      :key="style.innerText"
+    >
+      <Teleport
+        v-if="shadow"
+        :to="style.innerText.includes('@font-face {') ? 'head' : shadow"
+      >
+        <component :is="'style'">
+          {{ style.innerText }}
+        </component>
+      </Teleport>
+    </template>
+    <Teleport
+      v-if="shadow"
+      :to="shadow"
+    >
+      <DynamicSection
+        v-for="section in sections"
+        :ref="setSectionRefs"
+        :key="section.id"
+        :container="$refs.container"
+        :editable="editable"
+        :section="section"
+        :container-width="containerWidth"
+        :attachments-index="attachmentsIndex"
+        :selected-submitter="selectedSubmitter"
+        :drag-field="dragField"
+        :attachment-uuid="document.uuid"
+        @update="onSectionUpdate(section, $event)"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script>
+import DynamicSection from './dynamic_section.vue'
+import { dynamicStylesheet, tiptapStylesheet } from './dynamic_editor.js'
+import { buildVariablesSchema, mergeSchemaProperties } from './dynamic_variables_schema.js'
+
+export default {
+  name: 'TemplateDynamicDocument',
+  components: {
+    DynamicSection
+  },
+  inject: ['baseFetch', 'template'],
+  props: {
+    document: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    selectedSubmitter: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    dragField: {
+      type: Object,
+      required: false,
+      default: null
+    }
+  },
+  emits: ['update'],
+  data () {
+    return {
+      containerWidth: 1040,
+      isMounted: false,
+      sectionRefs: []
+    }
+  },
+  computed: {
+    attachmentsIndex () {
+      return (this.document.attachments || []).reduce((acc, att) => {
+        acc[att.uuid] = att.url
+
+        return acc
+      }, {})
+    },
+    bodyDom () {
+      return new DOMParser().parseFromString(this.document.body, 'text/html')
+    },
+    headDom () {
+      return new DOMParser().parseFromString(this.document.head, 'text/html')
+    },
+    sections () {
+      return this.bodyDom.querySelectorAll('section')
+    },
+    styles () {
+      return this.headDom.querySelectorAll('style')
+    },
+    shadow () {
+      if (this.isMounted) {
+        return this.$refs.shadow.attachShadow({ mode: 'open' })
+      } else {
+        return null
+      }
+    }
+  },
+  mounted () {
+    this.isMounted = true
+
+    this.shadow.adoptedStyleSheets.push(dynamicStylesheet, tiptapStylesheet)
+
+    this.containerWidth = this.$refs.container.clientWidth
+
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.$refs.container) {
+        this.containerWidth = this.$refs.container.clientWidth
+      }
+    })
+
+    this.resizeObserver.observe(this.$refs.container)
+
+    window.addEventListener('beforeunload', this.onBeforeUnload)
+  },
+  beforeUnmount () {
+    window.removeEventListener('beforeunload', this.onBeforeUnload)
+
+    this.resizeObserver.unobserve(this.$refs.container)
+  },
+  beforeUpdate () {
+    this.sectionRefs = []
+  },
+  methods: {
+    mergeSchemaProperties,
+    setSectionRefs (ref) {
+      if (ref) {
+        this.sectionRefs.push(ref)
+      }
+    },
+    onBeforeUnload (event) {
+      if (this.saveTimer) {
+        event.preventDefault()
+
+        event.returnValue = ''
+
+        return ''
+      }
+    },
+    scrollToArea (area) {
+      this.sectionRefs.forEach(({ editor }) => {
+        const el = editor.view.dom.querySelector(`[data-area-uuid="${area.uuid}"]`)
+
+        if (el) {
+          editor.chain().focus().setNodeSelection(editor.view.posAtDOM(el, 0)).run()
+
+          el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        }
+      })
+    },
+    onSectionUpdate (section, { editor }) {
+      clearTimeout(this.saveTimer)
+
+      this.saveTimer = setTimeout(async () => {
+        await this.updateSectionAndSave(section, editor)
+
+        delete this.saveTimer
+      }, 1000)
+    },
+    updateVariablesSchema () {
+      this.document.variables_schema = buildVariablesSchema(this.bodyDom.body)
+    },
+    updateSectionAndSave (section, editor) {
+      const target = this.bodyDom.getElementById(section.id)
+
+      if (target) {
+        target.innerHTML = editor.getHTML()
+      }
+
+      this.document.body = this.bodyDom.body.innerHTML
+
+      this.updateVariablesSchema()
+
+      this.$emit('update', this.document)
+
+      return this.saveBody()
+    },
+    updateAndSave () {
+      this.update()
+
+      return this.saveBody()
+    },
+    update () {
+      clearTimeout(this.saveTimer)
+
+      delete this.saveTimer
+
+      this.sectionRefs.forEach(({ section, editor }) => {
+        const target = this.bodyDom.getElementById(section.id)
+
+        target.innerHTML = editor.getHTML()
+      })
+
+      this.document.body = this.bodyDom.body.innerHTML
+
+      this.updateVariablesSchema()
+
+      this.$emit('update', this.document)
+    },
+    saveBody () {
+      clearTimeout(this.saveTimer)
+
+      delete this.saveTimer
+
+      return this.baseFetch(`/templates/${this.template.id}/dynamic_documents/${this.document.uuid}`, {
+        method: 'PUT',
+        body: JSON.stringify({ body: this.bodyDom.body.innerHTML }),
+        headers: { 'Content-Type': 'application/json' }
+      })
+    }
+  }
+}
+</script>

app/javascript/template_builder/dynamic_editor.js

@@ -0,0 +1,768 @@
+import { Editor, Extension, Node, Mark } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+import Document from '@tiptap/extension-document'
+import Text from '@tiptap/extension-text'
+import HardBreak from '@tiptap/extension-hard-break'
+import History from '@tiptap/extension-history'
+import Gapcursor from '@tiptap/extension-gapcursor'
+import Dropcursor from '@tiptap/extension-dropcursor'
+import { createApp, reactive } from 'vue'
+import DynamicArea from './dynamic_area.vue'
+import styles from './dynamic_styles.scss'
+
+export const dynamicStylesheet = new CSSStyleSheet()
+
+dynamicStylesheet.replaceSync(styles[0][1])
+
+export const tiptapStylesheet = new CSSStyleSheet()
+
+tiptapStylesheet.replaceSync(
+`.ProseMirror {
+  position: relative;
+}
+
+.ProseMirror {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  white-space: break-spaces;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
+}
+
+.ProseMirror [contenteditable="false"] {
+  white-space: normal;
+}
+
+.ProseMirror [contenteditable="false"] [contenteditable="true"] {
+  white-space: pre-wrap;
+}
+
+.ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+img.ProseMirror-separator {
+  display: inline !important;
+  border: none !important;
+  margin: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  margin: 0;
+}
+
+.ProseMirror-gapcursor:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid black;
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection *::-moz-selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection * {
+  caret-color: transparent;
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+.variable-highlight {
+  background-color: #fef3c7;
+}`)
+
+function collectDomAttrs (dom) {
+  const attrs = {}
+
+  for (let i = 0; i < dom.attributes.length; i++) {
+    attrs[dom.attributes[i].name] = dom.attributes[i].value
+  }
+
+  return { htmlAttrs: attrs }
+}
+
+function collectSpanDomAttrs (dom) {
+  const result = collectDomAttrs(dom)
+
+  if (result.htmlAttrs.style) {
+    const temp = document.createElement('span')
+
+    temp.style.cssText = result.htmlAttrs.style
+
+    if (['bold', '700'].includes(temp.style.fontWeight)) {
+      temp.style.removeProperty('font-weight')
+    }
+
+    if (temp.style.fontStyle === 'italic') {
+      temp.style.removeProperty('font-style')
+    }
+
+    if (temp.style.textDecoration === 'underline') {
+      temp.style.removeProperty('text-decoration')
+    }
+
+    if (temp.style.cssText) {
+      result.htmlAttrs.style = temp.style.cssText
+    } else {
+      delete result.htmlAttrs.style
+    }
+  }
+
+  return result
+}
+
+function createBlockNode (name, tag, content) {
+  return Node.create({
+    name,
+    group: 'block',
+    content: content || 'block+',
+    addAttributes () {
+      return {
+        htmlAttrs: { default: {} }
+      }
+    },
+    parseHTML () {
+      return [{ tag, getAttrs: collectDomAttrs }]
+    },
+    renderHTML ({ node }) {
+      return [tag, node.attrs.htmlAttrs, 0]
+    }
+  })
+}
+
+const CustomParagraph = Node.create({
+  name: 'paragraph',
+  group: 'block',
+  content: 'inline*',
+  addAttributes () {
+    return {
+      htmlAttrs: { default: {} }
+    }
+  },
+  parseHTML () {
+    return [{ tag: 'p', getAttrs: collectDomAttrs }]
+  },
+  renderHTML ({ node }) {
+    return ['p', node.attrs.htmlAttrs, 0]
+  }
+})
+
+const CustomHeading = Node.create({
+  name: 'heading',
+  group: 'block',
+  content: 'inline*',
+  addAttributes () {
+    return {
+      htmlAttrs: { default: {} },
+      level: { default: 1 }
+    }
+  },
+  parseHTML () {
+    return [1, 2, 3, 4, 5, 6].map((level) => ({
+      tag: `h${level}`,
+      getAttrs: (dom) => ({ ...collectDomAttrs(dom), level })
+    }))
+  },
+  renderHTML ({ node }) {
+    return [`h${node.attrs.level}`, node.attrs.htmlAttrs, 0]
+  }
+})
+
+const SectionNode = createBlockNode('section', 'section')
+const ArticleNode = createBlockNode('article', 'article')
+const DivNode = createBlockNode('div', 'div')
+const BlockquoteNode = createBlockNode('blockquote', 'blockquote')
+const PreNode = createBlockNode('pre', 'pre')
+const OrderedListNode = createBlockNode('orderedList', 'ol', '(listItem | block)+')
+const BulletListNode = createBlockNode('bulletList', 'ul', '(listItem | block)+')
+
+const ListItemNode = Node.create({
+  name: 'listItem',
+  content: 'block+',
+  addAttributes () {
+    return {
+      htmlAttrs: { default: {} }
+    }
+  },
+  parseHTML () {
+    return [{ tag: 'li', getAttrs: collectDomAttrs }]
+  },
+  renderHTML ({ node }) {
+    return ['li', node.attrs.htmlAttrs, 0]
+  }
+})
+
+const TableNode = Node.create({
+  name: 'table',
+  group: 'block',
+  content: '(colgroup | tableHead | tableBody | tableRow)+',
+  addAttributes () {
+    return { htmlAttrs: { default: {} } }
+  },
+  parseHTML () {
+    return [{ tag: 'table', getAttrs: collectDomAttrs }]
+  },
+  renderHTML ({ node }) {
+    return ['table', node.attrs.htmlAttrs, 0]
+  }
+})
+
+const TableHead = Node.create({
+  name: 'tableHead',
+  content: 'tableRow+',
+  addAttributes () {
+    return { htmlAttrs: { default: {} } }
+  },
+  parseHTML () {
+    return [{ tag: 'thead', getAttrs: collectDomAttrs }]
+  },
+  renderHTML ({ node }) {
+    return ['thead', node.attrs.htmlAttrs, 0]
+  }
+})
+
+const TableBody = Node.create({
+  name: 'tableBody',
+  content: 'tableRow+',
+  addAttributes () {
+    return { htmlAttrs: { default: {} } }
+  },
+  parseHTML () {
+    return [{ tag: 'tbody', getAttrs: collectDomAttrs }]
+  },
+  renderHTML ({ node }) {
+    return ['tbody', node.attrs.htmlAttrs, 0]
+  }
+})
+
+const TableRow = Node.create({
+  name: 'tableRow',
+  content: '(tableCell | tableHeader)+',
+  addAttributes () {
+    return { htmlAttrs: { default: {} } }
+  },
+  parseHTML () {
+    return [{ tag: 'tr', getAttrs: collectDomAttrs }]
+  },
+  renderHTML ({ node }) {
+    return ['tr', node.attrs.htmlAttrs, 0]
+  }
+})
+
+const TableCell = Node.create({
+  name: 'tableCell',
+  content: 'block*',
+  addAttributes () {
+    return { htmlAttrs: { default: {} } }
+  },
+  parseHTML () {
+    return [{ tag: 'td', getAttrs: collectDomAttrs }]
+  },
+  renderHTML ({ node }) {
+    return ['td', node.attrs.htmlAttrs, 0]
+  }
+})
+
+const TableHeader = Node.create({
+  name: 'tableHeader',
+  content: 'block*',
+  addAttributes () {
+    return { htmlAttrs: { default: {} } }
+  },
+  parseHTML () {
+    return [{ tag: 'th', getAttrs: collectDomAttrs }]
+  },
+  renderHTML ({ node }) {
+    return ['th', node.attrs.htmlAttrs, 0]
+  }
+})
+
+const ImageNode = Node.create({
+  name: 'image',
+  inline: true,
+  group: 'inline',
+  draggable: true,
+  addAttributes () {
+    return { htmlAttrs: { default: {} } }
+  },
+  parseHTML () {
+    return [{ tag: 'img', getAttrs: collectDomAttrs }]
+  },
+  renderHTML ({ node }) {
+    return ['img', node.attrs.htmlAttrs]
+  }
+})
+
+const ColGroupNode = Node.create({
+  name: 'colgroup',
+  group: 'block',
+  content: 'col*',
+  addAttributes () {
+    return { htmlAttrs: { default: {} } }
+  },
+  parseHTML () {
+    return [{ tag: 'colgroup', getAttrs: collectDomAttrs }]
+  },
+  renderHTML ({ node }) {
+    return ['colgroup', node.attrs.htmlAttrs, 0]
+  }
+})
+
+const ColNode = Node.create({
+  name: 'col',
+  group: 'block',
+  atom: true,
+  addAttributes () {
+    return { htmlAttrs: { default: {} } }
+  },
+  parseHTML () {
+    return [{ tag: 'col', getAttrs: collectDomAttrs }]
+  },
+  renderHTML ({ node }) {
+    return ['col', node.attrs.htmlAttrs]
+  }
+})
+
+const CustomBold = Mark.create({
+  name: 'bold',
+  parseHTML () {
+    return [{ tag: 'strong' }, { tag: 'b' }, { style: 'font-weight=bold' }, { style: 'font-weight=700' }]
+  },
+  renderHTML () {
+    return ['strong', 0]
+  },
+  addCommands () {
+    return {
+      toggleBold: () => ({ commands }) => commands.toggleMark(this.name)
+    }
+  },
+  addKeyboardShortcuts () {
+    return {
+      'Mod-b': () => this.editor.commands.toggleBold()
+    }
+  }
+})
+
+const CustomItalic = Mark.create({
+  name: 'italic',
+  parseHTML () {
+    return [{ tag: 'em' }, { tag: 'i' }, { style: 'font-style=italic' }]
+  },
+  renderHTML () {
+    return ['em', 0]
+  },
+  addCommands () {
+    return {
+      toggleItalic: () => ({ commands }) => commands.toggleMark(this.name)
+    }
+  },
+  addKeyboardShortcuts () {
+    return {
+      'Mod-i': () => this.editor.commands.toggleItalic()
+    }
+  }
+})
+
+const CustomUnderline = Mark.create({
+  name: 'underline',
+  parseHTML () {
+    return [{ tag: 'u' }, { style: 'text-decoration=underline' }]
+  },
+  renderHTML () {
+    return ['u', 0]
+  },
+  addCommands () {
+    return {
+      toggleUnderline: () => ({ commands }) => commands.toggleMark(this.name)
+    }
+  },
+  addKeyboardShortcuts () {
+    return {
+      'Mod-u': () => this.editor.commands.toggleUnderline()
+    }
+  }
+})
+
+const CustomStrike = Mark.create({
+  name: 'strike',
+  parseHTML () {
+    return [{ tag: 's' }, { tag: 'del' }, { tag: 'strike' }, { style: 'text-decoration=line-through' }]
+  },
+  renderHTML () {
+    return ['s', 0]
+  },
+  addCommands () {
+    return {
+      toggleStrike: () => ({ commands }) => commands.toggleMark(this.name)
+    }
+  },
+  addKeyboardShortcuts () {
+    return {
+      'Mod-Shift-s': () => this.editor.commands.toggleStrike()
+    }
+  }
+})
+
+const EmptySpanNode = Node.create({
+  name: 'emptySpan',
+  inline: true,
+  group: 'inline',
+  atom: true,
+  addAttributes () {
+    return { htmlAttrs: { default: {} } }
+  },
+  parseHTML () {
+    return [{
+      tag: 'span',
+      priority: 60,
+      getAttrs (dom) {
+        if (dom.childNodes.length === 0 && dom.attributes.length > 0) {
+          return collectDomAttrs(dom)
+        }
+
+        return false
+      }
+    }]
+  },
+  renderHTML ({ node }) {
+    return ['span', node.attrs.htmlAttrs]
+  }
+})
+
+const SpanMark = Mark.create({
+  name: 'span',
+  excludes: '',
+  addAttributes () {
+    return { htmlAttrs: { default: {} } }
+  },
+  parseHTML () {
+    return [{ tag: 'span', getAttrs: collectSpanDomAttrs }]
+  },
+  renderHTML ({ mark }) {
+    return ['span', mark.attrs.htmlAttrs, 0]
+  }
+})
+
+const LinkMark = Mark.create({
+  name: 'link',
+  excludes: '',
+  addAttributes () {
+    return { htmlAttrs: { default: {} } }
+  },
+  parseHTML () {
+    return [{ tag: 'a', getAttrs: collectDomAttrs }]
+  },
+  renderHTML ({ mark }) {
+    return ['a', mark.attrs.htmlAttrs, 0]
+  }
+})
+
+const SubscriptMark = Mark.create({
+  name: 'subscript',
+  addAttributes () {
+    return { htmlAttrs: { default: {} } }
+  },
+  parseHTML () {
+    return [{ tag: 'sub', getAttrs: collectDomAttrs }]
+  },
+  renderHTML ({ mark }) {
+    return ['sub', mark.attrs.htmlAttrs, 0]
+  }
+})
+
+const SuperscriptMark = Mark.create({
+  name: 'superscript',
+  addAttributes () {
+    return { htmlAttrs: { default: {} } }
+  },
+  parseHTML () {
+    return [{ tag: 'sup', getAttrs: collectDomAttrs }]
+  },
+  renderHTML ({ mark }) {
+    return ['sup', mark.attrs.htmlAttrs, 0]
+  }
+})
+
+const TabHandler = Extension.create({
+  name: 'tabHandler',
+  addKeyboardShortcuts () {
+    return {
+      Tab: () => {
+        this.editor.commands.insertContent('\t')
+
+        return true
+      }
+    }
+  }
+})
+
+const variableHighlightKey = new PluginKey('variableHighlight')
+
+function buildDecorations (doc) {
+  const decorations = []
+  const regex = /\[\[[^\]]*\]\]/g
+
+  doc.descendants((node, pos) => {
+    if (!node.isText) return
+
+    let match
+
+    while ((match = regex.exec(node.text)) !== null) {
+      const from = pos + match.index
+      const to = from + match[0].length
+
+      decorations.push(Decoration.inline(from, to, { class: 'variable-highlight' }))
+    }
+  })
+
+  return DecorationSet.create(doc, decorations)
+}
+
+const VariableHighlight = Extension.create({
+  name: 'variableHighlight',
+  addProseMirrorPlugins () {
+    return [
+      new Plugin({
+        key: variableHighlightKey,
+        state: {
+          init (_, { doc }) {
+            return buildDecorations(doc)
+          },
+          apply (tr, oldSet) {
+            if (tr.docChanged) {
+              return buildDecorations(tr.doc)
+            }
+
+            return oldSet
+          }
+        },
+        props: {
+          decorations (state) {
+            return this.getState(state)
+          },
+          handleTextInput (view, from, to, text) {
+            if (text !== '[') return false
+
+            const { state } = view
+            const charBefore = state.doc.textBetween(Math.max(from - 1, 0), from)
+
+            if (charBefore !== '[') return false
+
+            const tr = state.tr.insertText('[]]', from, to)
+
+            tr.setSelection(state.selection.constructor.create(tr.doc, from + 1))
+
+            view.dispatch(tr)
+
+            return true
+          }
+        }
+      })
+    ]
+  }
+})
+
+export function buildEditor ({ dynamicAreaProps, attachmentsIndex, onFieldDrop, onFieldDestroy, editorOptions }) {
+  const FieldNode = Node.create({
+    name: 'fieldNode',
+    inline: true,
+    group: 'inline',
+    atom: true,
+    draggable: true,
+    addAttributes () {
+      return {
+        uuid: { default: null },
+        areaUuid: { default: null },
+        width: { default: '124px' },
+        height: { default: null },
+        verticalAlign: { default: 'text-bottom' },
+        display: { default: 'inline-flex' }
+      }
+    },
+    parseHTML () {
+      return [{
+        tag: 'dynamic-field',
+        getAttrs (dom) {
+          return {
+            uuid: dom.getAttribute('uuid'),
+            areaUuid: dom.getAttribute('area-uuid'),
+            width: dom.style.width,
+            height: dom.style.height,
+            display: dom.style.display,
+            verticalAlign: dom.style.verticalAlign
+          }
+        }
+      }]
+    },
+    renderHTML ({ node }) {
+      return ['dynamic-field', {
+        uuid: node.attrs.uuid,
+        'area-uuid': node.attrs.areaUuid,
+        style: `width: ${node.attrs.width}; height: ${node.attrs.height}; display: ${node.attrs.display}; vertical-align: ${node.attrs.verticalAlign};`
+      }]
+    },
+    addNodeView () {
+      return ({ node, getPos, editor }) => {
+        const dom = document.createElement('span')
+
+        const nodeStyle = reactive({
+          width: node.attrs.width,
+          height: node.attrs.height,
+          verticalAlign: node.attrs.verticalAlign,
+          display: node.attrs.display
+        })
+
+        dom.dataset.areaUuid = node.attrs.areaUuid
+
+        const shadow = dom.attachShadow({ mode: 'open' })
+
+        shadow.adoptedStyleSheets = [dynamicStylesheet]
+
+        const app = createApp(DynamicArea, {
+          fieldUuid: node.attrs.uuid,
+          areaUuid: node.attrs.areaUuid,
+          nodeStyle,
+          getPos,
+          editor,
+          editable: editorOptions.editable,
+          ...dynamicAreaProps
+        })
+
+        app.mount(shadow)
+
+        return {
+          dom,
+          update (updatedNode) {
+            if (updatedNode.attrs.areaUuid === node.attrs.areaUuid) {
+              nodeStyle.width = updatedNode.attrs.width
+              nodeStyle.height = updatedNode.attrs.height
+              nodeStyle.verticalAlign = updatedNode.attrs.verticalAlign
+              nodeStyle.display = updatedNode.attrs.display
+            }
+          },
+          destroy () {
+            onFieldDestroy(node)
+
+            app.unmount()
+          }
+        }
+      }
+    }
+  })
+
+  const FieldDropPlugin = Extension.create({
+    name: 'fieldDrop',
+    addProseMirrorPlugins () {
+      return [
+        new Plugin({
+          key: new PluginKey('fieldDrop'),
+          props: {
+            handleDrop: onFieldDrop
+          }
+        })
+      ]
+    }
+  })
+
+  const DynamicImageNode = ImageNode.extend({
+    renderHTML ({ node }) {
+      const { loading, ...attrs } = node.attrs.htmlAttrs
+
+      return ['img', attrs]
+    },
+    addNodeView () {
+      return ({ node }) => {
+        const dom = document.createElement('img')
+
+        const attrs = { ...node.attrs.htmlAttrs }
+
+        const blobUuid = attrs.src?.startsWith('blob:') && attrs.src.slice(5)
+
+        if (blobUuid && attachmentsIndex[blobUuid]) {
+          attrs.src = attachmentsIndex[blobUuid]
+        }
+
+        dom.setAttribute('loading', 'lazy')
+
+        Object.entries(attrs).forEach(([k, v]) => dom.setAttribute(k, v))
+
+        return { dom }
+      }
+    }
+  })
+
+  return new Editor({
+    extensions: [
+      Document,
+      Text,
+      HardBreak,
+      History,
+      Gapcursor,
+      Dropcursor,
+      CustomBold,
+      CustomItalic,
+      CustomUnderline,
+      CustomStrike,
+      CustomParagraph,
+      CustomHeading,
+      SectionNode,
+      ArticleNode,
+      DivNode,
+      BlockquoteNode,
+      PreNode,
+      OrderedListNode,
+      BulletListNode,
+      ListItemNode,
+      TableNode,
+      TableHead,
+      TableBody,
+      TableRow,
+      TableCell,
+      TableHeader,
+      ColGroupNode,
+      ColNode,
+      DynamicImageNode,
+      EmptySpanNode,
+      LinkMark,
+      SpanMark,
+      SubscriptMark,
+      SuperscriptMark,
+      VariableHighlight,
+      TabHandler,
+      FieldNode,
+      FieldDropPlugin
+    ],
+    editorProps: {
+      attributes: {
+        style: 'outline: none'
+      }
+    },
+    parseOptions: {
+      preserveWhitespace: true
+    },
+    injectCSS: false,
+    ...editorOptions
+  })
+}

app/javascript/template_builder/dynamic_menu.vue

@@ -0,0 +1,211 @@
+<template>
+  <div
+    v-if="visible"
+    class="absolute z-10 flex items-center gap-0.5 px-1.5 py-1 bg-white border border-base-300 rounded-lg shadow select-none"
+    :style="{ top: (coords.top - 42) + 'px', left: coords.left + 'px', transform: 'translateX(-50%)' }"
+    @mousedown.prevent
+  >
+    <button
+      class="inline-flex items-center justify-center w-7 h-7 border-none rounded cursor-pointer text-gray-700"
+      :class="isBold ? 'bg-base-200' : 'bg-transparent'"
+      title="Bold"
+      @click="toggleBold"
+    >
+      <IconBold
+        :width="16"
+        :height="16"
+      />
+    </button>
+    <button
+      class="inline-flex items-center justify-center w-7 h-7 border-none rounded cursor-pointer text-gray-700"
+      :class="isItalic ? 'bg-base-200' : 'bg-transparent'"
+      title="Italic"
+      @click="toggleItalic"
+    >
+      <IconItalic
+        :width="16"
+        :height="16"
+      />
+    </button>
+    <button
+      class="inline-flex items-center justify-center w-7 h-7 border-none rounded cursor-pointer text-gray-700"
+      :class="isUnderline ? 'bg-base-200' : 'bg-transparent'"
+      title="Underline"
+      @click="toggleUnderline"
+    >
+      <IconUnderline
+        :width="16"
+        :height="16"
+      />
+    </button>
+    <button
+      class="inline-flex items-center justify-center w-7 h-7 border-none rounded cursor-pointer text-gray-700"
+      :class="isStrike ? 'bg-base-200' : 'bg-transparent'"
+      title="Strikethrough"
+      @click="toggleStrike"
+    >
+      <IconStrikethrough
+        :width="16"
+        :height="16"
+      />
+    </button>
+    <div class="w-px h-5 bg-base-300 mx-1" />
+    <button
+      class="inline-flex items-center justify-center text-xs h-7 border-none rounded cursor-pointer text-gray-700 bg-transparent"
+      title="Wrap in variable"
+      @click="wrapVariable"
+    >
+      <IconBracketsContain
+        :width="16"
+        :height="16"
+        :stroke-width="1.6"
+      />
+      <span class="px-0.5">
+        Variable
+      </span>
+    </button>
+    <div class="w-px h-5 bg-base-300 mx-1" />
+    <button
+      class="inline-flex items-center justify-center text-xs h-7 border-none rounded cursor-pointer text-gray-700 bg-transparent"
+      title="Wrap in condition"
+      @click="wrapCondition"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.6"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="tabler-icon tabler-icon-brackets-contain"
+      ><path d="M7 4h-4v16h4" /><path d="M17 4h4v16h-4" />
+        <text
+          x="12"
+          y="16.5"
+          text-anchor="middle"
+          fill="currentColor"
+          stroke="none"
+          font-size="14"
+          font-weight="600"
+          font-family="ui-sans-serif, system-ui, sans-serif"
+        >if</text>
+      </svg>
+      <span class="px-0.5">
+        Condition
+      </span>
+    </button>
+  </div>
+</template>
+
+<script>
+import { IconBold, IconItalic, IconUnderline, IconStrikethrough, IconBracketsContain } from '@tabler/icons-vue'
+
+export default {
+  name: 'DynamicMenu',
+  components: {
+    IconBold,
+    IconItalic,
+    IconUnderline,
+    IconStrikethrough,
+    IconBracketsContain
+  },
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    },
+    coords: {
+      type: Object,
+      required: false,
+      default: null
+    }
+  },
+  emits: ['add-variable', 'add-condition'],
+  data () {
+    return {
+      isMouseDown: false,
+      isBold: this.editor.isActive('bold'),
+      isItalic: this.editor.isActive('italic'),
+      isUnderline: this.editor.isActive('underline'),
+      isStrike: this.editor.isActive('strike')
+    }
+  },
+  computed: {
+    visible () {
+      return !!this.coords && !this.isMouseDown
+    }
+  },
+  mounted () {
+    this.editor.view.dom.addEventListener('mousedown', this.onMouseDown)
+
+    document.addEventListener('mouseup', this.onMouseUp)
+
+    this.editor.on('transaction', this.onTransaction)
+  },
+  beforeUnmount () {
+    if (!this.editor.isDestroyed) {
+      this.editor.view.dom.removeEventListener('mousedown', this.onMouseDown)
+      this.editor.off('transaction', this.onTransaction)
+    }
+
+    document.removeEventListener('mouseup', this.onMouseUp)
+  },
+  methods: {
+    toggleBold () {
+      this.editor.chain().focus().toggleBold().run()
+    },
+    toggleItalic () {
+      this.editor.chain().focus().toggleItalic().run()
+    },
+    toggleUnderline () {
+      this.editor.chain().focus().toggleUnderline().run()
+    },
+    toggleStrike () {
+      this.editor.chain().focus().toggleStrike().run()
+    },
+    wrapVariable () {
+      const { from, to } = this.editor.state.selection
+      const replacement = '[[variable]]'
+      const varFrom = from + 2
+      const varTo = varFrom + 8
+
+      this.editor.chain().focus()
+        .insertContentAt({ from, to }, replacement)
+        .setTextSelection({ from: varFrom, to: varTo })
+        .run()
+
+      this.$emit('add-variable')
+    },
+    wrapCondition () {
+      const { from, to } = this.editor.state.selection
+      const endText = '[[end]]'
+      const ifText = '[[if:variable]]'
+
+      this.editor.chain().focus()
+        .insertContentAt(to, endText)
+        .insertContentAt(from, ifText)
+        .setTextSelection({ from: from + 5, to: from + 13 })
+        .run()
+
+      this.$emit('add-condition')
+    },
+    onMouseDown () {
+      this.isMouseDown = true
+    },
+    onMouseUp () {
+      setTimeout(() => {
+        this.isMouseDown = false
+      }, 1)
+    },
+    onTransaction () {
+      this.isBold = this.editor.isActive('bold')
+      this.isItalic = this.editor.isActive('italic')
+      this.isUnderline = this.editor.isActive('underline')
+      this.isStrike = this.editor.isActive('strike')
+    }
+  }
+}
+</script>

app/javascript/template_builder/dynamic_section.vue

@@ -0,0 +1,487 @@
+<template>
+  <div
+    class="relative bg-white select-none mb-4 before:border before:rounded before:top-0 before:bottom-0 before:left-0 before:right-0 before:absolute"
+  >
+    <div :style="{ zoom: containerWidth / sectionWidthPx }">
+      <section
+        :id="section.id"
+        ref="editorElement"
+        :class="section.classList.value"
+        :style="section.style.cssText"
+      />
+    </div>
+    <Teleport
+      v-if="editor"
+      :to="container"
+    >
+      <div
+        v-if="areaToolbarCoords && selectedField && selectedArea && !isAreaDrag"
+        class="absolute z-10"
+        :style="{ left: areaToolbarCoords.left + 'px', top: areaToolbarCoords.top + 'px' }"
+      >
+        <AreaTitle
+          :area="selectedArea"
+          :field="selectedField"
+          :editable="editable"
+          :template="template"
+          :selected-areas-ref="selectedAreasRef"
+          :get-field-type-index="getFieldTypeIndex"
+          @remove="onRemoveSelectedArea"
+          @change="onSelectedAreaChange"
+        />
+      </div>
+      <DynamicMenu
+        v-if="editable"
+        v-show="!selectedAreasRef.value.length"
+        :editor="editor"
+        :coords="dynamicMenuCoords"
+        @add-variable="dynamicMenuCoords = null"
+        @add-condition="dynamicMenuCoords = null"
+      />
+      <FieldContextMenu
+        v-if="contextMenu && contextMenuField"
+        :context-menu="contextMenu"
+        :field="contextMenuField"
+        :with-copy-to-all-pages="false"
+        @close="closeContextMenu"
+        @delete="onContextMenuDelete"
+        @save="save"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script>
+import { shallowRef } from 'vue'
+import { v4 } from 'uuid'
+import FieldContextMenu from './field_context_menu.vue'
+import AreaTitle from './area_title.vue'
+import DynamicMenu from './dynamic_menu.vue'
+import { buildEditor } from './dynamic_editor.js'
+
+export default {
+  name: 'DynamicSection',
+  components: {
+    DynamicMenu,
+    FieldContextMenu,
+    AreaTitle
+  },
+  inject: ['template', 'save', 't', 'fieldsDragFieldRef', 'customDragFieldRef', 'selectedAreasRef', 'getFieldTypeIndex', 'fieldTypes', 'withPhone', 'withPayment', 'withVerification', 'withKba', 'backgroundColor'],
+  props: {
+    section: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    container: {
+      type: Object,
+      required: true
+    },
+    containerWidth: {
+      type: Number,
+      required: true
+    },
+    attachmentsIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    selectedSubmitter: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    dragField: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    attachmentUuid: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  emits: ['update'],
+  data () {
+    return {
+      isAreaDrag: false,
+      areaToolbarCoords: null,
+      dynamicMenuCoords: null,
+      contextMenu: null
+    }
+  },
+  computed: {
+    defaultHeight () {
+      return CSS.supports('height', '1lh') ? '1lh' : '1em'
+    },
+    fieldAreaIndex () {
+      return (this.template.fields || []).reduce((acc, field) => {
+        field.areas?.forEach((area) => {
+          acc[area.uuid] = { area, field }
+        })
+
+        return acc
+      }, {})
+    },
+    defaultSizes () {
+      return {
+        checkbox: { width: '18px', height: '18px' },
+        radio: { width: '18px', height: '18px' },
+        multiple: { width: '18px', height: '18px' },
+        signature: { width: '140px', height: '50px' },
+        initials: { width: '40px', height: '32px' },
+        stamp: { width: '150px', height: '80px' },
+        kba: { width: '150px', height: '80px' },
+        verification: { width: '150px', height: '80px' },
+        image: { width: '200px', height: '100px' },
+        date: { width: '100px', height: this.defaultHeight },
+        text: { width: '120px', height: this.defaultHeight },
+        cells: { width: '120px', height: this.defaultHeight },
+        file: { width: '120px', height: this.defaultHeight },
+        payment: { width: '120px', height: this.defaultHeight },
+        number: { width: '80px', height: this.defaultHeight },
+        select: { width: '120px', height: this.defaultHeight },
+        phone: { width: '120px', height: this.defaultHeight }
+      }
+    },
+    editorRef: () => shallowRef(),
+    editor () {
+      return this.editorRef.value
+    },
+    sectionWidthPx () {
+      const pt = parseFloat(this.section.style.width)
+
+      return pt * (96 / 72)
+    },
+    zoom () {
+      return this.containerWidth / this.sectionWidthPx
+    },
+    isDraggingField () {
+      return !!(this.fieldsDragFieldRef?.value || this.customDragFieldRef?.value || this.dragField)
+    },
+    selectedArea () {
+      return this.selectedAreasRef.value[0]
+    },
+    selectedField () {
+      if (this.selectedArea) {
+        return this.fieldAreaIndex[this.selectedArea.uuid]?.field
+      } else {
+        return null
+      }
+    },
+    contextMenuField () {
+      if (this.contextMenu?.areaUuid) {
+        return this.fieldAreaIndex[this.contextMenu.areaUuid].field
+      } else {
+        return null
+      }
+    }
+  },
+  watch: {
+    containerWidth () {
+      this.closeContextMenu()
+
+      if (this.dynamicMenuCoords && this.editor && !this.editor.state.selection.empty) {
+        this.$nextTick(() => this.setDynamicMenuCoords(this.editor))
+      }
+    }
+  },
+  mounted () {
+    this.initEditor()
+  },
+  beforeUnmount () {
+    if (this.editor) {
+      this.editor.destroy()
+    }
+  },
+  methods: {
+    async initEditor () {
+      this.editorRef.value = buildEditor({
+        dynamicAreaProps: {
+          template: this.template,
+          t: this.t,
+          selectedAreasRef: this.selectedAreasRef,
+          getFieldTypeIndex: this.getFieldTypeIndex,
+          findFieldArea: (areaUuid) => this.fieldAreaIndex[areaUuid],
+          getZoom: () => this.zoom,
+          onAreaContextMenu: this.onAreaContextMenu,
+          onAreaResize: this.onAreaResize,
+          onAreaDragStart: this.onAreaDragStart
+        },
+        attachmentsIndex: this.attachmentsIndex,
+        onFieldDrop: this.onFieldDrop,
+        onFieldDestroy: this.onFieldDestroy,
+        editorOptions: {
+          element: this.$refs.editorElement,
+          editable: this.editable,
+          content: this.section.innerHTML,
+          onUpdate: (event) => this.$emit('update', event),
+          onSelectionUpdate: this.onSelectionUpdate,
+          onBlur: () => { this.dynamicMenuCoords = null }
+        }
+      })
+    },
+    findAreaNodePos (areaUuid) {
+      const el = this.editor.view.dom.querySelector(`[data-area-uuid="${areaUuid}"]`)
+
+      return this.editor.view.posAtDOM(el, 0)
+    },
+    removeArea (area) {
+      const { field } = this.fieldAreaIndex[area.uuid]
+      const areaIndex = field.areas.indexOf(area)
+
+      if (areaIndex !== -1) {
+        field.areas.splice(areaIndex, 1)
+      }
+
+      if (field.areas.length === 0) {
+        this.template.fields.splice(this.template.fields.indexOf(field), 1)
+      }
+
+      const pos = this.findAreaNodePos(area.uuid)
+
+      this.editor.chain().focus().deleteRange({ from: pos, to: pos + 1 }).run()
+
+      this.save()
+    },
+    onSelectionUpdate ({ editor }) {
+      const { selection } = editor.state
+
+      if (selection.node?.type.name === 'fieldNode') {
+        const { areaUuid } = selection.node.attrs
+
+        const field = this.fieldAreaIndex[areaUuid]?.field
+
+        if (field) {
+          const area = field.areas.find((a) => a.uuid === areaUuid)
+
+          if (area) {
+            const dom = editor.view.nodeDOM(selection.from)
+            const areaEl = dom.shadowRoot.firstElementChild
+
+            if (areaEl) {
+              const rect = areaEl.getBoundingClientRect()
+              const containerRect = this.container.getBoundingClientRect()
+
+              this.areaToolbarCoords = {
+                left: rect.left - containerRect.left,
+                top: rect.top - containerRect.top
+              }
+            }
+
+            this.selectedAreasRef.value = [area]
+          }
+        }
+      } else {
+        this.areaToolbarCoords = null
+        this.selectedAreasRef.value = []
+
+        if (editor.state.selection.empty) {
+          this.dynamicMenuCoords = null
+        } else {
+          this.setDynamicMenuCoords(editor)
+        }
+      }
+    },
+    setDynamicMenuCoords (editor) {
+      const { from, to } = editor.state.selection
+      const view = editor.view
+      const start = view.coordsAtPos(from)
+      const end = view.coordsAtPos(to)
+      const containerRect = this.container.getBoundingClientRect()
+      const left = (start.left + end.right) / 2 - containerRect.left
+
+      this.dynamicMenuCoords = {
+        top: Math.min(start.top, end.top) - containerRect.top,
+        left: Math.max(80, Math.min(left, containerRect.width - 80))
+      }
+    },
+    onFieldDestroy (node) {
+      this.selectedAreasRef.value = []
+
+      const { areaUuid } = node.attrs
+
+      let nodeExistsInDoc = false
+
+      this.editor.state.doc.descendants((docNode) => {
+        if (docNode.attrs.areaUuid === areaUuid) {
+          nodeExistsInDoc = true
+
+          return false
+        }
+      })
+
+      if (nodeExistsInDoc) return
+
+      const fieldArea = this.fieldAreaIndex[areaUuid]
+
+      if (!fieldArea) return
+
+      const field = fieldArea.field
+
+      const areaIndex = field.areas.findIndex((a) => a.uuid === areaUuid)
+
+      if (areaIndex !== -1) {
+        field.areas.splice(areaIndex, 1)
+      }
+
+      if (!field.areas?.length) {
+        this.template.fields.splice(this.template.fields.indexOf(field), 1)
+      }
+
+      this.save()
+    },
+    onAreaResize (rect) {
+      const containerRect = this.container.getBoundingClientRect()
+
+      this.areaToolbarCoords = {
+        left: rect.left - containerRect.left,
+        top: rect.top - containerRect.top
+      }
+    },
+    onAreaDragStart () {
+      this.isAreaDrag = true
+    },
+    onAreaContextMenu (area, e) {
+      this.contextMenu = {
+        x: e.clientX,
+        y: e.clientY,
+        areaUuid: area.uuid
+      }
+    },
+    deselectArea () {
+      this.areaToolbarCoords = null
+      this.selectedAreasRef.value = []
+    },
+    closeContextMenu () {
+      this.contextMenu = null
+    },
+    onContextMenuDelete () {
+      const menu = this.contextMenu
+      const fieldArea = this.fieldAreaIndex[menu.areaUuid]
+
+      if (fieldArea) {
+        this.removeArea(fieldArea.area)
+      }
+
+      this.closeContextMenu()
+      this.deselectArea()
+    },
+    onRemoveSelectedArea () {
+      this.removeArea(this.selectedArea)
+
+      this.deselectArea()
+      this.save()
+    },
+    onSelectedAreaChange () {
+      this.save()
+    },
+    onFieldDrop (view, event, _slice, moved) {
+      this.isAreaDrag = false
+
+      if (moved) {
+        return
+      }
+
+      const draggedField = this.fieldsDragFieldRef?.value || this.customDragFieldRef?.value || this.dragField
+
+      if (!draggedField) return false
+
+      event.preventDefault()
+
+      const pos = view.posAtCoords({ left: event.clientX, top: event.clientY })
+
+      if (!pos) return false
+
+      const fieldType = draggedField.type || 'text'
+      const dims = this.defaultSizes[fieldType] || this.defaultSizes.text
+      const areaUuid = v4()
+
+      const existingField = this.fieldsDragFieldRef?.value
+
+      if (existingField) {
+        if (!this.template.fields.includes(existingField)) {
+          this.template.fields.push(existingField)
+        }
+
+        existingField.areas = existingField.areas || []
+        existingField.areas.push({ uuid: areaUuid, attachment_uuid: this.attachmentUuid })
+
+        const nodeType = view.state.schema.nodes.fieldNode
+        const fieldNode = nodeType.create({
+          uuid: existingField.uuid,
+          areaUuid,
+          width: dims.width,
+          height: dims.height
+        })
+
+        const tr = view.state.tr.insert(pos.pos, fieldNode)
+
+        view.dispatch(tr)
+      } else {
+        const newField = {
+          name: draggedField.name || '',
+          uuid: v4(),
+          required: fieldType !== 'checkbox',
+          submitter_uuid: this.selectedSubmitter.uuid,
+          type: fieldType,
+          areas: [{ uuid: areaUuid, attachment_uuid: this.attachmentUuid }]
+        }
+
+        if (['select', 'multiple', 'radio'].includes(fieldType)) {
+          if (draggedField.options?.length) {
+            newField.options = draggedField.options.map((opt) => ({
+              value: typeof opt === 'string' ? opt : opt.value,
+              uuid: v4()
+            }))
+          } else {
+            newField.options = [{ value: '', uuid: v4() }, { value: '', uuid: v4() }]
+          }
+        }
+
+        if (fieldType === 'datenow') {
+          newField.type = 'date'
+          newField.readonly = true
+          newField.default_value = '{{date}}'
+        }
+
+        if (['stamp', 'heading', 'strikethrough'].includes(fieldType)) {
+          newField.readonly = true
+
+          if (fieldType === 'strikethrough') {
+            newField.default_value = true
+          }
+        }
+
+        this.template.fields.push(newField)
+
+        const nodeType = view.state.schema.nodes.fieldNode
+        const fieldNode = nodeType.create({
+          uuid: newField.uuid,
+          areaUuid,
+          width: dims.width,
+          height: dims.height
+        })
+
+        const tr = view.state.tr.insert(pos.pos, fieldNode)
+
+        view.dispatch(tr)
+      }
+
+      this.fieldsDragFieldRef.value = null
+      this.customDragFieldRef.value = null
+
+      this.editor.chain().focus().setNodeSelection(pos.pos).run()
+
+      this.save()
+
+      return true
+    }
+  }
+}
+</script>

app/javascript/template_builder/dynamic_styles.scss

@@ -0,0 +1,22 @@
+@config "../../../tailwind.dynamic.config.js";
+
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+:host {
+  all: initial;
+}

app/javascript/template_builder/dynamic_variable.vue

@@ -0,0 +1,422 @@
+<template>
+  <div class="group">
+    <div class="flex items-center justify-between py-1.5 px-0.5">
+      <div class="flex items-center space-x-1 min-w-0">
+        <FieldType
+          :model-value="formType"
+          :editable="editable"
+          :button-width="18"
+          :menu-classes="'mt-1.5'"
+          :menu-style="{ backgroundColor: dropdownBgColor }"
+          @update:model-value="onTypeChange"
+        />
+        <span
+          class="truncate"
+          :title="path"
+        >{{ displayName }}</span>
+        <span
+          v-if="isArray"
+          class="text-xs bg-base-200 rounded px-1 flex-shrink-0"
+        >{{ t('list') }}</span>
+      </div>
+      <div
+        v-if="editable"
+        class="flex items-center flex-shrink-0"
+      >
+        <span
+          class="dropdown dropdown-end"
+          @mouseenter="renderDropdown = true"
+          @touchstart="renderDropdown = true"
+        >
+          <label
+            tabindex="0"
+            :title="t('settings')"
+            class="cursor-pointer text-transparent group-hover:text-base-content"
+          >
+            <IconSettings
+              :width="18"
+              :stroke-width="1.6"
+            />
+          </label>
+          <ul
+            v-if="renderDropdown"
+            tabindex="0"
+            class="mt-1.5 dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10"
+            :style="{ backgroundColor: dropdownBgColor }"
+            @click="closeDropdown"
+          >
+            <div
+              class="py-1.5 px-1 relative"
+              @click.stop
+            >
+              <select
+                class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+                @change="onTypeChange($event.target.value)"
+              >
+                <option
+                  v-for="varType in variableTypes"
+                  :key="varType"
+                  :value="varType"
+                  :selected="varType === formType"
+                >{{ t(varType) }}</option>
+              </select>
+              <label
+                :style="{ backgroundColor: dropdownBgColor }"
+                class="absolute -top-1 left-2.5 px-1 h-4"
+                style="font-size: 8px"
+              >{{ t('type') }}</label>
+            </div>
+            <div
+              v-if="formType === 'number'"
+              class="py-1.5 px-1 relative"
+              @click.stop
+            >
+              <select
+                class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+                @change="[schema.format = $event.target.value, save()]"
+              >
+                <option
+                  v-for="format in numberFormats"
+                  :key="format"
+                  :value="format"
+                  :selected="format === schema.format || (format === 'none' && !schema.format)"
+                >{{ formatNumber(123456789.567, format) }}</option>
+              </select>
+              <label
+                :style="{ backgroundColor: dropdownBgColor }"
+                class="absolute -top-1 left-2.5 px-1 h-4"
+                style="font-size: 8px"
+              >{{ t('format') }}</label>
+            </div>
+            <div
+              v-if="['text', 'number'].includes(formType)"
+              class="py-1.5 px-1 relative"
+              @click.stop
+            >
+              <input
+                v-model="schema.default_value"
+                :type="formType === 'number' ? 'number' : 'text'"
+                :placeholder="t('default_value')"
+                dir="auto"
+                class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
+                @blur="save"
+              >
+              <label
+                v-if="schema.default_value"
+                :style="{ backgroundColor: dropdownBgColor }"
+                class="absolute -top-1 left-2.5 px-1 h-4"
+                style="font-size: 8px"
+              >{{ t('default_value') }}</label>
+            </div>
+            <div
+              v-if="formType === 'date'"
+              class="py-1.5 px-1 relative"
+              @click.stop
+            >
+              <select
+                :value="schema.format || 'MM/DD/YYYY'"
+                class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+                @change="[schema.format = $event.target.value, save()]"
+              >
+                <option
+                  v-for="format in dateFormats"
+                  :key="format"
+                  :value="format"
+                >{{ formatDate(new Date(), format) }}</option>
+              </select>
+              <label
+                :style="{ backgroundColor: dropdownBgColor }"
+                class="absolute -top-1 left-2.5 px-1 h-4"
+                style="font-size: 8px"
+              >{{ t('format') }}</label>
+            </div>
+            <li
+              v-if="formType === 'date'"
+              @click.stop
+            >
+              <label class="cursor-pointer py-1.5">
+                <input
+                  :checked="schema.default_value === '{{date}}'"
+                  type="checkbox"
+                  class="toggle toggle-xs"
+                  @change="[schema.default_value = $event.target.checked ? '{{date}}' : undefined, save()]"
+                >
+                <span class="label-text">{{ t('current_date') }}</span>
+              </label>
+            </li>
+            <div
+              v-if="['radio', 'select'].includes(formType)"
+              class="py-1.5 px-1 relative"
+              @click.stop
+            >
+              <select
+                dir="auto"
+                class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent"
+                @change="[schema.default_value = $event.target.value || undefined, save()]"
+              >
+                <option
+                  value=""
+                  :selected="!schema.default_value"
+                >{{ t('none') }}</option>
+                <option
+                  v-for="opt in (schema.options || [])"
+                  :key="opt"
+                  :value="opt"
+                  :selected="schema.default_value === opt"
+                >{{ opt }}</option>
+              </select>
+              <label
+                :style="{ backgroundColor: dropdownBgColor }"
+                class="absolute -top-1 left-2.5 px-1 h-4"
+                style="font-size: 8px"
+              >{{ t('default_value') }}</label>
+            </div>
+            <li
+              v-if="formType === 'checkbox'"
+              @click.stop
+            >
+              <label class="cursor-pointer py-1.5">
+                <input
+                  :checked="schema.default_value === true"
+                  type="checkbox"
+                  class="toggle toggle-xs"
+                  @change="[schema.default_value = $event.target.checked || undefined, save()]"
+                >
+                <span class="label-text">{{ t('checked') }}</span>
+              </label>
+            </li>
+            <li @click.stop>
+              <label class="cursor-pointer py-1.5">
+                <input
+                  :checked="schema.required !== false"
+                  type="checkbox"
+                  class="toggle toggle-xs"
+                  @change="[schema.required = $event.target.checked, save()]"
+                >
+                <span class="label-text">{{ t('required') }}</span>
+              </label>
+            </li>
+          </ul>
+        </span>
+      </div>
+    </div>
+    <div
+      v-if="['radio', 'select'].includes(formType) && schema.options"
+      ref="options"
+      class="pl-2 pr-1 pb-1.5 space-y-1.5"
+    >
+      <div
+        v-for="(option, index) in schema.options"
+        :key="index"
+        class="flex space-x-1.5 items-center"
+      >
+        <span class="text-sm w-3.5 select-none">{{ index + 1 }}.</span>
+        <input
+          :value="option"
+          class="w-full input input-primary input-xs text-sm bg-transparent"
+          type="text"
+          dir="auto"
+          :placeholder="`${t('option')} ${index + 1}`"
+          @blur="[schema.options.splice(index, 1, $event.target.value), save()]"
+          @keydown.enter="$event.target.value ? onOptionEnter(index, $event.target.value) : null"
+        >
+        <button
+          class="text-sm w-3.5"
+          tabindex="-1"
+          @click="[schema.options.splice(index, 1), save()]"
+        >
+          &times;
+        </button>
+      </div>
+      <button
+        class="text-center text-sm w-full pb-1"
+        @click="addOptionAndFocus((schema.options || []).length)"
+      >
+        + {{ t('add_option') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import FieldType from './field_type'
+import { IconSettings } from '@tabler/icons-vue'
+
+export default {
+  name: 'DynamicVariable',
+  components: {
+    FieldType,
+    IconSettings
+  },
+  inject: ['t', 'save', 'backgroundColor'],
+  provide () {
+    return {
+      fieldTypes: ['text', 'number', 'date', 'checkbox', 'radio', 'select']
+    }
+  },
+  props: {
+    path: {
+      type: String,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    groupKey: {
+      type: String,
+      default: ''
+    },
+    schema: {
+      type: Object,
+      required: true
+    },
+    isArray: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      renderDropdown: false
+    }
+  },
+  computed: {
+    displayName () {
+      if (this.groupKey) {
+        const prefix = this.groupKey + (this.path.startsWith(this.groupKey + '[].') ? '[].' : '.')
+
+        return this.path.slice(prefix.length)
+      } else {
+        return this.path
+      }
+    },
+    dropdownBgColor () {
+      return ['', null, 'transparent'].includes(this.backgroundColor) ? 'white' : this.backgroundColor
+    },
+    schemaTypeToFormType () {
+      return { string: 'text', number: 'number', boolean: 'checkbox', date: 'date' }
+    },
+    formType () {
+      return this.schema.form_type || this.schemaTypeToFormType[this.schema.type] || 'text'
+    },
+    variableTypes () {
+      return ['text', 'number', 'date', 'checkbox', 'radio', 'select']
+    },
+    formTypeToSchemaType () {
+      return { text: 'string', number: 'number', date: 'date', checkbox: 'boolean', radio: 'string', select: 'string' }
+    },
+    numberFormats () {
+      return [
+        'none',
+        'usd',
+        'eur',
+        'gbp',
+        'comma',
+        'dot',
+        'space'
+      ]
+    },
+    dateFormats () {
+      const formats = [
+        'MM/DD/YYYY',
+        'DD/MM/YYYY',
+        'YYYY-MM-DD',
+        'DD-MM-YYYY',
+        'DD.MM.YYYY',
+        'MMM D, YYYY',
+        'MMMM D, YYYY',
+        'D MMM YYYY',
+        'D MMMM YYYY'
+      ]
+
+      if (Intl.DateTimeFormat().resolvedOptions().timeZone?.includes('Seoul') || navigator.language?.startsWith('ko')) {
+        formats.push('YYYY년 MM월 DD일')
+      }
+
+      if (this.schema.format && !formats.includes(this.schema.format)) {
+        formats.unshift(this.schema.format)
+      }
+
+      return formats
+    }
+  },
+  methods: {
+    onTypeChange (newType) {
+      this.schema.type = this.formTypeToSchemaType[newType] || 'string'
+      this.schema.form_type = newType
+
+      if (['radio', 'select'].includes(newType)) {
+        if (!this.schema.options || !this.schema.options.length) {
+          this.schema.options = ['', '']
+        }
+      } else {
+        delete this.schema.options
+        delete this.schema.default_value
+        delete this.schema.format
+      }
+
+      this.save()
+    },
+    onOptionEnter (index, value) {
+      this.schema.options.splice(index, 1, value)
+      this.schema.options.splice(index + 1, 0, '')
+
+      this.save()
+
+      this.$nextTick(() => {
+        this.$refs.options.querySelectorAll('input')[index + 1]?.focus()
+      })
+    },
+    addOptionAndFocus (index) {
+      if (!this.schema.options) {
+        this.schema.options = []
+      }
+
+      this.schema.options.splice(index, 0, '')
+      this.save()
+
+      this.$nextTick(() => {
+        this.$refs.options.querySelectorAll('input')[index]?.focus()
+      })
+    },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'usd') {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'gbp') {
+        return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'eur') {
+        return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
+    formatDate (date, format) {
+      const monthFormats = { M: 'numeric', MM: '2-digit', MMM: 'short', MMMM: 'long' }
+      const dayFormats = { D: 'numeric', DD: '2-digit' }
+      const yearFormats = { YYYY: 'numeric', YY: '2-digit' }
+
+      const parts = new Intl.DateTimeFormat([], {
+        day: dayFormats[format.match(/D+/)],
+        month: monthFormats[format.match(/M+/)],
+        year: yearFormats[format.match(/Y+/)]
+      }).formatToParts(date)
+
+      return format
+        .replace(/D+/, parts.find((p) => p.type === 'day').value)
+        .replace(/M+/, parts.find((p) => p.type === 'month').value)
+        .replace(/Y+/, parts.find((p) => p.type === 'year').value)
+    },
+    closeDropdown () {
+      this.$el.getRootNode().activeElement.blur()
+    }
+  }
+}
+</script>

app/javascript/template_builder/dynamic_variables.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <div
+      v-if="!schemaEntries.length"
+      class="text-center py-4 px-2"
+    >
+      <p class="font-medium">
+        {{ t('no_variables') }}
+      </p>
+      <p class="text-sm mt-1">
+        {{ t('no_variables_description') }}
+      </p>
+    </div>
+    <template v-else>
+      <template
+        v-for="([key, node], index) in schemaEntries"
+        :key="key"
+      >
+        <div v-if="isGroup(node)">
+          <hr
+            v-if="index > 0"
+            class="border-base-300"
+          >
+          <label class="peer flex items-center py-1.5 cursor-pointer select-none">
+            <input
+              type="checkbox"
+              class="hidden peer"
+              checked
+            >
+            <IconChevronDown
+              class="hidden peer-checked:block"
+              :width="14"
+              :stroke-width="1.6"
+            />
+            <IconChevronRight
+              class="block peer-checked:hidden"
+              :width="14"
+              :stroke-width="1.6"
+            />
+            <span class="ml-1">{{ key }}</span>
+            <span
+              v-if="node.type === 'array'"
+              class="text-xs bg-base-200 rounded px-1 ml-1"
+            >{{ t('list') }}</span>
+          </label>
+          <div class="hidden peer-has-[:checked]:block pl-3.5">
+            <template
+              v-for="[varNode, varPath] in nestedVariables(node, key)"
+              :key="varPath"
+            >
+              <hr class="border-base-300">
+              <DynamicVariable
+                :path="varPath"
+                :group-key="key"
+                :editable="editable"
+                :schema="varNode"
+              />
+            </template>
+          </div>
+        </div>
+        <template v-else>
+          <hr
+            v-if="index > 0"
+            class="border-base-300"
+          >
+          <DynamicVariable
+            :path="key"
+            :editable="editable"
+            :schema="node.type === 'array' && node.items ? node.items : node"
+            :is-array="node.type === 'array'"
+          />
+        </template>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+import DynamicVariable from './dynamic_variable'
+import { IconChevronDown, IconChevronRight } from '@tabler/icons-vue'
+
+export default {
+  name: 'DynamicVariables',
+  components: {
+    DynamicVariable,
+    IconChevronDown,
+    IconChevronRight
+  },
+  inject: ['t', 'template', 'save', 'backgroundColor'],
+  props: {
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  computed: {
+    schemaEntries () {
+      return Object.entries(this.template.variables_schema || {}).filter(([, node]) => !node.disabled)
+    }
+  },
+  methods: {
+    isGroup (node) {
+      return (node.type === 'object' && node.properties) || (node.type === 'array' && node.items?.properties)
+    },
+    nestedVariables (node, groupKey) {
+      const properties = node.type === 'array' ? node.items?.properties : node.properties
+
+      if (!properties) return []
+
+      const prefix = node.type === 'array' ? `${groupKey}[]` : groupKey
+
+      return this.collectLeafVariables(properties, prefix)
+    },
+    collectLeafVariables (properties, prefix) {
+      return Object.entries(properties).reduce((result, [key, node]) => {
+        if (node.disabled) return result
+
+        const path = `${prefix}.${key}`
+
+        if (node.type === 'object' && node.properties) {
+          result.push(...this.collectLeafVariables(node.properties, path))
+        } else if (node.type === 'array' && node.items?.properties) {
+          result.push(...this.collectLeafVariables(node.items.properties, `${path}[]`))
+        } else {
+          result.push([node, path])
+        }
+
+        return result
+      }, [])
+    }
+  }
+}
+</script>

app/javascript/template_builder/dynamic_variables_schema.js

@@ -0,0 +1,559 @@
+const KEYWORDS = ['if', 'else', 'for', 'end']
+const TYPE_PRIORITY = { string: 3, number: 2, boolean: 1 }
+const AND_OR_REGEXP = /\s+(AND|OR)\s+/i
+const COMPARISON_OPERATORS_REGEXP = />=|<=|!=|==|>|<|=/
+
+function buildTokens (elem, acc = []) {
+  if (elem.nodeType === Node.TEXT_NODE) {
+    if (elem.textContent) {
+      const text = elem.textContent
+      const re = /[[\]]/g
+      let match
+      let found = false
+
+      while ((match = re.exec(text)) !== null) {
+        found = true
+
+        acc.push({
+          elem,
+          value: match[0],
+          textLength: text.length,
+          index: match.index
+        })
+      }
+
+      if (!found) {
+        acc.push({ elem, value: '', textLength: 0, index: 0 })
+      }
+    }
+  } else {
+    for (const child of elem.childNodes) {
+      buildTokens(child, acc)
+    }
+  }
+
+  return acc
+}
+
+function tokensPair (cur, nxt) {
+  if (cur.elem === nxt.elem) {
+    return cur.elem.textContent.slice(cur.index + 1, nxt.index).trim() === ''
+  } else {
+    return cur.elem.textContent.slice(cur.index + 1).trim() === '' &&
+           nxt.elem.textContent.slice(0, nxt.index).trim() === ''
+  }
+}
+
+function buildTags (tokens) {
+  const normalized = []
+
+  for (let i = 0; i < tokens.length - 1; i++) {
+    const cur = tokens[i]
+    const nxt = tokens[i + 1]
+
+    if (cur.value === '[' && nxt.value === '[' && tokensPair(cur, nxt)) {
+      normalized.push(['open', cur])
+    } else if (cur.value === ']' && nxt.value === ']' && tokensPair(cur, nxt)) {
+      normalized.push(['close', nxt])
+    }
+  }
+
+  const tags = []
+
+  for (let i = 0; i < normalized.length - 1; i++) {
+    const [curOp, openToken] = normalized[i]
+    const [nxtOp, closeToken] = normalized[i + 1]
+
+    if (curOp === 'open' && nxtOp === 'close') {
+      tags.push({ openToken, closeToken, value: '' })
+    }
+  }
+
+  return tags
+}
+
+function findTextNodesInBranch (elements, toElem, acc) {
+  if (!elements || elements.length === 0) return acc
+
+  for (const elem of elements) {
+    if (elem.nodeType === Node.TEXT_NODE) {
+      acc.push(elem)
+    } else {
+      findTextNodesInBranch(Array.from(elem.childNodes), toElem, acc)
+    }
+
+    if (acc.length > 0 && acc[acc.length - 1] === toElem) return acc
+  }
+
+  return acc
+}
+
+function findTextNodesBetween (fromElem, toElem, acc = []) {
+  if (fromElem === toElem) return [fromElem]
+
+  let currentElement = fromElem
+
+  while (true) {
+    const parent = currentElement.parentNode
+
+    if (!parent) return acc
+
+    const children = Array.from(parent.childNodes)
+    const startIndex = children.indexOf(currentElement)
+
+    if (startIndex === -1) return acc
+
+    const elementsInBranch = children.slice(startIndex)
+
+    findTextNodesInBranch(elementsInBranch, toElem, acc)
+
+    if (acc.length > 0 && acc[acc.length - 1] === toElem) return acc
+
+    let p = elementsInBranch[0].parentNode
+
+    while (p && !p.nextSibling) {
+      p = p.parentNode
+    }
+
+    if (!p || !p.nextSibling) return acc
+
+    currentElement = p.nextSibling
+  }
+}
+
+function mapTagValues (tags) {
+  for (const tag of tags) {
+    const textNodes = findTextNodesBetween(tag.openToken.elem, tag.closeToken.elem)
+
+    for (const elem of textNodes) {
+      let part
+
+      if (tag.openToken.elem === elem && tag.closeToken.elem === elem) {
+        part = elem.textContent.slice(tag.openToken.index, tag.closeToken.index + 1)
+      } else if (tag.openToken.elem === elem) {
+        part = elem.textContent.slice(tag.openToken.index)
+      } else if (tag.closeToken.elem === elem) {
+        part = elem.textContent.slice(0, tag.closeToken.index + 1)
+      } else {
+        part = elem.textContent
+      }
+
+      tag.value += part
+    }
+  }
+
+  return tags
+}
+
+function parseTagTypeName (tagString) {
+  const val = tagString.replace(/[[\]]/g, '').trim()
+  const parts = val.split(':').map((s) => s.trim())
+
+  if (parts.length === 2 && KEYWORDS.includes(parts[0])) {
+    return [parts[0], parts[1]]
+  } else if (KEYWORDS.includes(val)) {
+    return [val, null]
+  } else {
+    return ['var', val]
+  }
+}
+
+function isSimpleVariable (str) {
+  const s = str.trim()
+
+  return !AND_OR_REGEXP.test(s) &&
+    !COMPARISON_OPERATORS_REGEXP.test(s) &&
+    !s.includes('(') &&
+    !s.includes('!') &&
+    !s.includes('&&') &&
+    !s.includes('||') &&
+    !s.startsWith('"') &&
+    !s.startsWith("'") &&
+    !/^-?\d/.test(s) &&
+    !/^(true|false)$/i.test(s)
+}
+
+function tokenizeCondition (str) {
+  const tokens = []
+  let pos = 0
+
+  str = str.trim()
+
+  while (pos < str.length) {
+    const rest = str.slice(pos)
+    let m
+
+    if ((m = rest.match(/^\s+/))) {
+      pos += m[0].length
+    } else if ((m = rest.match(/^(>=|<=|!=|==|>|<|=)/))) {
+      tokens.push({ type: 'operator', value: m[1] })
+      pos += m[1].length
+    } else if (rest[0] === '!') {
+      tokens.push({ type: 'not', value: '!' })
+      pos += 1
+    } else if (rest[0] === '(') {
+      tokens.push({ type: 'lparen', value: '(' })
+      pos += 1
+    } else if (rest[0] === ')') {
+      tokens.push({ type: 'rparen', value: ')' })
+      pos += 1
+    } else if (rest.startsWith('&&')) {
+      tokens.push({ type: 'and', value: 'AND' })
+      pos += 2
+    } else if ((m = rest.match(/^AND\b/i))) {
+      tokens.push({ type: 'and', value: 'AND' })
+      pos += 3
+    } else if (rest.startsWith('||')) {
+      tokens.push({ type: 'or', value: 'OR' })
+      pos += 2
+    } else if ((m = rest.match(/^OR\b/i))) {
+      tokens.push({ type: 'or', value: 'OR' })
+      pos += 2
+    } else if ((m = rest.match(/^"([^"]*)"/) || rest.match(/^'([^']*)'/))) {
+      tokens.push({ type: 'string', value: m[1] })
+      pos += m[0].length
+    } else if ((m = rest.match(/^(-?\d+\.?\d*)/))) {
+      tokens.push({ type: 'number', value: m[1].includes('.') ? parseFloat(m[1]) : parseInt(m[1], 10) })
+      pos += m[1].length
+    } else if ((m = rest.match(/^(true|false)\b/i))) {
+      tokens.push({ type: 'boolean', value: m[1].toLowerCase() === 'true' })
+      pos += m[1].length
+    } else if ((m = rest.match(/^([\p{L}_][\p{L}\p{N}_.]*)/u))) {
+      tokens.push({ type: 'variable', value: m[1] })
+      pos += m[1].length
+    } else {
+      pos += 1
+    }
+  }
+
+  return tokens
+}
+
+function parseOrExpr (tokens, pos) {
+  let left, right
+
+  ;[left, pos] = parseAndExpr(tokens, pos)
+
+  while (pos < tokens.length && tokens[pos].type === 'or') {
+    pos += 1
+    ;[right, pos] = parseAndExpr(tokens, pos)
+    left = { type: 'or', left, right }
+  }
+
+  return [left, pos]
+}
+
+function parseAndExpr (tokens, pos) {
+  let left, right
+
+  ;[left, pos] = parsePrimary(tokens, pos)
+
+  while (pos < tokens.length && tokens[pos].type === 'and') {
+    pos += 1
+    ;[right, pos] = parsePrimary(tokens, pos)
+    left = { type: 'and', left, right }
+  }
+
+  return [left, pos]
+}
+
+function parsePrimary (tokens, pos) {
+  if (pos >= tokens.length) return [null, pos]
+
+  if (tokens[pos].type === 'not') {
+    const [child, p] = parsePrimary(tokens, pos + 1)
+
+    return [{ type: 'not', child }, p]
+  }
+
+  if (tokens[pos].type === 'lparen') {
+    const [node, p] = parseOrExpr(tokens, pos + 1)
+
+    return [node, p < tokens.length && tokens[p].type === 'rparen' ? p + 1 : p]
+  }
+
+  return parseComparisonOrPresence(tokens, pos)
+}
+
+function parseComparisonOrPresence (tokens, pos) {
+  if (pos >= tokens.length || tokens[pos].type !== 'variable') return [null, pos]
+
+  const variableName = tokens[pos].value
+
+  pos += 1
+
+  if (pos < tokens.length && tokens[pos].type === 'operator') {
+    let operator = tokens[pos].value
+
+    if (operator === '=') operator = '=='
+
+    pos += 1
+
+    if (pos < tokens.length && ['string', 'number', 'variable', 'boolean'].includes(tokens[pos].type)) {
+      const valueToken = tokens[pos]
+
+      return [{
+        type: 'comparison',
+        variableName,
+        operator,
+        value: valueToken.value,
+        valueIsVariable: valueToken.type === 'variable'
+      }, pos + 1]
+    }
+  }
+
+  return [{ type: 'presence', variableName }, pos]
+}
+
+function parseCondition (conditionString) {
+  const stripped = conditionString.trim()
+
+  if (stripped.startsWith('!') && isSimpleVariable(stripped.slice(1))) {
+    return { type: 'not', child: { type: 'presence', variableName: stripped.slice(1) } }
+  }
+
+  if (isSimpleVariable(stripped)) {
+    return { type: 'presence', variableName: stripped }
+  }
+
+  const tokens = tokenizeCondition(stripped)
+  const [ast] = parseOrExpr(tokens, 0)
+
+  return ast
+}
+
+function extractConditionVariables (node, acc = []) {
+  if (!node) return acc
+
+  switch (node.type) {
+    case 'or':
+    case 'and':
+      extractConditionVariables(node.left, acc)
+      extractConditionVariables(node.right, acc)
+      break
+    case 'not':
+      extractConditionVariables(node.child, acc)
+      break
+    case 'comparison':
+      acc.push({
+        name: node.variableName,
+        type: node.valueIsVariable ? null : (typeof node.value === 'boolean' ? 'boolean' : (typeof node.value === 'number' ? 'number' : 'string'))
+      })
+
+      if (node.valueIsVariable) {
+        acc.push({ name: node.value, type: null })
+      }
+
+      break
+    case 'presence':
+      acc.push({ name: node.variableName, type: 'boolean' })
+      break
+  }
+
+  return acc
+}
+
+function singularize (word) {
+  if (word.endsWith('ies')) return word.slice(0, -3) + 'y'
+  if (word.endsWith('ches') || word.endsWith('shes')) return word.slice(0, -2)
+  if (word.endsWith('ses') || word.endsWith('xes') || word.endsWith('zes')) return word.slice(0, -2)
+  if (word.endsWith('s') && !word.endsWith('ss')) return word.slice(0, -1)
+
+  return word
+}
+
+function buildOperators (tags) {
+  const operators = []
+  const stack = [{ children: operators, operator: null }]
+
+  for (const tag of tags) {
+    const [type, variableName] = parseTagTypeName(tag.value)
+
+    switch (type) {
+      case 'for':
+      case 'if': {
+        const operator = { type, variableName, tag, children: [] }
+
+        if (type === 'if') {
+          try {
+            operator.condition = parseCondition(variableName)
+          } catch (e) {
+            // ignore parse errors
+          }
+        }
+
+        stack[stack.length - 1].children.push(operator)
+        stack.push({ children: operator.children, operator })
+        break
+      }
+      case 'else': {
+        const current = stack[stack.length - 1]
+
+        if (current.operator && current.operator.type === 'if') {
+          current.operator.elseTag = tag
+          current.operator.elseChildren = []
+          current.children = current.operator.elseChildren
+        }
+
+        break
+      }
+      case 'end': {
+        const popped = stack.pop()
+
+        if (popped.operator) {
+          popped.operator.endTag = tag
+        }
+
+        break
+      }
+      case 'var':
+        stack[stack.length - 1].children.push({ type, variableName, tag })
+        break
+    }
+  }
+
+  return operators
+}
+
+function assignNestedSchema (propertiesHash, parentProperties, keyString, value) {
+  const keys = keyString.split('.')
+  const lastKey = keys.pop()
+
+  let currentLevel = null
+
+  if (keys.length > 0 && parentProperties[keys[0]]) {
+    currentLevel = keys.reduce((current, key) => {
+      if (!current[key]) current[key] = { type: 'object', properties: {} }
+
+      return current[key].properties
+    }, parentProperties)
+  }
+
+  if (!currentLevel) {
+    currentLevel = keys.reduce((current, key) => {
+      if (!current[key]) current[key] = { type: 'object', properties: {} }
+
+      return current[key].properties
+    }, propertiesHash)
+  }
+
+  currentLevel[lastKey] = value
+}
+
+function assignNestedSchemaWithPriority (propertiesHash, parentProperties, keyString, newType) {
+  const keys = keyString.split('.')
+  const lastKey = keys.pop()
+
+  let currentLevel = null
+
+  if (keys.length > 0 && parentProperties[keys[0]]) {
+    currentLevel = keys.reduce((current, key) => {
+      if (!current[key]) current[key] = { type: 'object', properties: {} }
+
+      return current[key].properties
+    }, parentProperties)
+  }
+
+  if (!currentLevel) {
+    currentLevel = keys.reduce((current, key) => {
+      if (!current[key]) current[key] = { type: 'object', properties: {} }
+
+      return current[key].properties
+    }, propertiesHash)
+  }
+
+  const existing = currentLevel[lastKey]
+
+  if (existing && (TYPE_PRIORITY[newType] || 0) <= (TYPE_PRIORITY[existing.type] || 0)) return
+
+  currentLevel[lastKey] = { type: newType }
+}
+
+function processConditionVariables (condition, propertiesHash, parentProperties) {
+  const variables = extractConditionVariables(condition)
+
+  for (const varInfo of variables) {
+    assignNestedSchemaWithPriority(propertiesHash, parentProperties, varInfo.name, varInfo.type || 'boolean')
+  }
+}
+
+function processOperators (operators, propertiesHash = {}, parentProperties = {}) {
+  if (!operators || operators.length === 0) return propertiesHash
+
+  for (const op of operators) {
+    switch (op.type) {
+      case 'var': {
+        if (!op.variableName.includes('.') && parentProperties[op.variableName]) {
+          const item = parentProperties[op.variableName]
+
+          if (item && item.type === 'object' && item.properties && Object.keys(item.properties).length === 0) {
+            delete item.properties
+            item.type = 'string'
+          }
+        } else {
+          assignNestedSchema(propertiesHash, parentProperties, op.variableName, { type: 'string' })
+        }
+        break
+      }
+      case 'if':
+        if (op.condition) {
+          processConditionVariables(op.condition, propertiesHash, parentProperties)
+        }
+
+        processOperators(op.children, propertiesHash, parentProperties)
+        processOperators(op.elseChildren, propertiesHash, parentProperties)
+        break
+      case 'for': {
+        const parts = op.variableName.split('.')
+        const singularKey = singularize(parts[parts.length - 1])
+
+        let itemProperties = parentProperties[singularKey]?.items
+        itemProperties = itemProperties || propertiesHash[parts[0]]?.items
+        itemProperties = itemProperties || { type: 'object', properties: {} }
+
+        assignNestedSchema(propertiesHash, parentProperties, op.variableName, { type: 'array', items: itemProperties })
+        processOperators(op.children, propertiesHash, { ...parentProperties, [singularKey]: itemProperties })
+        break
+      }
+    }
+  }
+
+  return propertiesHash
+}
+
+function mergeSchemaProperties (target, source) {
+  for (const key of Object.keys(source)) {
+    if (!target[key]) {
+      target[key] = source[key]
+    } else if (target[key].type === 'object' && source[key].type === 'object') {
+      if (!target[key].properties) target[key].properties = {}
+      if (source[key].properties) {
+        mergeSchemaProperties(target[key].properties, source[key].properties)
+      }
+    } else if (target[key].type === 'array' && source[key].type === 'array') {
+      if (source[key].items && source[key].items.properties) {
+        if (!target[key].items) {
+          target[key].items = source[key].items
+        } else if (target[key].items.properties) {
+          mergeSchemaProperties(target[key].items.properties, source[key].items.properties)
+        }
+      } else if (source[key].items && !target[key].items) {
+        target[key].items = source[key].items
+      }
+    } else if ((TYPE_PRIORITY[source[key].type] || 0) > (TYPE_PRIORITY[target[key].type] || 0)) {
+      target[key] = source[key]
+    }
+  }
+
+  return target
+}
+
+function buildVariablesSchema (dom) {
+  const tokens = buildTokens(dom)
+  const tags = mapTagValues(buildTags(tokens))
+  const operators = buildOperators(tags)
+
+  return processOperators(operators)
+}
+
+export { buildVariablesSchema, mergeSchemaProperties, buildOperators, buildTokens, buildTags, mapTagValues }

app/javascript/template_builder/field.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="list-field group"
+    :class="`list-field-${field.type}`"
   >
     <div
       class="border border-base-300 rounded relative group fields-list-item"

app/javascript/template_builder/field_context_menu.vue

@@ -11,7 +11,7 @@
     >
       <label
         v-if="showRequired"
-        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
+        class="field-settings-required w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
         @click.stop
       >
         <input
@@ -26,7 +26,7 @@
       </label>
       <label
         v-if="showReadOnly"
-        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
+        class="field-settings-read-only w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
         @click.stop
       >
         <input
@@ -41,7 +41,7 @@
       </label>
       <label
         v-if="showPrefillable"
-        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
+        class="field-settings-prefillable w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
         @click.stop
       >
         <input
@@ -56,7 +56,7 @@
       </label>
       <label
         v-if="showSetSigningDate"
-        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
+        class="field-settings-set-signing-date w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
         @click.stop
       >
         <input
@@ -70,7 +70,7 @@
       </label>
       <label
         v-if="showWithLogo"
-        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
+        class="field-settings-with-logo w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
         @click.stop
       >
         <input
@@ -84,7 +84,7 @@
       </label>
       <label
         v-if="showSignatureId"
-        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
+        class="field-settings-signature-id w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
         @click.stop
       >
         <input
@@ -99,7 +99,7 @@
       </label>
       <label
         v-if="showChecked"
-        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
+        class="field-settings-checked w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
         @click.stop
       >
         <input
@@ -113,6 +113,7 @@
       </label>
       <ContextSubmenu
         v-if="showVerificationMethod"
+        class="field-settings-verification-method"
         :icon="IconId"
         :label="t('method')"
         :options="methodOptions"
@@ -125,6 +126,7 @@
       >
       <ContextSubmenu
         v-if="showFormatSubmenu"
+        class="field-settings-format"
         :icon="IconAdjustmentsHorizontal"
         :label="t('format')"
         :options="formatOptions"
@@ -133,6 +135,7 @@
       />
       <ContextSubmenu
         v-if="showValidationSubmenu && field.type !== 'number'"
+        class="field-settings-validation"
         :icon="IconInputCheck"
         :label="t('validation')"
         :options="validationMenuItems.map(k => ({ value: k, label: t(k) }))"
@@ -141,7 +144,7 @@
       />
       <button
         v-if="field.type === 'number'"
-        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+        class="field-settings-validation w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
         @click.stop="openNumberRangeModal"
       >
         <IconInputCheck class="w-4 h-4" />
@@ -149,6 +152,7 @@
       </button>
       <ContextSubmenu
         v-if="showPaymentSettings"
+        class="field-settings-currency"
         :icon="IconCash"
         :label="t('currency')"
         :options="currencyOptions"
@@ -157,6 +161,7 @@
       />
       <ContextSubmenu
         v-if="showPaymentSettings"
+        class="field-settings-price"
         :icon="IconCoins"
         :label="t('price')"
         :options="priceTypeOptions"
@@ -165,7 +170,7 @@
       />
       <button
         v-if="showFont"
-        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+        class="field-settings-font w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
         @click.stop="openFontModal"
       >
         <IconTypography class="w-4 h-4" />
@@ -173,7 +178,7 @@
       </button>
       <button
         v-if="showDescription"
-        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+        class="field-settings-description w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
         @click.stop="openDescriptionModal"
       >
         <IconInfoCircle class="w-4 h-4" />
@@ -181,7 +186,7 @@
       </button>
       <button
         v-if="showCondition"
-        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
+        class="field-settings-condition w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
         @click.stop="openConditionModal"
       >
         <span class="flex items-center space-x-2">
@@ -196,7 +201,7 @@
       </button>
       <button
         v-if="showFormula"
-        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+        class="field-settings-formula w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
         @click.stop="openFormulaModal"
       >
         <IconMathFunction class="w-4 h-4" />
@@ -207,7 +212,7 @@
         class="my-1 border-neutral-200"
       >
       <button
-        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
+        class="field-settings-copy w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
         @click.stop="$emit('copy')"
       >
         <span class="flex items-center space-x-2">
@@ -217,7 +222,7 @@
         <span class="text-xs text-base-content/60 ml-4">{{ isMac ? '⌘C' : 'Ctrl+C' }}</span>
       </button>
       <button
-        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm text-red-600"
+        class="field-settings-remove w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm text-red-600"
         @click.stop="$emit('delete')"
       >
         <span class="flex items-center space-x-2">
@@ -228,12 +233,13 @@
       </button>
       <ContextSubmenu
         v-if="showMoreSubmenu"
+        class="field-settings-more"
         :icon="IconDots"
         :label="t('more')"
       >
         <button
           v-if="showDrawNewArea"
-          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
+          class="field-settings-draw-new-area w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
           @click="handleMoreSelect('draw_new_area')"
         >
           <IconNewSection class="w-4 h-4" />
@@ -241,7 +247,7 @@
         </button>
         <button
           v-if="showCopyToAllPages"
-          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
+          class="field-settings-copy-to-all-pages w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
           @click="handleMoreSelect('copy_to_all_pages')"
         >
           <IconCopy class="w-4 h-4" />
@@ -249,7 +255,7 @@
         </button>
         <button
           v-if="showSaveAsCustom"
-          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
+          class="field-settings-save-as-custom-field w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm cursor-pointer"
           @click="handleMoreSelect('save_as_custom')"
         >
           <IconForms class="w-4 h-4" />

app/javascript/template_builder/field_settings.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="field.type === 'verification'"
-    class="py-1.5 px-1 relative"
+    class="field-settings-verification-method py-1.5 px-1 relative"
     @click.stop
   >
     <select
@@ -28,7 +28,7 @@
   </div>
   <div
     v-if="['select', 'radio'].includes(field.type) && !defaultField"
-    class="py-1.5 px-1 relative"
+    class="field-settings-default-value py-1.5 px-1 relative"
     @click.stop
   >
     <select
@@ -62,7 +62,7 @@
   </div>
   <div
     v-if="['text', 'number'].includes(field.type) && !defaultField"
-    class="py-1.5 px-1 relative"
+    class="field-settings-default-value py-1.5 px-1 relative"
     @click.stop
   >
     <input
@@ -84,7 +84,7 @@
   </div>
   <div
     v-if="['text', 'cells'].includes(field.type)"
-    class="py-1.5 px-1 relative"
+    class="field-settings-validation py-1.5 px-1 relative"
     @click.stop
   >
     <select
@@ -122,7 +122,7 @@
   </div>
   <div
     v-if="['text', 'cells'].includes(field.type) && field.validation && lengthValidation"
-    class="py-1.5 px-1 relative flex space-x-1"
+    class="field-settings-length-validation py-1.5 px-1 relative flex space-x-1"
     @click.stop
   >
     <div class="w-1/2 relative">
@@ -166,7 +166,7 @@
   </div>
   <div
     v-if="field.type === 'number'"
-    class="py-1.5 px-1 relative flex space-x-1"
+    class="field-settings-number-range py-1.5 px-1 relative flex space-x-1"
     @click.stop
   >
     <div class="w-1/2 relative">
@@ -210,7 +210,7 @@
   </div>
   <div
     v-if="field.type === 'number'"
-    class="py-1.5 px-1 relative"
+    class="field-settings-number-format py-1.5 px-1 relative"
     @click.stop
   >
     <select
@@ -237,7 +237,7 @@
   </div>
   <div
     v-if="['text', 'cells'].includes(field.type) && field.validation && !validations[field.validation.pattern] && !lengthValidation"
-    class="py-1.5 px-1 relative"
+    class="field-settings-custom-validation py-1.5 px-1 relative"
     @click.stop
   >
     <input
@@ -259,7 +259,7 @@
   </div>
   <div
     v-if="['text', 'cells'].includes(field.type) && field.validation && !validations[field.validation.pattern] && !lengthValidation"
-    class="py-1.5 px-1 relative"
+    class="field-settings-error-message py-1.5 px-1 relative"
     @click.stop
   >
     <input
@@ -280,7 +280,7 @@
   </div>
   <div
     v-if="field.type === 'date'"
-    class="py-1.5 px-1 relative"
+    class="field-settings-date-format py-1.5 px-1 relative"
     @click.stop
   >
     <select
@@ -307,7 +307,7 @@
   </div>
   <div
     v-if="field.type === 'signature'"
-    class="py-1.5 px-1 relative"
+    class="field-settings-signature-format py-1.5 px-1 relative"
     @click.stop
   >
     <select
@@ -340,6 +340,7 @@
   </div>
   <li
     v-if="[true, false].includes(withSignatureId) && field.type === 'signature'"
+    class="field-settings-signature-id"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -355,6 +356,7 @@
   </li>
   <li
     v-if="withRequired && field.type !== 'phone' && field.type !== 'stamp' && field.type !== 'verification' && field.type !== 'strikethrough' && field.type !== 'heading'"
+    class="field-settings-required"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -370,6 +372,7 @@
   </li>
   <li
     v-if="field.type == 'stamp'"
+    class="field-settings-with-logo"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -384,6 +387,7 @@
   </li>
   <li
     v-if="field.type == 'checkbox'"
+    class="field-settings-checked"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -398,6 +402,7 @@
   </li>
   <li
     v-if="field.type == 'date'"
+    class="field-settings-set-signing-date"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -412,6 +417,7 @@
   </li>
   <li
     v-if="['text', 'number', 'radio', 'multiple', 'select'].includes(field.type)"
+    class="field-settings-read-only"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -427,6 +433,7 @@
   </li>
   <li
     v-if="withPrefillable && prefillableFieldTypes.includes(field['type'])"
+    class="field-settings-prefillable"
     @click.stop
   >
     <label class="cursor-pointer py-1.5">
@@ -444,7 +451,10 @@
     v-if="field.type != 'stamp'"
     class="pb-0.5 mt-0.5"
   >
-  <li v-if="['text', 'number', 'date', 'select', 'heading', 'cells'].includes(field.type)">
+  <li
+    v-if="['text', 'number', 'date', 'select', 'heading', 'cells'].includes(field.type)"
+    class="field-settings-font"
+  >
     <label
       class="label-text cursor-pointer text-center w-full flex items-center"
       @click="$emit('click-font')"
@@ -459,6 +469,7 @@
   </li>
   <li
     v-if="field.type != 'stamp' && field.type != 'heading' && field.type != 'strikethrough'"
+    class="field-settings-description"
   >
     <label
       class="label-text cursor-pointer text-center w-full flex items-center"
@@ -474,6 +485,7 @@
   </li>
   <li
     v-if="withCondition && field.type != 'stamp' && field.type != 'heading'"
+    class="field-settings-condition"
   >
     <label
       class="label-text cursor-pointer text-center w-full flex items-center"
@@ -487,7 +499,10 @@
       </span>
     </label>
   </li>
-  <li v-if="field.type == 'number'">
+  <li
+    v-if="field.type == 'number'"
+    class="field-settings-formula"
+  >
     <label
       class="label-text cursor-pointer text-center w-full flex items-center"
       @click="$emit('click-formula')"
@@ -501,13 +516,14 @@
     </label>
   </li>
   <hr
-    v-if="withCopyToAllPages || withAreas || withCustomFields"
+    v-if="(withCopyToAllPages && canCopyToAllPages) || withAreas || withCustomFields"
     class="pb-0.5 mt-0.5"
   >
   <template v-if="withAreas">
     <li
       v-for="(area, index) in sortedAreas"
       :key="index"
+      class="field-settings-area"
     >
       <a
         href="#"
@@ -527,7 +543,10 @@
         />
       </a>
     </li>
-    <li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
+    <li
+      v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)"
+      class="field-settings-draw-new-area"
+    >
       <a
         href="#"
         class="text-sm py-1 px-2"
@@ -541,7 +560,10 @@
       </a>
     </li>
   </template>
-  <li v-if="withCopyToAllPages && field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells', 'stamp'].includes(field.type)">
+  <li
+    v-if="withCopyToAllPages && canCopyToAllPages && field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells', 'stamp'].includes(field.type)"
+    class="field-settings-copy-to-all-pages"
+  >
     <a
       href="#"
       class="text-sm py-1 px-2"
@@ -554,7 +576,10 @@
       {{ t('copy_to_all_pages') }}
     </a>
   </li>
-  <li v-if="withCustomFields">
+  <li
+    v-if="withCustomFields"
+    class="field-settings-save-as-custom-field"
+  >
     <a
       href="#"
       class="text-sm py-1 px-2"
@@ -656,6 +681,15 @@ export default {
         return acc
       }, {})
     },
+    canCopyToAllPages () {
+      const firstArea = this.field.areas[0]
+
+      if (firstArea) {
+        return firstArea.page !== null && firstArea.page !== undefined
+      } else {
+        return false
+      }
+    },
     numberFormats () {
       return [
         'none',
@@ -719,7 +753,7 @@ export default {
       return ['text', 'number', 'cells', 'date', 'checkbox', 'select', 'radio', 'phone']
     },
     sortedAreas () {
-      return (this.field.areas || []).sort((a, b) => {
+      return (this.field.areas || []).filter((e) => e.page !== null && e.page !== undefined).sort((a, b) => {
         return this.schemaAttachmentsIndexes[a.attachment_uuid] - this.schemaAttachmentsIndexes[b.attachment_uuid]
       })
     }

app/javascript/template_builder/fields.vue

@@ -1,19 +1,42 @@
 <template>
-  <div :class="withStickySubmitters ? 'sticky top-0 z-[1]' : ''">
+  <div
+    :class="withStickySubmitters ? 'sticky top-0 z-[1]' : ''"
+    :style="withStickySubmitters ? { backgroundColor } : {}"
+    class="flex items-center gap-1"
+  >
     <FieldSubmitter
       :model-value="selectedSubmitter.uuid"
       class="roles-dropdown w-full rounded-lg roles-dropdown"
-      :style="withStickySubmitters ? { backgroundColor } : {}"
       :submitters="submitters"
       :menu-style="{ overflow: 'auto', display: 'flex', flexDirection: 'row', maxHeight: 'calc(100vh - 120px)', backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
       :editable="editable && !defaultSubmitters.length"
       @new-submitter="save"
       @remove="removeSubmitter"
       @name-change="save"
-      @update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
+      @update:model-value="[$emit('change-submitter', submitters.find((s) => s.uuid === $event)), isShowVariables = false]"
     />
+    <button
+      v-if="hasDynamicDocuments"
+      class="flex-shrink-0 rounded-md border hover:border-content flex items-center justify-center self-stretch"
+      :class="isShowVariables ? 'border-base-content bg-base-content text-base-100' : 'border-base-300'"
+      style="width: 44px"
+      :title="t('variables')"
+      @click.prevent="toggleVariables"
+    >
+      <IconBracketsContain
+        :width="22"
+        :height="22"
+        :stroke-width="1.6"
+      />
+    </button>
   </div>
+  <DynamicVariables
+    v-if="isShowVariables"
+    :editable="editable"
+    class="mt-1"
+  />
   <div
+    v-if="!isShowVariables"
     ref="fields"
     class="fields mt-2"
     :class="{ 'mb-1': !withCustomFields || !customFields.length }"
@@ -42,7 +65,7 @@
       @set-draw="$emit('set-draw', $event)"
     />
   </div>
-  <div v-if="submitterDefaultFields.length && editable">
+  <div v-if="!isShowVariables && submitterDefaultFields.length && editable">
     <hr class="mb-2">
     <template v-if="isShowFieldSearch">
       <input
@@ -110,7 +133,7 @@
     </div>
   </div>
   <div
-    v-if="editable && withCustomFields && (customFields.length || newCustomField)"
+    v-if="!isShowVariables && editable && withCustomFields && (customFields.length || newCustomField)"
     class="tabs w-full mb-1.5"
   >
     <a
@@ -127,7 +150,7 @@
     >{{ t('custom') }}</a>
   </div>
   <div
-    v-if="showCustomTab && editable && (customFields.length || newCustomField)"
+    v-if="!isShowVariables && showCustomTab && editable && (customFields.length || newCustomField)"
     ref="customFields"
     class="custom-fields"
     @dragover.prevent="onCustomFieldDragover"
@@ -195,7 +218,7 @@
     </div>
   </div>
   <div
-    v-if="editable && !onlyDefinedFields && (!showCustomTab || (!customFields.length && !newCustomField))"
+    v-if="!isShowVariables && editable && !onlyDefinedFields && (!showCustomTab || (!customFields.length && !newCustomField))"
     id="field-types-grid"
     class="grid grid-cols-3 gap-1 pb-2 fields-grid"
   >
@@ -283,7 +306,7 @@
     </template>
   </div>
   <div
-    v-if="fields.length < 4 && editable && withHelp && !showTourStartForm"
+    v-if="!isShowVariables && fields.length < 4 && editable && withHelp && !showTourStartForm"
     class="text-xs p-2 border border-base-200 rounded"
   >
     <ul class="list-disc list-outside ml-3">
@@ -299,7 +322,7 @@
     </ul>
   </div>
   <div
-    v-if="withFieldsDetection && editable && fields.length < 2"
+    v-if="!isShowVariables && withFieldsDetection && editable && fields.length < 2 && !template.schema.some((item) => item.dynamic)"
     class="my-2"
   >
     <button
@@ -336,7 +359,7 @@
     </button>
   </div>
   <div
-    v-show="fields.length < 4 && editable && withHelp && showTourStartForm"
+    v-show="!isShowVariables && fields.length < 4 && editable && withHelp && showTourStartForm"
     class="rounded py-2 px-4 w-full border border-dashed border-base-300"
   >
     <div class="text-center text-sm">
@@ -359,7 +382,8 @@ import Field from './field'
 import CustomField from './custom_field'
 import FieldType from './field_type'
 import FieldSubmitter from './field_submitter'
-import { IconLock, IconCirclePlus, IconInnerShadowTop, IconSparkles } from '@tabler/icons-vue'
+import { defineAsyncComponent } from 'vue'
+import { IconLock, IconCirclePlus, IconInnerShadowTop, IconSparkles, IconBracketsContain } from '@tabler/icons-vue'
 import IconDrag from './icon_drag'
 import { v4 } from 'uuid'
 
@@ -374,7 +398,9 @@ export default {
     IconInnerShadowTop,
     FieldSubmitter,
     IconDrag,
-    IconLock
+    IconLock,
+    IconBracketsContain,
+    DynamicVariables: defineAsyncComponent(() => import(/* webpackChunkName: "dynamic-editor" */ './dynamic_variables'))
   },
   inject: ['save', 'backgroundColor', 'withPhone', 'withVerification', 'withKba', 'withPayment', 't', 'fieldsDragFieldRef', 'customDragFieldRef', 'baseFetch', 'selectedAreasRef', 'getFieldTypeIndex'],
   props: {
@@ -475,7 +501,7 @@ export default {
       default: false
     }
   },
-  emits: ['add-field', 'set-draw', 'set-draw-type', 'set-draw-custom-field', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter', 'set-drag-placeholder', 'select-submitter'],
+  emits: ['add-field', 'set-draw', 'set-draw-type', 'set-draw-custom-field', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter', 'set-drag-placeholder', 'select-submitter', 'rebuild-variables-schema'],
   data () {
     return {
       fieldPagesLoaded: null,
@@ -483,12 +509,16 @@ export default {
       newCustomField: null,
       showCustomTab: false,
       defaultFieldsSearch: '',
-      customFieldsSearch: ''
+      customFieldsSearch: '',
+      isShowVariables: false
     }
   },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
+    hasDynamicDocuments () {
+      return this.template.schema.some((item) => item.dynamic)
+    },
     numberOfPages () {
       return this.template.documents.reduce((acc, doc) => {
         return acc + doc.metadata?.pdf?.number_of_pages || doc.preview_images.length
@@ -556,6 +586,10 @@ export default {
     }
   },
   methods: {
+    toggleVariables () {
+      this.$emit('rebuild-variables-schema')
+      this.isShowVariables = !this.isShowVariables
+    },
     onDragstart (event, field) {
       this.removeDragOverlay(event)
 
@@ -582,6 +616,10 @@ export default {
       delete customField.prefillable
       delete customField.conditions
 
+      if (Array.isArray(customField.areas)) {
+        customField.areas = customField.areas.filter((area) => area.page !== null && area.page !== undefined)
+      }
+
       customField.areas?.forEach((area) => {
         delete area.attachment_uuid
         delete area.page

app/javascript/template_builder/hover_dropzone.vue

@@ -78,7 +78,7 @@ export default {
     acceptFileTypes: {
       type: String,
       required: false,
-      default: 'image/*, application/pdf, application/zip'
+      default: 'image/*, application/pdf, application/zip, application/json'
     }
   },
   emits: ['add', 'replace', 'replace-and-clone', 'error'],

app/javascript/template_builder/i18n.js

@@ -49,6 +49,10 @@ const en = {
   with_logo: 'With logo',
   unchecked: 'Unchecked',
   price: 'Price',
+  type: 'Type',
+  list: 'list',
+  no_variables: 'No variables yet',
+  no_variables_description: 'Add [[variable]] marks to your document to create dynamic content variables.',
   type_value: 'Type value',
   equal: 'Equal',
   not_equal: 'Not equal',
@@ -73,6 +77,7 @@ const en = {
   up: 'Up',
   down: 'Down',
   checked: 'Checked',
+  current_date: 'Current date',
   save: 'Save',
   cancel: 'Cancel',
   any: 'Any',
@@ -104,6 +109,7 @@ const en = {
   option: 'Option',
   options: 'Options',
   condition: 'Condition',
+  make_dynamic: 'Make dynamic',
   first_party: 'First Party',
   second_party: 'Second Party',
   third_party: 'Third Party',
@@ -244,6 +250,10 @@ const es = {
   search_field: 'Campo de búsqueda',
   field_not_found: 'Campo no encontrado',
   clear: 'Borrar',
+  type: 'Tipo',
+  list: 'lista',
+  no_variables: 'Aún sin variables',
+  no_variables_description: 'Agregue marcas [[variable]] a su documento para crear variables de contenido dinámico.',
   type_value: 'Escriba valor',
   align: 'Alinear',
   resize: 'Redimensionar',
@@ -277,6 +287,7 @@ const es = {
   remove_condition: 'Eliminar condición',
   add_condition: 'Agregar condición',
   condition: 'Condición',
+  make_dynamic: 'Hacer dinámico',
   formula: 'Fórmula',
   edit: 'Editar',
   settings: 'Configuración',
@@ -286,6 +297,7 @@ const es = {
   are_you_sure_: '¿Estás seguro?',
   sign_yourself: 'Firma tú mismo',
   checked: 'Seleccionado',
+  current_date: 'Fecha actual',
   send: 'Enviar',
   remove: 'Eliminar',
   save: 'Guardar',
@@ -475,6 +487,10 @@ const it = {
   with_logo: 'Con logo',
   unchecked: 'Non selezionato',
   price: 'Prezzo',
+  type: 'Tipo',
+  list: 'lista',
+  no_variables: 'Ancora nessuna variabile',
+  no_variables_description: 'Aggiungi marcatori [[variable]] al documento per creare variabili di contenuto dinamico.',
   type_value: 'Inserisci valore',
   equal: 'Uguale',
   not_equal: 'Non uguale',
@@ -499,6 +515,7 @@ const it = {
   up: 'Su',
   down: 'Giù',
   checked: 'Selezionato',
+  current_date: 'Data corrente',
   save: 'Salva',
   cancel: 'Annulla',
   any: 'Qualsiasi',
@@ -530,6 +547,7 @@ const it = {
   option: 'Opzione',
   options: 'Opzioni',
   condition: 'Condizione',
+  make_dynamic: 'Rendi dinamico',
   first_party: 'Prima parte',
   second_party: 'Seconda parte',
   third_party: 'Terza parte',
@@ -670,6 +688,10 @@ const pt = {
   search_field: 'Campo de busca',
   field_not_found: 'Campo não encontrado',
   clear: 'Limpar',
+  type: 'Tipo',
+  list: 'lista',
+  no_variables: 'Ainda sem variáveis',
+  no_variables_description: 'Adicione marcações [[variable]] ao documento para criar variáveis de conteúdo dinâmico.',
   type_value: 'Digite valor',
   add_all_required_fields_to_continue: 'Adicione todos os campos obrigatórios para continuar',
   uploaded_pdf_contains_form_fields_keep_or_remove_them: 'O PDF carregado contém campos. Manter ou removê-los?',
@@ -703,6 +725,7 @@ const pt = {
   select_value_: 'Selecionar valor...',
   remove_condition: 'Remover condição',
   condition: 'Condição',
+  make_dynamic: 'Tornar dinâmico',
   formula: 'Fórmula',
   edit: 'Editar',
   settings: 'Configurações',
@@ -712,6 +735,7 @@ const pt = {
   are_you_sure_: 'Tem certeza?',
   sign_yourself: 'Assine você mesmo',
   checked: 'Marcado',
+  current_date: 'Data atual',
   send: 'Enviar',
   remove: 'Remover',
   save: 'Salvar',
@@ -901,6 +925,10 @@ const fr = {
   with_logo: 'Avec logo',
   unchecked: 'Décoché',
   price: 'Prix',
+  type: 'Type',
+  list: 'liste',
+  no_variables: 'Pas encore de variables',
+  no_variables_description: 'Ajoutez des balises [[variable]] à votre document pour créer des variables de contenu dynamique.',
   type_value: 'Saisir une valeur',
   equal: 'Égal',
   not_equal: 'Différent',
@@ -925,6 +953,7 @@ const fr = {
   up: 'Haut',
   down: 'Bas',
   checked: 'Coché',
+  current_date: 'Date du jour',
   save: 'Enregistrer',
   cancel: 'Annuler',
   any: "N'importe lequel",
@@ -956,6 +985,7 @@ const fr = {
   option: 'Option',
   options: 'Options',
   condition: 'Condition',
+  make_dynamic: 'Rendre dynamique',
   first_party: 'Première partie',
   second_party: 'Deuxième partie',
   third_party: 'Troisième partie',
@@ -1114,6 +1144,10 @@ const de = {
   with_logo: 'Mit Logo',
   unchecked: 'Nicht markiert',
   price: 'Preis',
+  type: 'Typ',
+  list: 'Liste',
+  no_variables: 'Noch keine Variablen',
+  no_variables_description: 'Fügen Sie [[variable]]-Markierungen zu Ihrem Dokument hinzu, um dynamische Inhaltsvariablen zu erstellen.',
   type_value: 'Wert eingeben',
   equal: 'Gleich',
   not_equal: 'Ungleich',
@@ -1138,6 +1172,7 @@ const de = {
   up: 'Nach oben',
   down: 'Nach unten',
   checked: 'Markiert',
+  current_date: 'Aktuelles Datum',
   save: 'Speichern',
   cancel: 'Abbrechen',
   any: 'Beliebig',
@@ -1169,6 +1204,7 @@ const de = {
   option: 'Option',
   options: 'Optionen',
   condition: 'Bedingung',
+  make_dynamic: 'Dynamisch machen',
   first_party: 'Erste Partei',
   second_party: 'Zweite Partei',
   third_party: 'Dritte Partei',
@@ -1327,6 +1363,10 @@ const nl = {
   with_logo: 'Met logo',
   unchecked: 'Niet aangevinkt',
   price: 'Prijs',
+  type: 'Type',
+  list: 'lijst',
+  no_variables: 'Nog geen variabelen',
+  no_variables_description: 'Voeg [[variable]]-markeringen toe aan uw document om dynamische inhoudsvariabelen te maken.',
   type_value: 'Typ waarde',
   equal: 'Gelijk aan',
   not_equal: 'Niet gelijk aan',
@@ -1351,6 +1391,7 @@ const nl = {
   up: 'Omhoog',
   down: 'Omlaag',
   checked: 'Aangevinkt',
+  current_date: 'Huidige datum',
   save: 'Opslaan',
   cancel: 'Annuleren',
   any: 'Elke',
@@ -1382,6 +1423,7 @@ const nl = {
   option: 'Optie',
   options: 'Opties',
   condition: 'Voorwaarde',
+  make_dynamic: 'Dynamisch maken',
   first_party: 'Eerste partij',
   second_party: 'Tweede partij',
   third_party: 'Derde partij',

app/javascript/template_builder/logo.vue

@@ -2,7 +2,7 @@
   <svg
     height="40"
     width="40"
-    style="color: #e0753f"
+    style="color: #e97a42"
     viewBox="0 0 180 180"
     xmlns="http://www.w3.org/2000/svg"
   >

app/javascript/template_builder/payment_settings.vue

@@ -22,7 +22,7 @@
     >
       <div
         v-if="!('price_id' in field.preferences) && !('payment_link_id' in field.preferences)"
-        class="py-1.5 px-1 relative"
+        class="field-settings-currency py-1.5 px-1 relative"
         @click.stop
       >
         <select
@@ -48,7 +48,7 @@
         </label>
       </div>
       <div
-        class="py-1.5 px-1 relative"
+        class="field-settings-price py-1.5 px-1 relative"
         @click.stop
       >
         <input
@@ -121,7 +121,7 @@
       </div>
       <div
         v-if="!isConnected || isOauthSuccess"
-        class="py-1.5 px-1 relative"
+        class="field-settings-stripe-connect py-1.5 px-1 relative"
         @click.stop
       >
         <div
@@ -203,7 +203,7 @@
         >{{ t('learn_more') }}</a>
       </div>
       <li
-        class="mb-1"
+        class="field-settings-formula mb-1"
       >
         <label
           class="label-text cursor-pointer text-center w-full flex items-center"
@@ -218,7 +218,7 @@
         </label>
       </li>
       <hr>
-      <li>
+      <li class="field-settings-description">
         <label
           class="label-text cursor-pointer text-center w-full flex items-center"
           @click="$emit('click-description')"
@@ -233,7 +233,7 @@
       </li>
       <li
         v-if="withCondition"
-        class="mt-1"
+        class="field-settings-condition mt-1"
       >
         <label
           class="label-text cursor-pointer text-center w-full flex items-center"
@@ -251,7 +251,10 @@
         v-if="withCustomFields"
         class="pb-0.5 mt-0.5"
       >
-      <li v-if="withCustomFields">
+      <li
+        v-if="withCustomFields"
+        class="field-settings-save-as-custom-field"
+      >
         <a
           href="#"
           class="text-sm py-1 px-2"

app/javascript/template_builder/preview.vue

@@ -18,20 +18,18 @@
         >
           <div
             style="width: 26px"
-            class="flex flex-col justify-between group-hover:opacity-100"
-            :class="{'opacity-0': !item.conditions?.length }"
+            class="flex flex-col"
           >
-            <div>
-              <button
-                class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
-                @click.stop="isShowConditionsModal = true"
-              >
-                <IconRouteAltLeft
-                  :width="14"
-                  :stroke-width="1.6"
-                />
-              </button>
-            </div>
+            <button
+              v-if="item.conditions?.length"
+              class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
+              @click.stop="isShowConditionsModal = true"
+            >
+              <IconRouteAltLeft
+                :width="14"
+                :stroke-width="1.6"
+              />
+            </button>
           </div>
           <div class="">
             <ReplaceButton
@@ -44,51 +42,105 @@
             />
           </div>
           <div
-            class="flex flex-col justify-between opacity-0 group-hover:opacity-100"
+            class="flex flex-col justify-between"
           >
-            <div>
+            <span
+              class="dropdown dropdown-end group-hover:opacity-100 has-[label:focus]:opacity-100"
+              :class="{ 'dropdown-open': isMakeDynamicLoading, 'opacity-0': !isMakeDynamicLoading }"
+              @mouseenter="renderDropdown = true"
+              @touchstart="renderDropdown = true"
+            >
+              <label
+                tabindex="0"
+                class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button px-0"
+                style="width: 24px; height: 24px"
+                @click.stop
+              >
+                <IconDotsVertical
+                  :width="16"
+                  :height="16"
+                  :stroke-width="1.6"
+                />
+              </label>
+              <ul
+                v-if="renderDropdown"
+                tabindex="0"
+                class="mt-1.5 dropdown-content p-1 shadow-lg rounded-lg border border-neutral-200 z-50 bg-white"
+                style="min-width: 170px"
+                @click="closeDropdown"
+              >
+                <li>
+                  <button
+                    class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
+                    @click.stop="isShowConditionsModal = true; closeDropdown()"
+                  >
+                    <span class="flex items-center space-x-2">
+                      <IconRouteAltLeft class="w-4 h-4" />
+                      <span>{{ t('condition') }}</span>
+                    </span>
+                    <span
+                      v-if="item.conditions?.length"
+                      class="bg-neutral-200 rounded px-1 leading-3"
+                      style="font-size: 9px;"
+                    >{{ item.conditions.length }}</span>
+                  </button>
+                </li>
+                <li v-if="!item.dynamic">
+                  <button
+                    class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm whitespace-nowrap"
+                    @click.stop="$emit('reorder', item); closeDropdown()"
+                  >
+                    <IconSortDescending2 class="w-4 h-4" />
+                    <span>{{ t('reorder_fields') }}</span>
+                  </button>
+                </li>
+                <li v-if="withDynamicDocuments && !item.dynamic && document.metadata?.original_uuid">
+                  <button
+                    class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm whitespace-nowrap"
+                    :disabled="isMakeDynamicLoading"
+                    @click.stop="makeDynamic"
+                  >
+                    <IconInnerShadowTop
+                      v-if="isMakeDynamicLoading"
+                      class="w-4 h-4 animate-spin"
+                    />
+                    <IconBolt
+                      v-else
+                      class="w-4 h-4"
+                    />
+                    <span>{{ t('make_dynamic') }}</span>
+                  </button>
+                </li>
+                <hr class="my-1 border-neutral-200">
+                <li>
+                  <button
+                    class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm text-red-600"
+                    @click.stop="$emit('remove', item); closeDropdown()"
+                  >
+                    <IconTrashX class="w-4 h-4" />
+                    <span>{{ t('remove') }}</span>
+                  </button>
+                </li>
+              </ul>
+            </span>
+            <div
+              v-if="withArrows"
+              class="flex flex-col space-y-1 opacity-0 group-hover:opacity-100"
+            >
               <button
                 class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
                 style="width: 24px; height: 24px"
-                @click.stop="$emit('remove', item)"
+                @click.stop="$emit('up', item)"
               >
-                &times;
+                &uarr;
               </button>
-            </div>
-            <div
-              class="flex flex-col space-y-1"
-            >
-              <span
-                :data-tip="t('reorder_fields')"
-                class="tooltip tooltip-left before:text-xs"
+              <button
+                class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
+                style="width: 24px; height: 24px"
+                @click.stop="$emit('down', item)"
               >
-                <button
-                  class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
-                  @click.stop="$emit('reorder', item)"
-                >
-                  <IconSortDescending2
-                    :width="18"
-                    :height="18"
-                    :stroke-width="1.6"
-                  />
-                </button>
-              </span>
-              <template v-if="withArrows">
-                <button
-                  class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
-                  style="width: 24px; height: 24px"
-                  @click.stop="$emit('up', item)"
-                >
-                  &uarr;
-                </button>
-                <button
-                  class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
-                  style="width: 24px; height: 24px"
-                  @click.stop="$emit('down', item)"
-                >
-                  &darr;
-                </button>
-              </template>
+                &darr;
+              </button>
             </div>
           </div>
         </div>
@@ -129,24 +181,29 @@
 <script>
 import Contenteditable from './contenteditable'
 import Upload from './upload'
-import { IconRouteAltLeft, IconSortDescending2 } from '@tabler/icons-vue'
+import { IconRouteAltLeft, IconSortDescending2, IconDotsVertical, IconTrashX, IconBolt, IconInnerShadowTop } from '@tabler/icons-vue'
 import ConditionsModal from './conditions_modal'
 import ReplaceButton from './replace'
 import GoogleDriveDocumentSettings from './google_drive_document_settings'
 import Field from './field'
 import FieldType from './field_type'
+import { v4 } from 'uuid'
 
 export default {
   name: 'DocumentPreview',
   components: {
     Contenteditable,
+    IconInnerShadowTop,
     IconRouteAltLeft,
     ConditionsModal,
     ReplaceButton,
     GoogleDriveDocumentSettings,
-    IconSortDescending2
+    IconSortDescending2,
+    IconDotsVertical,
+    IconTrashX,
+    IconBolt
   },
-  inject: ['t', 'getFieldTypeIndex'],
+  inject: ['t', 'getFieldTypeIndex', 'baseFetch'],
   props: {
     item: {
       type: Object,
@@ -168,13 +225,22 @@ export default {
     acceptFileTypes: {
       type: String,
       required: false,
-      default: 'image/*, application/pdf, application/zip'
+      default: 'image/*, application/pdf, application/zip, application/json'
     },
     withReplaceButton: {
       type: Boolean,
       required: true,
       default: true
     },
+    dynamicDocuments: {
+      type: Array,
+      required: true
+    },
+    withDynamicDocuments: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withArrows: {
       type: Boolean,
       required: false,
@@ -184,7 +250,9 @@ export default {
   emits: ['scroll-to', 'change', 'remove', 'up', 'down', 'replace', 'reorder'],
   data () {
     return {
-      isShowConditionsModal: false
+      isShowConditionsModal: false,
+      isMakeDynamicLoading: false,
+      renderDropdown: false
     }
   },
   computed: {
@@ -200,6 +268,93 @@ export default {
   methods: {
     upload: Upload.methods.upload,
     buildDefaultName: Field.methods.buildDefaultName,
+    closeDropdown () {
+      this.$el.getRootNode().activeElement.blur()
+    },
+    makeDynamic () {
+      this.isMakeDynamicLoading = true
+
+      this.baseFetch(`/templates/${this.template.id}/dynamic_documents`, {
+        method: 'POST',
+        body: JSON.stringify({ uuid: this.document.uuid }),
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }).then(async (resp) => {
+        const dynamicDocument = await resp.json()
+
+        this.template.schema.find((item) => item.attachment_uuid === dynamicDocument.uuid).dynamic = true
+
+        this.removeFieldAreas()
+
+        if (dynamicDocument.fields?.length) {
+          this.addDynamicFields(dynamicDocument.fields)
+        }
+
+        if (dynamicDocument.uuid) {
+          delete dynamicDocument.fields
+
+          this.dynamicDocuments.push(dynamicDocument)
+        }
+
+        this.$emit('change')
+      }).finally(() => {
+        this.isMakeDynamicLoading = false
+      })
+    },
+    removeFieldAreas () {
+      this.template.fields.forEach((field) => {
+        if (field.areas?.length) {
+          field.areas = field.areas.filter((a) => a.attachment_uuid !== this.document.uuid)
+        }
+      })
+
+      this.template.fields = this.template.fields.filter((field) => field.areas?.length)
+    },
+    addDynamicFields (fields) {
+      const submittersNameIndex = this.template.submitters.reduce((acc, submitter) => {
+        acc[submitter.name] = submitter
+
+        return acc
+      }, {})
+
+      fields.forEach((field) => {
+        const roleName = field.role || this.template.submitters[0]?.name || this.t('first_party')
+
+        let submitter = submittersNameIndex[roleName]
+
+        if (!submitter) {
+          submitter = { name: roleName, uuid: v4() }
+
+          this.template.submitters.push(submitter)
+
+          submittersNameIndex[roleName] = submitter
+        }
+
+        const existingField = this.template.fields.find((f) => {
+          return f.name && f.name === field.name && f.type === (field.type || 'text') && f.submitter_uuid === submitter.uuid
+        })
+
+        if (existingField) {
+          field.areas.forEach((area) => {
+            area.attachment_uuid = this.document.uuid
+
+            existingField.areas = existingField.areas || []
+            existingField.areas.push(area)
+          })
+        } else {
+          field.submitter_uuid = submitter.uuid
+
+          delete field.role
+
+          field.areas.forEach((area) => {
+            area.attachment_uuid = this.document.uuid
+          })
+
+          this.template.fields.push(field)
+        }
+      })
+    },
     onUpdateName (value) {
       this.item.name = value
 

app/javascript/template_builder/replace.vue

@@ -35,7 +35,7 @@ export default {
     acceptFileTypes: {
       type: String,
       required: false,
-      default: 'image/*, application/pdf, application/zip'
+      default: 'image/*, application/pdf, application/zip, application/json'
     }
   },
   emits: ['success'],

app/javascript/template_builder/upload.vue

@@ -195,7 +195,7 @@ export default {
     acceptFileTypes: {
       type: String,
       required: false,
-      default: 'image/*, application/pdf, application/zip'
+      default: 'image/*, application/pdf, application/zip, application/json'
     }
   },
   emits: ['success', 'error'],

app/jobs/generate_attachment_preview_job.rb

@@ -1,21 +0,0 @@
-# frozen_string_literal: true
-
-class GenerateAttachmentPreviewJob
-  include Sidekiq::Job
-
-  InvalidFormat = Class.new(StandardError)
-
-  sidekiq_options queue: :images
-
-  def perform(params = {})
-    attachment = ActiveStorage::Attachment.find(params['attachment_id'])
-
-    if attachment.content_type == Templates::ProcessDocument::PDF_CONTENT_TYPE
-      Templates::ProcessDocument.generate_pdf_preview_images(attachment, attachment.download)
-    elsif attachment.image?
-      Templates::ProcessDocument.generate_preview_image(attachment, attachment.download)
-    else
-      raise InvalidFormat, attachment.id
-    end
-  end
-end

app/mailers/submitter_mailer.rb

@@ -29,7 +29,7 @@ class SubmitterMailer < ApplicationMailer
 
     assign_message_metadata('submitter_invitation', @submitter)
 
-    reply_to = build_submitter_reply_to(@submitter)
+    reply_to = build_submitter_reply_to(@submitter, email_config: @email_config)
 
     maybe_set_custom_domain(@submitter)
 

app/models/account_config.rb

@@ -57,6 +57,7 @@ class AccountConfig < ApplicationRecord
   DOCUMENT_FILENAME_FORMAT_KEY = 'document_filename_format'
   TEMPLATE_CUSTOM_FIELDS_KEY = 'template_custom_fields'
   POLICY_LINKS_KEY = 'policy_links'
+  ENABLE_MCP_KEY = 'enable_mcp'
 
   EMAIL_VARIABLES = {
     SUBMITTER_INVITATION_EMAIL_KEY => %w[template.name submitter.link account.name].freeze,

app/models/document_generation_event.rb

@@ -13,7 +13,7 @@
 # Indexes
 #
 #  index_document_generation_events_on_submitter_id                 (submitter_id)
-#  index_document_generation_events_on_submitter_id_and_event_name  (submitter_id,event_name) UNIQUE WHERE ((event_name)::text = ANY ((ARRAY['start'::character varying, 'complete'::character varying])::text[]))
+#  index_document_generation_events_on_submitter_id_and_event_name  (submitter_id,event_name) UNIQUE WHERE ((event_name)::text = ANY (ARRAY[('start'::character varying)::text, ('complete'::character varying)::text]))
 #
 # Foreign Keys
 #

app/models/dynamic_document.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: dynamic_documents
+#
+#  id          :bigint           not null, primary key
+#  body        :text             not null
+#  head        :text
+#  sha1        :text             not null
+#  uuid        :uuid             not null
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#  template_id :bigint           not null
+#
+# Indexes
+#
+#  index_dynamic_documents_on_template_id  (template_id)
+#
+# Foreign Keys
+#
+#  fk_rails_...  (template_id => templates.id)
+#
+class DynamicDocument < ApplicationRecord
+  belongs_to :template
+
+  has_many_attached :attachments
+
+  has_many :versions, class_name: 'DynamicDocumentVersion', dependent: :destroy
+
+  attribute :fields, :json
+
+  before_validation :set_sha1
+
+  def set_sha1
+    self.sha1 = Digest::SHA1.hexdigest(body)
+  end
+end

app/models/dynamic_document_version.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: dynamic_document_versions
+#
+#  id                  :bigint           not null, primary key
+#  areas               :text             not null
+#  sha1                :string           not null
+#  created_at          :datetime         not null
+#  updated_at          :datetime         not null
+#  dynamic_document_id :bigint           not null
+#
+# Indexes
+#
+#  idx_on_dynamic_document_id_sha1_3503adf557  (dynamic_document_id,sha1) UNIQUE
+#
+# Foreign Keys
+#
+#  fk_rails_...  (dynamic_document_id => dynamic_documents.id)
+#
+class DynamicDocumentVersion < ApplicationRecord
+  belongs_to :dynamic_document
+
+  has_one_attached :document
+
+  attribute :areas, :string, default: -> { [] }
+
+  serialize :areas, coder: JSON
+end

app/models/email_event.rb

@@ -20,7 +20,7 @@
 #
 #  index_email_events_on_account_id_and_event_datetime  (account_id,event_datetime)
 #  index_email_events_on_email                          (email)
-#  index_email_events_on_email_event_types              (email) WHERE ((event_type)::text = ANY ((ARRAY['bounce'::character varying, 'soft_bounce'::character varying, 'permanent_bounce'::character varying, 'complaint'::character varying, 'soft_complaint'::character varying])::text[]))
+#  index_email_events_on_email_event_types              (email) WHERE ((event_type)::text = ANY (ARRAY[('bounce'::character varying)::text, ('soft_bounce'::character varying)::text, ('permanent_bounce'::character varying)::text, ('complaint'::character varying)::text, ('soft_complaint'::character varying)::text]))
 #  index_email_events_on_emailable                      (emailable_type,emailable_id)
 #  index_email_events_on_message_id                     (message_id)
 #

app/models/lock_event.rb

@@ -12,7 +12,7 @@
 #
 # Indexes
 #
-#  index_lock_events_on_event_name_and_key  (event_name,key) UNIQUE WHERE ((event_name)::text = ANY ((ARRAY['start'::character varying, 'complete'::character varying])::text[]))
+#  index_lock_events_on_event_name_and_key  (event_name,key) UNIQUE WHERE ((event_name)::text = ANY (ARRAY[('start'::character varying)::text, ('complete'::character varying)::text]))
 #  index_lock_events_on_key                 (key)
 #
 class LockEvent < ApplicationRecord

app/models/mcp_token.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: mcp_tokens
+#
+#  id           :bigint           not null, primary key
+#  archived_at  :datetime
+#  name         :string           not null
+#  sha256       :string           not null
+#  token_prefix :string           not null
+#  created_at   :datetime         not null
+#  updated_at   :datetime         not null
+#  user_id      :bigint           not null
+#
+# Indexes
+#
+#  index_mcp_tokens_on_sha256   (sha256) UNIQUE
+#  index_mcp_tokens_on_user_id  (user_id)
+#
+# Foreign Keys
+#
+#  fk_rails_...  (user_id => users.id)
+#
+class McpToken < ApplicationRecord
+  TOKEN_LENGTH = 43
+
+  belongs_to :user
+
+  before_validation :set_sha256_and_token_prefix, on: :create
+
+  attribute :token, :string, default: -> { SecureRandom.base58(TOKEN_LENGTH) }
+
+  scope :active, -> { where(archived_at: nil) }
+
+  private
+
+  def set_sha256_and_token_prefix
+    self.sha256 = Digest::SHA256.hexdigest(token)
+    self.token_prefix = token[0, 5]
+  end
+end

app/models/submission.rb

@@ -10,7 +10,7 @@
 #  name                :text
 #  preferences         :text             not null
 #  slug                :string           not null
-#  source              :text             not null
+#  source              :string           not null
 #  submitters_order    :string           not null
 #  template_fields     :text
 #  template_schema     :text
@@ -75,6 +75,17 @@ class Submission < ApplicationRecord
            ->(e) { where(uuid: (e.template_schema.presence || e.template.schema).pluck('attachment_uuid')) },
            through: :template, source: :documents_attachments
 
+  has_many :template_schema_static_documents,
+           ->(e) { where(uuid: e.template_schema.reject { |s| s['dynamic'] }.pluck('attachment_uuid')) },
+           through: :template, source: :documents_attachments
+
+  has_many :template_schema_dynamic_document_versions,
+           ->(e) { where(sha1: e.template_schema.select { |s| s['dynamic'] }.pluck('dynamic_document_sha1')) },
+           through: :template, source: :dynamic_document_versions
+
+  has_many :template_schema_dynamic_document_attachments,
+           through: :template_schema_dynamic_document_versions, source: :document_attachment
+
   scope :active, -> { where(archived_at: nil) }
   scope :archived, -> { where.not(archived_at: nil) }
   scope :pending, lambda {
@@ -110,13 +121,51 @@ class Submission < ApplicationRecord
   end
 
   def schema_documents
-    if template_id?
-      template_schema_documents
+    return documents_attachments unless template_id?
+
+    dynamic_count = template_schema&.count { |e| e['dynamic'] }.to_i
+
+    if template.variables_schema.blank?
+      if dynamic_count > 0
+        if dynamic_count == template_schema.size
+          template_schema_dynamic_document_attachments
+        else
+          template_schema_dynamic_and_static_document_attachments
+        end
+      else
+        template_schema_documents
+      end
+    elsif dynamic_count > 0 && dynamic_count != template_schema.size
+      template_schema_submission_dynamic_and_static_document_attachments
     else
       documents_attachments
     end
   end
 
+  def template_schema_submission_dynamic_and_static_document_attachments
+    @template_schema_submission_dynamic_and_static_document_attachments ||=
+      ActiveStorage::Attachment.where(
+        ActiveStorage::Attachment.arel_table[:id].in(
+          template_schema_static_documents.select(:id).arel.union(
+            :all,
+            documents_attachments.select(:id).arel
+          )
+        )
+      )
+  end
+
+  def template_schema_dynamic_and_static_document_attachments
+    @template_schema_dynamic_and_static_document_attachments ||=
+      ActiveStorage::Attachment.where(
+        ActiveStorage::Attachment.arel_table[:id].in(
+          template_schema_static_documents.select(:id).arel.union(
+            :all,
+            template_schema_dynamic_document_attachments.select(:id).arel
+          )
+        )
+      )
+  end
+
   def fields_uuid_index
     @fields_uuid_index ||= (template_fields || template.fields).index_by { |f| f['uuid'] }
   end

app/models/submission_event.rb

@@ -20,7 +20,7 @@
 #  index_submission_events_on_created_at        (created_at)
 #  index_submission_events_on_submission_id     (submission_id)
 #  index_submission_events_on_submitter_id      (submitter_id)
-#  index_submissions_events_on_sms_event_types  (account_id,created_at) WHERE ((event_type)::text = ANY ((ARRAY['send_sms'::character varying, 'send_2fa_sms'::character varying])::text[]))
+#  index_submissions_events_on_sms_event_types  (account_id,created_at) WHERE ((event_type)::text = ANY (ARRAY[('send_sms'::character varying)::text, ('send_2fa_sms'::character varying)::text]))
 #
 # Foreign Keys
 #

app/models/template.rb

@@ -70,6 +70,12 @@ class Template < ApplicationRecord
   has_many :submissions, dependent: :destroy
   has_many :template_sharings, dependent: :destroy
   has_many :template_accesses, dependent: :destroy
+  has_many :dynamic_documents, dependent: :destroy
+  has_many :dynamic_document_versions, through: :dynamic_documents, source: :versions
+
+  has_many :schema_dynamic_documents, lambda { |e|
+    where(uuid: e.schema.select { |e| e['dynamic'] }.pluck('attachment_uuid'))
+  }, class_name: 'DynamicDocument', dependent: :destroy, inverse_of: :template
 
   scope :active, -> { where(archived_at: nil) }
   scope :archived, -> { where.not(archived_at: nil) }

app/models/user.rb

@@ -62,6 +62,7 @@ class User < ApplicationRecord
   belongs_to :account
   has_one :access_token, dependent: :destroy
   has_many :access_tokens, dependent: :destroy
+  has_many :mcp_tokens, dependent: :destroy
   has_many :templates, dependent: :destroy, foreign_key: :author_id, inverse_of: :author
   has_many :template_folders, dependent: :destroy, foreign_key: :author_id, inverse_of: :author
   has_many :user_configs, dependent: :destroy

app/views/mcp_settings/index.html.erb

@@ -0,0 +1,112 @@
+<div class="flex-wrap space-y-4 md:flex md:flex-nowrap md:space-y-0 md:space-x-10">
+  <%= render 'shared/settings_nav' %>
+  <div class="md:flex-grow">
+    <div class="flex flex-col md:flex-row md:flex-wrap gap-2 md:justify-between md:items-end mb-4 min-h-12">
+      <h1 class="text-4xl font-bold">
+        <%= t('mcp_server') %>
+      </h1>
+      <div class="flex flex-col md:flex-row gap-y-2 gap-x-4 md:items-center">
+        <div class="tooltip">
+          <%= link_to new_settings_mcp_path, class: 'btn btn-primary btn-md gap-2 w-full md:w-fit', data: { turbo_frame: 'modal' } do %>
+            <%= svg_icon('plus', class: 'w-6 h-6') %>
+            <span><%= t('new_token') %></span>
+          <% end %>
+        </div>
+      </div>
+    </div>
+    <% if @mcp_token.present? %>
+      <div class="space-y-4 mb-4">
+        <div class="card bg-base-200">
+          <div class="card-body p-6">
+            <label for="mcp_token" class="text-sm font-semibold">
+              <%= t('please_copy_the_token_below_now_as_it_wont_be_shown_again') %>:
+            </label>
+            <div class="flex w-full space-x-4">
+              <input id="mcp_token" type="text" value="<%= @mcp_token.token %>" class="input font-mono input-bordered w-full" autocomplete="off" readonly>
+              <%= render 'shared/clipboard_copy', icon: 'copy', text: @mcp_token.token, class: 'base-button', icon_class: 'w-6 h-6 text-white', copy_title: t('copy'), copied_title: t('copied') %>
+            </div>
+          </div>
+        </div>
+        <div class="space-y-4">
+          <p class="text-2xl font-bold">
+            <%= t('instructions') %>
+          </p>
+          <div class="card bg-base-200">
+            <div class="card-body p-6">
+              <p class="text-2xl font-semibold"><%= t('connect_to_docuseal_mcp') %></p>
+              <p class="text-lg"><%= t('add_the_following_to_your_mcp_client_configuration') %>:</p>
+              <div class="mockup-code overflow-hidden">
+                <% text = JSON.pretty_generate({ mcpServers: { docuseal: { type: 'http', url: "#{root_url(Docuseal.default_url_options)}mcp", headers: { Authorization: "Bearer #{@mcp_token.token}" } } } }).strip %>
+                <span class="top-0 right-0 absolute">
+                  <%= render 'shared/clipboard_copy', icon: 'copy', text:, class: 'btn btn-ghost text-white', icon_class: 'w-6 h-6 text-white', copy_title: t('copy'), copied_title: t('copied') %>
+                </span>
+                <pre class="before:!m-0 pl-4 pb-4"><code class="overflow-hidden w-full"><%== HighlightCode.call(text, 'JSON', theme: 'base16.dark') %></code></pre>
+              </div>
+              <p class="text-lg"><%= t('works_with_claude_desktop_cursor_windsurf_vs_code_and_any_mcp_compatible_client') %></p>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+    <div class="overflow-x-auto">
+      <table class="table w-full table-lg rounded-b-none overflow-hidden">
+        <thead class="bg-base-200">
+          <tr class="text-neutral uppercase">
+            <th>
+              <%= t('name') %>
+            </th>
+            <th>
+              <%= t('token') %>
+            </th>
+            <th>
+              <%= t('created_at') %>
+            </th>
+            <th class="text-right" width="1px">
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <% @mcp_tokens.each do |mcp_token| %>
+            <tr scope="row">
+              <td>
+                <%= mcp_token.name %>
+              </td>
+              <td>
+                <% if @mcp_token.present? && mcp_token.id == @mcp_token.id %>
+                  <%= @mcp_token.token %>
+                <% else %>
+                  <%= "#{mcp_token.token_prefix}#{'*' * 38}" %>
+                <% end %>
+              </td>
+              <td>
+                <%= l(mcp_token.created_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>
+              </td>
+              <td class="flex items-center space-x-2 justify-end">
+                <%= button_to settings_mcp_path(mcp_token), method: :delete, class: 'btn btn-outline btn-error btn-xs', title: t('remove'), data: { turbo_confirm: t('are_you_sure_') } do %>
+                  <%= t('remove') %>
+                <% end %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+    <% account_config = AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::ENABLE_MCP_KEY) %>
+    <% if can?(:manage, account_config) %>
+      <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
+        <%= f.hidden_field :key %>
+        <div class="flex items-center gap-4 py-2.5">
+          <div class="flex items-center space-x-1">
+            <span class="text-left"><%= t('enable_mcp_server') %></span>
+            <span class="tooltip tooltip-top flex cursor-pointer" data-tip="<%= t('all_existing_mcp_connections_will_be_stopped_immediately_when_this_setting_is_disabled') %>">
+              <%= svg_icon('info_circle', class: 'hidden md:inline-block w-4 h-4 shrink-0') %>
+            </span>
+          </div>
+          <submit-form data-on="change" class="flex">
+            <%= f.check_box :value, class: 'toggle', checked: account_config.value == true %>
+          </submit-form>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>

app/views/mcp_settings/new.html.erb

@@ -0,0 +1,13 @@
+<%= render 'shared/turbo_modal', title: t('new_token') do %>
+  <%= form_for @mcp_token, url: settings_mcp_index_path, method: :post, html: { autocomplete: 'off' }, data: { turbo_frame: :_top } do |f| %>
+    <div class="space-y-4">
+      <div class="w-full">
+        <%= f.label :name, t('name'), class: 'label' %>
+        <%= f.text_field :name, required: true, class: 'base-input w-full', dir: 'auto' %>
+      </div>
+      <div class="form-control pt-2">
+        <%= f.button button_title, class: 'base-button' %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

app/views/personalization_settings/_markdown_editor.html.erb

@@ -1,70 +1,76 @@
-<% link_tooltip_html = capture do %>
-  <div class="hidden absolute flex bg-white border border-base-300 rounded-xl shadow p-1 gap-1 items-center z-50" contenteditable="false">
-    <input type="text" placeholder="<%= t('enter_a_url_or_variable_name') %>" class="rounded-lg border border-base-300 px-2 py-1 text-sm outline-none" style="field-sizing: content; min-width: 205px; max-width: 320px;" autocomplete="off">
-    <button type="button" data-role="link-save" class="flex items-center px-1 w-6 h-6 rounded hover:bg-success/10 cursor-pointer">
-      <%= svg_icon('check', class: 'w-4 h-4 text-success') %>
-    </button>
-    <button type="button" data-role="link-remove" class="flex items-center px-1 w-6 h-6 rounded hover:bg-error/10 cursor-pointer">
-      <%= svg_icon('x', class: 'w-4 h-4 text-error') %>
-    </button>
-  </div>
-<% end %>
-<markdown-editor data-link-tooltip-html="<%= link_tooltip_html.squish %>">
-  <div class="border border-base-content/20 rounded-2xl bg-white">
-    <div class="flex items-center px-2 py-2 border-b" style="height: 42px;">
-      <div class="flex items-center gap-1">
-        <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('bold') %> (Ctrl+B)">
-          <button type="button" data-action="click:markdown-editor#bold" data-target="markdown-editor.boldButton" aria-label="<%= t('bold') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
-            <%= svg_icon('bold', class: 'w-4 h-4') %>
-          </button>
-        </div>
-        <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('italic') %> (Ctrl+I)">
-          <button type="button" data-action="click:markdown-editor#italic" data-target="markdown-editor.italicButton" aria-label="<%= t('italic') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
-            <%= svg_icon('italic', class: 'w-4 h-4') %>
-          </button>
-        </div>
-        <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('underline') %> (Ctrl+U)">
-          <button type="button" data-action="click:markdown-editor#underline" data-target="markdown-editor.underlineButton" aria-label="<%= t('underline') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
-            <%= svg_icon('underline', class: 'w-4 h-4') %>
-          </button>
-        </div>
-        <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('link') %> (Ctrl+K)">
-          <button type="button" data-action="click:markdown-editor#linkSelection" data-target="markdown-editor.linkButton" aria-label="<%= t('link') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
-            <%= svg_icon('link', class: 'w-4 h-4') %>
-          </button>
-        </div>
+<% if value.to_s.start_with?('<html') %>
+  <autoresize-textarea>
+    <%= text_area_tag name, value, required: true, class: 'base-input w-full py-2 !rounded-2xl', dir: 'auto', style: 'max-height: 400px' %>
+  </autoresize-textarea>
+<% else %>
+  <markdown-editor>
+    <template data-target="markdown-editor.linkTooltipTemplate">
+      <div class="hidden absolute flex bg-white border border-base-300 rounded-xl shadow p-1 gap-1 items-center z-50" contenteditable="false">
+        <input type="text" placeholder="<%= t('enter_a_url_or_variable_name') %>" class="rounded-lg border border-base-300 px-2 py-1 text-sm outline-none" style="field-sizing: content; min-width: 205px; max-width: 320px;" autocomplete="off">
+        <button type="button" data-role="link-save" class="flex items-center px-1 w-6 h-6 rounded hover:bg-success/10 cursor-pointer">
+          <%= svg_icon('check', class: 'w-4 h-4 text-success') %>
+        </button>
+        <button type="button" data-role="link-remove" class="flex items-center px-1 w-6 h-6 rounded hover:bg-error/10 cursor-pointer">
+          <%= svg_icon('x', class: 'w-4 h-4 text-error') %>
+        </button>
       </div>
-      <div class="mx-2 h-5 border-l border-base-content/20"></div>
-      <div class="flex items-center gap-1">
-        <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('undo') %> (Ctrl+Z)">
-          <button type="button" data-action="click:markdown-editor#undo" data-target="markdown-editor.undoButton" aria-label="<%= t('undo') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
-            <%= svg_icon('arrow_back_up', class: 'w-4 h-4') %>
-          </button>
-        </div>
-        <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('redo') %> (Ctrl+Shift+Z)">
-          <button type="button" data-action="click:markdown-editor#redo" data-target="markdown-editor.redoButton" aria-label="<%= t('redo') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
-            <%= svg_icon('arrow_forward_up', class: 'w-4 h-4') %>
-          </button>
-        </div>
-      </div>
-      <% if local_assigns[:variables]&.any? %>
-        <% variable_labels = { 'account.name' => t('variables.account_name'), 'submitter.link' => t('variables.submitter_link'), 'template.name' => t('variables.template_name'), 'submission.submitters' => t('variables.submission_submitters'), 'submission.link' => t('variables.submission_link'), 'documents.link' => t('variables.documents_link') } %>
-        <div class="dropdown dropdown-end ml-auto">
-          <label tabindex="0" class="flex items-center gap-1 text-sm px-2 py-1 rounded hover:bg-base-200 cursor-pointer">
-            <%= t('add_variable') %>
-            <%= svg_icon('chevron_down', class: 'w-3.5 h-3.5') %>
-          </label>
-          <div tabindex="0" class="dropdown-content right-0 top-full mt-1 p-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50">
-            <% local_assigns[:variables]&.each do |variable| %>
-              <button type="button" data-variable="<%= variable %>" data-action="click:markdown-editor#insertVariable" class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 text-left text-sm cursor-pointer whitespace-nowrap">
-                <%= variable_labels.fetch(variable, "{#{variable}}") %>
-              </button>
-            <% end %>
+    </template>
+    <div class="border border-base-content/20 rounded-2xl bg-white">
+      <div class="flex items-center px-2 py-2 border-b" style="height: 42px;">
+        <div class="flex items-center gap-1">
+          <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('bold') %> (Ctrl+B)">
+            <button type="button" data-action="click:markdown-editor#bold" data-target="markdown-editor.boldButton" aria-label="<%= t('bold') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
+              <%= svg_icon('bold', class: 'w-4 h-4') %>
+            </button>
+          </div>
+          <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('italic') %> (Ctrl+I)">
+            <button type="button" data-action="click:markdown-editor#italic" data-target="markdown-editor.italicButton" aria-label="<%= t('italic') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
+              <%= svg_icon('italic', class: 'w-4 h-4') %>
+            </button>
+          </div>
+          <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('underline') %> (Ctrl+U)">
+            <button type="button" data-action="click:markdown-editor#underline" data-target="markdown-editor.underlineButton" aria-label="<%= t('underline') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
+              <%= svg_icon('underline', class: 'w-4 h-4') %>
+            </button>
+          </div>
+          <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('link') %> (Ctrl+K)">
+            <button type="button" data-action="click:markdown-editor#linkSelection" data-target="markdown-editor.linkButton" aria-label="<%= t('link') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
+              <%= svg_icon('link', class: 'w-4 h-4') %>
+            </button>
           </div>
         </div>
-      <% end %>
+        <div class="mx-2 h-5 border-l border-base-content/20"></div>
+        <div class="flex items-center gap-1">
+          <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('undo') %> (Ctrl+Z)">
+            <button type="button" data-action="click:markdown-editor#undo" data-target="markdown-editor.undoButton" aria-label="<%= t('undo') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
+              <%= svg_icon('arrow_back_up', class: 'w-4 h-4') %>
+            </button>
+          </div>
+          <div class="tooltip tooltip-top before:text-xs" data-tip="<%= t('redo') %> (Ctrl+Shift+Z)">
+            <button type="button" data-action="click:markdown-editor#redo" data-target="markdown-editor.redoButton" aria-label="<%= t('redo') %>" class="flex items-center px-1 w-6 h-6 rounded hover:bg-base-300">
+              <%= svg_icon('arrow_forward_up', class: 'w-4 h-4') %>
+            </button>
+          </div>
+        </div>
+        <% if local_assigns[:variables]&.any? %>
+          <% variable_labels = { 'account.name' => t('variables.account_name'), 'submitter.link' => t('variables.submitter_link'), 'template.name' => t('variables.template_name'), 'submission.submitters' => t('variables.submission_submitters'), 'submission.link' => t('variables.submission_link'), 'documents.link' => t('variables.documents_link') } %>
+          <div class="dropdown dropdown-end ml-auto">
+            <label tabindex="0" class="flex items-center gap-1 text-sm px-2 py-1 rounded hover:bg-base-200 cursor-pointer">
+              <%= t('add_variable') %>
+              <%= svg_icon('chevron_down', class: 'w-3.5 h-3.5') %>
+            </label>
+            <div tabindex="0" class="dropdown-content right-0 top-full mt-1 p-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50">
+              <% local_assigns[:variables]&.each do |variable| %>
+                <button type="button" data-variable="<%= variable %>" data-action="click:markdown-editor#insertVariable" class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 text-left text-sm cursor-pointer whitespace-nowrap">
+                  <%= variable_labels.fetch(variable, "{#{variable}}") %>
+                </button>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+      <div data-target="markdown-editor.editorElement"></div>
     </div>
-    <div data-target="markdown-editor.editorElement"></div>
-  </div>
-  <%= hidden_field_tag name, value, required: true, data: { target: 'markdown-editor.textarea' } %>
-</markdown-editor>
+    <%= hidden_field_tag name, value, required: true, data: { target: 'markdown-editor.textarea' } %>
+  </markdown-editor>
+<% end %>

app/views/personalization_settings/_signature_request_email_form.html.erb

@@ -8,12 +8,18 @@
   <div class="collapse-content">
     <%= form_for AccountConfigs.find_or_initialize_for_key(current_account, AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY), url: settings_personalization_path, method: :post, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>
       <%= f.hidden_field :key %>
-      <%= f.fields_for :value, Struct.new(:subject, :body).new(*f.object.value.values_at('subject', 'body')) do |ff| %>
+      <%= f.fields_for :value, Struct.new(:subject, :body, :reply_to).new(*f.object.value.values_at('subject', 'body', 'reply_to')) do |ff| %>
         <div class="form-control">
           <%= ff.label :subject, t('subject'), class: 'label' %>
           <%= ff.text_field :subject, required: true, class: 'base-input', dir: 'auto' %>
         </div>
         <%= render 'personalization_settings/email_body_field', ff:, config: f.object %>
+        <% if can?(:manage, :reply_to) || can?(:manage, :personalization_advanced) %>
+          <div class="form-control">
+            <%= ff.label :reply_to, t('reply_to'), class: 'label' %>
+            <%= ff.email_field :reply_to, class: 'base-input', dir: 'auto', placeholder: t(:email) %>
+          </div>
+        <% end %>
       <% end %>
       <div class="form-control pt-2">
         <%= f.button button_title(title: t('save'), disabled_with: t('saving')), class: 'base-button' %>

app/views/shared/_logo.html.erb

@@ -1,4 +1,4 @@
-<svg class="<%= local_assigns[:class] %>" height="<%= local_assigns.fetch(:height, '37') %>" width="<%= local_assigns.fetch(:width, '37') %>" style="color: #e0753f" viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg">
+<svg class="<%= local_assigns[:class] %>" height="<%= local_assigns.fetch(:height, '37') %>" width="<%= local_assigns.fetch(:width, '37') %>" style="color: #e97a42" viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg">
   <path fill="currentColor" d="M 178.224 72.09 c -0.296 -1.463 -0.627 -2.919 -0.996 -4.364 -0.293 -1.151 -0.616 -2.293 -0.956 -3.433 -0.301 -1.008 -0.612 -2.014 -0.95 -3.012 -0.531 -1.578 -1.113 -3.142 -1.735 -4.694 -0.216 -0.54 -0.433 -1.082 -0.661 -1.618 -0.195 -0.462 -0.399 -0.917 -0.601 -1.375 -0.262 -0.591 -0.53 -1.177 -0.804 -1.762 -0.074 -0.159 -0.151 -0.315 -0.226 -0.474 -0.209 -0.441 -0.422 -0.881 -0.638 -1.318 -0.076 -0.154 -0.153 -0.306 -0.229 -0.459 -0.236 -0.471 -0.477 -0.939 -0.721 -1.406 -0.053 -0.101 -0.105 -0.201 -0.158 -0.302 -1.143 -2.16 -2.367 -4.269 -3.68 -6.322 -0.116 -0.181 -0.237 -0.359 -0.355 -0.539 -0.094 -0.144 -0.189 -0.288 -0.284 -0.432 -0.284 -0.431 -0.57 -0.861 -0.862 -1.287 -0.112 -0.164 -0.225 -0.326 -0.338 -0.489 -0.193 -0.279 -0.382 -0.56 -0.579 -0.836 -0.089 -0.125 -0.182 -0.249 -0.273 -0.374 -0.13 -0.182 -0.264 -0.362 -0.395 -0.542 -0.277 -0.38 -0.556 -0.76 -0.838 -1.135 -0.15 -0.199 -0.303 -0.395 -0.454 -0.593 -0.21 -0.274 -0.417 -0.552 -0.63 -0.823 -0.055 -0.069 -0.111 -0.136 -0.166 -0.205 -0.482 -0.61 -0.971 -1.216 -1.47 -1.814 -0.129 -0.155 -0.262 -0.306 -0.392 -0.461 -0.402 -0.476 -0.808 -0.95 -1.22 -1.417 -0.186 -0.212 -0.375 -0.422 -0.563 -0.631 -0.384 -0.428 -0.773 -0.854 -1.167 -1.276 -0.176 -0.189 -0.351 -0.379 -0.529 -0.567 -0.564 -0.595 -1.134 -1.186 -1.716 -1.768 -1.091 -1.091 -2.207 -2.15 -3.346 -3.178 -1.016 -0.919 -2.05 -1.815 -3.103 -2.684 -0.772 -0.636 -1.557 -1.255 -2.348 -1.864 -3.465 -2.67 -7.112 -5.075 -10.927 -7.209 -2.869 -1.604 -5.83 -3.06 -8.883 -4.351 -2.443 -1.033 -4.922 -1.948 -7.428 -2.756 -8.879 -2.863 -18.13 -4.318 -27.605 -4.318 -3.19 0 -6.354 0.169 -9.488 0.496 -4.036 0.421 -8.019 1.114 -11.94 2.073 -1.732 0.423 -3.452 0.892 -5.157 1.42 -2.856 0.883 -5.673 1.912 -8.447 3.085 -2.645 1.118 -5.222 2.357 -7.729 3.711 -2.574 1.39 -5.073 2.901 -7.494 4.533 -1.195 0.805 -2.37 1.64 -3.527 2.503 -1.156 0.864 -2.292 1.756 -3.408 2.676 -0.553 0.456 -1.1 0.919 -1.643 1.389 -1.649 1.427 -3.252 2.92 -4.806 4.473 -2.582 2.582 -4.991 5.299 -7.222 8.138 -0.892 1.135 -1.756 2.292 -2.59 3.467 -0.417 0.588 -0.827 1.18 -1.23 1.778 -0.403 0.597 -0.798 1.199 -1.186 1.806 -0.388 0.607 -0.769 1.218 -1.143 1.835 -2.241 3.697 -4.216 7.562 -5.916 11.582 -1.095 2.589 -2.059 5.217 -2.901 7.877 -0.153 0.482 -0.3 0.965 -0.444 1.449 -0.339 1.14 -0.663 2.282 -0.956 3.433 -0.369 1.446 -0.7 2.901 -0.996 4.364 -1.034 5.121 -1.618 10.343 -1.749 15.637 -0.018 0.757 -0.028 1.514 -0.028 2.274 0 1.123 0.02 2.244 0.062 3.361 0.285 7.82 1.568 15.475 3.825 22.879 0.044 0.147 0.088 0.295 0.133 0.441 0.877 2.823 1.894 5.608 3.054 8.35 0.85 2.009 1.769 3.98 2.755 5.912 0.539 1.057 1.105 2.099 1.685 3.132 4.013 7.142 8.98 13.698 14.846 19.564 7.713 7.713 16.611 13.878 26.477 18.352 0.705 0.32 1.415 0.632 2.131 0.935 2.081 0.88 4.185 1.679 6.313 2.396 9.217 3.106 18.85 4.677 28.719 4.677 8.031 0 15.902 -1.047 23.522 -3.107 0.633 -0.172 1.266 -0.35 1.895 -0.535 0.757 -0.222 1.509 -0.456 2.26 -0.698 0.717 -0.232 1.431 -0.474 2.145 -0.723 1.752 -0.616 3.49 -1.281 5.211 -2.009 0.755 -0.319 1.503 -0.651 2.247 -0.989 1.237 -0.563 2.459 -1.15 3.664 -1.766 0.644 -0.328 1.283 -0.665 1.917 -1.009 1.654 -0.896 3.274 -1.848 4.865 -2.844 5.736 -3.591 11.06 -7.827 15.912 -12.679 0.775 -0.775 1.534 -1.562 2.278 -2.36 5.204 -5.59 9.636 -11.754 13.246 -18.417 0.343 -0.634 0.68 -1.274 1.009 -1.917 0.482 -0.944 0.943 -1.9 1.392 -2.863 0.471 -1.007 0.928 -2.021 1.364 -3.049 1.22 -2.886 2.281 -5.82 3.187 -8.793 0.559 -1.833 1.056 -3.68 1.494 -5.542 0.108 -0.458 0.211 -0.916 0.312 -1.376 0.194 -0.883 0.373 -1.77 0.539 -2.659 1.02 -5.455 1.542 -11.02 1.542 -16.663 0 -6.074 -0.595 -12.058 -1.776 -17.911 z m -161.733 19.614 c -1.118 -56.662 44.604 -74.877 60.998 -67.647 2.187 0.965 4.732 2.431 7.042 2.96 5.295 1.213 13.432 -3.113 13.521 6.273 0.078 8.156 -3.389 13.108 -10.797 16.177 -7.539 3.124 -14.777 9.181 -19.95 15.493 -21.487 26.216 -31.231 68.556 -7.565 94.296 -13.679 -5.545 -42.418 -25.467 -43.248 -67.552 z m 91.109 72.619 c -0.053 0.008 -4.171 0.775 -4.171 0.775 0 0 -15.862 -22.957 -23.509 -21.719 11.291 16.04 12.649 22.625 12.649 22.625 -0.053 0.001 -0.107 0.001 -0.161 0.003 -51.831 2.131 -42.785 -64.026 -28.246 -86.502 -1.555 13.073 8.878 39.992 39.034 44.1 9.495 1.293 32.302 -3.275 41.015 -11.38 0.098 1.825 0.163 3.85 0.159 6.013 -0.046 23.538 -13.47 42.743 -36.77 46.085 z m 30.575 -15.708 c 9.647 -9.263 12.869 -27.779 9.103 -44.137 -4.608 -20.011 -28.861 -32.383 -40.744 -35.564 5.766 -8.089 27.908 -14.274 39.567 5.363 -5.172 -10.519 -13.556 -23.023 -1.732 -33.128 12.411 13.329 19.411 29.94 20.161 48.7 0.75 18.753 -6.64 41.768 -26.355 58.765 z" />
   <circle fill="currentColor" cx="71.927" cy="32.004" r="2.829" />
 </svg>

app/views/shared/_settings_nav.html.erb

@@ -13,12 +13,12 @@
         <%= link_to t('account'), settings_account_path, class: 'text-base hover:bg-base-300' %>
       </li>
       <% unless Docuseal.multitenant? %>
-        <% if can?(:read, EncryptedConfig.new(key: EncryptedConfig::EMAIL_SMTP_KEY, account: current_account)) && ENV['SMTP_ADDRESS'].blank? &&  true_user == current_user %>
+        <% if can?(:read, EncryptedConfig.new(key: EncryptedConfig::EMAIL_SMTP_KEY, account: current_account)) && ENV['SMTP_ADDRESS'].blank? && true_user == current_user %>
           <li>
             <%= link_to t('email'), settings_email_index_path, class: 'text-base hover:bg-base-300' %>
           </li>
         <% end %>
-        <% if can?(:read, EncryptedConfig.new(key: EncryptedConfig::FILES_STORAGE_KEY, account: current_account)) && true_user == current_user %>
+        <% if can?(:read, EncryptedConfig.new(key: EncryptedConfig::FILES_STORAGE_KEY, account: current_account)) && true_user == current_user && ENV['S3_ATTACHMENTS_BUCKET'].blank? && ENV['GCS_BUCKET'].blank? && ENV['AZURE_CONTAINER'].blank? %>
           <li>
             <%= link_to t('storage'), settings_storage_index_path, class: 'text-base hover:bg-base-300' %>
           </li>
@@ -90,6 +90,11 @@
             <%= link_to 'SSO', settings_sso_index_path, class: 'text-base hover:bg-base-300' %>
           </li>
         <% end %>
+        <% if !Docuseal.multitenant? && can?(:read, McpToken) && can?(:manage, :mcp) %>
+          <li>
+            <%= link_to 'MCP', settings_mcp_index_path, class: 'text-base hover:bg-base-300' %>
+          </li>
+        <% end %>
         <%= render 'shared/settings_nav_extra2' %>
         <% if (can?(:manage, EncryptedConfig) && current_user == true_user) || (current_user != true_user && current_account.testing?) %>
           <%= form_for '', url: testing_account_path, method: current_account.testing? ? :delete : :get, html: { class: 'w-full' } do |f| %>

app/views/submissions/_detailed_form.html.erb

@@ -3,8 +3,8 @@
   <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? || e['optional_invite_by_uuid'].present? || e['invite_via_field_uuid'].present? } %>
   <dynamic-list class="space-y-4">
     <div class="space-y-4">
-      <div class="card card-compact bg-base-300/40" data-targets="dynamic-list.items">
-        <div class="card-body">
+      <div class="<%= 'p-4 rounded-xl bg-base-300/40' unless local_assigns[:variables_form] %>" data-targets="dynamic-list.items">
+        <div>
           <div class="absolute right-4 top-5">
             <a href="#" data-action="click:dynamic-list#removeItem" class="<%= submitters.size == 1 ? 'right-2 top-1' : '-top-3' %> relative block w-6 h-6 rounded-lg text-neutral-700 text-center bg-base-300 p-1 hidden hover:bg-neutral hover:text-white">
               <%= svg_icon('trash', class: 'w-4 h-4') %>
@@ -86,13 +86,14 @@
         </div>
       </div>
     </div>
-    <% if params[:selfsign].blank? && local_assigns[:prefillable_fields].blank? && local_assigns[:recipient_form_fields].blank? %>
+    <% if params[:selfsign].blank? && local_assigns[:prefillable_fields].blank? && local_assigns[:recipient_form_fields].blank? && local_assigns[:variables_form].blank? %>
       <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
         <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
         <span><%= t('add_new') %></span>
       </a>
     <% end %>
   </dynamic-list>
+  <%= local_assigns[:variables_form] %>
   <div>
     <%= render('submitters_order', f:, template:) if Accounts.can_send_emails?(current_account) %>
     <%= render 'send_email', f:, template: %>

app/views/submissions/_email_form.html.erb

@@ -1,6 +1,27 @@
 <%= form_for '', url: template_submissions_path(template), html: { class: 'space-y-4', autocomplete: 'off' }, data: { turbo_frame: :_top } do |f| %>
   <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? || e['optional_invite_by_uuid'].present? || e['invite_via_field_uuid'].present? } %>
-  <% if submitters.size == 1 %>
+  <% if submitters.size == 1 && local_assigns[:variables_form] %>
+    <% item = submitters.first %>
+    <div class="grid gap-1">
+      <submitter-item class="grid md:grid-cols-2 gap-1">
+        <div class="form-control">
+          <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
+          <submitters-autocomplete data-field="email">
+            <linked-input data-target-id="<%= "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 w-full', placeholder: t('email'), required: true, value: item['email'].presence || (params[:selfsign] || item['is_requester'] ? current_user.email : ''), id: "email_#{item['uuid']}" %>
+            </linked-input>
+          </submitters-autocomplete>
+        </div>
+        <div class="form-control flex">
+          <submitters-autocomplete data-field="name">
+            <linked-input data-target-id="<%= "email_name_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
+              <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="base-input !h-10 w-full" placeholder="<%= "#{t('name')} (#{t('optional')})" %>" value="<%= params[:selfsign] || item['is_requester'] ? current_user.full_name : '' %>" dir="auto" id="email_name_<%= item['uuid'] %>">
+            </linked-input>
+          </submitters-autocomplete>
+        </div>
+      </submitter-item>
+    </div>
+  <% elsif submitters.size == 1 %>
     <submitter-item class="form-control">
       <emails-textarea data-bulk-enabled="<%= Docuseal.demo? || !Docuseal.multitenant? || can?(:manage, :bulk_send) %>" data-limit="<%= Docuseal.multitenant? ? (can?(:manage, :bulk_send) ? 40 : 1) : nil %>">
         <submitters-autocomplete data-field="email" class="block relative">
@@ -13,8 +34,8 @@
   <% else %>
     <dynamic-list class="space-y-4">
       <div class="space-y-4">
-        <div class="card card-compact bg-base-300/40" data-targets="dynamic-list.items">
-          <div class="card-body">
+        <div class="<%= 'p-4 rounded-xl bg-base-300/40' unless local_assigns[:variables_form] %>" data-targets="dynamic-list.items">
+          <div>
             <div class="absolute right-4 top-5">
               <a href="#" data-action="click:dynamic-list#removeItem" class="-top-3 relative block w-6 h-6 rounded-lg text-neutral-700 text-center bg-base-300 p-1 hidden hover:bg-neutral hover:text-white">
                 <%= svg_icon('trash', class: 'w-4 h-4') %>
@@ -38,7 +59,7 @@
           </div>
         </div>
       </div>
-      <% if params[:selfsign].blank? %>
+      <% if params[:selfsign].blank? && local_assigns[:variables_form].blank? %>
         <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
           <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
           <span><%= t('add_new') %></span>
@@ -46,6 +67,7 @@
       <% end %>
     </dynamic-list>
   <% end %>
+  <%= local_assigns[:variables_form] %>
   <div>
     <%= render('submitters_order', f:, template:) if Accounts.can_send_emails?(current_account) %>
     <%= render 'send_email', f:, template: %>

app/views/submissions/_phone_form.html.erb

@@ -2,8 +2,8 @@
   <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? || e['optional_invite_by_uuid'].present? || e['invite_via_field_uuid'].present? } %>
   <dynamic-list class="space-y-4">
     <div class="space-y-4">
-      <div class="card card-compact bg-base-300/40" data-targets="dynamic-list.items">
-        <div class="card-body">
+      <div class="<%= 'p-4 rounded-xl bg-base-300/40' unless local_assigns[:variables_form] %>" data-targets="dynamic-list.items">
+        <div>
           <div class="absolute right-4 top-5">
             <a href="#" data-action="click:dynamic-list#removeItem" class="<%= submitters.size == 1 ? 'right-2 top-1' : '-top-3' %> relative block w-6 h-6 rounded-lg text-neutral-700 text-center bg-base-300 p-1 hidden hover:bg-neutral hover:text-white">
               <%= svg_icon('trash', class: 'w-4 h-4') %>
@@ -49,13 +49,14 @@
         </div>
       </div>
     </div>
-    <% if params[:selfsign].blank? %>
+    <% if params[:selfsign].blank? && local_assigns[:variables_form].blank? %>
       <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
         <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
         <span><%= t('add_new') %></span>
       </a>
     <% end %>
   </dynamic-list>
+  <%= local_assigns[:variables_form] %>
   <div>
     <%= render('submitters_order', f:, template:) if Accounts.can_send_emails?(current_account) %>
     <%= render 'send_sms', f:, checked: true %>

app/views/submissions/new.html.erb

@@ -4,8 +4,10 @@
 <% default_tab = cookies.permanent[:add_recipients_tab].presence || 'email' %>
 <% recipient_form_fields = Accounts.load_recipient_form_fields(current_account) if prefillable_fields.blank? %>
 <% only_detailed = require_phone_2fa || require_email_2fa || prefillable_fields.present? || recipient_form_fields.present? %>
+<% with_list = @template.variables_schema.blank? %>
+<% variables_form = render 'variables_form', schema: @template.variables_schema if @template.variables_schema.present? && @template.variables_schema.any? { |_, v| !v['disabled'] } %>
 <%= render 'shared/turbo_modal_large', title: params[:selfsign] ? t('add_recipients') : t('add_new_recipients') do %>
-  <% options = [only_detailed ? nil : [t('via_email'), 'email'], only_detailed ? nil : [t('via_phone'), 'phone'], [t('detailed'), 'detailed'], [t('upload_list'), 'list']].compact %>
+  <% options = [only_detailed ? nil : [t('via_email'), 'email'], only_detailed ? nil : [t('via_phone'), 'phone'], [t('detailed'), 'detailed'], with_list ? [t('upload_list'), 'list'] : nil].compact %>
   <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center px-2 mt-4 block">
     <div class="flex justify-center">
       <% options.each_with_index do |(label, value), index| %>
@@ -21,18 +23,20 @@
   <div class="px-5 mb-5 mt-4">
     <% unless only_detailed %>
       <div id="email" class="<%= 'hidden' if default_tab != 'email' %>">
-        <%= render 'email_form', template: @template %>
+        <%= render 'email_form', template: @template, variables_form: %>
       </div>
       <div id="phone" class="<%= 'hidden' if default_tab != 'phone' %>">
-        <%= render 'phone_form', template: @template %>
+        <%= render 'phone_form', template: @template, variables_form: %>
       </div>
     <% end %>
     <div id="detailed" class="<%= 'hidden' if !only_detailed && default_tab != 'detailed' %>">
-      <%= render 'detailed_form', template: @template, require_phone_2fa:, require_email_2fa:, prefillable_fields:, recipient_form_fields: %>
-    </div>
-    <div id="list" class="hidden">
-      <%= render 'list_form', template: @template %>
+      <%= render 'detailed_form', template: @template, require_phone_2fa:, require_email_2fa:, prefillable_fields:, recipient_form_fields:, variables_form: %>
     </div>
+    <% if with_list %>
+      <div id="list" class="hidden">
+        <%= render 'list_form', template: @template %>
+      </div>
+    <% end %>
     <%= render 'submissions/error' %>
   </div>
   <%= content_for(:modal_extra) %>

app/views/submissions/show.html.erb

@@ -104,7 +104,7 @@
           <% preview_images_index = document.preview_images.loaded? ? document.preview_images.index_by { |e| e.filename.base.to_i } : {} %>
           <% lazyload_metadata = document.preview_images.first&.metadata || Templates::ProcessDocument::US_LETTER_SIZE %>
           <% (document.metadata.dig('pdf', 'number_of_pages') || (document.preview_images.loaded? ? preview_images_index.size : document.preview_images.size)).times do |index| %>
-            <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.signed_uuid, "#{index}.jpg")) %>
+            <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.signed_key, "#{index}.jpg")) %>
             <page-container id="<%= "page-#{document.uuid}-#{index}" %>" class="block before:border before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:rounded relative mb-4" style="container-type: size; aspect-ratio: <%= width = page.metadata['width'] %> / <%= height = page.metadata['height'] %>">
               <img loading="lazy" src="<%= page.url %>" width="<%= width %>" class="rounded" height="<%= height %>">
               <div class="top-0 bottom-0 left-0 right-0 absolute">

app/views/submissions_export/new.html.erb

@@ -1,4 +1,4 @@
-<% filter_params = params.permit(:q, *Submissions::Filter::ALLOWED_PARAMS) %>
+<% filter_params = params.permit(:q, :archived, *Submissions::Filter::ALLOWED_PARAMS) %>
 <%= render 'shared/turbo_modal', title: t('export'), close_after_submit: false do %>
   <div class="space-y-2">
     <%= button_to template_submissions_export_index_path(@template), params: { format: :xlsx, **filter_params }, method: :get, data: { turbo_frame: :_top } do %>

app/views/submit_form/show.html.erb

@@ -65,7 +65,7 @@
           <% preview_images_index = document.preview_images.loaded? ? document.preview_images.index_by { |e| e.filename.base.to_i } : {} %>
           <% lazyload_metadata = document.preview_images.last&.metadata || Templates::ProcessDocument::US_LETTER_SIZE %>
           <% (document.metadata.dig('pdf', 'number_of_pages') || (document.preview_images.loaded? ? preview_images_index.size : document.preview_images.size)).times do |index| %>
-            <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.signed_uuid, "#{index}.jpg")) %>
+            <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.signed_key, "#{index}.jpg")) %>
             <page-container class="block relative my-4 shadow-md" style="container-type: size; aspect-ratio: <%= width = page.metadata['width'] %> / <%= height = page.metadata['height'] %>">
               <img loading="lazy" src="<%= page.url %>" width="<%= width %>" height="<%= height %>">
               <div id="page-<%= [document.uuid, index].join('-') %>" class="top-0 bottom-0 left-0 right-0 absolute">

app/views/templates/_dropzone.html.erb

@@ -30,7 +30,7 @@
             </div>
           </span>
         </div>
-        <input id="file_dropzone_input" name="files[]" class="hidden" data-action="change:file-dropzone#onSelectFiles" data-target="file-dropzone.input" type="file" accept="image/*, application/pdf, application/zip<%= ", #{Templates::CreateAttachments::DOCUMENT_EXTENSIONS.join(', ')}" if Docuseal.advanced_formats? %>" multiple>
+        <input id="file_dropzone_input" name="files[]" class="hidden" data-action="change:file-dropzone#onSelectFiles" data-target="file-dropzone.input" type="file" accept="image/*, application/pdf, application/zip, application/json<%= ", #{Templates::CreateAttachments::DOCUMENT_EXTENSIONS.join(', ')}" if Docuseal.advanced_formats? %>" multiple>
       </div>
     </label>
   </file-dropzone>

app/views/templates/_title.html.erb

@@ -49,9 +49,9 @@
             <% end %>
           </div>
         <% end %>
-        <%= link_to template_share_link_path(template), class: 'absolute md:relative bottom-0 right-0 btn btn-xs md:btn-sm whitespace-nowrap btn-neutral text-white mt-1 px-2', data: { turbo_frame: :modal } do %>
+        <%= link_to template_share_link_path(template), class: "absolute md:relative bottom-0 right-0 btn btn-xs md:btn-sm whitespace-nowrap btn-neutral text-white mt-1 px-2 #{'btn-disabled text-base-100' if template.variables_schema.present?}", data: { turbo_frame: :modal } do %>
           <span class="flex items-center justify-center space-x-2">
-            <%= svg_icon('link', class: 'w-4 h-4 md:w-6 md:h-6 text-white') %>
+            <%= svg_icon('link', class: 'w-4 h-4 md:w-6 md:h-6') %>
             <span><%= t('link') %></span>
           </span>
         <% end %>

app/views/templates/_upload_button.html.erb

@@ -16,7 +16,7 @@
   </label>
   <input type="hidden" name="form_id" value="<%= form_id %>">
   <submit-form data-on="change" data-disable="true">
-    <input id="upload_template" name="files[]" class="hidden" type="file" accept="image/*, application/pdf, application/zip<%= ", #{Templates::CreateAttachments::DOCUMENT_EXTENSIONS.join(', ')}" if Docuseal.advanced_formats? %>" multiple>
+    <input id="upload_template" name="files[]" class="hidden" type="file" accept="image/*, application/pdf, application/zip, application/json<%= ", #{Templates::CreateAttachments::DOCUMENT_EXTENSIONS.join(', ')}" if Docuseal.advanced_formats? %>" multiple>
   </submit-form>
   <input hidden name="folder_name" value="<%= local_assigns[:folder_name] %>">
 <% end %>

app/views/templates/show.html.erb

@@ -94,7 +94,7 @@
                   <span class="mr-1"><%= t('send_to_recipients') %></span>
                 <% end %>
               <% end %>
-              <% if Templates.filter_undefined_submitters(@template.submitters).size == 1 %>
+              <% if Templates.filter_undefined_submitters(@template.submitters).size == 1 && @template.variables_schema.blank? %>
                 <%= button_to start_form_path(@template.slug), params: { selfsign: true }, method: :put, class: 'white-button w-full', form: { style: 'display: inline', target: '_blank', data: { turbo: false } } do %>
                   <%= svg_icon('writing', class: 'w-6 h-6') %>
                   <span class="mr-1"><%= t('sign_it_yourself') %></span>

app/views/templates_archived_submissions/index.html.erb

@@ -16,7 +16,7 @@
       <% if with_filters %>
         <%= render 'shared/search_input' %>
       <% end %>
-      <%= link_to new_template_submissions_export_path(@template), class: 'btn btn-ghost text-base', data: { turbo_frame: 'modal' } do %>
+      <%= link_to new_template_submissions_export_path(@template, archived: true), class: 'btn btn-ghost text-base', data: { turbo_frame: 'modal' } do %>
         <%= svg_icon('download', class: 'w-6 h-6 stroke-2') %>
         <span><%= t('export') %></span>
       <% end %>

config/brakeman.ignore

@@ -17,7 +17,7 @@
       "note": "Safe SQL"
     },
     {
-      "fingerprint": "5f52190d03ee922bba9792012d8fcbeb7d4736006bb899b3be9cc10d679e0af1",
+      "fingerprint": "f3a20210cde7b9cb5944d53505fe80fea502308416143f4da9ec2422f6b7035c",
       "note": "Safe Param"
     },
     {

config/environments/production.rb

@@ -87,7 +87,9 @@ Rails.application.configure do
       password: ENV.fetch('SMTP_PASSWORD', nil),
       openssl_verify_mode: ENV['SMTP_SSL_VERIFY'] == 'false' ? OpenSSL::SSL::VERIFY_NONE : OpenSSL::SSL::VERIFY_PEER,
       authentication: ENV.fetch('SMTP_PASSWORD', nil).present? ? ENV.fetch('SMTP_AUTHENTICATION', 'plain') : nil,
-      enable_starttls: ENV['SMTP_ENABLE_STARTTLS'] != 'false'
+      enable_starttls: ENV['SMTP_ENABLE_STARTTLS'] != 'false',
+      open_timeout: ENV.fetch('SMTP_OPEN_TIMEOUT', '15').to_i,
+      read_timeout: ENV.fetch('SMTP_READ_TIMEOUT', '25').to_i
     }.compact
   end
 
@@ -150,7 +152,7 @@ Rails.application.configure do
         template_id: params[:template_id],
         submission_id: params[:submission_id],
         submitter_id: params[:submitter_id],
-        sig: (params[:signed_uuid] || params[:signed_id]).to_s.split('--').first,
+        sig: (params[:signed_key] || params[:signed_uuid] || params[:signed_id]).to_s.split('--').first,
         slug: (params[:slug] ||
                params[:submitter_slug] ||
                params[:submission_slug] ||

config/initializers/active_storage.rb

@@ -8,6 +8,10 @@ ActiveSupport.on_load(:active_storage_attachment) do
   def signed_uuid
     @signed_uuid ||= ApplicationRecord.signed_id_verifier.generate(uuid, expires_in: 6.hours, purpose: :attachment)
   end
+
+  def signed_key
+    @signed_key ||= ApplicationRecord.signed_id_verifier.generate([id, uuid], expires_in: 6.hours, purpose: :attachment)
+  end
 end
 
 # rubocop:disable Metrics/BlockLength

config/locales/i18n.yml

@@ -29,6 +29,7 @@ en: &en
   pro: Pro
   thanks: Thanks
   private: Private
+  _variables: Variables
   make_all_newly_created_templates_private_to_their_creator_and_admins_by_default: Make all newly created templates private to their creator and admins by default.
   create_templates_with_admin_access_by_default: Create templates with admin access by default
   require_email_2fa: Require email 2FA
@@ -894,6 +895,18 @@ en: &en
   redo: Redo
   add_variable: Add variable
   enter_a_url_or_variable_name: Enter a URL or variable name
+  new_token: New token
+  token: Token
+  mcp_server: MCP Server
+  instructions: Instructions
+  please_copy_the_token_below_now_as_it_wont_be_shown_again: Please copy the token below now, as it won't be shown again
+  mcp_token_has_been_created: MCP token has been created.
+  mcp_token_has_been_removed: MCP token has been removed.
+  enable_mcp_server: Enable MCP server
+  all_existing_mcp_connections_will_be_stopped_immediately_when_this_setting_is_disabled: All existing MCP connections will be stopped immediately when this setting is disabled.
+  connect_to_docuseal_mcp: Connect to DocuSeal MCP
+  add_the_following_to_your_mcp_client_configuration: Add the following to your MCP client configuration
+  works_with_claude_desktop_cursor_windsurf_vs_code_and_any_mcp_compatible_client: Works with Claude Desktop, Cursor, Windsurf, VS Code, and any MCP-compatible client.
   devise:
     confirmations:
       confirmed: Your email address has been successfully confirmed.
@@ -991,6 +1004,8 @@ en: &en
     scopes:
       write: Update your data
       read: Read your data
+      mcp: Use MCP
+      claudeai: Use Claude AI
   pagination:
     submissions:
       range_with_total: "%{from}-%{to} of %{count} submissions"
@@ -1049,6 +1064,7 @@ es: &es
   stripe_account_has_been_connected: La cuenta de Stripe ha sido conectada.
   re_connect_stripe: Volver a conectar Stripe
   private: Privado
+  _variables: Variables
   make_all_newly_created_templates_private_to_their_creator_and_admins_by_default: Hacer que todas las plantillas recién creadas sean privadas para su creador y los administradores por defecto.
   create_templates_with_admin_access_by_default: Crear plantillas con acceso de administrador por defecto
   require_email_2fa: Requerir 2FA por correo electrónico
@@ -1896,6 +1912,18 @@ es: &es
   redo: Rehacer
   add_variable: Agregar variable
   enter_a_url_or_variable_name: Ingrese una URL o nombre de variable
+  new_token: Nuevo token
+  token: Token
+  mcp_server: Servidor MCP
+  instructions: Instrucciones
+  please_copy_the_token_below_now_as_it_wont_be_shown_again: Copie el token a continuación ahora, ya que no se mostrará de nuevo
+  mcp_token_has_been_created: El token MCP ha sido creado.
+  mcp_token_has_been_removed: El token MCP ha sido eliminado.
+  enable_mcp_server: Habilitar servidor MCP
+  all_existing_mcp_connections_will_be_stopped_immediately_when_this_setting_is_disabled: Todas las conexiones MCP existentes se detendrán inmediatamente cuando se desactive esta configuración.
+  connect_to_docuseal_mcp: Conectar a DocuSeal MCP
+  add_the_following_to_your_mcp_client_configuration: Agregue lo siguiente a la configuración de su cliente MCP
+  works_with_claude_desktop_cursor_windsurf_vs_code_and_any_mcp_compatible_client: Funciona con Claude Desktop, Cursor, Windsurf, VS Code y cualquier cliente compatible con MCP.
   devise:
     confirmations:
       confirmed: Tu dirección de correo electrónico ha sido confirmada correctamente.
@@ -1993,6 +2021,8 @@ es: &es
     scopes:
       write: Actualizar tus datos
       read: Leer tus datos
+      mcp: Usar MCP
+      claudeai: Usar Claude AI
   pagination:
     submissions:
       range_with_total: "%{from}-%{to} de %{count} envíos"
@@ -2051,6 +2081,7 @@ it: &it
   stripe_account_has_been_connected: L'account Stripe è stato collegato.
   re_connect_stripe: Ricollega Stripe
   private: Privato
+  _variables: Variabili
   make_all_newly_created_templates_private_to_their_creator_and_admins_by_default: Rendere tutte le nuove template private per il creatore e gli amministratori per impostazione predefinita.
   create_templates_with_admin_access_by_default: Crea modelli con accesso amministratore per impostazione predefinita
   require_email_2fa: Richiedi 2FA email
@@ -2899,6 +2930,18 @@ it: &it
   redo: Ripeti
   add_variable: Aggiungi variabile
   enter_a_url_or_variable_name: Inserisci un URL o nome variabile
+  new_token: Nuovo token
+  token: Token
+  mcp_server: Server MCP
+  instructions: Istruzioni
+  please_copy_the_token_below_now_as_it_wont_be_shown_again: Copia il token qui sotto ora, poiché non verrà mostrato di nuovo
+  mcp_token_has_been_created: Il token MCP è stato creato.
+  mcp_token_has_been_removed: Il token MCP è stato rimosso.
+  enable_mcp_server: Abilita server MCP
+  all_existing_mcp_connections_will_be_stopped_immediately_when_this_setting_is_disabled: Tutte le connessioni MCP esistenti verranno interrotte immediatamente quando questa impostazione viene disattivata.
+  connect_to_docuseal_mcp: Connetti a DocuSeal MCP
+  add_the_following_to_your_mcp_client_configuration: Aggiungi quanto segue alla configurazione del tuo client MCP
+  works_with_claude_desktop_cursor_windsurf_vs_code_and_any_mcp_compatible_client: Funziona con Claude Desktop, Cursor, Windsurf, VS Code e qualsiasi client compatibile con MCP.
   devise:
     confirmations:
       confirmed: Il tuo indirizzo email è stato confermato con successo.
@@ -2996,6 +3039,8 @@ it: &it
     scopes:
       write: Aggiorna i tuoi dati
       read: Leggi i tuoi dati
+      mcp: Usa MCP
+      claudeai: Usa Claude AI
   pagination:
     submissions:
       range_with_total: "%{from}-%{to} di %{count} invii"
@@ -3054,6 +3099,7 @@ fr: &fr
   stripe_account_has_been_connected: Le compte Stripe a été connecté.
   re_connect_stripe: Reconnecter Stripe
   private: Privé
+  _variables: Variables
   make_all_newly_created_templates_private_to_their_creator_and_admins_by_default: Rendre tous les nouveaux modèles privés pour leur créateur et les administrateurs par défaut.
   create_templates_with_admin_access_by_default: Créer des modèles avec un accès administrateur par défaut
   require_email_2fa: Exiger la 2FA par email
@@ -3898,6 +3944,18 @@ fr: &fr
   redo: Rétablir
   add_variable: Ajouter une variable
   enter_a_url_or_variable_name: Entrez une URL ou un nom de variable
+  new_token: Nouveau jeton
+  token: Jeton
+  mcp_server: Serveur MCP
+  instructions: Instructions
+  please_copy_the_token_below_now_as_it_wont_be_shown_again: Copiez le jeton ci-dessous maintenant, car il ne sera plus affiché
+  mcp_token_has_been_created: Le jeton MCP a été créé.
+  mcp_token_has_been_removed: Le jeton MCP a été supprimé.
+  enable_mcp_server: Activer le serveur MCP
+  all_existing_mcp_connections_will_be_stopped_immediately_when_this_setting_is_disabled: Toutes les connexions MCP existantes seront arrêtées immédiatement lorsque ce paramètre est désactivé.
+  connect_to_docuseal_mcp: Se connecter à DocuSeal MCP
+  add_the_following_to_your_mcp_client_configuration: Ajoutez ce qui suit à la configuration de votre client MCP
+  works_with_claude_desktop_cursor_windsurf_vs_code_and_any_mcp_compatible_client: Fonctionne avec Claude Desktop, Cursor, Windsurf, VS Code et tout client compatible MCP.
   devise:
     confirmations:
       confirmed: Votre adresse e-mail a été confirmée avec succès.
@@ -3995,6 +4053,8 @@ fr: &fr
     scopes:
       write: Mettre à jour vos données
       read: Lire vos données
+      mcp: Utiliser MCP
+      claudeai: Utiliser Claude AI
   pagination:
     submissions:
       range_with_total: "%{from}-%{to} sur %{count} soumissions"
@@ -4053,6 +4113,7 @@ pt: &pt
   stripe_account_has_been_connected: Conta Stripe foi conectada.
   re_connect_stripe: Reconectar Stripe
   private: Privado
+  _variables: Variáveis
   make_all_newly_created_templates_private_to_their_creator_and_admins_by_default: Tornar todos os modelos recém-criados privados para seu criador e administradores por padrão.
   create_templates_with_admin_access_by_default: Criar modelos com acesso de administrador por padrão
   require_email_2fa: Exigir 2FA por email
@@ -4900,6 +4961,18 @@ pt: &pt
   redo: Refazer
   add_variable: Adicionar variável
   enter_a_url_or_variable_name: Digite uma URL ou nome de variável
+  new_token: Novo token
+  token: Token
+  mcp_server: Servidor MCP
+  instructions: Instruções
+  please_copy_the_token_below_now_as_it_wont_be_shown_again: Copie o token abaixo agora, pois ele não será exibido novamente
+  mcp_token_has_been_created: O token MCP foi criado.
+  mcp_token_has_been_removed: O token MCP foi removido.
+  enable_mcp_server: Ativar servidor MCP
+  all_existing_mcp_connections_will_be_stopped_immediately_when_this_setting_is_disabled: Todas as conexões MCP existentes serão interrompidas imediatamente quando esta configuração for desativada.
+  connect_to_docuseal_mcp: Conectar ao DocuSeal MCP
+  add_the_following_to_your_mcp_client_configuration: Adicione o seguinte à configuração do seu cliente MCP
+  works_with_claude_desktop_cursor_windsurf_vs_code_and_any_mcp_compatible_client: Funciona com Claude Desktop, Cursor, Windsurf, VS Code e qualquer cliente compatível com MCP.
   devise:
     confirmations:
       confirmed: Seu endereço de e-mail foi confirmado com sucesso.
@@ -4997,6 +5070,8 @@ pt: &pt
     scopes:
       write: Atualizar seus dados
       read: Ler seus dados
+      mcp: Usar MCP
+      claudeai: Usar Claude AI
   pagination:
     submissions:
       range_with_total: "%{from}-%{to} de %{count} submissões"
@@ -5041,6 +5116,7 @@ de: &de
   pro: Pro
   thanks: Danke
   private: Privat
+  _variables: Variablen
   make_all_newly_created_templates_private_to_their_creator_and_admins_by_default: Alle neu erstellten Vorlagen standardmäßig nur für ihren Ersteller und Administratoren sichtbar machen.
   create_templates_with_admin_access_by_default: Vorlagen standardmäßig mit Administratorzugriff erstellen
   require_email_2fa: E-Mail 2FA erforderlich
@@ -5902,6 +5978,18 @@ de: &de
   redo: Wiederholen
   add_variable: Variable hinzufügen
   enter_a_url_or_variable_name: Geben Sie eine URL oder einen Variablennamen ein
+  new_token: Neues Token
+  token: Token
+  mcp_server: MCP-Server
+  instructions: Anweisungen
+  please_copy_the_token_below_now_as_it_wont_be_shown_again: Kopieren Sie das Token jetzt, da es nicht erneut angezeigt wird
+  mcp_token_has_been_created: Das MCP-Token wurde erstellt.
+  mcp_token_has_been_removed: Das MCP-Token wurde entfernt.
+  enable_mcp_server: MCP-Server aktivieren
+  all_existing_mcp_connections_will_be_stopped_immediately_when_this_setting_is_disabled: Alle bestehenden MCP-Verbindungen werden sofort gestoppt, wenn diese Einstellung deaktiviert wird.
+  connect_to_docuseal_mcp: Mit DocuSeal MCP verbinden
+  add_the_following_to_your_mcp_client_configuration: Fügen Sie Folgendes zu Ihrer MCP-Client-Konfiguration hinzu
+  works_with_claude_desktop_cursor_windsurf_vs_code_and_any_mcp_compatible_client: Funktioniert mit Claude Desktop, Cursor, Windsurf, VS Code und jedem MCP-kompatiblen Client.
   devise:
     confirmations:
       confirmed: Ihre E-Mail-Adresse wurde erfolgreich bestätigt.
@@ -5999,6 +6087,8 @@ de: &de
     scopes:
       write: Aktualisieren Sie Ihre Daten
       read: Lesen Sie Ihre Daten
+      mcp: MCP verwenden
+      claudeai: Claude AI verwenden
   pagination:
     submissions:
       range_with_total: "%{from}-%{to} von %{count} Einreichungen"
@@ -6431,6 +6521,7 @@ nl: &nl
   pro: Pro
   thanks: Bedankt
   private: Privé
+  _variables: Variabelen
   make_all_newly_created_templates_private_to_their_creator_and_admins_by_default: Maak alle nieuw aangemaakte sjablonen standaard privé voor hun maker en admins.
   create_templates_with_admin_access_by_default: Sjablonen standaard met admin-toegang maken
   require_email_2fa: E-mail 2FA vereist
@@ -7289,6 +7380,18 @@ nl: &nl
   redo: Opnieuw
   add_variable: Variabele toevoegen
   enter_a_url_or_variable_name: Voer een URL of variabelenaam in
+  new_token: Nieuw token
+  token: Token
+  mcp_server: MCP-server
+  instructions: Instructies
+  please_copy_the_token_below_now_as_it_wont_be_shown_again: Kopieer het token hieronder nu, want het wordt niet opnieuw getoond
+  mcp_token_has_been_created: Het MCP-token is aangemaakt.
+  mcp_token_has_been_removed: Het MCP-token is verwijderd.
+  enable_mcp_server: MCP-server inschakelen
+  all_existing_mcp_connections_will_be_stopped_immediately_when_this_setting_is_disabled: Alle bestaande MCP-verbindingen worden onmiddellijk gestopt wanneer deze instelling wordt uitgeschakeld.
+  connect_to_docuseal_mcp: Verbinden met DocuSeal MCP
+  add_the_following_to_your_mcp_client_configuration: Voeg het volgende toe aan uw MCP-clientconfiguratie
+  works_with_claude_desktop_cursor_windsurf_vs_code_and_any_mcp_compatible_client: Werkt met Claude Desktop, Cursor, Windsurf, VS Code en elke MCP-compatibele client.
   devise:
     confirmations:
       confirmed: Je e-mailadres is succesvol bevestigd.
@@ -7386,6 +7489,8 @@ nl: &nl
     scopes:
       write: Uw gegevens bijwerken
       read: Uw gegevens lezen
+      mcp: MCP gebruiken
+      claudeai: Claude AI gebruiken
   pagination:
     submissions:
       range_with_total: "%{from}-%{to} van %{count} inzendingen"

config/routes.rb

@@ -111,7 +111,7 @@ Rails.application.routes.draw do
     resources :prefillable_fields, only: %i[create], controller: 'templates_prefillable_fields'
     resources :submissions_export, only: %i[index new]
   end
-  resources :preview_document_page, only: %i[show], path: '/preview/:signed_uuid'
+  resources :preview_document_page, only: %i[show], path: '/preview/:signed_key'
   resource :blobs_proxy, only: %i[show], path: '/file/:signed_uuid/*filename',
                          controller: 'api/active_storage_blobs_proxy'
   resource :blobs_proxy, only: %i[show], path: '/blobs_proxy/:signed_uuid/*filename',
@@ -168,6 +168,7 @@ Rails.application.routes.draw do
       resources :storage, only: %i[index create], controller: 'storage_settings'
       resources :search_entries_reindex, only: %i[create]
       resources :sms, only: %i[index], controller: 'sms_settings'
+      resources :mcp, only: %i[index new create destroy], controller: 'mcp_settings'
     end
     if Docuseal.demo? || !Docuseal.multitenant?
       resources :api, only: %i[index create], controller: 'api_settings'
@@ -201,6 +202,8 @@ Rails.application.routes.draw do
     end
   end
 
+  match '/mcp', to: 'mcp#call', via: %i[get post]
+
   get '/js/:filename', to: 'embed_scripts#show', as: :embed_script
 
   ActiveSupport.run_load_hooks(:routes, self)

config/webpack/webpack.config.js

@@ -14,7 +14,7 @@ const configs = generateWebpackConfig({
     concatenateModules: !process.env.BUNDLE_ANALYZE,
     splitChunks: {
       chunks (chunk) {
-        return chunk.name !== 'rollbar'
+        return chunk.name !== 'rollbar' && chunk.name !== 'dynamic-editor'
       },
       cacheGroups: {
         default: false,
@@ -39,8 +39,14 @@ const configs = generateWebpackConfig({
   ].filter(Boolean)
 })
 
+configs.module.rules[3].exclude = /dynamic_styles\.scss$/
+
 configs.module = merge({
   rules: [
+    {
+      test: /dynamic_styles\.scss$/,
+      use: ['css-loader', 'postcss-loader', 'sass-loader']
+    },
     {
       test: /\.vue$/,
       use: [{

db/migrate/20260206100322_create_dynamic_documents.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class CreateDynamicDocuments < ActiveRecord::Migration[8.1]
+  def change
+    create_table :dynamic_documents do |t|
+      t.string :uuid, null: false
+      t.references :template, null: false, foreign_key: true, index: true
+      t.text :body, null: false
+      t.text :head
+      t.string :sha1, null: false
+
+      t.timestamps
+    end
+  end
+end

db/migrate/20260216162053_create_dynamic_document_versions.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class CreateDynamicDocumentVersions < ActiveRecord::Migration[8.1]
+  def change
+    create_table :dynamic_document_versions do |t|
+      t.references :dynamic_document, null: false, foreign_key: true, index: false
+      t.string :sha1, null: false
+      t.text :areas, null: false
+
+      t.timestamps
+    end
+
+    add_index :dynamic_document_versions, %i[dynamic_document_id sha1], unique: true
+  end
+end

db/migrate/20260224120000_add_pkce_to_doorkeeper_access_grants.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class AddPkceToDoorkeeperAccessGrants < ActiveRecord::Migration[7.1]
+  def change
+    add_column :oauth_access_grants, :code_challenge, :string, null: true
+    add_column :oauth_access_grants, :code_challenge_method, :string, null: true
+  end
+end

db/migrate/20260226193537_create_mcp_tokens.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class CreateMcpTokens < ActiveRecord::Migration[8.1]
+  def change
+    create_table :mcp_tokens do |t|
+      t.references :user, null: false, foreign_key: true, index: true
+      t.string :name, null: false
+      t.string :sha256, null: false, index: { unique: true }
+      t.string :token_prefix, null: false
+      t.datetime :archived_at
+
+      t.timestamps
+    end
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[8.0].define(version: 2025_11_25_194305) do
+ActiveRecord::Schema[8.1].define(version: 2026_02_26_193537) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "btree_gin"
   enable_extension "plpgsql"
@@ -168,6 +168,26 @@ ActiveRecord::Schema[8.0].define(version: 2025_11_25_194305) do
     t.index ["submitter_id"], name: "index_document_generation_events_on_submitter_id"
   end
 
+  create_table "dynamic_document_versions", force: :cascade do |t|
+    t.text "areas", null: false
+    t.datetime "created_at", null: false
+    t.bigint "dynamic_document_id", null: false
+    t.string "sha1", null: false
+    t.datetime "updated_at", null: false
+    t.index ["dynamic_document_id", "sha1"], name: "idx_on_dynamic_document_id_sha1_3503adf557", unique: true
+  end
+
+  create_table "dynamic_documents", force: :cascade do |t|
+    t.text "body", null: false
+    t.datetime "created_at", null: false
+    t.text "head"
+    t.string "sha1", null: false
+    t.bigint "template_id", null: false
+    t.datetime "updated_at", null: false
+    t.string "uuid", null: false
+    t.index ["template_id"], name: "index_dynamic_documents_on_template_id"
+  end
+
   create_table "email_events", force: :cascade do |t|
     t.bigint "account_id", null: false
     t.string "emailable_type", null: false
@@ -229,6 +249,18 @@ ActiveRecord::Schema[8.0].define(version: 2025_11_25_194305) do
     t.index ["key"], name: "index_lock_events_on_key"
   end
 
+  create_table "mcp_tokens", force: :cascade do |t|
+    t.datetime "archived_at"
+    t.datetime "created_at", null: false
+    t.string "name", null: false
+    t.string "sha256", null: false
+    t.string "token_prefix", null: false
+    t.datetime "updated_at", null: false
+    t.bigint "user_id", null: false
+    t.index ["sha256"], name: "index_mcp_tokens_on_sha256", unique: true
+    t.index ["user_id"], name: "index_mcp_tokens_on_user_id"
+  end
+
   create_table "oauth_access_grants", force: :cascade do |t|
     t.bigint "resource_owner_id", null: false
     t.bigint "application_id", null: false
@@ -238,6 +270,8 @@ ActiveRecord::Schema[8.0].define(version: 2025_11_25_194305) do
     t.string "scopes", default: "", null: false
     t.datetime "created_at", null: false
     t.datetime "revoked_at"
+    t.string "code_challenge"
+    t.string "code_challenge_method"
     t.index ["application_id"], name: "index_oauth_access_grants_on_application_id"
     t.index ["resource_owner_id"], name: "index_oauth_access_grants_on_resource_owner_id"
     t.index ["token"], name: "index_oauth_access_grants_on_token", unique: true
@@ -507,6 +541,7 @@ ActiveRecord::Schema[8.0].define(version: 2025_11_25_194305) do
   add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id"
   add_foreign_key "active_storage_variant_records", "active_storage_blobs", column: "blob_id"
   add_foreign_key "document_generation_events", "submitters"
+  add_foreign_key "dynamic_documents", "templates"
   add_foreign_key "email_events", "accounts"
   add_foreign_key "email_messages", "accounts"
   add_foreign_key "email_messages", "users", column: "author_id"

lib/ability.rb

@@ -20,6 +20,9 @@ class Ability
     can :manage, UserConfig, user_id: user.id
     can :manage, Account, id: user.account_id
     can :manage, AccessToken, user_id: user.id
+    can :manage, McpToken, user_id: user.id
     can :manage, WebhookUrl, account_id: user.account_id
+
+    can :manage, :mcp
   end
 end

lib/load_bmp.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 module LoadBmp
+  BPPS = [1, 4, 8, 24, 32].freeze
+
   module_function
 
   # rubocop:disable Metrics
@@ -16,18 +18,25 @@ module LoadBmp
       header_data[:height]
     )
 
-    final_pixel_data = prepare_unpadded_pixel_data_string(
-      raw_pixel_data_from_file,
-      header_data[:bpp],
-      header_data[:width],
-      header_data[:height],
-      header_data[:bmp_stride]
-    )
-
-    bands = header_data[:bpp] / 8
-
-    unless header_data[:bpp] == 24 || header_data[:bpp] == 32
-      raise ArgumentError, "Conversion for #{header_data[:bpp]}-bpp BMP not implemented."
+    if header_data[:bpp] <= 8
+      final_pixel_data = decode_indexed_pixel_data(
+        raw_pixel_data_from_file,
+        header_data[:bpp],
+        header_data[:width],
+        header_data[:height],
+        header_data[:bmp_stride],
+        header_data[:color_table]
+      )
+      bands = 3
+    else
+      final_pixel_data = prepare_unpadded_pixel_data_string(
+        raw_pixel_data_from_file,
+        header_data[:bpp],
+        header_data[:width],
+        header_data[:height],
+        header_data[:bmp_stride]
+      )
+      bands = header_data[:bpp] / 8
     end
 
     image = Vips::Image.new_from_memory(final_pixel_data, header_data[:width], header_data[:height], bands, :uchar)
@@ -35,7 +44,9 @@ module LoadBmp
     image = image.flip(:vertical) if header_data[:orientation] == -1
 
     image_rgb =
-      if bands == 3
+      if header_data[:bpp] <= 8
+        image
+      elsif bands == 3
         image.recomb(band3_recomb)
       elsif bands == 4
         image.recomb(band4_recomb)
@@ -93,15 +104,31 @@ module LoadBmp
             "Unsupported BMP compression type: #{compression}. Only uncompressed (0) is supported."
     end
 
-    unless [24, 32].include?(bpp)
-      raise ArgumentError, "Unsupported BMP bits per pixel: #{bpp}. Only 24-bit and 32-bit are supported."
+    if BPPS.exclude?(bpp)
+      raise ArgumentError, "Unsupported BMP bits per pixel: #{bpp}. Only 1, 4, 8, 24, and 32-bit are supported."
     end
 
     raise ArgumentError, "Unsupported BMP planes: #{planes}. Expected 1." if planes != 1
 
-    bytes_per_pixel = bpp / 8
-    row_size_unpadded = width * bytes_per_pixel
-    bmp_stride = (row_size_unpadded + 3) & ~3
+    bmp_stride = (((width * bpp) + 31) / 32) * 4
+
+    color_table = nil
+
+    if bpp <= 8
+      num_colors = 1 << bpp
+      color_table_offset = 14 + info_header_size
+      color_table_size = num_colors * 4
+
+      if bmp_bytes.bytesize < color_table_offset + color_table_size
+        raise ArgumentError, 'BMP data too short for color table.'
+      end
+
+      color_table = Array.new(num_colors) do |i|
+        offset = color_table_offset + (i * 4)
+        b, g, r = bmp_bytes.unpack("@#{offset}CCC")
+        [r, g, b]
+      end
+    end
 
     {
       width:,
@@ -109,7 +136,8 @@ module LoadBmp
       bpp:,
       pixel_data_offset:,
       bmp_stride:,
-      orientation:
+      orientation:,
+      color_table:
     }
   end
 
@@ -163,6 +191,37 @@ module LoadBmp
     unpadded_rows.join
   end
 
+  def decode_indexed_pixel_data(raw_data, bpp, width, height, bmp_stride, color_table)
+    palette = color_table.map { |r, g, b| [r, g, b].pack('CCC') }
+
+    output = String.new(capacity: width * height * 3)
+
+    height.times do |y|
+      row_offset = y * bmp_stride
+
+      case bpp
+      when 1
+        width.times do |x|
+          byte_val = raw_data.getbyte(row_offset + (x >> 3))
+          index = (byte_val >> (7 - (x & 7))) & 0x01
+          output << palette[index]
+        end
+      when 4
+        width.times do |x|
+          byte_val = raw_data.getbyte(row_offset + (x >> 1))
+          index = x.even? ? (byte_val >> 4) & 0x0F : byte_val & 0x0F
+          output << palette[index]
+        end
+      when 8
+        width.times do |x|
+          output << palette[raw_data.getbyte(row_offset + x)]
+        end
+      end
+    end
+
+    output
+  end
+
   def band3_recomb
     @band3_recomb ||=
       Vips::Image.new_from_array(

lib/mcp/handle_request.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Mcp
+  module HandleRequest
+    TOOLS = [
+      Mcp::Tools::SearchTemplates,
+      Mcp::Tools::CreateTemplate,
+      Mcp::Tools::SendDocuments,
+      Mcp::Tools::SearchDocuments
+    ].freeze
+
+    TOOLS_SCHEMA = TOOLS.map { |t| t::SCHEMA }
+
+    TOOLS_INDEX = TOOLS.index_by { |t| t::SCHEMA[:name] }
+
+    module_function
+
+    # rubocop:disable Metrics/MethodLength
+    def call(body, current_user, current_ability)
+      case body['method']
+      when 'initialize'
+        {
+          jsonrpc: '2.0',
+          id: body['id'],
+          result: {
+            protocolVersion: '2025-11-25',
+            serverInfo: {
+              name: 'DocuSeal',
+              version: Docuseal.version.to_s
+            },
+            capabilities: {
+              tools: {
+                listChanged: false
+              }
+            }
+          }
+        }
+      when 'notifications/initialized'
+        nil
+      when 'ping'
+        { jsonrpc: '2.0', id: body['id'], result: {} }
+      when 'tools/list'
+        { jsonrpc: '2.0', id: body['id'], result: { tools: TOOLS_SCHEMA } }
+      when 'tools/call'
+        tool = TOOLS_INDEX[body.dig('params', 'name')]
+
+        raise "Unknown tool: #{body.dig('params', 'name')}" unless tool
+
+        result = tool.call(body.dig('params', 'arguments') || {}, current_user, current_ability)
+
+        { jsonrpc: '2.0', id: body['id'], result: }
+      else
+        {
+          jsonrpc: '2.0',
+          id: body['id'],
+          error: {
+            code: -32_601,
+            message: "Method not found: #{body['method']}"
+          }
+        }
+      end
+    end
+    # rubocop:enable Metrics/MethodLength
+  end
+end

lib/mcp/tools/create_template.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module Mcp
+  module Tools
+    module CreateTemplate
+      SCHEMA = {
+        name: 'create_template',
+        title: 'Create Template',
+        description: 'Create a template from a PDF. Provide a URL or base64-encoded file content.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            url: {
+              type: 'string',
+              description: 'URL of the document file to upload'
+            },
+            file: {
+              type: 'string',
+              description: 'Base64-encoded file content'
+            },
+            filename: {
+              type: 'string',
+              description: 'Filename with extension (required when using file)'
+            },
+            name: {
+              type: 'string',
+              description: 'Template name (defaults to filename)'
+            }
+          }
+        },
+        annotations: {
+          readOnlyHint: false,
+          destructiveHint: false,
+          idempotentHint: false,
+          openWorldHint: false
+        }
+      }.freeze
+
+      module_function
+
+      # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
+      def call(arguments, current_user, current_ability)
+        current_ability.authorize!(:create, Template.new(account_id: current_user.account_id, author: current_user))
+
+        account = current_user.account
+
+        if arguments['file'].present?
+          tempfile = Tempfile.new
+          tempfile.binmode
+          tempfile.write(Base64.decode64(arguments['file']))
+          tempfile.rewind
+
+          filename = arguments['filename'] || 'document.pdf'
+        elsif arguments['url'].present?
+          tempfile = Tempfile.new
+          tempfile.binmode
+          tempfile.write(DownloadUtils.call(arguments['url'], validate: true).body)
+          tempfile.rewind
+
+          filename = File.basename(URI.decode_www_form_component(arguments['url']))
+        else
+          return { content: [{ type: 'text', text: 'Provide either url or file' }], isError: true }
+        end
+
+        file = ActionDispatch::Http::UploadedFile.new(
+          tempfile:,
+          filename:,
+          type: Marcel::MimeType.for(tempfile)
+        )
+
+        template = Template.new(
+          account:,
+          author: current_user,
+          folder: account.default_template_folder,
+          name: arguments['name'].presence || File.basename(filename, '.*')
+        )
+
+        template.save!
+
+        documents, = Templates::CreateAttachments.call(template, { files: [file] }, extract_fields: true)
+        schema = documents.map { |doc| { attachment_uuid: doc.uuid, name: doc.filename.base } }
+
+        if template.fields.blank?
+          template.fields = Templates::ProcessDocument.normalize_attachment_fields(template, documents)
+        end
+
+        template.update!(schema:)
+
+        WebhookUrls.enqueue_events(template, 'template.created')
+
+        SearchEntries.enqueue_reindex(template)
+
+        {
+          content: [
+            {
+              type: 'text',
+              text: {
+                id: template.id,
+                name: template.name,
+                edit_url: Rails.application.routes.url_helpers.edit_template_url(template,
+                                                                                 **Docuseal.default_url_options)
+              }.to_json
+            }
+          ]
+        }
+      end
+    end
+    # rubocop:enable Metrics/AbcSize, Metrics/MethodLength
+  end
+end

lib/mcp/tools/search_documents.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Mcp
+  module Tools
+    module SearchDocuments
+      SCHEMA = {
+        name: 'search_documents',
+        title: 'Search Documents',
+        description: 'Search signed or pending documents by submitter name, email, phone, or template name',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            q: {
+              type: 'string',
+              description: 'Search by submitter name, email, phone, or template name'
+            },
+            limit: {
+              type: 'integer',
+              description: 'The number of results to return (default 10)'
+            }
+          },
+          required: %w[q]
+        },
+        annotations: {
+          readOnlyHint: true,
+          destructiveHint: false,
+          idempotentHint: true,
+          openWorldHint: false
+        }
+      }.freeze
+
+      module_function
+
+      def call(arguments, current_user, current_ability)
+        submissions = Submissions.search(current_user, Submission.accessible_by(current_ability).active,
+                                         arguments['q'], search_template: true)
+
+        limit = arguments.fetch('limit', 10).to_i
+        limit = 10 if limit <= 0
+        limit = [limit, 100].min
+        submissions = submissions.preload(:submitters, :template)
+                                 .order(id: :desc)
+                                 .limit(limit)
+
+        data = submissions.map do |submission|
+          url = Rails.application.routes.url_helpers.submission_url(
+            submission.id, **Docuseal.default_url_options
+          )
+
+          {
+            id: submission.id,
+            template_name: submission.template&.name,
+            status: Submissions::SerializeForApi.build_status(submission, submission.submitters),
+            submitters: submission.submitters.map do |s|
+              { email: s.email, name: s.name, phone: s.phone, status: s.status }
+            end,
+            documents_url: url
+          }
+        end
+
+        { content: [{ type: 'text', text: data.to_json }] }
+      end
+    end
+  end
+end

lib/mcp/tools/search_templates.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Mcp
+  module Tools
+    module SearchTemplates
+      SCHEMA = {
+        name: 'search_templates',
+        title: 'Search Templates',
+        description: 'Search document templates by name',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            q: {
+              type: 'string',
+              description: 'Search query to filter templates by name'
+            },
+            limit: {
+              type: 'integer',
+              description: 'The number of templates to return (default 10)'
+            }
+          },
+          required: %w[q]
+        },
+        annotations: {
+          readOnlyHint: true,
+          destructiveHint: false,
+          idempotentHint: true,
+          openWorldHint: false
+        }
+      }.freeze
+
+      module_function
+
+      def call(arguments, current_user, current_ability)
+        templates = Templates.search(current_user, Template.accessible_by(current_ability).active, arguments['q'])
+
+        limit = arguments.fetch('limit', 10).to_i
+        limit = 10 if limit <= 0
+        limit = [limit, 100].min
+        templates = templates.order(id: :desc).limit(limit)
+
+        {
+          content: [
+            {
+              type: 'text',
+              text: templates.map { |t| { id: t.id, name: t.name } }.to_json
+            }
+          ]
+        }
+      end
+    end
+  end
+end

lib/mcp/tools/send_documents.rb

@@ -0,0 +1,114 @@
+# frozen_string_literal: true
+
+module Mcp
+  module Tools
+    module SendDocuments
+      SCHEMA = {
+        name: 'send_documents',
+        title: 'Send Documents',
+        description: 'Send a document template for signing to specified submitters',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            template_id: {
+              type: 'integer',
+              description: 'Template identifier'
+            },
+            submitters: {
+              type: 'array',
+              description: 'The list of submitters (signers)',
+              items: {
+                type: 'object',
+                properties: {
+                  email: {
+                    type: 'string',
+                    description: 'Submitter email address'
+                  },
+                  name: {
+                    type: 'string',
+                    description: 'Submitter name'
+                  },
+                  phone: {
+                    type: 'string',
+                    description: 'Submitter phone number in E.164 format'
+                  }
+                }
+              }
+            }
+          },
+          required: %w[template_id submitters]
+        },
+        annotations: {
+          readOnlyHint: false,
+          destructiveHint: false,
+          idempotentHint: false,
+          openWorldHint: true
+        }
+      }.freeze
+
+      module_function
+
+      # rubocop:disable Metrics/MethodLength
+      def call(arguments, current_user, current_ability)
+        template = Template.accessible_by(current_ability).find_by(id: arguments['template_id'])
+
+        return { content: [{ type: 'text', text: 'Template not found' }], isError: true } unless template
+
+        current_ability.authorize!(:create, Submission.new(template:, account_id: current_user.account_id))
+
+        return { content: [{ type: 'text', text: 'Template has no fields' }], isError: true } if template.fields.blank?
+
+        submitters = (arguments['submitters'] || []).map do |s|
+          s.slice('email', 'name', 'role', 'phone')
+           .compact_blank
+           .with_indifferent_access
+        end
+
+        submissions = Submissions.create_from_submitters(
+          template:,
+          user: current_user,
+          source: :api,
+          submitters_order: 'random',
+          submissions_attrs: { submitters: submitters },
+          params: { 'send_email' => true, 'submitters' => submitters }
+        )
+
+        if submissions.blank?
+          return { content: [{ type: 'text', text: 'No valid submitters provided' }], isError: true }
+        end
+
+        WebhookUrls.enqueue_events(submissions, 'submission.created')
+
+        Submissions.send_signature_requests(submissions)
+
+        submissions.each do |submission|
+          submission.submitters.each do |submitter|
+            next unless submitter.completed_at?
+
+            ProcessSubmitterCompletionJob.perform_async('submitter_id' => submitter.id,
+                                                        'send_invitation_email' => false)
+          end
+        end
+
+        SearchEntries.enqueue_reindex(submissions)
+
+        submission = submissions.first
+
+        {
+          content: [
+            {
+              type: 'text',
+              text: {
+                id: submission.id,
+                status: 'pending'
+              }.to_json
+            }
+          ]
+        }
+      rescue Submissions::CreateFromSubmitters::BaseError => e
+        { content: [{ type: 'text', text: e.message }], isError: true }
+      end
+      # rubocop:enable Metrics/MethodLength
+    end
+  end
+end

lib/params/submission_create_validator.rb

@@ -47,6 +47,7 @@ module Params
       email_format(params, :bcc_completed, message: 'bcc_completed email is invalid')
       email_format(params, :reply_to, message: 'reply_to email is invalid')
       type(params, :message, Hash)
+      type(params, :variables, Hash)
       type(params, :submitters, Array)
 
       in_path(params, :message, skip_blank: true) do |message_params|

lib/puma/plugin/sidekiq_embed.rb

@@ -37,7 +37,7 @@ Puma::Plugin.create do
       wait_for_redis!
 
       configs = Sidekiq.configure_embed do |config|
-        config.logger.level = Logger::INFO
+        config.logger.level = Rails.env.development? ? Logger::DEBUG : Logger::INFO
         sidekiq_config = YAML.load_file('config/sidekiq.yml')
         sidekiq_config['queues'] << 'fields' if ENV['DEMO'] == 'true'
         config.queues = sidekiq_config['queues']

lib/submissions.rb

@@ -80,10 +80,8 @@ module Submissions
 
   def preload_with_pages(submission)
     ActiveRecord::Associations::Preloader.new(
-      records: [submission],
-      associations: [
-        submission.template_id? ? { template_schema_documents: :blob } : { documents_attachments: :blob }
-      ]
+      records: submission.schema_documents,
+      associations: [:blob]
     ).call
 
     total_pages =
@@ -92,7 +90,7 @@ module Submissions
     if total_pages < PRELOAD_ALL_PAGES_AMOUNT
       ActiveRecord::Associations::Preloader.new(
         records: submission.schema_documents,
-        associations: [:blob, { preview_images_attachments: :blob }]
+        associations: [{ preview_images_attachments: :blob }]
       ).call
     end
 
@@ -117,6 +115,8 @@ module Submissions
                                 preferences:,
                                 sent_at: mark_as_sent ? Time.current : nil)
 
+      Submissions::CreateFromSubmitters.maybe_set_dynamic_documents(submission)
+
       submission.save!
 
       if submission.expire_at?