Merge from docusealco/wip

add SMTP_ENABLE_TLS
fix generation
2026-08-07 07:14:43 +00:00 · 2026-03-23 14:59:53 +02:00 · 2026-03-23 10:02:54 +02:00 · 2026-03-23 09:48:39 +02:00 · 2026-03-22 18:13:41 +02:00 · 2026-03-21 13:37:31 +02:00
245 changed files with 10559 additions and 1922 deletions
@@ -84,7 +84,7 @@ RSpec/AnyInstance:
  Enabled: false

 Metrics/BlockNesting:
-  Max: 5
+  Max: 6

 Rails/I18nLocaleTexts:
  Enabled: false
@@ -106,3 +106,10 @@ Rails/StrongParametersExpect:

 Rails/RedirectBackOrTo:
  Enabled: false
+
+Rails/UnknownEnv:
+  Environments:
+    - development
+    - test
+    - production
+    - local
@@ -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,10 +49,11 @@ 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=15000

 WORKDIR /app

-RUN apk add --no-cache sqlite-dev libpq-dev mariadb-dev vips-dev yaml-dev redis libheif vips-heif gcompat ttf-freefont onnxruntime && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf
+RUN apk add --no-cache sqlite-dev libpq-dev vips-dev yaml-dev redis libheif vips-heif gcompat ttf-freefont onnxruntime && mkdir /fonts && rm /usr/share/fonts/freefont/FreeSans.otf

 RUN addgroup -g 2000 docuseal && adduser -u 2000 -G docuseal -s /bin/sh -D -h /home/docuseal docuseal

@@ -69,7 +71,7 @@ activate = 1' >> /etc/openssl_legacy.cnf

 COPY --chown=docuseal:docuseal ./Gemfile ./Gemfile.lock ./

-RUN apk add --no-cache build-base && bundle install && apk del --no-cache build-base && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf && ln -sf /usr/lib/libonnxruntime.so.1 $(ruby -e "print Dir[Gem::Specification.find_by_name('onnxruntime').gem_dir + '/vendor/*.so'].first")
+RUN apk add --no-cache build-base git && bundle install && apk del --no-cache build-base git && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf && ln -sf /usr/lib/libonnxruntime.so.1 $(ruby -e "print Dir[Gem::Specification.find_by_name('onnxruntime').gem_dir + '/vendor/*.so'].first")

 COPY --chown=docuseal:docuseal ./bin ./bin
 COPY --chown=docuseal:docuseal ./app ./app
@@ -79,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
@@ -4,6 +4,7 @@ source 'https://rubygems.org'

 ruby '4.0.1'

+gem 'addressable'
 gem 'arabic-letter-connector', require: false
 gem 'aws-sdk-s3', require: false
 gem 'aws-sdk-secretsmanager', require: false
@@ -23,18 +24,15 @@ gem 'hexapdf'
 gem 'image_processing'
 gem 'jwt', require: false
 gem 'lograge'
-gem 'mysql2', require: false
 gem 'numo-narray-alt', require: false
 gem 'oj'
 gem 'onnxruntime', require: false
 gem 'pagy'
 gem 'pg', require: false
-gem 'premailer-rails'
 gem 'pretender'
 gem 'puma', require: false
 gem 'rack'
 gem 'rails'
-gem 'rails_autolink'
 gem 'rails-i18n'
 gem 'rotp'
 gem 'rouge', require: false
@@ -45,6 +43,7 @@ gem 'shakapacker'
 gem 'sidekiq'
 gem 'sqlite3', require: false
 gem 'strip_attributes'
+gem 'trilogy', require: false
 gem 'turbo-rails'
 gem 'twitter_cldr', require: false
 gem 'tzinfo-data'
@@ -108,7 +108,7 @@ GEM
      cgi
      rexml
    base64 (0.3.0)
-    bcrypt (3.1.21)
+    bcrypt (3.1.22)
    better_html (2.2.0)
      actionview (>= 7.0)
      activesupport (>= 7.0)
@@ -150,8 +150,6 @@ GEM
      bigdecimal
      rexml
    crass (1.0.6)
-    css_parser (1.21.1)
-      addressable
    csv (3.3.5)
    csv-safe (3.3.1)
      csv (~> 3.0)
@@ -163,16 +161,16 @@ GEM
      irb (~> 1.10)
      reline (>= 0.3.8)
    declarative (0.0.20)
-    devise (4.9.4)
+    devise (5.0.3)
      bcrypt (~> 3.0)
      orm_adapter (~> 0.1)
-      railties (>= 4.1.0)
+      railties (>= 7.0)
      responders
      warden (~> 1.2.3)
-    devise-two-factor (6.3.1)
-      activesupport (>= 7.0, < 8.2)
-      devise (>= 4.0, < 5.0)
-      railties (>= 7.0, < 8.2)
+    devise-two-factor (6.4.0)
+      activesupport (>= 7.2, < 8.2)
+      devise (>= 4.0, < 6.0)
+      railties (>= 7.2, < 8.2)
      rotp (~> 6.0)
    diff-lcs (1.6.2)
    digest-crc (0.7.0)
@@ -181,7 +179,7 @@ GEM
    dotenv (3.2.0)
    drb (2.2.3)
    email_typo (0.2.3)
-    erb (6.0.1)
+    erb (6.0.2)
    erb_lint (0.9.0)
      activesupport
      better_html (>= 2.0.1)
@@ -197,7 +195,7 @@ GEM
      railties (>= 6.1.0)
    faker (3.6.0)
      i18n (>= 1.8.11, < 2)
-    faraday (2.14.0)
+    faraday (2.14.1)
      faraday-net_http (>= 2.0, < 3.5)
      json
      logger
@@ -211,7 +209,6 @@ GEM
      concurrent-ruby (~> 1.1)
      webrick (~> 1.7)
      websocket-driver (~> 0.7)
-    ffi (1.17.3)
    ffi (1.17.3-aarch64-linux-gnu)
    ffi (1.17.3-aarch64-linux-musl)
    ffi (1.17.3-arm64-darwin)
@@ -265,19 +262,19 @@ GEM
      geom2d (~> 0.4, >= 0.4.1)
      openssl (>= 2.2.1)
      strscan (>= 3.1.2)
-    htmlentities (4.4.2)
    i18n (1.14.8)
      concurrent-ruby (~> 1.0)
    image_processing (1.14.0)
      mini_magick (>= 4.9.5, < 6)
      ruby-vips (>= 2.0.17, < 3)
    io-console (0.8.2)
-    irb (1.16.0)
+    irb (1.17.0)
      pp (>= 0.6.0)
+      prism (>= 1.3.0)
      rdoc (>= 4.0.0)
      reline (>= 0.4.2)
    jmespath (1.6.2)
-    json (2.18.0)
+    json (2.19.2)
    jwt (3.1.2)
      base64
    language_server-protocol (3.17.0.5)
@@ -299,7 +296,7 @@ GEM
      activesupport (>= 4)
      railties (>= 4)
      request_store (~> 1.0)
-    loofah (2.25.0)
+    loofah (2.25.1)
      crass (~> 1.0.2)
      nokogiri (>= 1.12.0)
    mail (2.9.0)
@@ -314,12 +311,11 @@ GEM
    mini_magick (5.3.1)
      logger
    mini_mime (1.1.5)
-    minitest (6.0.1)
+    minitest (6.0.2)
+      drb (~> 2.0)
      prism (~> 1.5)
    msgpack (1.8.0)
    multi_json (1.19.1)
-    mysql2 (0.5.7)
-      bigdecimal
    net-http (0.9.1)
      uri (>= 0.11.1)
    net-imap (0.6.2)
@@ -332,22 +328,20 @@ GEM
    net-smtp (0.5.1)
      net-protocol
    nio4r (2.7.5)
-    nokogiri (1.19.0-aarch64-linux-gnu)
+    nokogiri (1.19.2-aarch64-linux-gnu)
      racc (~> 1.4)
-    nokogiri (1.19.0-aarch64-linux-musl)
+    nokogiri (1.19.2-aarch64-linux-musl)
      racc (~> 1.4)
-    nokogiri (1.19.0-arm64-darwin)
+    nokogiri (1.19.2-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.19.0-x86_64-linux-gnu)
+    nokogiri (1.19.2-x86_64-linux-gnu)
      racc (~> 1.4)
-    nokogiri (1.19.0-x86_64-linux-musl)
+    nokogiri (1.19.2-x86_64-linux-musl)
      racc (~> 1.4)
-    numo-narray-alt (0.9.13)
+    numo-narray-alt (0.10.3)
    oj (3.16.13)
      bigdecimal (>= 3.0)
      ostruct (>= 0.2)
-    onnxruntime (0.10.1)
-      ffi
    onnxruntime (0.10.1-aarch64-linux)
      ffi
    onnxruntime (0.10.1-arm64-darwin)
@@ -366,7 +360,6 @@ GEM
    parser (3.3.10.1)
      ast (~> 2.4.1)
      racc
-    pg (1.6.3)
    pg (1.6.3-aarch64-linux)
    pg (1.6.3-aarch64-linux-musl)
    pg (1.6.3-arm64-darwin)
@@ -374,18 +367,10 @@ GEM
    pg (1.6.3-x86_64-linux-musl)
    pp (0.6.3)
      prettyprint
-    premailer (1.27.0)
-      addressable
-      css_parser (>= 1.19.0)
-      htmlentities (>= 4.0.0)
-    premailer-rails (1.12.0)
-      actionmailer (>= 3)
-      net-smtp
-      premailer (~> 1.7, >= 1.7.9)
    pretender (0.6.0)
      actionpack (>= 7.1)
    prettyprint (0.2.0)
-    prism (1.8.0)
+    prism (1.9.0)
    pry (0.16.0)
      coderay (~> 1.1)
      method_source (~> 1.0)
@@ -399,7 +384,7 @@ GEM
    puma (7.2.0)
      nio4r (~> 2.0)
    racc (1.8.1)
-    rack (3.2.4)
+    rack (3.2.5)
    rack-proxy (0.7.7)
      rack
    rack-session (2.1.1)
@@ -427,16 +412,12 @@ GEM
      activesupport (>= 5.0.0)
      minitest
      nokogiri (>= 1.6)
-    rails-html-sanitizer (1.6.2)
-      loofah (~> 2.21)
+    rails-html-sanitizer (1.7.0)
+      loofah (~> 2.25)
      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
    rails-i18n (8.1.0)
      i18n (>= 0.7, < 2)
      railties (>= 8.0.0, < 9)
-    rails_autolink (1.1.8)
-      actionview (> 3.1)
-      activesupport (> 3.1)
-      railties (> 3.1)
    railties (8.1.2)
      actionpack (= 8.1.2)
      activesupport (= 8.1.2)
@@ -448,7 +429,7 @@ GEM
      zeitwerk (~> 2.6)
    rainbow (3.1.1)
    rake (13.3.1)
-    rdoc (7.1.0)
+    rdoc (7.2.0)
      erb
      psych (>= 4.0.0)
      tsort
@@ -564,6 +545,8 @@ GEM
    thor (1.5.0)
    timeout (0.6.0)
    trailblazer-option (0.1.2)
+    trilogy (2.10.0)
+      bigdecimal
    tsort (0.2.0)
    turbo-rails (2.0.21)
      actionpack (>= 7.1.0)
@@ -603,7 +586,7 @@ GEM
    xpath (3.2.0)
      nokogiri (~> 1.8)
    yaml (0.4.0)
-    zeitwerk (2.7.4)
+    zeitwerk (2.7.5)

 PLATFORMS
  aarch64-linux
@@ -613,6 +596,7 @@ PLATFORMS
  x86_64-linux-musl

 DEPENDENCIES
+  addressable
  annotaterb
  arabic-letter-connector
  aws-sdk-s3
@@ -644,20 +628,17 @@ DEPENDENCIES
  jwt
  letter_opener_web
  lograge
-  mysql2
  numo-narray-alt
  oj
  onnxruntime
  pagy
  pg
-  premailer-rails
  pretender
  pry-rails
  puma
  rack
  rails
  rails-i18n
-  rails_autolink
  rotp
  rouge
  rqrcode
@@ -673,6 +654,7 @@ DEPENDENCIES
  simplecov
  sqlite3
  strip_attributes
+  trilogy
  turbo-rails
  twitter_cldr
  tzinfo-data
@@ -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.
@@ -1,7 +1,7 @@
 <h1 align="center" style="border-bottom: none">
  <div>
    <a href="https://www.docuseal.com">
-      <img  alt="DocuSeal" src="https://github.com/docusealco/docuseal/assets/5418788/c12cd051-81cd-4402-bc3a-92f2cfdc1b06" width="80" />
+      <img  alt="DocuSeal" src="https://github.com/user-attachments/assets/38b45682-ffa4-4919-abde-d2d422325c44" width="80" />
      <br>
    </a>
    DocuSeal
@@ -64,7 +64,7 @@ DocuSeal is an open source platform that provides secure and efficient digital d

 |Heroku|Railway|
 |:--:|:---:|
-| [<img alt="Deploy on Heroku" src="https://www.herokucdn.com/deploy/button.svg" height="40">](https://heroku.com/deploy?template=https://github.com/docusealco/docuseal-heroku) | [<img alt="Deploy on Railway" src="https://railway.app/button.svg" height="40">](https://railway.app/template/IGoDnc?referralCode=ruU7JR)|
+| [<img alt="Deploy on Heroku" src="https://www.herokucdn.com/deploy/button.svg" height="40">](https://heroku.com/deploy?template=https://github.com/docusealco/docuseal-heroku) | [<img alt="Deploy on Railway" src="https://railway.app/button.svg" height="40">](https://railway.com/deploy/IGoDnc?referralCode=ruU7JR)|
 |**DigitalOcean**|**Render**|
 | [<img alt="Deploy on DigitalOcean" src="https://www.deploytodo.com/do-btn-blue.svg" height="40">](https://cloud.digitalocean.com/apps/new?repo=https://github.com/docusealco/docuseal-digitalocean/tree/master&refcode=421d50f53990) | [<img alt="Deploy to Render" src="https://render.com/images/deploy-to-render-button.svg" height="40">](https://render.com/deploy?repo=https://github.com/docusealco/docuseal-render)

@@ -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

@@ -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)
@@ -172,7 +172,10 @@ module Api
        Submissions::NormalizeParamUtils.save_default_value_attachments!(attachments, submitters)

        submitters.each do |submitter|
-          SubmissionEvents.create_with_tracking_data(submitter, 'api_complete_form', request) if submitter.completed_at?
+          if submitter.completed_at?
+            Submitters::SubmitValues.maybe_invite_via_field(submitter, request)
+            SubmissionEvents.create_with_tracking_data(submitter, 'api_complete_form', request)
+          end
        end

        submissions
@@ -188,7 +191,7 @@ module Api
          message: %i[subject body],
          submitters: [[:send_email, :send_sms, :completed_redirect_url, :uuid, :name, :email, :role,
                        :completed, :phone, :application_key, :external_id, :reply_to, :go_to_last,
-                        :require_phone_2fa, :require_email_2fa, :order, :invite_by,
+                        :require_phone_2fa, :require_email_2fa, :order, :index, :invite_by,
                        { metadata: {}, values: {}, roles: [], readonly_fields: [], message: %i[subject body],
                          fields: [:name, :uuid, :default_value, :value, :title, :description,
                                   :readonly, :required, :validation_pattern, :invalid_message,
@@ -34,11 +34,16 @@ module Api
      render json: Submitters::SerializeForApi.call(@submitter, with_template: true, with_events: true, params:)
    end

+    # rubocop:disable Metrics/MethodLength
    def update
      if @submitter.completed_at?
        return render json: { error: 'Submitter has already completed the submission.' }, status: :unprocessable_content
      end

+      if @submitter.declined_at?
+        return render json: { error: 'Submitter has already declined the submission.' }, status: :unprocessable_content
+      end
+
      submission = @submitter.submission
      role = submission.template_submitters.find { |e| e['uuid'] == @submitter.uuid }['name']

@@ -60,7 +65,10 @@ module Api

        @submitter.submission.save!

-        SubmissionEvents.create_with_tracking_data(@submitter, 'api_complete_form', request) if @submitter.completed_at?
+        if @submitter.completed_at?
+          Submitters::SubmitValues.maybe_invite_via_field(@submitter, request)
+          SubmissionEvents.create_with_tracking_data(@submitter, 'api_complete_form', request)
+        end
      end

      if @submitter.completed_at?
@@ -78,6 +86,7 @@ module Api

      render json: { error: e.message }, status: :unprocessable_content
    end
+    # rubocop:enable Metrics/MethodLength

    def submitter_params
      submitter_params = params.key?(:submitter) ? params.require(:submitter) : params
@@ -69,6 +69,7 @@ module Api
      SearchEntries.enqueue_reindex(@template)

      WebhookUrls.enqueue_events(@template, 'template.updated')
+      WebhookUrls.enqueue_events(@template, 'template.archived') if archived == true

      render json: @template.as_json(only: %i[id updated_at])
    end
@@ -78,6 +79,8 @@ module Api
        @template.destroy!
      else
        @template.update!(archived_at: Time.current)
+
+        WebhookUrls.enqueue_events(@template, 'template.archived')
      end

      render json: @template.as_json(only: %i[id archived_at])
@@ -107,7 +110,8 @@ module Api
        :external_id,
        :shared_link,
        {
-          submitters: [%i[name uuid is_requester invite_by_uuid optional_invite_by_uuid linked_to_uuid email order]],
+          submitters: [%i[name uuid is_requester invite_by_uuid invite_via_field_uuid
+                          optional_invite_by_uuid linked_to_uuid email order]],
          fields: [[:uuid, :submitter_uuid, :name, :type,
                    :required, :readonly, :default_value,
                    :title, :description, :prefillable,
@@ -116,7 +120,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]] }]]
        }
      ]

@@ -42,10 +42,6 @@ class ApplicationController < ActionController::Base
  end

  def default_url_options
-    if request.domain == 'docuseal.com'
-      return { host: 'docuseal.com', protocol: ENV['FORCE_SSL'].present? ? 'https' : 'http' }
-    end
-
    Docuseal.default_url_options
  end

@@ -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
@@ -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
@@ -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

@@ -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
@@ -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?
@@ -27,20 +27,18 @@ class SubmissionsDownloadController < ApplicationController

    Submissions::EnsureResultGenerated.call(last_submitter)

-    if last_submitter.completed_at < TTL.ago && !signature_valid && !current_user_submitter?(last_submitter)
-      Rollbar.info("TTL: #{last_submitter.id}") if defined?(Rollbar)
+    if !signature_valid && !current_user_submitter?(last_submitter)
+      return head :not_found unless Submitters::AuthorizedForForm.call(@submitter, current_user, request)

-      return head :not_found
+      if last_submitter.completed_at < TTL.ago
+        Rollbar.info("TTL: #{last_submitter.id}") if defined?(Rollbar)
+
+        return head :not_found
+      end
    end

    if params[:combined] == 'true'
-      url = build_combined_url(@submitter)
-
-      if url
-        render json: [url]
-      else
-        head :not_found
-      end
+      respond_with_combined(last_submitter)
    else
      render json: build_urls(last_submitter)
    end
@@ -48,8 +46,18 @@ class SubmissionsDownloadController < ApplicationController

  private

+  def respond_with_combined(submitter)
+    url = build_combined_url(submitter)
+
+    if url
+      render json: [url]
+    else
+      head :not_found
+    end
+  end
+
  def current_user_submitter?(submitter)
-    current_user && current_user.account.submitters.exists?(id: submitter.id)
+    current_user && current_ability.can?(:read, submitter)
  end

  def build_urls(submitter)
@@ -57,7 +65,7 @@ class SubmissionsDownloadController < ApplicationController
                                                          key: AccountConfig::DOCUMENT_FILENAME_FORMAT_KEY)&.value

    Submitters.select_attachments_for_download(submitter).map do |attachment|
-      ActiveStorage::Blob.proxy_url(
+      ActiveStorage::Blob.proxy_path(
        attachment.blob,
        expires_at: FILES_TTL.from_now.to_i,
        filename: Submitters.build_document_filename(submitter, attachment.blob, filename_format)
@@ -75,7 +83,7 @@ class SubmissionsDownloadController < ApplicationController
    filename_format = AccountConfig.find_or_initialize_by(account_id: submitter.account_id,
                                                          key: AccountConfig::DOCUMENT_FILENAME_FORMAT_KEY)&.value

-    ActiveStorage::Blob.proxy_url(
+    ActiveStorage::Blob.proxy_path(
      attachment.blob,
      expires_at: FILES_TTL.from_now.to_i,
      filename: Submitters.build_document_filename(submitter, attachment.blob, filename_format)
@@ -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)
@@ -9,15 +9,15 @@ class SubmitFormController < ApplicationController

  before_action :load_submitter, only: %i[show update completed]
  before_action :maybe_render_locked_page, only: :show
-  before_action :maybe_require_link_2fa, only: %i[show update]
+  before_action :maybe_require_link_2fa, only: %i[show]

  CONFIG_KEYS = [].freeze

  def show
    submission = @submitter.submission

+    return render :email_2fa unless Submitters::AuthorizedForForm.pass_email_2fa?(@submitter, request)
    return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
-    return render :email_2fa if require_email_2fa?(@submitter)

    @form_configs = Submitters::FormConfigs.call(@submitter, CONFIG_KEYS)

@@ -48,7 +48,7 @@ class SubmitFormController < ApplicationController
  end

  def update
-    if require_email_2fa?(@submitter)
+    unless Submitters::AuthorizedForForm.call(@submitter, current_user, request)
      return render json: { error: I18n.t('verification_required_refresh_the_page_and_pass_2fa') },
                    status: :unprocessable_content
    end
@@ -84,7 +84,9 @@ class SubmitFormController < ApplicationController
  def completed
    raise ActionController::RoutingError, I18n.t('not_found') if @submitter.account.archived_at?

-    redirect_to submit_form_path(params[:submit_form_slug]) if require_email_2fa?(@submitter)
+    return if Submitters::AuthorizedForForm.call(@submitter, current_user, request)
+
+    redirect_to submit_form_path(params[:submit_form_slug])
  end

  def success; end
@@ -92,10 +94,7 @@ class SubmitFormController < ApplicationController
  private

  def maybe_require_link_2fa
-    return if @submitter.submission.source != 'link'
-    return unless @submitter.submission.template&.preferences&.dig('shared_link_2fa') == true
-    return if cookies.encrypted[:email_2fa_slug] == @submitter.slug
-    return if @submitter.email == current_user&.email && current_user&.account_id == @submitter.account_id
+    return if Submitters::AuthorizedForForm.pass_link_2fa?(@submitter, current_user, request)

    redirect_to start_form_path(@submitter.submission.template.slug)
  end
@@ -117,12 +116,4 @@ class SubmitFormController < ApplicationController
    ActiveStorage::Attachment.where(record: submission.submitters, name: :attachments)
                             .preload(:blob).index_by(&:uuid)
  end
-
-  def require_email_2fa?(submitter)
-    return false if submitter.submission.template&.preferences&.dig('require_email_2fa') != true &&
-                    submitter.preferences['require_email_2fa'] != true
-    return false if cookies.encrypted[:email_2fa_slug] == submitter.slug
-
-    true
-  end
 end
@@ -11,7 +11,9 @@ class SubmitFormDeclineController < ApplicationController
                                                           submitter.completed_at? ||
                                                           submitter.submission.archived_at? ||
                                                           submitter.submission.expired? ||
-                                                           submitter.submission.template&.archived_at?
+                                                           submitter.submission.template&.archived_at? ||
+                                                           !Submitters::AuthorizedForForm.call(submitter, current_user,
+                                                                                               request)

    ApplicationRecord.transaction do
      submitter.update!(declined_at: Time.current)
@@ -17,7 +17,8 @@ class SubmitFormDownloadController < ApplicationController
                                          @submitter.submission.template&.archived_at? ||
                                          AccountConfig.exists?(account_id: @submitter.account_id,
                                                                key: AccountConfig::ALLOW_TO_PARTIAL_DOWNLOAD_KEY,
-                                                                value: false)
+                                                                value: false) ||
+                                          !Submitters::AuthorizedForForm.call(@submitter, current_user, request)

    last_completed_submitter = @submitter.submission.submitters
                                         .where.not(id: @submitter.id)
@@ -32,7 +33,7 @@ class SubmitFormDownloadController < ApplicationController
      end

    urls = attachments.map do |attachment|
-      ActiveStorage::Blob.proxy_url(attachment.blob, expires_at: FILES_TTL.from_now.to_i)
+      ActiveStorage::Blob.proxy_path(attachment.blob, expires_at: FILES_TTL.from_now.to_i)
    end

    render json: urls
@@ -12,7 +12,8 @@ class SubmitFormDrawSignatureController < ApplicationController

    return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?

-    if @submitter.submission.template&.archived_at? || @submitter.submission.archived_at?
+    if @submitter.submission.template&.archived_at? || @submitter.submission.archived_at? ||
+       !Submitters::AuthorizedForForm.call(@submitter, current_user, request)
      return redirect_to submit_form_path(@submitter.slug)
    end

@@ -19,7 +19,9 @@ class SubmitFormInviteController < ApplicationController
        next unless attrs
        next if attrs[:email].blank?

-        submitter.submission.submitters.create!(**attrs, account_id: submitter.account_id)
+        email = Submissions.normalize_email(attrs[:email])
+
+        submitter.submission.submitters.create!(uuid: attrs[:uuid], email:, account_id: submitter.account_id)

        SubmissionEvents.create_with_tracking_data(submitter, 'invite_party', request, { uuid: submitter.uuid })
      end
@@ -45,7 +47,8 @@ class SubmitFormInviteController < ApplicationController
      !submitter.completed_at? &&
      !submitter.submission.archived_at? &&
      !submitter.submission.expired? &&
-      !submitter.submission.template&.archived_at?
+      !submitter.submission.template&.archived_at? &&
+      Submitters::AuthorizedForForm.call(submitter, current_user, request)
  end

  def filter_invite_submitters(submitter, key = 'invite_by_uuid')
@@ -7,10 +7,12 @@ class SubmitFormValuesController < ApplicationController
  def index
    submitter = Submitter.find_by!(slug: params[:submit_form_slug])

-    return render json: {} if submitter.completed_at? || submitter.declined_at?
-    return render json: {} if submitter.submission.template&.archived_at? ||
+    return render json: {} if submitter.completed_at? ||
+                              submitter.declined_at? ||
+                              submitter.submission.template&.archived_at? ||
                              submitter.submission.archived_at? ||
-                              submitter.submission.expired?
+                              submitter.submission.expired? ||
+                              !Submitters::AuthorizedForForm.call(submitter, current_user, request)

    value = submitter.values[params['field_uuid']]
    attachment = submitter.attachments.where(created_at: params[:after]..).find_by(uuid: value) if value.present?
@@ -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}%"

@@ -6,7 +6,7 @@ class TemplateDocumentsController < ApplicationController
  FILES_TTL = 5.minutes

  def index
-    render json: @template.schema_documents.map { |d| ActiveStorage::Blob.proxy_url(d.blob, expires_at: FILES_TTL.from_now.to_i) }
+    render json: @template.schema_documents.map { |d| ActiveStorage::Blob.proxy_path(d.blob, expires_at: FILES_TTL.from_now.to_i) }
  end

  def create
@@ -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] }
        }
@@ -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
@@ -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
@@ -84,6 +84,8 @@ class TemplatesController < ApplicationController
      else
        @template.update!(archived_at: Time.current)

+        WebhookUrls.enqueue_events(@template, 'template.archived')
+
        I18n.t('template_has_been_archived')
      end

@@ -95,9 +97,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_by_uuid optional_invite_by_uuid email order]],
+        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,
@@ -106,7 +110,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
@@ -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
@@ -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
@@ -22,7 +22,7 @@ class TemplatesRecipientsController < ApplicationController

  def submitters_params
    permit_params = { submitters: [%i[name uuid is_requester optional_invite_by_uuid
-                                      invite_by_uuid linked_to_uuid email option order]] }
+                                      invite_by_uuid invite_via_field_uuid linked_to_uuid email option order]] }

    params.require(:template).permit(permit_params).fetch(:submitters, {}).values.filter_map do |s|
      next if s[:uuid].blank?
@@ -36,6 +36,7 @@ class TemplatesRecipientsController < ApplicationController
      s[:order] = s[:order].to_i if s[:order].present?
      s.delete(:invite_by_uuid) if s[:invite_by_uuid].blank?
      s.delete(:optional_invite_by_uuid) if s[:optional_invite_by_uuid].blank?
+      s.delete(:invite_via_field_uuid) if s[:invite_via_field_uuid].blank?

      normalize_option_value(s)
    end
@@ -53,6 +54,7 @@ class TemplatesRecipientsController < ApplicationController
        attrs.delete(:email)
        attrs.delete(:linked_to_uuid)
        attrs.delete(:invite_by_uuid)
+        attrs.delete(:invite_via_field_uuid)
        attrs.delete(:optional_invite_by_uuid)
      when /\Alinked_to_(.*)\z/
        attrs[:linked_to_uuid] = ::Regexp.last_match(-1)
@@ -6,6 +6,8 @@ class TemplatesRestoreController < ApplicationController
  def create
    @template.update!(archived_at: nil)

+    WebhookUrls.enqueue_events(@template, 'template.updated')
+
    redirect_to template_path(@template), notice: I18n.t('template_has_been_unarchived')
  end
 end
@@ -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?
@@ -56,7 +56,7 @@ class TemplatesUploadsController < ApplicationController
  def create_file_params_from_url
    tempfile = Tempfile.new
    tempfile.binmode
-    tempfile.write(DownloadUtils.call(params[:url]).body)
+    tempfile.write(DownloadUtils.call(params[:url], validate: true).body)
    tempfile.rewind

    filename = URI.decode_www_form_component(params[:filename]) if params[:filename].present?
@@ -15,7 +15,7 @@ class WebhookEventsController < ApplicationController
        Submissions::SerializeForApi.call(@webhook_event.record)
      when 'template.created', 'template.updated'
        Templates::SerializeForApi.call(@webhook_event.record)
-      when 'submission.archived'
+      when 'submission.archived', 'template.archived'
        @webhook_event.record.as_json(only: %i[id archived_at])
      end
  end
@@ -40,6 +40,7 @@ import DashboardDropzone from './elements/dashboard_dropzone'
 import RequiredCheckboxGroup from './elements/required_checkbox_group'
 import PageContainer from './elements/page_container'
 import EmailEditor from './elements/email_editor'
+import MarkdownEditor from './elements/markdown_editor'
 import MountOnClick from './elements/mount_on_click'
 import RemoveOnEvent from './elements/remove_on_event'
 import ScrollTo from './elements/scroll_to'
@@ -131,6 +132,7 @@ safeRegisterElement('check-on-click', CheckOnClick)
 safeRegisterElement('required-checkbox-group', RequiredCheckboxGroup)
 safeRegisterElement('page-container', PageContainer)
 safeRegisterElement('email-editor', EmailEditor)
+safeRegisterElement('markdown-editor', MarkdownEditor)
 safeRegisterElement('mount-on-click', MountOnClick)
 safeRegisterElement('remove-on-event', RemoveOnEvent)
 safeRegisterElement('scroll-to', ScrollTo)
@@ -153,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',
@@ -172,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,
@@ -155,3 +155,7 @@ button[disabled] .enabled, button.btn-disabled .enabled {
 .font-courier {
  font-family: "Courier New", Consolas, "Liberation Mono", monospace, ui-monospace, SFMono-Regular, Menlo, Monaco;
 }
+
+markdown-editor [contenteditable] p {
+  margin-bottom: 18px;
+}
@@ -89,7 +89,7 @@ window.customElements.define('draw-signature', class extends HTMLElement {
  }

  redrawCanvas (oldWidth, oldHeight) {
-    if (this.pad && !this.pad.isEmpty()) {
+    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
      const sx = this.canvas.width / oldWidth
      const sy = this.canvas.height / oldHeight

@@ -64,6 +64,22 @@ export default class extends HTMLElement {
    if (action === 'empty' || action === 'unchecked') return this.isEmpty(actual)
    if (action === 'not_empty' || action === 'checked') return !this.isEmpty(actual)

+    if (['equal', 'not_equal', 'greater_than', 'less_than'].includes(action) && this.sourceEl?.getAttribute('type') === 'number') {
+      if (this.isEmpty(actual) || this.isEmpty(expected)) return false
+
+      const actualNumber = parseFloat(actual)
+      const expectedNumber = parseFloat(expected)
+
+      if (Number.isNaN(actualNumber) || Number.isNaN(expectedNumber)) return false
+
+      if (action === 'equal') return Math.abs(actualNumber - expectedNumber) < Number.EPSILON
+      if (action === 'not_equal') return Math.abs(actualNumber - expectedNumber) > Number.EPSILON
+      if (action === 'greater_than') return actualNumber > expectedNumber
+      if (action === 'less_than') return actualNumber < expectedNumber
+
+      return false
+    }
+
    if (action === 'equal') {
      const list = Array.isArray(actual) ? actual : [actual]
      return list.filter((v) => v !== null && v !== undefined).map(String).includes(String(expected))
@@ -0,0 +1,382 @@
+import { target, targetable } from '@github/catalyst/lib/targetable'
+import { actionable } from '@github/catalyst/lib/actionable'
+
+function loadTiptap () {
+  return Promise.all([
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/core'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-bold'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-italic'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-paragraph'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-text'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-hard-break'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-document'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-link'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-underline'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extensions'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/markdown'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/pm/state'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/pm/view')
+  ]).then(([core, bold, italic, paragraph, text, hardBreak, document, link, underline, extensions, markdown, pmState, pmView]) => ({
+    Editor: core.Editor,
+    Extension: core.Extension,
+    Bold: bold.default || bold,
+    Italic: italic.default || italic,
+    Paragraph: paragraph.default || paragraph,
+    Text: text.default || text,
+    HardBreak: hardBreak.default || hardBreak,
+    Document: document.default || document,
+    Link: link.default || link,
+    Underline: underline.default || underline,
+    UndoRedo: extensions.UndoRedo,
+    Markdown: markdown.Markdown,
+    Plugin: pmState.Plugin,
+    Decoration: pmView.Decoration,
+    DecorationSet: pmView.DecorationSet
+  }))
+}
+
+class LinkTooltip {
+  constructor (container, editor, templateEl) {
+    this.container = container
+    this.editor = editor
+
+    this.tooltip = templateEl.content.firstElementChild.cloneNode(true)
+
+    this.input = this.tooltip.querySelector('input')
+    this.saveButton = this.tooltip.querySelector('[data-role="link-save"]')
+    this.removeButton = this.tooltip.querySelector('[data-role="link-remove"]')
+
+    container.style.position = 'relative'
+    container.appendChild(this.tooltip)
+  }
+
+  isVisible () {
+    return !this.tooltip.classList.contains('hidden')
+  }
+
+  normalizeUrl (url) {
+    if (!url) return url
+    if (/^{/i.test(url)) return url
+    if (/^https?:\/\//i.test(url)) return url
+    if (/^mailto:/i.test(url)) return url
+
+    return `https://${url}`
+  }
+
+  show (url, pos, { focus = false } = {}) {
+    this.input.value = url || ''
+    this.removeButton.classList.toggle('hidden', !url)
+
+    this.tooltip.classList.remove('hidden')
+
+    const coords = this.editor.view.coordsAtPos(pos)
+    const containerRect = this.container.getBoundingClientRect()
+
+    this.tooltip.style.left = `${coords.left - containerRect.left}px`
+    this.tooltip.style.top = `${coords.bottom - containerRect.top + 4}px`
+
+    if (focus) this.input.focus()
+
+    this.saveHandler = () => {
+      const inputUrl = this.input.value.trim()
+
+      if (inputUrl) {
+        this.editor.chain().focus().extendMarkRange('link').setLink({ href: this.normalizeUrl(inputUrl) }).run()
+      }
+
+      this.hide()
+    }
+
+    this.removeHandler = () => {
+      this.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+
+      this.hide()
+    }
+
+    this.keyHandler = (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        this.saveHandler()
+      } else if (e.key === 'Escape') {
+        e.preventDefault()
+        this.hide()
+      }
+    }
+
+    this.saveButton.addEventListener('click', this.saveHandler, { once: true })
+    this.removeButton.addEventListener('click', this.removeHandler, { once: true })
+    this.input.addEventListener('keydown', this.keyHandler)
+  }
+
+  hide () {
+    if (this.saveHandler) {
+      this.saveButton.removeEventListener('click', this.saveHandler)
+      this.saveHandler = null
+    }
+
+    if (this.removeHandler) {
+      this.removeButton.removeEventListener('click', this.removeHandler)
+      this.removeHandler = null
+    }
+
+    if (this.keyHandler) {
+      this.input.removeEventListener('keydown', this.keyHandler)
+      this.keyHandler = null
+    }
+
+    this.tooltip.classList.add('hidden')
+    this.currentMark = null
+  }
+}
+
+export default actionable(targetable(class extends HTMLElement {
+  static [target.static] = [
+    'textarea',
+    'editorElement',
+    'boldButton',
+    'italicButton',
+    'underlineButton',
+    'linkButton',
+    'linkTooltipTemplate'
+  ]
+
+  async connectedCallback () {
+    if (!this.textarea || !this.editorElement) return
+
+    this.textarea.style.display = 'none'
+    this.adjustShortcutsForPlatform()
+
+    const { Editor, Extension, Bold, Italic, Paragraph, Text, HardBreak, UndoRedo, Document, Link, Underline, Markdown, Plugin, Decoration, DecorationSet } = await loadTiptap()
+
+    const buildDecorations = (doc) => {
+      const decorations = []
+      const regex = /\{\{?[a-zA-Z0-9_.-]+\}\}?/g
+
+      doc.descendants((node, pos) => {
+        if (!node.isText) return
+
+        let match
+
+        while ((match = regex.exec(node.text)) !== null) {
+          decorations.push(
+            Decoration.inline(pos + match.index, pos + match.index + match[0].length, {
+              class: 'bg-amber-100 py-0.5 px-1 rounded'
+            })
+          )
+        }
+      })
+
+      return DecorationSet.create(doc, decorations)
+    }
+
+    const VariableHighlight = Extension.create({
+      name: 'variableHighlight',
+      addProseMirrorPlugins () {
+        return [new Plugin({
+          state: {
+            init (_, { doc }) {
+              return buildDecorations(doc)
+            },
+            apply (tr, oldSet) {
+              return tr.docChanged ? buildDecorations(tr.doc) : oldSet
+            }
+          },
+          props: {
+            decorations (state) {
+              return this.getState(state)
+            }
+          }
+        })]
+      }
+    })
+
+    this.editor = new Editor({
+      element: this.editorElement,
+      extensions: [
+        Markdown,
+        Document,
+        Paragraph,
+        Text,
+        Bold,
+        Italic,
+        HardBreak.extend({
+          addKeyboardShortcuts () {
+            return {
+              Enter: () => this.editor.commands.setHardBreak()
+            }
+          }
+        }),
+        UndoRedo,
+        Link.extend({
+          inclusive: true,
+          addKeyboardShortcuts: () => ({
+            'Mod-k': () => {
+              this.toggleLink()
+
+              return true
+            }
+          })
+        }).configure({
+          openOnClick: false,
+          HTMLAttributes: {
+            class: 'link',
+            'data-turbo': 'false',
+            style: 'color: #2563eb; text-decoration: underline; cursor: text;'
+          }
+        }),
+        Underline,
+        VariableHighlight
+      ],
+      content: (this.textarea.value || '').trim().replace(/ *\n/g, '<br>'),
+      contentType: 'markdown',
+      editorProps: {
+        attributes: {
+          style: 'min-height: 220px',
+          dir: 'auto',
+          class: 'p-3 outline-none focus:outline-none'
+        }
+      },
+      onUpdate: ({ editor }) => {
+        this.textarea.value = editor.getMarkdown()
+        this.textarea.dispatchEvent(new Event('input', { bubbles: true }))
+      },
+      onSelectionUpdate: ({ editor }) => {
+        this.updateToolbarState()
+        this.handleLinkTooltip(editor)
+      },
+      onBlur: () => {
+        setTimeout(() => {
+          if (!this.linkTooltip.tooltip.contains(document.activeElement)) {
+            this.linkTooltip.hide()
+          }
+        }, 0)
+      }
+    })
+
+    this.linkTooltip = new LinkTooltip(this, this.editor, this.linkTooltipTemplate)
+  }
+
+  adjustShortcutsForPlatform () {
+    if ((navigator.userAgentData?.platform || navigator.platform)?.toLowerCase()?.includes('mac')) {
+      this.querySelectorAll('.tooltip[data-tip]').forEach(tooltip => {
+        const tip = tooltip.getAttribute('data-tip')
+
+        if (tip && tip.includes('Ctrl')) {
+          tooltip.setAttribute('data-tip', tip.replace(/Ctrl/g, '⌘'))
+        }
+      })
+    }
+  }
+
+  bold (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().toggleBold().run()
+    this.updateToolbarState()
+  }
+
+  italic (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().toggleItalic().run()
+    this.updateToolbarState()
+  }
+
+  underline (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().toggleUnderline().run()
+    this.updateToolbarState()
+  }
+
+  linkSelection (e) {
+    e.preventDefault()
+
+    this.toggleLink()
+    this.updateToolbarState()
+  }
+
+  undo (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().undo().run()
+    this.updateToolbarState()
+  }
+
+  redo (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().redo().run()
+    this.updateToolbarState()
+  }
+
+  updateToolbarState () {
+    this.boldButton.classList.toggle('bg-base-200', this.editor.isActive('bold'))
+    this.italicButton.classList.toggle('bg-base-200', this.editor.isActive('italic'))
+    this.underlineButton.classList.toggle('bg-base-200', this.editor.isActive('underline'))
+    this.linkButton.classList.toggle('bg-base-200', this.editor.isActive('link'))
+  }
+
+  handleLinkTooltip (editor) {
+    const { from } = editor.state.selection
+    const mark = editor.state.doc.resolve(from).marks().find(m => m.type.name === 'link')
+
+    if (!mark) {
+      if (this.linkTooltip.isVisible()) this.linkTooltip.hide()
+
+      return
+    }
+
+    if (this.linkTooltip.isVisible() && this.linkTooltip.currentMark === mark) return
+
+    let linkStart = from
+    const start = editor.state.doc.resolve(from).start()
+
+    for (let i = from - 1; i >= start; i--) {
+      if (editor.state.doc.resolve(i).marks().some(m => m.eq(mark))) {
+        linkStart = i
+      } else {
+        break
+      }
+    }
+
+    this.linkTooltip.hide()
+    this.linkTooltip.show(mark.attrs.href, linkStart > start ? linkStart - 1 : linkStart)
+    this.linkTooltip.currentMark = mark
+  }
+
+  toggleLink () {
+    if (this.editor.isActive('link')) {
+      this.linkTooltip.hide()
+      this.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+      this.updateToolbarState()
+    } else {
+      const { from } = this.editor.state.selection
+
+      this.linkTooltip.hide()
+      this.linkTooltip.show(this.editor.getAttributes('link').href, from, { focus: true })
+    }
+  }
+
+  insertVariable (e) {
+    const variable = e.target.closest('[data-variable]')?.dataset.variable
+
+    if (variable) {
+      const { from, to } = this.editor.state.selection
+
+      if (variable.includes('link') && from !== to) {
+        this.editor.chain().focus().setLink({ href: `{${variable}}` }).run()
+      } else {
+        this.editor.chain().focus().insertContent(`{${variable}}`).run()
+      }
+    }
+  }
+
+  disconnectedCallback () {
+    this.linkTooltip.hide()
+
+    if (this.editor) {
+      this.editor.destroy()
+    }
+  }
+}))
@@ -80,7 +80,7 @@ export default targetable(class extends HTMLElement {
  }

  redrawCanvas (oldWidth, oldHeight) {
-    if (this.pad && !this.pad.isEmpty()) {
+    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
      const sx = this.canvas.width / oldWidth
      const sy = this.canvas.height / oldHeight

@@ -1,12 +1,18 @@
 export default class extends HTMLElement {
  connectedCallback () {
    this.input.addEventListener('change', (event) => {
+      if (!this.target) return
+
+      const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value
+      const dataValue = this.dataset.value === 'false' ? false : this.dataset.value || true
+
      if (this.dataset.attribute) {
-        this.target[this.dataset.attribute] = event.target.checked
+        this.target[this.dataset.attribute] = value === dataValue
      }

      if (this.dataset.className) {
-        this.target.classList.toggle(this.dataset.className, event.target.value !== this.dataset.value)
+        this.target.classList.toggle(this.dataset.className, value !== dataValue)
+
        if (this.dataset.className === 'hidden' && this.target.tagName === 'INPUT') {
          this.target.disabled = event.target.value !== this.dataset.value
        }
@@ -1,10 +1,18 @@
 export default class extends HTMLElement {
  connectedCallback () {
-    const button = this.querySelector('a, button')
+    const button = this.querySelector('a, button, label')
+
+    const target = this.dataset.targetId ? document.getElementById(this.dataset.targetId) : button

    button.addEventListener('click', () => {
      this.dataset.classes.split(' ').forEach((cls) => {
-        button.classList.toggle(cls)
+        if (this.dataset.action === 'remove') {
+          target.classList.remove(cls)
+        } else if (this.dataset.action === 'add') {
+          target.classList.add(cls)
+        } else {
+          target.classList.toggle(cls)
+        }
      })
    })
  }
@@ -12,6 +12,6 @@ export default class extends HTMLElement {
  }

  get button () {
-    return this.querySelector('button')
+    return this.querySelector('button, label')
  }
 }
@@ -182,8 +182,8 @@
    </div>
    <div
      v-else-if="field.type === 'cells'"
-      class="w-full flex items-center"
-      :class="{ 'justify-end': field.preferences?.align === 'right', ...fontClasses }"
+      class="w-full flex"
+      :class="{ 'justify-end': field.preferences?.align === 'right', ...alignClasses, ...fontClasses }"
    >
      <div
        v-for="(char, index) in modelValue"
@@ -161,6 +161,11 @@ export default {
      required: false,
      default: false
    },
+    fetchOptions: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
    completedButton: {
      type: Object,
      required: false,
@@ -214,7 +219,10 @@ export default {
    download () {
      this.isDownloading = true

-      fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`).then(async (response) => {
+      fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`, {
+        method: 'GET',
+        ...this.fetchOptions
+      }).then(async (response) => {
        if (response.ok) {
          const urls = await response.json()
          const isMobileSafariIos = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit/i.test(navigator.userAgent)
@@ -42,7 +42,7 @@
      <MarkdownContent :string="field.description" />
    </div>
    <AppearsOn :field="field" />
-    <div class="text-center">
+    <div class="text-center flex">
      <input
        :id="field.uuid"
        ref="input"
@@ -395,7 +395,9 @@
            v-model="values[currentField.uuid]"
            :reason="values[currentField.preferences?.reason_field_uuid]"
            :field="currentField"
+            :values="values"
            :previous-value="previousSignatureValueFor(currentField) || previousSignatureValue"
+            :touch-attachment-uuid="previousSignatureValue"
            :with-typed-signature="withTypedSignature"
            :remember-signature="rememberSignature"
            :attachments-index="attachmentsIndex"
@@ -407,6 +409,7 @@
            :submitter="submitter"
            :show-field-names="showFieldNames"
            @update:reason="values[currentField.preferences?.reason_field_uuid] = $event"
+            @touch-attachment="attachmentsIndex[previousSignatureValue] ? attachmentsIndex[previousSignatureValue].created_at = new Date() : null"
            @attached="attachments.push($event)"
            @start="scrollIntoField(currentField)"
            @minimize="minimizeForm"
@@ -418,6 +421,7 @@
            v-model="values[currentField.uuid]"
            :field="currentField"
            :dry-run="dryRun"
+            :submitter="submitter"
            :previous-value="previousInitialsValue"
            :attachments-index="attachmentsIndex"
            :show-field-names="showFieldNames"
@@ -526,6 +530,7 @@
        v-else-if="isInvite"
        :submitters="inviteSubmitters"
        :optional-submitters="optionalInviteSubmitters"
+        :fetch-options="fetchOptions"
        :submitter-slug="submitterSlug"
        :authenticity-token="authenticityToken"
        :url="baseUrl + submitPath + '/invite'"
@@ -539,6 +544,7 @@
        :has-signature-fields="stepFields.some((fields) => fields.some((f) => ['signature', 'initials'].includes(f.type)))"
        :has-multiple-documents="hasMultipleDocuments"
        :completed-button="completedRedirectUrl ? {} : completedButton"
+        :fetch-options="fetchOptions"
        :completed-message="completedRedirectUrl ? {} : completedMessage"
        :with-send-copy-button="withSendCopyButton && !completedRedirectUrl"
        :with-download-button="withDownloadButton && !completedRedirectUrl && !dryRun"
@@ -551,14 +557,18 @@
        class="flex justify-center mt-3 sm:mt-4 mb-0 sm:mb-1 select-none"
      >
        <div class="flex items-center flex-wrap steps-progress">
-          <a
+          <template
            v-for="(step, index) in stepFields"
            :key="step[0].uuid"
-            href="#"
-            class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1"
-            :class="{ 'bg-base-300 steps-progress-current': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
-            @click.prevent="isCompleted ? '' : [saveStep(), goToStep(index, true)]"
-          />
+          >
+            <a
+              v-if="!onlyRequiredFields || step.some((f) => f.required)"
+              href="#"
+              class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1"
+              :class="{ 'bg-base-300 steps-progress-current': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
+              @click.prevent="isCompleted ? '' : [saveStep(), goToStep(index, true)]"
+            />
+          </template>
        </div>
      </div>
      <div
@@ -670,6 +680,11 @@ export default {
      required: false,
      default: () => []
    },
+    fetchOptions: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
    optionalInviteSubmitters: {
      type: Array,
      required: false,
@@ -690,6 +705,11 @@ export default {
      required: false,
      default: false
    },
+    onlyRequiredFields: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    requireSigningReason: {
      type: Boolean,
      required: false,
@@ -926,10 +946,12 @@ export default {
      }, {})
    },
    attachmentConditionsIndex () {
+      const cache = {}
+
      return this.schema.reduce((acc, item) => {
        if (item.conditions?.length) {
          if (item.conditions.every((c) => this.fieldsUuidIndex[c.field_uuid])) {
-            acc[item.attachment_uuid] = this.checkFieldConditions(item)
+            acc[item.attachment_uuid] = this.checkFieldConditions(item, cache)
          } else {
            acc[item.attachment_uuid] = true
          }
@@ -950,7 +972,13 @@ export default {
    submitButtonText () {
      if (this.alwaysMinimize) {
        return this.t('submit')
-      } else if (this.stepFields.length === this.currentStep + 1) {
+      } else if (!this.onlyRequiredFields && this.stepFields.length === this.currentStep + 1) {
+        if (this.currentField.type === 'signature') {
+          return this.t('sign_and_complete')
+        } else {
+          return this.t('complete')
+        }
+      } else if (this.onlyRequiredFields && !this.findNextStep(this.currentStep)) {
        if (this.currentField.type === 'signature') {
          return this.t('sign_and_complete')
        } else {
@@ -996,7 +1024,9 @@ export default {
    },
    previousInitialsValue () {
      if (this.reuseSignature !== false) {
-        const initialsField = [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])
+        const initialsField = this.fields.findLast
+          ? this.fields.findLast((field) => field.type === 'initials' && !!this.values[field.uuid])
+          : [...this.fields].reverse().find((field) => field.type === 'initials' && !!this.values[field.uuid])

        return this.values[initialsField?.uuid]
      } else {
@@ -1023,7 +1053,9 @@ export default {
      return this.readonlyFields.filter((f) => f.conditions?.length)
    },
    readonlyFields () {
-      return this.fields.filter((f) => f.readonly && this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f))
+      const cache = {}
+
+      return this.fields.filter((f) => f.readonly && this.checkFieldConditions(f, cache) && this.checkFieldDocumentsConditions(f))
    },
    stepFields () {
      const verificationFields = []
@@ -1078,10 +1110,12 @@ export default {
        sortedFields.push(verificationFields.pop())
      }

+      const cache = {}
+
      return sortedFields.reduce((acc, f) => {
        const prevStep = acc[acc.length - 1]

-        if (this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f)) {
+        if (this.checkFieldConditions(f, cache) && this.checkFieldDocumentsConditions(f)) {
          if (f.type === 'checkbox' && Array.isArray(prevStep) && prevStep[0].type === 'checkbox' && !f.description) {
            prevStep.push(f)
          } else {
@@ -1093,7 +1127,9 @@ export default {
      }, [])
    },
    formulaFields () {
-      return this.fields.filter((f) => f.preferences?.formula && f.type !== 'payment' && this.checkFieldConditions(f) && this.checkFieldDocumentsConditions(f))
+      const cache = {}
+
+      return this.fields.filter((f) => f.preferences?.formula && f.type !== 'payment' && this.checkFieldConditions(f, cache) && this.checkFieldDocumentsConditions(f))
    },
    attachmentsIndex () {
      return this.attachments.reduce((acc, a) => {
@@ -1155,15 +1191,17 @@ export default {
      this.currentStep = Math.max(stepIndex, 0)
    } else if (this.goToLast) {
      const requiredEmptyStepIndex = this.stepFields.indexOf(this.stepFields.find((fields) => fields.some((f) => f.required && !this.submittedValues[f.uuid])))
-      const lastFilledStepIndex = this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.submittedValues[f.uuid]))) + 1
+      const lastFilledStepIndex = this.stepFields.indexOf(this.stepFields.findLast
+        ? this.stepFields.findLast((fields) => fields.some((f) => !!this.submittedValues[f.uuid]))
+        : [...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.submittedValues[f.uuid]))) + 1

      const indexesList = [this.stepFields.length - 1]

-      if (requiredEmptyStepIndex !== -1) {
+      if (requiredEmptyStepIndex !== -1 && (!this.onlyRequiredFields || this.stepFields[requiredEmptyStepIndex].some((f) => f.required))) {
        indexesList.push(requiredEmptyStepIndex)
      }

-      if (lastFilledStepIndex !== -1) {
+      if (lastFilledStepIndex !== -1 && (!this.onlyRequiredFields || this.stepFields[lastFilledStepIndex].some((f) => f.required))) {
        indexesList.push(lastFilledStepIndex)
      }

@@ -1223,27 +1261,35 @@ export default {
        return true
      }
    },
-    checkFieldConditions (field) {
+    checkFieldConditions (field, cache = {}) {
+      const cacheKey = field.uuid || field.attachment_uuid
+
+      if (cache[cacheKey] !== undefined) {
+        return cache[cacheKey]
+      }
+
      if (field.conditions?.length) {
        const result = field.conditions.reduce((acc, cond) => {
          if (cond.operation === 'or') {
-            acc.push(acc.pop() || this.checkFieldCondition(cond))
+            acc.push(acc.pop() || this.checkFieldCondition(cond, cache))
          } else {
-            acc.push(this.checkFieldCondition(cond))
+            acc.push(this.checkFieldCondition(cond, cache))
          }

          return acc
        }, [])

-        return !result.includes(false)
+        cache[cacheKey] = !result.includes(false)
      } else {
-        return true
+        cache[cacheKey] = true
      }
+
+      return cache[cacheKey]
    },
-    checkFieldCondition (condition) {
+    checkFieldCondition (condition, cache = {}) {
      const field = this.fieldsUuidIndex[condition.field_uuid]

-      if (['not_empty', 'checked', 'equal', 'contains'].includes(condition.action) && field && !this.checkFieldConditions(field)) {
+      if (['not_empty', 'checked', 'equal', 'contains', 'greater_than', 'less_than'].includes(condition.action) && field && !this.checkFieldConditions(field, cache)) {
        return false
      }

@@ -1253,6 +1299,22 @@ export default {
        return isEmpty(this.values[condition.field_uuid] ?? defaultValue)
      } else if (['not_empty', 'checked'].includes(condition.action)) {
        return !isEmpty(this.values[condition.field_uuid] ?? defaultValue)
+      } else if (field?.type === 'number' && ['equal', 'not_equal', 'greater_than', 'less_than'].includes(condition.action)) {
+        const value = this.values[condition.field_uuid] ?? defaultValue
+
+        if (isEmpty(value) || isEmpty(condition.value)) return false
+
+        const actual = parseFloat(value)
+        const expected = parseFloat(condition.value)
+
+        if (Number.isNaN(actual) || Number.isNaN(expected)) return false
+
+        if (condition.action === 'equal') return Math.abs(actual - expected) < Number.EPSILON
+        if (condition.action === 'not_equal') return Math.abs(actual - expected) > Number.EPSILON
+        if (condition.action === 'greater_than') return actual > expected
+        if (condition.action === 'less_than') return actual < expected
+
+        return false
      } else if (['equal', 'contains'].includes(condition.action) && field) {
        if (field.options) {
          const option = field.options.find((o) => o.uuid === condition.value)
@@ -1292,6 +1354,13 @@ export default {
        return `${this.t('option')} ${index + 1}`
      }
    },
+    findNextStep (currentStepIndex) {
+      if (this.onlyRequiredFields) {
+        return this.stepFields.find((step, index) => index > currentStepIndex && step.some((f) => f.required))
+      } else {
+        return this.stepFields[currentStepIndex + 1]
+      }
+    },
    maybeTrackEmailClick () {
      const { queryParams } = this

@@ -1353,9 +1422,9 @@ export default {
    },
    previousSignatureValueFor (field) {
      if (this.reuseSignature !== false) {
-        const signatureField = [...this.fields].reverse().find((f) =>
-          f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid]
-        )
+        const signatureField = this.fields.findLast
+          ? this.fields.findLast((f) => f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid])
+          : [...this.fields].reverse().find((f) => f.type === 'signature' && field.preferences?.format === f.preferences?.format && !!this.values[f.uuid])

        return this.values[signatureField?.uuid]
      } else {
@@ -1405,7 +1474,8 @@ export default {
      } else {
        return fetch(this.baseUrl + this.submitPath, {
          method: 'POST',
-          body: formData || new FormData(this.$refs.form)
+          body: formData || new FormData(this.$refs.form),
+          ...this.fetchOptions
        }).then((response) => {
          if (response.status === 200) {
            currentFieldUuids.forEach((fieldUuid) => {
@@ -1438,7 +1508,7 @@ export default {
        this.isSubmittingComplete = true
      }

-      const submitStep = this.currentStep
+      const submitStepIndex = this.currentStep

      const stepPromise = ['signature', 'phone', 'initials', 'payment', 'verification', 'kba'].includes(this.currentField.type)
        ? this.$refs.currentStep.submit
@@ -1446,7 +1516,7 @@ export default {

      stepPromise().then(async () => {
        const emptyRequiredField = this.stepFields.find((fields, index) => {
-          if (forceComplete ? index === submitStep : index >= submitStep) {
+          if (forceComplete ? index === submitStepIndex : index >= submitStepIndex) {
            return false
          }

@@ -1456,7 +1526,7 @@ export default {
        })

        const formData = new FormData(this.$refs.form)
-        const isLastStep = (submitStep === this.stepFields.length - 1) || forceComplete
+        const isLastStep = (this.onlyRequiredFields ? !this.findNextStep(submitStepIndex) : (submitStepIndex === this.stepFields.length - 1)) || forceComplete

        if (isLastStep && !emptyRequiredField && !this.inviteSubmitters.length && !this.optionalInviteSubmitters.length) {
          formData.append('completed', 'true')
@@ -1500,7 +1570,7 @@ export default {
            return Promise.reject(new Error(data.error))
          }

-          const nextStep = (isLastStep && emptyRequiredField) || (forceComplete ? null : this.stepFields[submitStep + 1])
+          const nextStep = (isLastStep && emptyRequiredField) || (forceComplete ? null : this.findNextStep(submitStepIndex))

          if (nextStep) {
            if (this.alwaysMinimize) {
@@ -1,7 +1,7 @@
 const en = {
  kba: 'KBA',
  please_upload_an_image_file: 'Please upload an image file',
-  must_be_characters_length: 'Must be {number} characters length',
+  must_be_characters_length: 'Must be {number} characters long',
  complete_all_required_fields_to_proceed_with_identity_verification: 'Complete all required fields to proceed with identity verification.',
  verify_id: 'Verify ID',
  identity_verification: 'Identity verification',
@@ -97,6 +97,7 @@ const en = {
  upload: 'Upload',
  files: 'Files',
  signature_is_too_small_or_simple_please_redraw: 'Signature is too small or simple. Please redraw.',
+  browser_privacy_settings_block_canvas: 'Your browser privacy settings restrict use of the drawing canvas. Please use a different browser or device, or disable privacy settings that block canvas in order to sign.',
  wait_countdown_seconds: 'Wait {countdown} seconds'
 }

@@ -199,6 +200,7 @@ const es = {
  upload: 'Subir',
  files: 'Archivos',
  signature_is_too_small_or_simple_please_redraw: 'La firma es demasiado pequeña o simple. Por favor, vuelve a dibujarla.',
+  browser_privacy_settings_block_canvas: 'La configuración de privacidad de su navegador restringe el uso del lienzo de dibujo. Utilice un navegador o dispositivo diferente, o desactive la configuración de privacidad que bloquea el lienzo para firmar.',
  wait_countdown_seconds: 'Espera {countdown} segundos'
 }

@@ -301,6 +303,7 @@ const it = {
  upload: 'Carica',
  files: 'File',
  signature_is_too_small_or_simple_please_redraw: 'La firma è troppo piccola o semplice. Ridisegnala, per favore.',
+  browser_privacy_settings_block_canvas: 'Le impostazioni sulla privacy del browser limitano l\'uso dell\'area di disegno. Utilizza un browser o dispositivo diverso oppure disattiva le impostazioni sulla privacy che bloccano il canvas per firmare.',
  wait_countdown_seconds: 'Attendi {countdown} secondi'
 }

@@ -403,6 +406,7 @@ const de = {
  upload: 'Hochladen',
  files: 'Dateien',
  signature_is_too_small_or_simple_please_redraw: 'Die Unterschrift ist zu klein oder zu einfach. Bitte neu zeichnen.',
+  browser_privacy_settings_block_canvas: 'Die Datenschutzeinstellungen Ihres Browsers schränken die Nutzung der Zeichenfläche ein. Bitte verwenden Sie einen anderen Browser oder ein anderes Gerät oder deaktivieren Sie die Datenschutzeinstellungen, die Canvas blockieren, um zu unterschreiben.',
  wait_countdown_seconds: 'Bitte {countdown} Sekunden warten'
 }

@@ -505,6 +509,7 @@ const fr = {
  upload: 'Téléverser',
  files: 'Fichiers',
  signature_is_too_small_or_simple_please_redraw: 'La signature est trop petite ou trop simple. Veuillez la redessiner.',
+  browser_privacy_settings_block_canvas: 'Les paramètres de confidentialité de votre navigateur empêchent l\'utilisation du canevas de dessin. Veuillez utiliser un autre navigateur ou appareil, ou désactiver les paramètres de confidentialité qui bloquent le canevas pour signer.',
  wait_countdown_seconds: 'Veuillez patienter {countdown} secondes'
 }

@@ -607,6 +612,7 @@ const pl = {
  upload: 'Przesyłanie',
  files: 'Pliki',
  signature_is_too_small_or_simple_please_redraw: 'Podpis jest zbyt mały lub zbyt prosty. Proszę narysować go ponownie.',
+  browser_privacy_settings_block_canvas: 'Ustawienia prywatności przeglądarki blokują użycie obszaru rysowania. Użyj innej przeglądarki lub urządzenia albo wyłącz ustawienia prywatności blokujące canvas, aby podpisać.',
  wait_countdown_seconds: 'Poczekaj {countdown} sekund'
 }

@@ -709,6 +715,7 @@ const uk = {
  upload: 'Завантажити',
  files: 'Файли',
  signature_is_too_small_or_simple_please_redraw: 'Підпис занадто маленький або надто простий. Будь ласка, перемалюйте.',
+  browser_privacy_settings_block_canvas: 'Налаштування конфіденційності вашого браузера блокують використання полотна для малювання. Будь ласка, скористайтеся іншим браузером або пристроєм, або вимкніть налаштування конфіденційності, що блокують canvas, щоб підписати.',
  wait_countdown_seconds: 'Зачекайте {countdown} секунд'
 }

@@ -811,6 +818,7 @@ const cs = {
  upload: 'Nahrát',
  files: 'Soubory',
  signature_is_too_small_or_simple_please_redraw: 'Podpis je příliš malý nebo jednoduchý. Nakreslete jej prosím znovu.',
+  browser_privacy_settings_block_canvas: 'Nastavení soukromí vašeho prohlížeče omezuje použití kreslicího plátna. Použijte prosím jiný prohlížeč nebo zařízení, nebo vypněte nastavení soukromí blokující canvas pro podepsání.',
  wait_countdown_seconds: 'Počkejte {countdown} sekund'
 }

@@ -913,6 +921,7 @@ const pt = {
  upload: 'Carregar',
  files: 'Arquivos',
  signature_is_too_small_or_simple_please_redraw: 'A assinatura é muito pequena ou simples. Por favor, redesenhe.',
+  browser_privacy_settings_block_canvas: 'As configurações de privacidade do seu navegador restringem o uso da área de desenho. Use um navegador ou dispositivo diferente, ou desative as configurações de privacidade que bloqueiam o canvas para assinar.',
  wait_countdown_seconds: 'Aguarde {countdown} segundos'
 }

@@ -1015,6 +1024,7 @@ const he = {
  upload: 'העלאה',
  files: 'קבצים',
  signature_is_too_small_or_simple_please_redraw: 'החתימה קטנה או פשוטה מדי. אנא חתום מחדש.',
+  browser_privacy_settings_block_canvas: 'הגדרות הפרטיות של הדפדפן שלך מגבילות את השימוש באזור הציור. אנא השתמש בדפדפן או מכשיר אחר, או בטל את הגדרות הפרטיות החוסמות canvas כדי לחתום.',
  wait_countdown_seconds: 'המתן {countdown} שניות'
 }

@@ -1117,6 +1127,7 @@ const nl = {
  upload: 'Uploaden',
  files: 'Bestanden',
  signature_is_too_small_or_simple_please_redraw: 'De handtekening is te klein of te eenvoudig. Teken opnieuw.',
+  browser_privacy_settings_block_canvas: 'De privacyinstellingen van uw browser beperken het gebruik van het tekenveld. Gebruik een andere browser of ander apparaat, of schakel de privacyinstellingen uit die canvas blokkeren om te ondertekenen.',
  wait_countdown_seconds: 'Wacht {countdown} seconden'
 }

@@ -1219,6 +1230,7 @@ const ar = {
  upload: 'تحميل',
  files: 'الملفات',
  signature_is_too_small_or_simple_please_redraw: 'التوقيع صغير جدًا أو بسيط جدًا. يرجى إعادة رسمه.',
+  browser_privacy_settings_block_canvas: 'إعدادات الخصوصية في متصفحك تمنع استخدام لوحة الرسم. يرجى استخدام متصفح أو جهاز مختلف، أو تعطيل إعدادات الخصوصية التي تحظر canvas للتوقيع.',
  wait_countdown_seconds: 'انتظر {countdown} ثانية'
 }

@@ -1321,6 +1333,7 @@ const ko = {
  upload: '업로드',
  files: '파일',
  signature_is_too_small_or_simple_please_redraw: '서명이 너무 작거나 단순합니다. 다시 그려주세요.',
+  browser_privacy_settings_block_canvas: '브라우저 개인정보 보호 설정으로 인해 그리기 캔버스를 사용할 수 없습니다. 다른 브라우저나 기기를 사용하거나, 서명을 위해 캔버스를 차단하는 개인정보 보호 설정을 비활성화해 주세요.',
  wait_countdown_seconds: '{countdown}초 기다리세요'
 }

@@ -1423,6 +1436,7 @@ const ja = {
  upload: 'アップロード',
  files: 'ファイル',
  signature_is_too_small_or_simple_please_redraw: '署名が小さすぎるか単純すぎます。もう一度描いてください。',
+  browser_privacy_settings_block_canvas: 'ブラウザのプライバシー設定により、描画キャンバスの使用が制限されています。別のブラウザまたはデバイスを使用するか、署名するためにキャンバスをブロックするプライバシー設定を無効にしてください。',
  wait_countdown_seconds: '{countdown} 秒お待ちください'
 }

@@ -150,6 +150,7 @@

 <script>
 import { cropCanvasAndExportToPNG } from './crop_canvas'
+import { isCanvasBlocked } from './validate_signature'
 import { IconReload, IconTextSize, IconUpload, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
@@ -175,6 +176,10 @@ export default {
      type: Object,
      required: true
    },
+    submitter: {
+      type: Object,
+      required: true
+    },
    dryRun: {
      type: Boolean,
      required: false,
@@ -257,6 +262,14 @@ export default {

            this.$refs.canvas.getContext('2d').scale(scale, scale)

+            if (!this.isDrawInitials) {
+              this.$nextTick(() => {
+                if (this.$refs.textInput) {
+                  this.initTextInitial()
+                }
+              })
+            }
+
            this.intersectionObserver?.disconnect()
          }
        })
@@ -332,12 +345,29 @@ export default {

      if (!this.isDrawInitials) {
        this.$nextTick(() => {
-          this.$refs.textInput.focus()
+          if (this.$refs.textInput) {
+            if (!this.submitter.name) {
+              this.$refs.textInput.focus()
+            }

-          this.$emit('start')
+            this.initTextInitial()
+
+            this.$emit('start')
+          }
        })
      }
    },
+    initTextInitial () {
+      if (this.submitter.name) {
+        const parts = this.submitter.name.trim().split(/\s+/)
+
+        this.$refs.textInput.value = (parts.length > 1 ? [parts[0], parts[parts.length - 1]] : parts).map((part) => part[0]?.toUpperCase() || '').join('')
+      }
+
+      if (this.$refs.textInput.value) {
+        this.updateWrittenInitials({ target: this.$refs.textInput })
+      }
+    },
    async submit () {
      if (this.modelValue || this.computedPreviousValue) {
        if (this.computedPreviousValue) {
@@ -392,7 +422,15 @@ export default {
          }
        }).catch((error) => {
          if (this.field.required === true) {
-            alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+            if (isCanvasBlocked()) {
+              alert(this.t('browser_privacy_settings_block_canvas'))
+
+              if (window.Rollbar) {
+                window.Rollbar.info('Canvas blocked')
+              }
+            } else {
+              alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+            }

            return reject(error)
          } else {
@@ -78,6 +78,11 @@ export default {
      type: Array,
      required: true
    },
+    fetchOptions: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
    optionalSubmitters: {
      type: Array,
      required: false,
@@ -108,7 +113,8 @@ export default {

      return fetch(this.url, {
        method: 'POST',
-        body: new FormData(this.$refs.form)
+        body: new FormData(this.$refs.form),
+        ...this.fetchOptions
      }).then((response) => {
        if (response.status === 200) {
          this.$emit('success')
@@ -497,10 +497,10 @@ export default {
          body: JSON.stringify(payload)
        })

-        if (!resp.ok) throw new Error('Failed to start KBA')
-
        const data = await resp.json()

+        if (!resp.ok) throw new Error(data.error || 'Failed to start KBA')
+
        if (data.result && data.result.action === 'FAIL') {
          if (data.result.detail === 'NO MATCH') {
            throw new Error('Unfortunately, we were unable to start Knowledge Based Authentication with the details provided. Please review and confirm that all your personal details are correct.')
@@ -555,7 +555,11 @@ export default {
        const data = await resp.json()

        if (data.result?.action !== 'PASS') {
-          this.error = 'Knowledge Based Authentication Failed - make sure you provide correct answers for the Knowledge Based authentication.'
+          if (data.result?.issues?.length) {
+            this.error = `Knowledge Based Authentication Failed - make sure you provide correct details for the Knowledge Based authentication: ${data.result.issues.join(', ')}`
+          } else {
+            this.error = 'Knowledge Based Authentication Failed - make sure you provide correct answers for the Knowledge Based authentication.'
+          }

          throw new Error('Knowledge Based Authentication Failed')
        }
@@ -127,6 +127,12 @@
      type="hidden"
      :name="`values[${field.uuid}]`"
    >
+    <input
+      v-if="isTouchAttachment"
+      :value="touchAttachmentUuid"
+      type="hidden"
+      name="touch_attachment_uuid"
+    >
    <img
      v-if="modelValue || computedPreviousValue"
      :src="attachmentsIndex[modelValue || computedPreviousValue].url"
@@ -303,14 +309,14 @@
 <script>
 import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2, IconQrcode, IconX } from '@tabler/icons-vue'
 import { cropCanvasAndExportToPNG } from './crop_canvas'
-import { isValidSignatureCanvas } from './validate_signature'
+import { isValidSignatureCanvas, isCanvasBlocked } from './validate_signature'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
 import FileDropzone from './dropzone'
 import MarkdownContent from './markdown_content'
 import { v4 } from 'uuid'

-let isFontLoaded = false
+let fontLoadPromise = null

 const scale = 3

@@ -334,6 +340,10 @@ export default {
      type: Object,
      required: true
    },
+    values: {
+      type: Object,
+      required: true
+    },
    requireSigningReason: {
      type: Boolean,
      required: false,
@@ -388,6 +398,11 @@ export default {
      required: false,
      default: ''
    },
+    touchAttachmentUuid: {
+      type: String,
+      required: false,
+      default: ''
+    },
    reason: {
      type: String,
      required: false,
@@ -399,13 +414,14 @@ export default {
      default: ''
    }
  },
-  emits: ['attached', 'update:model-value', 'start', 'minimize', 'update:reason'],
+  emits: ['attached', 'update:model-value', 'start', 'minimize', 'update:reason', 'touch-attachment'],
  data () {
    return {
      isSignatureStarted: false,
      isShowQr: false,
      isOtherReason: false,
      isUsePreviousValue: true,
+      isTouchAttachment: false,
      isTextSignature: this.field.preferences?.format === 'typed' || this.field.preferences?.format === 'typed_or_upload',
      uploadImageInputKey: Math.random().toString()
    }
@@ -466,6 +482,14 @@ export default {
          if (entry.isIntersecting) {
            this.setCanvasSize()

+            if (this.isTextSignature) {
+              this.$nextTick(() => {
+                if (this.$refs.textInput) {
+                  this.initTypedSignature()
+                }
+              })
+            }
+
            this.intersectionObserver?.disconnect()
          }
        })
@@ -488,6 +512,10 @@ export default {
      })

      this.resizeObserver.observe(this.$refs.canvas.parentNode)
+
+      if (this.isTextSignature) {
+        this.loadFont()
+      }
    }
  },
  beforeUnmount () {
@@ -514,7 +542,7 @@ export default {
    redrawCanvas (oldWidth, oldHeight) {
      const canvas = this.$refs.canvas

-      if (this.pad && !this.isTextSignature && !this.pad.isEmpty()) {
+      if (this.pad && !this.isTextSignature && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
        const sx = canvas.width / oldWidth
        const sy = canvas.height / oldHeight

@@ -525,7 +553,7 @@ export default {

        this.pad.fromData(scaledData)
      } else if (this.isTextSignature && this.$refs.textInput) {
-        this.updateWrittenSignature({ target: { value: this.$refs.textInput.value } })
+        this.updateWrittenSignature({ target: this.$refs.textInput })
      }
    },
    remove () {
@@ -535,17 +563,17 @@ export default {
      this.isSignatureStarted = false
    },
    loadFont () {
-      if (!isFontLoaded) {
+      if (!fontLoadPromise) {
        const font = new FontFace('Dancing Script', `url(${this.baseUrl}/fonts/DancingScript-Regular.otf) format("opentype")`)

-        font.load().then((loadedFont) => {
+        fontLoadPromise = font.load().then((loadedFont) => {
          document.fonts.add(loadedFont)
-
-          isFontLoaded = true
        }).catch((error) => {
          console.error('Font loading failed:', error)
        })
      }
+
+      return fontLoadPromise
    },
    showQr () {
      this.isShowQr = true
@@ -645,14 +673,29 @@ export default {

      if (this.isTextSignature) {
        this.$nextTick(() => {
-          this.$refs.textInput.focus()
+          if (this.$refs.textInput) {
+            if (!this.submitter.name) {
+              this.$refs.textInput.focus()
+            }

-          this.loadFont()
+            this.initTypedSignature()

-          this.$emit('start')
+            this.$emit('start')
+          }
        })
      }
    },
+    async initTypedSignature () {
+      if (this.submitter.name) {
+        this.$refs.textInput.value = this.submitter.name
+      }
+
+      await this.loadFont()
+
+      if (this.$refs.textInput.value) {
+        this.updateWrittenSignature({ target: this.$refs.textInput })
+      }
+    },
    drawImage (event) {
      this.remove()
      this.clear()
@@ -731,6 +774,13 @@ export default {
    },
    async submit () {
      if (this.modelValue || this.computedPreviousValue) {
+        if (this.touchAttachmentUuid && this.computedPreviousValue === this.touchAttachmentUuid && !Object.values(this.values).includes(this.touchAttachmentUuid)) {
+          this.isTouchAttachment = true
+          this.$emit('touch-attachment', this.touchAttachmentUuid)
+        } else {
+          this.isTouchAttachment = false
+        }
+
        if (this.computedPreviousValue) {
          this.$emit('update:model-value', this.computedPreviousValue)
        }
@@ -740,7 +790,15 @@ export default {

      if (this.isSignatureStarted && this.pad.toData().length > 0 && !isValidSignatureCanvas(this.pad.toData())) {
        if (this.field.required === true || this.pad.toData().length > 0) {
-          alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+          if (isCanvasBlocked()) {
+            alert(this.t('browser_privacy_settings_block_canvas'))
+
+            if (window.Rollbar) {
+              window.Rollbar.info('Canvas blocked')
+            }
+          } else {
+            alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+          }

          return Promise.reject(new Error('Image too small or simple'))
        } else {
@@ -796,7 +854,15 @@ export default {
          }
        }).catch((error) => {
          if (this.field.required === true) {
-            alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+            if (isCanvasBlocked()) {
+              alert(this.t('browser_privacy_settings_block_canvas'))
+
+              if (window.Rollbar) {
+                window.Rollbar.info('Canvas blocked')
+              }
+            } else {
+              alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+            }

            return reject(error)
          } else {
@@ -35,4 +35,24 @@ function isValidSignatureCanvas (data) {
  return validStrokes.length > 0
 }

-export { isValidSignatureCanvas }
+function isCanvasBlocked () {
+  try {
+    const testCanvas = document.createElement('canvas')
+
+    testCanvas.width = 2
+    testCanvas.height = 2
+
+    const ctx = testCanvas.getContext('2d')
+
+    ctx.fillStyle = 'rgb(255, 0, 0)'
+    ctx.fillRect(0, 0, 2, 2)
+
+    const pixel = ctx.getImageData(0, 0, 1, 1).data
+
+    return pixel[0] !== 255 || pixel[1] !== 0 || pixel[2] !== 0 || pixel[3] !== 255
+  } catch (e) {
+    return true
+  }
+}
+
+export { isValidSignatureCanvas, isCanvasBlocked }
@@ -119,6 +119,7 @@ export default {
        docId: this.eidEasyData.doc_id,
        language: this.locale,
        countryCode: this.countryCode,
+        sandbox: ['demo.docuseal.tech'].includes(location.host),
        enabledMethods: {
          signature: this.eidEasyData.available_methods
        },
@@ -31,137 +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
-              :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)]"
-            />
-          </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"
@@ -252,7 +141,8 @@
            </span>
            <div
              v-else-if="field.type === 'cells' && field.default_value"
-              class="w-full flex items-center"
+              class="w-full flex"
+              :class="fontClasses"
            >
              <div
                v-for="(char, index) in field.default_value"
@@ -325,83 +215,22 @@
      @mousedown.stop="startResize"
      @touchstart="startTouchResize"
    />
-    <Teleport
-      v-if="isShowFormulaModal"
-      :to="modalContainerEl"
-    >
-      <FormulaModal
-        :field="field"
-        :editable="editable && !defaultField"
-        :default-field="defaultField"
-        :build-default-name="buildDefaultName"
-        @close="isShowFormulaModal = false"
-      />
-    </Teleport>
-    <Teleport
-      v-if="isShowFontModal"
-      :to="modalContainerEl"
-    >
-      <FontModal
-        :field="field"
-        :editable="editable && !defaultField"
-        :default-field="defaultField"
-        :build-default-name="buildDefaultName"
-        @close="isShowFontModal = false"
-      />
-    </Teleport>
-    <Teleport
-      v-if="isShowConditionsModal"
-      :to="modalContainerEl"
-    >
-      <ConditionsModal
-        :item="field"
-        :build-default-name="buildDefaultName"
-        :default-field="defaultField"
-        @close="isShowConditionsModal = false"
-      />
-    </Teleport>
-    <Teleport
-      v-if="isShowDescriptionModal"
-      :to="modalContainerEl"
-    >
-      <DescriptionModal
-        :field="field"
-        :editable="editable && !defaultField"
-        :default-field="defaultField"
-        :build-default-name="buildDefaultName"
-        @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'],
+  inject: ['template', 'save', 't', 'isInlineSize', 'selectedAreasRef', 'isCmdKeyRef', 'getFieldTypeIndex'],
  props: {
    area: {
      type: Object,
@@ -467,6 +296,11 @@ export default {
      required: false,
      default: null
    },
+    isMobile: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    isSelectMode: {
      type: Boolean,
      required: false,
@@ -476,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 }
@@ -575,11 +402,8 @@ 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, this.template.fields)
+      return this.buildDefaultName(this.field)
    },
    fontClasses () {
      if (!this.field.preferences) {
@@ -599,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 = []

@@ -688,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]

@@ -775,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)
@@ -826,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()

@@ -910,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
@@ -1107,7 +854,7 @@ export default {
        this.selectedAreasRef.value = [this.area]
      }

-      this.$refs?.name?.blur()
+      this.$refs?.title?.$refs?.name?.blur()

      e.preventDefault()

@@ -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>
@@ -81,7 +81,7 @@
        />
        <template v-else>
          <form
-            v-if="withSignYourselfButton && template.submitters.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,27 @@
          </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"
+                :draw-field="drawField"
+                :draw-field-type="drawFieldType"
+                :draw-custom-field="drawCustomField"
+                :draw-option="drawOption"
+                @update="onDynamicDocumentUpdate"
+                @draw="clearDrawField"
+                @add-custom-field="addCustomField"
+                @set-draw="[drawField = $event.field, drawOption = $event.option]"
+              />
              <Document
+                v-else
                :ref="setDocumentRefs"
                :areas-index="fieldAreasIndex[document.uuid]"
                :selected-submitter="selectedSubmitter"
@@ -374,6 +393,7 @@
                :draw-field-type="drawFieldType"
                :draw-custom-field="drawCustomField"
                :editable="editable"
+                :is-mobile="isMobile"
                :base-url="baseUrl"
                :with-fields-detection="withFieldsDetection"
                @draw="[onDraw($event), withSelectedFieldType ? '' : drawFieldType = '', drawCustomField = null, showDrawField = false]"
@@ -382,9 +402,9 @@
                @paste-field="pasteField"
                @copy-field="copyField"
                @add-custom-field="addCustomField"
+                @set-draw="[drawField = $event.field, drawOption = $event.option]"
                @copy-selected-areas="copySelectedAreas"
                @delete-selected-areas="deleteSelectedAreas"
-                @align-selected-areas="alignSelectedAreas"
                @autodetect-fields="detectFieldsForPage"
              />
              <DocumentControls
@@ -496,6 +516,8 @@
            :show-tour-start-form="showTourStartForm"
            @add-field="addField"
            @set-draw="[drawField = $event.field, drawOption = $event.option]"
+            @remove-field="onRemoveField"
+            @remove-submitter="onRemoveSubmitter"
            @select-submitter="selectedSubmitter = $event"
            @set-draw-type="[drawFieldType = $event, showDrawField = true]"
            @set-draw-custom-field="[drawCustomField = $event, showDrawField = true]"
@@ -504,6 +526,7 @@
            @change-submitter="selectedSubmitter = $event"
            @drag-end="[dragField = null, $refs.dragPlaceholder.dragPlaceholder = null]"
            @scroll-to-area="scrollToArea"
+            @rebuild-variables-schema="rebuildVariablesSchema"
          />
        </div>
      </div>
@@ -591,12 +614,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,
@@ -645,7 +669,8 @@ export default {
      fieldsDragFieldRef: computed(() => this.fieldsDragFieldRef),
      customDragFieldRef: computed(() => this.customDragFieldRef),
      isSelectModeRef: computed(() => this.isSelectModeRef),
-      isCmdKeyRef: computed(() => this.isCmdKeyRef)
+      isCmdKeyRef: computed(() => this.isCmdKeyRef),
+      getFieldTypeIndex: this.getFieldTypeIndex
    }
  },
  props: {
@@ -718,6 +743,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,
@@ -776,7 +811,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,
@@ -839,6 +874,11 @@ export default {
      required: false,
      default: ''
    },
+    withDynamicDocuments: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    withDocumentsList: {
      type: Boolean,
      required: false,
@@ -936,12 +976,15 @@ export default {
    language () {
      return this.locale.split('-')[0].toLowerCase()
    },
-    withPrefillable () {
-      if (this.template.fields) {
-        return this.template.fields.some((f) => f.prefillable)
-      } else {
-        return false
-      }
+    undefinedSubmitters () {
+      return this.template.submitters.filter((submitter) => {
+        return !submitter.invite_by_uuid &&
+          !submitter.optional_invite_by_uuid &&
+          !submitter.invite_via_field_uuid &&
+          !submitter.linked_to_uuid &&
+          !submitter.is_requester &&
+          !submitter.email
+      })
    },
    isInlineSize () {
      return CSS.supports('container-type: size')
@@ -989,6 +1032,18 @@ export default {

      return areas
    },
+    fieldTypeIndexMap () {
+      const map = {}
+      const typeCounters = {}
+
+      this.template.fields.forEach((f) => {
+        typeCounters[f.type] ||= 0
+        map[f.uuid] = typeCounters[f.type]
+        typeCounters[f.type]++
+      })
+
+      return map
+    },
    isAllRequiredFieldsAdded () {
      return !this.defaultRequiredFields?.some((f) => {
        return !this.template.fields?.some((field) => field.name === f.name)
@@ -1085,6 +1140,9 @@ export default {
    addCustomField (field) {
      return this.$refs.fields.addCustomField(field)
    },
+    getFieldTypeIndex (field) {
+      return this.fieldTypeIndexMap[field.uuid]
+    },
    addCustomFieldWithoutDraw () {
      const customField = this.drawCustomField

@@ -1106,6 +1164,32 @@ export default {
      this.drawCustomField = null
      this.showDrawField = false
    },
+    onRemoveField (field) {
+      if (this.dynamicDocuments.length) {
+        field.areas?.forEach((area) => {
+          this.documentRefs.forEach((documentRef) => {
+            if (documentRef.isDynamic && documentRef.document.uuid === area.attachment_uuid) {
+              documentRef.removeArea(area)
+            }
+          })
+        })
+      }
+    },
+    onRemoveSubmitter (submitter) {
+      if (this.dynamicDocuments.length) {
+        this.template.fields.forEach((field) => {
+          if (field.submitter_uuid === submitter.uuid) {
+            field.areas?.forEach((area) => {
+              this.documentRefs.forEach((documentRef) => {
+                if (documentRef.isDynamic && documentRef.document.uuid === area.attachment_uuid) {
+                  documentRef.removeArea(area)
+                }
+              })
+            })
+          }
+        })
+      }
+    },
    toggleSelectMode () {
      this.isSelectModeRef.value = !this.isSelectModeRef.value

@@ -1160,27 +1244,6 @@ export default {

      this.debouncedSave()
    },
-    alignSelectedAreas (direction) {
-      const areas = this.selectedAreasRef.value
-
-      let targetValue
-
-      if (direction === 'left') {
-        targetValue = Math.min(...areas.map(a => a.x))
-        areas.forEach((area) => { area.x = targetValue })
-      } else if (direction === 'right') {
-        targetValue = Math.max(...areas.map(a => a.x + a.w))
-        areas.forEach((area) => { area.x = targetValue - area.w })
-      } else if (direction === 'top') {
-        targetValue = Math.min(...areas.map(a => a.y))
-        areas.forEach((area) => { area.y = targetValue })
-      } else if (direction === 'bottom') {
-        targetValue = Math.max(...areas.map(a => a.y + a.h))
-        areas.forEach((area) => { area.y = targetValue - area.h })
-      }
-
-      this.save()
-    },
    download () {
      this.isDownloading = true

@@ -2065,7 +2128,9 @@ export default {
        }

        if (type === 'checkbox' && !this.drawFieldType && (this.template.fields[this.template.fields.length - 1]?.type === 'checkbox' || area.w)) {
-          const previousField = [...this.template.fields].reverse().find((f) => f.type === type)
+          const previousField = this.template.fields.findLast
+            ? this.template.fields.findLast((f) => f.type === type)
+            : [...this.template.fields].reverse().find((f) => f.type === type)
          const previousArea = previousField?.areas?.[previousField.areas.length - 1]

          if (previousArea || area.w) {
@@ -2329,7 +2394,9 @@ export default {
    assignDropAreaSize (fieldArea, field, area) {
      const fieldType = field.type || 'text'

-      const previousField = [...this.template.fields].reverse().find((f) => f.type === fieldType)
+      const previousField = this.template.fields.findLast
+        ? this.template.fields.findLast((f) => f.type === fieldType)
+        : [...this.template.fields].reverse().find((f) => f.type === fieldType)

      let baseArea

@@ -2480,60 +2547,80 @@ export default {

      this.save()
    },
+    removeAreasByAttachmentUuid (attachmentUuid) {
+      const removedFieldUuids = []
+
+      this.selectedAreasRef.value = this.selectedAreasRef.value.filter((area) => area.attachment_uuid !== attachmentUuid)
+
+      this.template.fields.forEach((field) => {
+        [...(field.areas || [])].forEach((area) => {
+          if (area.attachment_uuid === attachmentUuid) {
+            field.areas.splice(field.areas.indexOf(area), 1)
+
+            removedFieldUuids.push(field.uuid)
+          }
+        })
+      })
+
+      this.template.fields = this.template.fields.reduce((acc, field) => {
+        if (removedFieldUuids.includes(field.uuid) && !field.areas?.length) {
+          this.removeFieldConditions(field)
+        } else {
+          acc.push(field)
+        }
+
+        return acc
+      }, [])
+    },
    onDocumentRemove (item) {
      if (window.confirm(this.t('are_you_sure_'))) {
        this.template.schema.splice(this.template.schema.indexOf(item), 1)

-        const removedFieldUuids = []
-
-        this.template.fields.forEach((field) => {
-          [...(field.areas || [])].forEach((area) => {
-            if (area.attachment_uuid === item.attachment_uuid) {
-              field.areas.splice(field.areas.indexOf(area), 1)
-
-              removedFieldUuids.push(field.uuid)
-            }
-          })
-        })
-
-        this.template.fields = this.template.fields.reduce((acc, f) => {
-          if (removedFieldUuids.includes(f.uuid) && !f.areas?.length) {
-            this.removeFieldConditions(f)
-          } else {
-            acc.push(f)
-          }
-
-          return acc
-        }, [])
+        this.removeAreasByAttachmentUuid(item.attachment_uuid)

        this.save()
      }
    },
    onDocumentReplace (data) {
      const { replaceSchemaItem, schema, documents } = data
+      const isReplacingDynamicDocument = !!replaceSchemaItem.dynamic
      // 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)

+      if (isReplacingDynamicDocument) {
+        this.removeAreasByAttachmentUuid(replaceSchemaItem.attachment_uuid)
+
+        const dynamicDocumentIndex = this.dynamicDocuments.findIndex((doc) => doc.uuid === replaceSchemaItem.attachment_uuid)
+
+        if (dynamicDocumentIndex !== -1) {
+          this.dynamicDocuments.splice(dynamicDocumentIndex, 1)
+        }
+      }
+
      if (data.fields) {
        this.template.fields = data.fields

-        const removedFieldUuids = []
+        if (isReplacingDynamicDocument) {
+          this.removeAreasByAttachmentUuid(replaceSchemaItem.attachment_uuid)
+        } else {
+          const removedFieldUuids = []

-        this.template.fields.forEach((field) => {
-          [...(field.areas || [])].forEach((area) => {
-            if (area.attachment_uuid === replaceSchemaItem.attachment_uuid) {
-              field.areas.splice(field.areas.indexOf(area), 1)
+          this.template.fields.forEach((field) => {
+            [...(field.areas || [])].forEach((area) => {
+              if (area.attachment_uuid === replaceSchemaItem.attachment_uuid) {
+                field.areas.splice(field.areas.indexOf(area), 1)

-              removedFieldUuids.push(field.uuid)
-            }
+                removedFieldUuids.push(field.uuid)
+              }
+            })
          })
-        })

-        this.template.fields =
-          this.template.fields.filter((f) => !removedFieldUuids.includes(f.uuid) || f.areas?.length)
+          this.template.fields =
+            this.template.fields.filter((f) => !removedFieldUuids.includes(f.uuid) || f.areas?.length)
+        }
      }

      if (data.submitters) {
@@ -2544,13 +2631,15 @@ export default {
        }
      }

-      this.template.fields.forEach((field) => {
-        (field.areas || []).forEach((area) => {
-          if (area.attachment_uuid === replaceSchemaItem.attachment_uuid) {
-            area.attachment_uuid = schema[0].attachment_uuid
-          }
+      if (!isReplacingDynamicDocument) {
+        this.template.fields.forEach((field) => {
+          (field.areas || []).forEach((area) => {
+            if (area.attachment_uuid === replaceSchemaItem.attachment_uuid) {
+              area.attachment_uuid = schema[0].attachment_uuid
+            }
+          })
        })
-      })
+      }

      if (this.onUpload) {
        this.onUpload(this.template)
@@ -2646,7 +2735,15 @@ export default {
        } else {
          this.isSaving = true

-          this.save().then(() => {
+          const dynamicDocumentRefs = this.documentRefs.filter((ref) => ref.isDynamic)
+
+          dynamicDocumentRefs.map((ref) => ref.update())
+
+          this.rebuildVariablesSchema({ disable: false })
+
+          const dynamicDocumentSaves = dynamicDocumentRefs.map((ref) => ref.saveBody())
+
+          Promise.all([this.save(), ...dynamicDocumentSaves]).then(() => {
            window.Turbo.visit(`/templates/${this.template.id}`)
          }).finally(() => {
            this.isSaving = false
@@ -2657,9 +2754,13 @@ export default {
    scrollToArea (area) {
      const documentRef = this.documentRefs.find((a) => a.document.uuid === area.attachment_uuid)

-      documentRef.scrollToArea(area)
+      if (documentRef.isDynamic) {
+        this.selectedAreasRef.value = []
+      } else {
+        this.selectedAreasRef.value = [area]
+      }

-      this.selectedAreasRef.value = [area]
+      documentRef.scrollToArea(area)
    },
    baseFetch (path, options = {}) {
      return fetch(this.baseUrl + path, {
@@ -2885,7 +2986,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' }
@@ -2894,6 +2996,44 @@ 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.save()
+    },
+    rebuildVariablesSchema ({ disable = true } = {}) {
+      const dynamicDocumentRef = this.documentRefs.find((e) => e.isDynamic)
+
+      if (dynamicDocumentRef) {
+        const parsed = {}
+
+        this.documentRefs.forEach((ref) => {
+          if (ref.isDynamic) {
+            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 {
+          dynamicDocumentRef.syncVariablesSchema(this.template.variables_schema, parsed, { disable })
+        }
+      } else {
+        this.template.variables_schema = {}
+      }
    }
  }
 }
@@ -9,7 +9,7 @@
    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
      <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
        <span class="modal-title">
-          {{ t('condition') }} - {{ (defaultField ? (defaultField.title || item.title || item.name) : item.name) || buildDefaultName(item, template.fields) }}
+          {{ t('condition') }} - {{ (defaultField ? (defaultField.title || item.title || item.name) : item.name) || buildDefaultName(item) }}
        </span>
        <a
          href="#"
@@ -83,7 +83,7 @@
                  class="text-base-content"
                  :selected="condition.field_uuid === f.uuid"
                >
-                  {{ f.name || buildDefaultName(f, template.fields) }}
+                  {{ f.name || buildDefaultName(f) }}
                </option>
              </select>
              <select
@@ -124,6 +124,16 @@
                  {{ option.value || `${t('option')} ${index + 1}` }}
                </option>
              </select>
+              <input
+                v-else-if="conditionField(condition)?.type === 'number' && ['equal', 'not_equal', 'greater_than', 'less_than'].includes(condition.action)"
+                v-model="condition.value"
+                type="number"
+                step="any"
+                class="input input-bordered input-sm w-full bg-white h-11 pl-4 text-base font-normal"
+                :class="{ 'text-gray-300': !condition.value }"
+                :placeholder="t('type_value')"
+                required
+              >
            </div>
          </div>
          <a
@@ -154,7 +164,7 @@
 <script>
 export default {
  name: 'ConditionModal',
-  inject: ['t', 'save', 'template', 'withConditions'],
+  inject: ['t', 'template', 'withConditions'],
  props: {
    item: {
      type: Object,
@@ -169,18 +179,13 @@ export default {
      type: Function,
      required: true
    },
-    withClickSaveEvent: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
    excludeFieldUuids: {
      type: Array,
      required: false,
      default: () => []
    }
  },
-  emits: ['close', 'click-save'],
+  emits: ['close', 'save'],
  data () {
    return {
      conditions: this.item.conditions?.[0] ? JSON.parse(JSON.stringify(this.item.conditions)) : [{}]
@@ -227,6 +232,8 @@ export default {
        actions.push('equal', 'not_equal')
      } else if (['multiple'].includes(field.type)) {
        actions.push('contains', 'does_not_contain')
+      } else if (field.type === 'number') {
+        actions.push('not_empty', 'empty', 'equal', 'not_equal', 'greater_than', 'less_than')
      } else {
        actions.push('not_empty', 'empty')
      }
@@ -244,12 +251,7 @@ export default {
        delete this.item.conditions
      }

-      if (this.withClickSaveEvent) {
-        this.$emit('click-save')
-      } else {
-        this.save()
-      }
-
+      this.$emit('save')
      this.$emit('close')
    }
  }
@@ -179,8 +179,11 @@ export default {
    },
    onBlur (e) {
      setTimeout(() => {
-        this.value = this.$refs.contenteditable.innerText.trim() || this.modelValue
-        this.$emit('update:model-value', this.value)
+        if (this.$refs.contenteditable) {
+          this.value = this.$refs.contenteditable.innerText.trim() || this.modelValue
+          this.$emit('update:model-value', this.value)
+        }
+
        this.$emit('blur', e)

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

-      this.save()
+      this.$emit('save')
      this.$emit('close')
    },
    resizeTextarea () {
@@ -13,6 +13,7 @@
      :with-signature-id="withSignatureId"
      :with-prefillable="withPrefillable"
      :is-drag="isDrag"
+      :is-mobile="isMobile"
      :with-field-placeholder="withFieldPlaceholder"
      :default-fields="defaultFields"
      :drag-field-placeholder="dragFieldPlaceholder"
@@ -30,9 +31,9 @@
      @copy-field="$emit('copy-field', $event)"
      @paste-field="$emit('paste-field', { ...$event, attachment_uuid: document.uuid })"
      @add-custom-field="$emit('add-custom-field', $event)"
+      @set-draw="$emit('set-draw', $event)"
      @copy-selected-areas="$emit('copy-selected-areas')"
      @delete-selected-areas="$emit('delete-selected-areas')"
-      @align-selected-areas="$emit('align-selected-areas', $event)"
      @autodetect-fields="$emit('autodetect-fields', $event)"
      @scroll-to="scrollToArea"
      @draw="$emit('draw', { area: {...$event.area, attachment_uuid: document.uuid }, isTooSmall: $event.isTooSmall })"
@@ -98,6 +99,11 @@ export default {
      required: false,
      default: () => []
    },
+    isMobile: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    allowDraw: {
      type: Boolean,
      required: false,
@@ -138,7 +144,7 @@ export default {
      default: false
    }
  },
-  emits: ['draw', 'drop-field', 'remove-area', 'paste-field', 'copy-field', 'copy-selected-areas', 'delete-selected-areas', 'align-selected-areas', 'autodetect-fields', 'add-custom-field'],
+  emits: ['draw', 'drop-field', 'remove-area', 'paste-field', 'copy-field', 'copy-selected-areas', 'delete-selected-areas', 'autodetect-fields', 'add-custom-field', 'set-draw'],
  data () {
    return {
      pageRefs: []
@@ -162,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`
        })
      })
    },
@@ -180,7 +186,15 @@ export default {
  methods: {
    scrollToArea (area) {
      this.$nextTick(() => {
-        this.pageRefs[area.page].areaRefs.find((e) => e.area === area).$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        const pageRef = this.pageRefs[area.page]
+
+        if (pageRef && pageRef.areaRefs) {
+          const areaRef = pageRef.areaRefs.find((e) => e.area === area)
+
+          if (areaRef && areaRef.$el) {
+            areaRef.$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+          }
+        }
      })
    },
    setPageRefs (el) {
@@ -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()
@@ -0,0 +1,289 @@
+<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"
+    @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"
+    >
+      <template v-if="field.default_value === '{{date}}'">
+        {{ t('signing_date') }}
+      </template>
+      <template v-else>
+        {{ field.default_value }}
+      </template>
+    </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.selectArea()
+      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>
@@ -0,0 +1,316 @@
+<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"
+        :section-refs="sectionRefs"
+        :container-width="containerWidth"
+        :attachments-index="attachmentsIndex"
+        :selected-submitter="selectedSubmitter"
+        :drag-field="dragField"
+        :draw-field="drawField"
+        :draw-field-type="drawFieldType"
+        :draw-custom-field="drawCustomField"
+        :render-html-for-save-ref="renderHtmlForSaveRef"
+        :draw-option="drawOption"
+        :attachment-uuid="document.uuid"
+        @update="onSectionUpdate(section, $event)"
+        @draw="$emit('draw', $event)"
+        @add-custom-field="$emit('add-custom-field', $event)"
+        @set-draw="$emit('set-draw', $event)"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+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
+    },
+    drawField: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    drawFieldType: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    drawCustomField: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    drawOption: {
+      type: Object,
+      required: false,
+      default: null
+    }
+  },
+  emits: ['update', 'draw', 'set-draw', 'add-custom-field'],
+  data () {
+    return {
+      containerWidth: 1040,
+      isMounted: false,
+      sectionRefs: []
+    }
+  },
+  computed: {
+    renderHtmlForSaveRef: () => ref(false),
+    isDynamic () {
+      return true
+    },
+    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,
+    removeArea (area) {
+      this.sectionRefs.forEach((sectionRef) => {
+        const pos = sectionRef.findAreaNodePos(area.uuid)
+
+        if (pos !== -1) {
+          sectionRef.editor.chain().focus().deleteRange({ from: pos, to: pos + 1 }).run()
+        }
+      })
+    },
+    setSectionRefs (ref) {
+      if (ref) {
+        this.sectionRefs.push(ref)
+      }
+    },
+    onBeforeUnload (event) {
+      if (this.saveTimer) {
+        event.preventDefault()
+
+        event.returnValue = ''
+
+        return ''
+      }
+    },
+    scrollToArea (area) {
+      this.sectionRefs.forEach(({ editor }) => editor.commands.setNodeSelection(0))
+
+      this.sectionRefs.forEach(({ editor }) => {
+        const el = editor.view.dom.querySelector(`[data-area-uuid="${area.uuid}"]`)
+
+        if (el) {
+          editor.commands.setNodeSelection(editor.view.posAtDOM(el, 0))
+
+          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 = this.getHtmlForSave(editor)
+      }
+
+      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 = this.getHtmlForSave(editor)
+      })
+
+      this.document.body = this.bodyDom.body.innerHTML
+
+      this.updateVariablesSchema()
+
+      this.$emit('update', this.document)
+    },
+    getHtmlForSave (editor) {
+      this.renderHtmlForSaveRef.value = true
+
+      const result = editor.getHTML()
+
+      this.renderHtmlForSaveRef.value = false
+
+      return result
+    },
+    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' }
+      })
+    },
+    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 })
+          }
+        }
+      }
+    }
+  }
+}
+</script>
@@ -0,0 +1,789 @@
+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;
+}
+
+.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;
+}
+dynamic-variable {
+  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, { nodeName: 'dynamic-variable' }))
+    }
+  })
+
+  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, renderHtmlForSaveRef, 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 }) {
+      const attrs = {
+        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};`
+      }
+
+      if (!renderHtmlForSaveRef.value) {
+        const fieldArea = dynamicAreaProps.findFieldArea(node.attrs.areaUuid)
+
+        if (fieldArea?.field && fieldArea?.area) {
+          const field = JSON.parse(JSON.stringify(fieldArea.field))
+          const area = JSON.parse(JSON.stringify(fieldArea.area))
+
+          delete field.areas
+          delete field.uuid
+          delete field.submitter_uuid
+          delete area.uuid
+          delete area.attachment_uuid
+
+          attrs['data-field'] = JSON.stringify(field)
+          attrs['data-area'] = JSON.stringify(area)
+          attrs['data-template-id'] = dynamicAreaProps.template.id
+        }
+      }
+
+      return ['dynamic-field', attrs]
+    },
+    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
+  })
+}
@@ -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>
@@ -0,0 +1,901 @@
+<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"
+    :class="{ 'cursor-crosshair': isDrawMode && editable }"
+  >
+    <div
+      v-if="isDrawMode && editable && cursorHighlightCoords"
+      class="absolute pointer-events-none z-10 bg-black"
+      :style="{ width: '1px', height: cursorHighlightCoords.height + 'px', left: cursorHighlightCoords.x + 'px', top: cursorHighlightCoords.y + 'px' }"
+    />
+    <div :style="{ zoom: containerWidth / sectionWidthPx }">
+      <section
+        :id="section.id"
+        ref="editorElement"
+        dir="auto"
+        :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"
+        @copy="onContextMenuCopy"
+        @delete="onContextMenuDelete"
+        @add-custom-field="$emit('add-custom-field', $event)"
+        @set-draw="$emit('set-draw', $event)"
+        @save="save"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script>
+import { shallowRef } from 'vue'
+import { DOMSerializer, Fragment } from '@tiptap/pm/model'
+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
+    },
+    sectionRefs: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    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
+    },
+    drawField: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    drawFieldType: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    drawCustomField: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    renderHtmlForSaveRef: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    drawOption: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    attachmentUuid: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  emits: ['update', 'draw', 'set-draw', 'add-custom-field'],
+  data () {
+    return {
+      isAreaDrag: false,
+      areaToolbarCoords: null,
+      dynamicMenuCoords: null,
+      contextMenu: null,
+      cursorHighlightCoords: 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 },
+        datenow: { 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)
+    },
+    isDrawMode () {
+      return !!(this.drawField || this.drawCustomField || this.drawFieldType)
+    },
+    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.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,
+      renderHtmlForSaveRef: this.renderHtmlForSaveRef,
+      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 }
+      }
+    })
+
+    this.editor.view.dom.addEventListener('paste', this.onEditorPaste, true)
+    this.editor.view.dom.addEventListener('pointerdown', this.onEditorPointerDown, true)
+    this.editor.view.dom.addEventListener('mousemove', this.onEditorMouseMove)
+    this.editor.view.dom.addEventListener('mouseleave', this.onEditorMouseLeave)
+    this.editor.view.dom.addEventListener('keydown', this.onEditorKeyDown)
+  },
+  beforeUnmount () {
+    if (this.editor) {
+      this.editor.view.dom.removeEventListener('paste', this.onEditorPaste, true)
+      this.editor.view.dom.removeEventListener('pointerdown', this.onEditorPointerDown, true)
+      this.editor.view.dom.removeEventListener('mousemove', this.onEditorMouseMove)
+      this.editor.view.dom.removeEventListener('mouseleave', this.onEditorMouseLeave)
+      this.editor.view.dom.removeEventListener('keydown', this.onEditorKeyDown)
+      this.editor.destroy()
+    }
+  },
+  methods: {
+    findAreaNodePos (areaUuid) {
+      const el = this.editor.view.dom.querySelector(`[data-area-uuid="${areaUuid}"]`)
+
+      return this.editor.view.posAtDOM(el, 0)
+    },
+    getFieldInsertIndex (pos) {
+      const view = this.editor.view
+      const fields = this.template.fields || []
+
+      if (!fields.length) {
+        return 0
+      }
+
+      let previousField = null
+
+      view.state.doc.nodesBetween(0, pos, (node, nodePos) => {
+        if (node.type.name !== 'fieldNode') {
+          return
+        }
+
+        if (nodePos + node.nodeSize <= pos) {
+          previousField = this.fieldAreaIndex[node.attrs.areaUuid]?.field || previousField
+        }
+      })
+
+      if (!previousField) {
+        previousField = this.getPreviousSectionField()
+      }
+
+      if (!previousField) {
+        return 0
+      }
+
+      const previousFieldIndex = fields.indexOf(previousField)
+
+      return previousFieldIndex === -1 ? fields.length : previousFieldIndex + 1
+    },
+    insertFieldInTemplate (field, index) {
+      const currentFieldIndex = this.template.fields.indexOf(field)
+
+      if (currentFieldIndex !== -1) {
+        return currentFieldIndex
+      }
+
+      this.template.fields.splice(index, 0, field)
+
+      return index
+    },
+    getLastFieldInSection (sectionRef) {
+      let lastField = null
+
+      sectionRef.editor.state.doc.descendants((node) => {
+        if (node.type.name === 'fieldNode') {
+          lastField = this.fieldAreaIndex[node.attrs.areaUuid]?.field || lastField
+        }
+      })
+
+      return lastField
+    },
+    getPreviousSectionField () {
+      const sectionIndex = this.sectionRefs.indexOf(this)
+
+      for (let index = sectionIndex - 1; index >= 0; index -= 1) {
+        const previousField = this.getLastFieldInSection(this.sectionRefs[index])
+
+        if (previousField) {
+          return previousField
+        }
+      }
+
+      return null
+    },
+    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
+    },
+    onEditorMouseLeave () {
+      this.cursorHighlightCoords = null
+    },
+    onEditorKeyDown (event) {
+      if (event.key === 'Escape') {
+        this.editor.chain().setNodeSelection(0).blur().run()
+        this.deselectArea()
+      }
+    },
+    onEditorMouseMove (event) {
+      if (!this.isDrawMode || !this.editable) {
+        this.cursorHighlightCoords = null
+
+        return
+      }
+
+      const view = this.editor?.view
+
+      if (!view) return
+
+      const pos = view.posAtCoords({ left: event.clientX, top: event.clientY })
+
+      if (!pos) {
+        this.cursorHighlightCoords = null
+
+        return
+      }
+
+      const coords = view.coordsAtPos(pos.pos)
+      const outerRect = this.$el.getBoundingClientRect()
+      const lineHeight = coords.bottom - coords.top
+
+      this.cursorHighlightCoords = {
+        x: coords.left - outerRect.left,
+        y: coords.top - outerRect.top,
+        height: lineHeight
+      }
+    },
+    getFieldNode (areaUuid) {
+      const pos = this.findAreaNodePos(areaUuid)
+
+      return this.editor.state.doc.nodeAt(pos)
+    },
+    serializeFieldNodeHtml (areaUuid) {
+      const node = this.getFieldNode(areaUuid)
+
+      if (!node) {
+        return null
+      }
+
+      const serializer = DOMSerializer.fromSchema(this.editor.state.schema)
+      const container = document.createElement('div')
+
+      container.appendChild(serializer.serializeFragment(Fragment.from(node)))
+
+      return container.innerHTML
+    },
+    async writeHtmlToClipboard ({ html, text }, clipboardData = null) {
+      if (clipboardData) {
+        clipboardData.setData('text/html', html)
+        clipboardData.setData('text/plain', text || html)
+
+        return true
+      }
+
+      if (navigator.clipboard?.write && window.ClipboardItem) {
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            'text/html': new Blob([html], { type: 'text/html' }),
+            'text/plain': new Blob([text || html], { type: 'text/plain' })
+          })
+        ])
+
+        return true
+      }
+
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text || html)
+
+        return true
+      }
+
+      return false
+    },
+    async copyFieldAreaToClipboard (areaUuid, clipboardData = null) {
+      const html = this.serializeFieldNodeHtml(areaUuid)
+
+      if (!html) {
+        return false
+      }
+
+      try {
+        await this.writeHtmlToClipboard({ html, text: html }, clipboardData)
+
+        return true
+      } catch (e) {
+        console.error('Failed to copy dynamic field:', e)
+
+        return false
+      }
+    },
+    async onContextMenuCopy () {
+      await this.copyFieldAreaToClipboard(this.contextMenu.areaUuid)
+
+      this.closeContextMenu()
+    },
+    buildCopiedField (payload) {
+      const field = JSON.parse(JSON.stringify(payload.field))
+      const area = {
+        ...JSON.parse(JSON.stringify(payload.area)),
+        uuid: v4(),
+        attachment_uuid: this.attachmentUuid
+      }
+
+      if (payload.templateId !== this.template.id) {
+        delete field.conditions
+
+        if (field.preferences) {
+          delete field.preferences.formula
+        }
+      }
+
+      const newField = {
+        ...field,
+        uuid: v4(),
+        submitter_uuid: this.selectedSubmitter.uuid,
+        areas: [area]
+      }
+
+      if (['radio', 'multiple'].includes(field.type) && field.options?.length) {
+        const oldOptionUuid = area.option_uuid
+        const optionsMap = {}
+
+        newField.options = field.options.map((opt) => {
+          const newUuid = v4()
+          optionsMap[opt.uuid] = newUuid
+
+          return { ...opt, uuid: newUuid }
+        })
+
+        area.option_uuid = optionsMap[oldOptionUuid] || newField.options[0]?.uuid
+      }
+
+      return { field: newField, area }
+    },
+    onEditorPaste (event) {
+      const clipboardData = event.clipboardData
+
+      if (!clipboardData) {
+        return
+      }
+
+      const html = clipboardData.getData('text/html')
+      const text = clipboardData.getData('text/plain')
+      const clipboardHtml = html || (text.includes('<dynamic-field') ? text : '')
+
+      if (!clipboardHtml || !clipboardHtml.includes('data-field=')) {
+        return
+      }
+
+      const container = document.createElement('div')
+
+      container.innerHTML = clipboardHtml
+
+      const fieldNodes = [...container.querySelectorAll('dynamic-field[data-field][data-area]')]
+
+      if (!fieldNodes.length) {
+        return
+      }
+
+      event.preventDefault()
+
+      const { selection } = this.editor.state
+      const { from, to } = selection
+      let insertIndex = this.getFieldInsertIndex(selection.node?.type.name === 'fieldNode' ? to : from)
+
+      let lastArea = null
+
+      fieldNodes.forEach((fieldNode) => {
+        const fieldValue = fieldNode.dataset.field
+        const areaValue = fieldNode.dataset.area
+        const templateId = fieldNode.dataset.templateId
+
+        if (!fieldValue || !areaValue) {
+          return
+        }
+
+        const { field, area } = this.buildCopiedField({
+          field: JSON.parse(fieldValue),
+          area: JSON.parse(areaValue),
+          templateId: Number(templateId)
+        })
+
+        this.insertFieldInTemplate(field, insertIndex)
+        insertIndex += 1
+
+        fieldNode.setAttribute('uuid', field.uuid)
+        fieldNode.setAttribute('area-uuid', area.uuid)
+        fieldNode.removeAttribute('data-field')
+        fieldNode.removeAttribute('data-area')
+        fieldNode.removeAttribute('data-template-id')
+
+        lastArea = area
+      })
+
+      this.editor.chain().focus().insertContentAt({ from, to }, container.innerHTML).run()
+
+      if (lastArea) {
+        this.editor.commands.setNodeSelection(this.findAreaNodePos(lastArea.uuid))
+      }
+
+      this.closeContextMenu()
+      this.save()
+    },
+    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
+
+      this.insertFieldAtRange({
+        sourceField: draggedField,
+        existingField: this.fieldsDragFieldRef?.value,
+        from: pos.pos
+      })
+
+      this.fieldsDragFieldRef.value = null
+      this.customDragFieldRef.value = null
+
+      return true
+    },
+    onEditorPointerDown (event) {
+      if (!this.isDrawMode || !this.editable || this.isDraggingField) {
+        return
+      }
+
+      if (event.button === 2) {
+        return
+      }
+
+      const view = this.editor?.view
+
+      if (!view) {
+        return
+      }
+
+      const selection = view.state.selection
+      const isTextRangeSelection = !selection.empty && !selection.node
+
+      let from = selection.from
+      let to = selection.to
+
+      if (!isTextRangeSelection) {
+        const pos = view.posAtCoords({ left: event.clientX, top: event.clientY })
+
+        if (!pos) {
+          return
+        }
+
+        from = pos.pos
+        to = pos.pos
+      }
+
+      const sourceField = this.drawField || this.drawCustomField || { type: this.drawFieldType }
+
+      event.preventDefault()
+      event.stopPropagation()
+
+      if (this.drawOption && this.drawField) {
+        const areaWithoutOption = this.drawField.areas?.find((a) => !a.option_uuid)
+
+        if (areaWithoutOption && !this.drawField.areas.find((a) => a.option_uuid === this.drawField.options[0].uuid)) {
+          areaWithoutOption.option_uuid = this.drawField.options[0].uuid
+        }
+      }
+
+      const inserted = this.insertFieldAtRange({
+        sourceField,
+        existingField: this.drawField,
+        optionUuid: this.drawOption?.uuid,
+        from,
+        to
+      })
+
+      if (inserted) {
+        this.$emit('draw', inserted)
+      }
+    },
+    buildFieldArea ({ optionUuid = null } = {}) {
+      const area = {
+        uuid: v4(),
+        attachment_uuid: this.attachmentUuid
+      }
+
+      if (optionUuid) {
+        area.option_uuid = optionUuid
+      }
+
+      return area
+    },
+    buildNewField (sourceField, area) {
+      const fieldType = sourceField?.type || 'text'
+      const newField = {
+        name: sourceField?.name || '',
+        uuid: v4(),
+        required: fieldType !== 'checkbox',
+        submitter_uuid: this.selectedSubmitter.uuid,
+        type: fieldType,
+        areas: [area]
+      }
+
+      if (['select', 'multiple', 'radio'].includes(fieldType)) {
+        if (sourceField?.options?.length) {
+          newField.options = sourceField.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
+        }
+      }
+
+      return newField
+    },
+    insertFieldAtRange ({ sourceField, existingField = null, optionUuid = null, from, to = from }) {
+      if (!sourceField) {
+        return null
+      }
+
+      const fieldType = sourceField.type || existingField?.type || 'text'
+      const dims = this.defaultSizes[fieldType]
+      const area = this.buildFieldArea({ optionUuid })
+      const insertIndex = this.getFieldInsertIndex(from)
+
+      let field = existingField
+      const view = this.editor.view
+
+      if (field) {
+        if (!this.template.fields.includes(field)) {
+          this.insertFieldInTemplate(field, insertIndex)
+        }
+
+        field.areas = field.areas || []
+        field.areas.push(area)
+      } else {
+        field = this.buildNewField(sourceField, area)
+        this.insertFieldInTemplate(field, insertIndex)
+      }
+
+      const nodeType = view.state.schema.nodes.fieldNode
+      const fieldNode = nodeType.create({
+        uuid: field.uuid,
+        areaUuid: area.uuid,
+        width: dims.width,
+        height: dims.height
+      })
+
+      const tr = from !== to
+        ? view.state.tr.replaceWith(from, to, fieldNode)
+        : view.state.tr.insert(from, fieldNode)
+
+      view.dispatch(tr)
+
+      this.editor.chain().focus().setNodeSelection(from).run()
+      this.save()
+
+      return { area, field, pos: from }
+    }
+  }
+}
+</script>
@@ -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;
+}
@@ -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>
@@ -0,0 +1,136 @@
+<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">
+            <span class="w-5 flex justify-center items-center">
+              <input
+                type="checkbox"
+                class="hidden peer"
+                checked
+              >
+              <IconChevronDown
+                class="hidden peer-checked:block ml-0.5"
+                :width="14"
+                :stroke-width="1.6"
+              />
+              <IconChevronRight
+                class="block peer-checked:hidden ml-0.5"
+                :width="14"
+                :stroke-width="1.6"
+              />
+            </span>
+            <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-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?.type === 'object' && 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>
@@ -0,0 +1,584 @@
+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
+}
+
+const IRREGULAR_PLURALS = {
+  people: 'person',
+  men: 'man',
+  women: 'woman',
+  children: 'child',
+  teeth: 'tooth',
+  feet: 'foot',
+  mice: 'mouse',
+  geese: 'goose',
+  oxen: 'ox',
+  criteria: 'criterion',
+  phenomena: 'phenomenon',
+  alumni: 'alumnus',
+  data: 'datum',
+  media: 'medium'
+}
+
+function singularize (word) {
+  if (IRREGULAR_PLURALS[word]) return IRREGULAR_PLURALS[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 })
+
+        if (itemProperties.type === 'object' && itemProperties.properties && Object.keys(itemProperties.properties).length === 0) {
+          delete itemProperties.properties
+          itemProperties.type = 'string'
+        }
+
+        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 }
@@ -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"
@@ -269,6 +270,7 @@
        :editable="editable && !defaultField"
        :default-field="defaultField"
        :build-default-name="buildDefaultName"
+        @save="$emit('save')"
        @close="isShowFormulaModal = false"
      />
    </Teleport>
@@ -281,6 +283,7 @@
        :editable="editable && !defaultField"
        :default-field="defaultField"
        :build-default-name="buildDefaultName"
+        @save="$emit('save')"
        @close="isShowFontModal = false"
      />
    </Teleport>
@@ -292,6 +295,7 @@
        :item="field"
        :default-field="defaultField"
        :build-default-name="buildDefaultName"
+        @save="$emit('save')"
        @close="isShowConditionsModal = false"
      />
    </Teleport>
@@ -304,6 +308,7 @@
        :editable="editable && !defaultField"
        :default-field="defaultField"
        :build-default-name="buildDefaultName"
+        @save="$emit('save')"
        @close="isShowDescriptionModal = false"
      />
    </Teleport>
@@ -340,7 +345,7 @@ export default {
    IconMathFunction,
    FieldType
  },
-  inject: ['template', 'backgroundColor', 'selectedAreasRef', 't', 'locale'],
+  inject: ['template', 'backgroundColor', 'selectedAreasRef', 't', 'locale', 'getFieldTypeIndex'],
  props: {
    field: {
      type: Object,
@@ -412,7 +417,7 @@ export default {
      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
    },
    defaultName () {
-      return this.buildDefaultName(this.field, this.template.fields)
+      return this.buildDefaultName(this.field)
    },
    areas () {
      return this.field.areas || []
@@ -432,7 +437,7 @@ export default {

      this.$emit('save')
    },
-    buildDefaultName (field, fields) {
+    buildDefaultName (field) {
      if (field.type === 'payment' && field.preferences?.price && !field.preferences?.formula) {
        const { price, currency } = field.preferences || {}

@@ -443,7 +448,7 @@ export default {

        return `${this.fieldNames[field.type]} ${formattedPrice}`
      } else {
-        const typeIndex = fields.filter((f) => f.type === field.type).indexOf(field)
+        const typeIndex = this.getFieldTypeIndex(field)

        if (field.type === 'heading' || field.type === 'strikethrough') {
          return `${this.fieldNames[field.type]} ${typeIndex + 1}`
@@ -0,0 +1,49 @@
+<template>
+  <Teleport :to="modalContainerEl">
+    <div class="modal modal-open items-start !animate-none overflow-y-auto">
+      <div
+        class="absolute top-0 bottom-0 right-0 left-0"
+        @click.prevent="$emit('close')"
+      />
+      <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
+        <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+          <span class="modal-title">
+            {{ title }}
+          </span>
+          <a
+            href="#"
+            class="text-xl modal-close-button"
+            @click.prevent="$emit('close')"
+          >&times;</a>
+        </div>
+        <form @submit.prevent="$emit('save')">
+          <slot />
+          <button
+            class="base-button w-full mt-4 modal-save-button"
+            type="submit"
+          >
+            {{ t('save') }}
+          </button>
+        </form>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script>
+export default {
+  name: 'ContextModal',
+  inject: ['t'],
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    modalContainerEl: {
+      type: Element,
+      required: true
+    }
+  },
+  emits: ['close', 'save']
+}
+</script>
@@ -0,0 +1,147 @@
+<template>
+  <div
+    class="relative"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <button
+      class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
+      @click.stop="isOpen ? close() : open()"
+    >
+      <span class="flex items-center space-x-2">
+        <component
+          :is="icon || 'span'"
+          class="w-4 h-4"
+        />
+        <span>{{ label }}</span>
+      </span>
+      <IconChevronRight class="w-4 h-4" />
+    </button>
+    <div
+      v-if="isOpen"
+      ref="submenu"
+      class="absolute p-1 z-50 left-full bg-white shadow-lg rounded-lg border border-neutral-200 cursor-default"
+      style="min-width: 170px"
+      :style="submenuStyle"
+      :class="menuClass"
+      @click.stop
+    >
+      <slot>
+        <button
+          v-for="option in options"
+          :key="option.value"
+          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between space-x-2 text-sm cursor-pointer"
+          @click="handleSelect(option.value)"
+        >
+          <span class="whitespace-nowrap">{{ option.label }}</span>
+          <IconCheck
+            v-if="modelValue === option.value"
+            class="w-4 h-4"
+          />
+        </button>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconChevronRight, IconCheck } from '@tabler/icons-vue'
+
+export default {
+  name: 'ContextSubmenu',
+  components: {
+    IconChevronRight,
+    IconCheck
+  },
+  props: {
+    icon: {
+      type: [Function],
+      required: false,
+      default: null
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    modelValue: {
+      type: [String, Number],
+      default: null
+    },
+    menuClass: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['select', 'update:modelValue'],
+  data () {
+    return {
+      isOpen: false,
+      topOffset: 0
+    }
+  },
+  computed: {
+    submenuStyle () {
+      return {
+        top: this.topOffset + 'px'
+      }
+    }
+  },
+  beforeUnmount () {
+    this.clearTimeout()
+  },
+  methods: {
+    handleMouseEnter () {
+      clearTimeout(this.closeTimeout)
+
+      this.openTimeout = setTimeout(() => this.open(), 200)
+    },
+    handleMouseLeave () {
+      clearTimeout(this.openTimeout)
+
+      this.closeTimeout = setTimeout(() => this.close(), 200)
+    },
+    open () {
+      this.clearTimeout()
+
+      this.isOpen = true
+      this.topOffset = 0
+
+      this.$nextTick(() => setTimeout(() => this.adjustPosition(), 0))
+    },
+    clearTimeout () {
+      if (this.openTimeout) {
+        clearTimeout(this.openTimeout)
+      }
+
+      if (this.closeTimeout) {
+        clearTimeout(this.closeTimeout)
+      }
+    },
+    close () {
+      this.clearTimeout()
+
+      this.isOpen = false
+    },
+    handleSelect (value) {
+      this.$emit('select', value)
+      this.$emit('update:modelValue', value)
+    },
+    adjustPosition () {
+      if (!this.$refs.submenu) return
+
+      const rect = this.$refs.submenu.getBoundingClientRect()
+      const overflow = rect.bottom - window.innerHeight
+
+      if (overflow > 0) {
+        this.topOffset = -overflow - 4
+      } else {
+        this.topOffset = 0
+      }
+    }
+  }
+}
+</script>
@@ -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
@@ -10,7 +10,7 @@
      @change="[field.preferences ||= {}, field.preferences.method = $event.target.value, $emit('save')]"
    >
      <option
-        v-for="method in ['QeS', 'AeS']"
+        v-for="method in verificationMethods"
        :key="method"
        :value="method.toLowerCase()"
        :selected="method.toLowerCase() === field.preferences?.method || (method === 'QeS' && !field.preferences?.method)"
@@ -26,35 +26,9 @@
      {{ t('method') }}
    </label>
  </div>
-  <div
-    v-if="['cells'].includes(field.type)"
-    class="py-1.5 px-1 relative"
-    @click.stop
-  >
-    <select
-      class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent"
-      @change="[field.preferences ||= {}, field.preferences.align = $event.target.value, $emit('save')]"
-    >
-      <option
-        v-for="value in ['left', 'right', field.type === 'cells' ? null : 'center'].filter(Boolean)"
-        :key="value"
-        :selected="field.preferences?.align ? value === field.preferences.align : value === 'left'"
-        :value="value"
-      >
-        {{ t(value) }}
-      </option>
-    </select>
-    <label
-      :style="{ backgroundColor }"
-      class="absolute -top-1 left-2.5 px-1 h-4"
-      style="font-size: 8px"
-    >
-      {{ t('align') }}
-    </label>
-  </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
@@ -88,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
@@ -110,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
@@ -148,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">
@@ -192,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">
@@ -236,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
@@ -263,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
@@ -285,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
@@ -306,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
@@ -333,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
@@ -348,7 +322,7 @@
        {{ t('any') }}
      </option>
      <option
-        v-for="type in ['drawn', 'typed', 'drawn_or_typed', 'drawn_or_upload', 'upload']"
+        v-for="type in signatureFormats"
        :key="type"
        :value="type"
        :selected="field.preferences?.format === type"
@@ -366,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">
@@ -381,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">
@@ -396,6 +372,7 @@
  </li>
  <li
    v-if="field.type == 'stamp'"
+    class="field-settings-with-logo"
    @click.stop
  >
    <label class="cursor-pointer py-1.5">
@@ -410,6 +387,7 @@
  </li>
  <li
    v-if="field.type == 'checkbox'"
+    class="field-settings-checked"
    @click.stop
  >
    <label class="cursor-pointer py-1.5">
@@ -424,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">
@@ -437,7 +416,8 @@
    </label>
  </li>
  <li
-    v-if="['text', 'number'].includes(field.type)"
+    v-if="['text', 'number', 'radio', 'multiple', 'select'].includes(field.type)"
+    class="field-settings-read-only"
    @click.stop
  >
    <label class="cursor-pointer py-1.5">
@@ -452,7 +432,8 @@
    </label>
  </li>
  <li
-    v-if="withPrefillable && ['text', 'number', 'cells', 'date', 'checkbox', 'select', 'radio', 'phone'].includes(field['type'])"
+    v-if="withPrefillable && prefillableFieldTypes.includes(field['type'])"
+    class="field-settings-prefillable"
    @click.stop
  >
    <label class="cursor-pointer py-1.5">
@@ -470,7 +451,10 @@
    v-if="field.type != 'stamp'"
    class="pb-0.5 mt-0.5"
  >
-  <li v-if="['text', 'number', 'date', 'select', 'heading'].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')"
@@ -485,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"
@@ -500,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"
@@ -513,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')"
@@ -527,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="#"
@@ -553,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"
@@ -567,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"
@@ -580,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"
@@ -682,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',
@@ -718,7 +726,7 @@ export default {
    },
    lengthValidation () {
      if (this.field.validation?.pattern && this.selectedValidation !== 'custom') {
-        return this.field.validation.pattern.match(/^\.{(?<min>\d+),(?<max>\d+)?}$/)?.groups
+        return this.parseLengthPattern(this.field.validation.pattern)
      } else {
        return null
      }
@@ -735,8 +743,17 @@ export default {
        '^[a-zA-Z]+$': 'letters_only'
      }
    },
+    signatureFormats () {
+      return ['drawn', 'typed', 'drawn_or_typed', 'drawn_or_upload', 'upload']
+    },
+    verificationMethods () {
+      return ['QeS', 'AeS']
+    },
+    prefillableFieldTypes () {
+      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]
      })
    }
@@ -798,6 +815,9 @@ export default {
        return number
      }
    },
+    parseLengthPattern (pattern) {
+      return pattern?.match(/^\.{(?<min>\d+),(?<max>\d+)?}$/)?.groups || null
+    },
    formatDate (date, format) {
      const monthFormats = {
        M: 'numeric',
@@ -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 }"
@@ -25,7 +48,7 @@
      :key="field.uuid"
      :data-uuid="field.uuid"
      :field="field"
-      :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
+      :type-index="getFieldTypeIndex(field)"
      :editable="editable"
      :with-signature-id="withSignatureId"
      :with-prefillable="withPrefillable"
@@ -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"
+    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,9 +398,11 @@ 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'],
+  inject: ['save', 'backgroundColor', 'withPhone', 'withVerification', 'withKba', 'withPayment', 't', 'fieldsDragFieldRef', 'customDragFieldRef', 'baseFetch', 'selectedAreasRef', 'getFieldTypeIndex'],
  props: {
    fields: {
      type: Array,
@@ -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', 'remove-field', 'remove-submitter'],
  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
@@ -767,6 +805,8 @@ export default {
        this.$emit('change-submitter', this.submitters[0])
      }

+      this.$emit('remove-submitter', submitter)
+
      this.save()
    },
    removeField (field, save = true) {
@@ -792,6 +832,8 @@ export default {
        this.selectedAreasRef.value.splice(this.selectedAreasRef.value.indexOf(area), 1)
      })

+      this.$emit('remove-field', field)
+
      if (save) {
        this.save()
      }
@@ -9,7 +9,7 @@
    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
      <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
        <span class="modal-title">
-          {{ t('font') }} - {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || buildDefaultName(field, template.fields) }}
+          {{ t('font') }} - {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || buildDefaultName(field) }}
        </span>
        <a
          href="#"
@@ -171,7 +171,7 @@
              contenteditable="true"
              class="outline-none whitespace-nowrap truncate"
            >
-              {{ field.default_value || field.name || buildDefaultName(field, template.fields) }}
+              {{ field.default_value || field.name || buildDefaultName(field) }}
            </span>
          </div>
        </div>
@@ -196,7 +196,7 @@ export default {
  components: {
    IconChevronDown
  },
-  inject: ['t', 'save', 'template'],
+  inject: ['t', 'template'],
  props: {
    field: {
      type: Object,
@@ -212,17 +212,12 @@ export default {
      required: false,
      default: true
    },
-    withClickSaveEvent: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
    buildDefaultName: {
      type: Function,
      required: true
    }
  },
-  emits: ['close', 'click-save'],
+  emits: ['close', 'save'],
  data () {
    return {
      preferences: {}
@@ -262,6 +257,7 @@ export default {
    colors () {
      return [
        { label: '⬛', value: 'black' },
+        { label: '⬜', value: 'white' },
        { label: '🟦', value: 'blue' },
        { label: '🟥', value: 'red' }
      ]
@@ -276,6 +272,7 @@ export default {
        'items-center': !this.preferences.valign || this.preferences.valign === 'center',
        'items-start': this.preferences.valign === 'top',
        'items-end': this.preferences.valign === 'bottom',
+        'bg-black': this.preferences.color === 'white',
        'font-bold': ['bold_italic', 'bold'].includes(this.preferences.font_type),
        italic: ['bold_italic', 'italic'].includes(this.preferences.font_type)
      }
@@ -327,12 +324,7 @@ export default {

      Object.assign(this.field.preferences, this.preferences)

-      if (this.withClickSaveEvent) {
-        this.$emit('click-save')
-      } else {
-        this.save()
-      }
-
+      this.$emit('save')
      this.$emit('close')
    }
  }
@@ -9,7 +9,7 @@
    <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
      <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
        <span class="modal-title">
-          {{ t('formula') }} - {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || buildDefaultName(field, template.fields) }}
+          {{ t('formula') }} - {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || buildDefaultName(field) }}
        </span>
        <a
          href="#"
@@ -33,7 +33,7 @@
            v-for="f in fields"
            :key="f.uuid"
            class="mr-1 flex btn btn-neutral btn-outline border-base-content/20 btn-sm normal-case font-normal bg-white !rounded-xl"
-            @click.prevent="insertTextUnderCursor(`{{${f.name || buildDefaultName(f, template.fields)}}}`)"
+            @click.prevent="insertTextUnderCursor(`{{${f.name || buildDefaultName(f)}}}`)"
          >
            <IconMathFunction
              v-if="f.preferences?.formula"
@@ -47,7 +47,7 @@
              height="20"
              stroke-width="1.5"
            />
-            {{ f.name || buildDefaultName(f, template.fields) }}
+            {{ f.name || buildDefaultName(f) }}
          </button>
        </div>
        <div>
@@ -131,7 +131,7 @@ export default {
    IconCodePlus,
    IconMathFunction
  },
-  inject: ['t', 'save', 'template', 'withFormula'],
+  inject: ['t', 'template', 'withFormula'],
  props: {
    field: {
      type: Object,
@@ -152,7 +152,7 @@ export default {
      required: true
    }
  },
-  emits: ['close'],
+  emits: ['close', 'save'],
  data () {
    return {
      formula: ''
@@ -161,7 +161,7 @@ export default {
  computed: {
    fields () {
      return this.template.fields.reduce((acc, f) => {
-        if (f !== this.field && ['number'].includes(f.type) && (!f.preferences?.formula || !f.preferences.formula.includes(this.field.uuid))) {
+        if (f !== this.field && this.isNumberField(f) && (!f.preferences?.formula || !f.preferences.formula.includes(this.field.uuid))) {
          acc.push(f)
        }

@@ -176,12 +176,15 @@ export default {
    this.formula = this.humanizeFormula(this.field.preferences.formula || '')
  },
  methods: {
+    isNumberField (field) {
+      return field.type === 'number' || (['radio', 'select'].includes(field.type) && field.options?.every((o) => String(o.value).match(/^[\d.-]+$/)))
+    },
    humanizeFormula (text) {
      return text.replace(/{{(.*?)}}/g, (match, uuid) => {
-        const foundField = this.fields.find((f) => f.uuid === uuid)
+        const foundField = this.template.fields.find((f) => f.uuid === uuid)

        if (foundField) {
-          return `{{${foundField.name || this.buildDefaultName(foundField, this.template.fields)}}}`
+          return `{{${foundField.name || this.buildDefaultName(foundField)}}}`
        } else {
          return '{{FIELD NOT FOUND}}'
        }
@@ -189,8 +192,8 @@ export default {
    },
    normalizeFormula (text) {
      return text.replace(/{{(.*?)}}/g, (match, name) => {
-        const foundField = this.fields.find((f) => {
-          return (f.name || this.buildDefaultName(f, this.template.fields)).trim() === name.trim()
+        const foundField = this.template.fields.find((f) => {
+          return (f.name || this.buildDefaultName(f)).trim() === name.trim()
        })

        if (foundField) {
@@ -212,11 +215,14 @@ export default {
      } else {
        this.field.preferences.formula = normalizedFormula

-        if (this.field.type !== 'payment') {
+        if (this.field.type === 'payment') {
+          delete this.field.preferences.price
+          delete this.field.preferences.payment_link_id
+        } else {
          this.field.readonly = !!normalizedFormula
        }

-        this.save()
+        this.$emit('save')

        this.$emit('close')
      }
@@ -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'],
@@ -1,6 +1,7 @@
 const en = {
+  fixed: 'Fixed',
  default: 'Default',
-  save_as_custom_field: 'Save as Custom Field',
+  save_as_custom_field: 'Save as custom field',
  kba: 'KBA',
  analyzing_: 'Analyzing...',
  download: 'Download',
@@ -31,6 +32,9 @@ const en = {
  field_not_found: 'Field not found',
  clear: 'Clear',
  align: 'Align',
+  resize: 'Resize',
+  width: 'Width',
+  height: 'Height',
  add_all_required_fields_to_continue: 'Add all required fields to continue',
  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Uploaded PDF contains form fields. Keep or remove them?',
  keep: 'Keep',
@@ -45,9 +49,15 @@ 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',
+  greater_than: 'Greater than',
+  less_than: 'Less than',
  contains: 'Contains',
  does_not_contain: 'Does not contain',
  not_empty: 'Not empty',
@@ -67,6 +77,7 @@ const en = {
  up: 'Up',
  down: 'Down',
  checked: 'Checked',
+  current_date: 'Current date',
  save: 'Save',
  cancel: 'Cancel',
  any: 'Any',
@@ -91,12 +102,14 @@ const en = {
  format: 'Format',
  read_only: 'Read-only',
  page: 'Page',
-  draw_new_area: 'Draw New Area',
-  copy_to_all_pages: 'Copy to All Pages',
+  draw_new_area: 'Draw new area',
+  copy_to_all_pages: 'Copy to all pages',
+  more: 'More',
  add_option: 'Add option',
  option: 'Option',
  options: 'Options',
  condition: 'Condition',
+  make_dynamic: 'Make dynamic',
  first_party: 'First Party',
  second_party: 'Second Party',
  third_party: 'Third Party',
@@ -173,6 +186,9 @@ const en = {
  numbers_only: 'Numbers only',
  letters_only: 'Letters only',
  regexp_validation: 'Regexp validation',
+  custom_validation: 'Custom Validation',
+  length_validation: 'Length Validation',
+  number_range: 'Number Range',
  enter_pdf_password: 'Enter PDF password',
  wrong_password: 'Wrong password',
  currency: 'Currency',
@@ -183,7 +199,7 @@ const en = {
  learn_more: 'Learn more',
  and: 'and',
  or: 'or',
-  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Start a quick tour to learn how to create an send your first document',
+  start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document: 'Start a quick tour to learn how to create and send your first document',
  start_tour: 'Start Tour',
  or_add_from: 'Or add from',
  sync: 'Sync',
@@ -202,6 +218,7 @@ const en = {
 }

 const es = {
+  fixed: 'Fijo',
  default: 'Predeterminado',
  save_as_custom_field: 'Guardar como personalizado',
  kba: 'KBA',
@@ -233,8 +250,15 @@ 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',
+  width: 'Ancho',
+  height: 'Alto',
  add_all_required_fields_to_continue: 'Agregar todos los campos requeridos para continuar',
  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'El PDF cargado tiene campos. ¿Mantenerlos o eliminarlos?',
  keep: 'Mantener',
@@ -252,6 +276,8 @@ const es = {
  price: 'Precio',
  equal: 'Igual',
  not_equal: 'No es igual',
+  greater_than: 'Mayor que',
+  less_than: 'Menor que',
  contains: 'Contiene',
  does_not_contain: 'No contiene',
  not_empty: 'No vacío',
@@ -261,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',
@@ -270,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',
@@ -292,6 +320,7 @@ const es = {
  page: 'Página',
  draw_new_area: 'Dibujar nueva área',
  copy_to_all_pages: 'Copiar a todas las páginas',
+  more: 'Más',
  add_option: 'Agregar opción',
  option: 'Opción',
  options: 'Opciones',
@@ -376,6 +405,9 @@ const es = {
  numbers_only: 'Solo números',
  letters_only: 'Solo letras',
  regexp_validation: 'Validación de expresión regular',
+  custom_validation: 'Validación Personalizada',
+  length_validation: 'Validación de Longitud',
+  number_range: 'Rango de Números',
  enter_pdf_password: 'Ingrese la contraseña del PDF',
  wrong_password: 'Contraseña incorrecta',
  currency: 'Moneda',
@@ -405,6 +437,7 @@ const es = {
 }

 const it = {
+  fixed: 'Fisso',
  default: 'Predefinito',
  save_as_custom_field: 'Salva come personalizzato',
  kba: 'KBA',
@@ -437,6 +470,9 @@ const it = {
  field_not_found: 'Campo non trovato',
  clear: 'Cancella',
  align: 'Allinea',
+  resize: 'Ridimensiona',
+  width: 'Larghezza',
+  height: 'Altezza',
  add_all_required_fields_to_continue: 'Aggiungi tutti i campi obbligatori per continuare',
  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Il PDF caricato contiene campi del modulo. Mantenerli o rimuoverli?',
  keep: 'Mantieni',
@@ -451,9 +487,15 @@ 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',
+  greater_than: 'Maggiore di',
+  less_than: 'Minore di',
  contains: 'Contiene',
  does_not_contain: 'Non contiene',
  not_empty: 'Non vuoto',
@@ -473,6 +515,7 @@ const it = {
  up: 'Su',
  down: 'Giù',
  checked: 'Selezionato',
+  current_date: 'Data corrente',
  save: 'Salva',
  cancel: 'Annulla',
  any: 'Qualsiasi',
@@ -499,10 +542,12 @@ const it = {
  page: 'Pagina',
  draw_new_area: 'Disegna nuova area',
  copy_to_all_pages: 'Copia in tutte le pagine',
+  more: 'Altro',
  add_option: 'Aggiungi opzione',
  option: 'Opzione',
  options: 'Opzioni',
  condition: 'Condizione',
+  make_dynamic: 'Rendi dinamico',
  first_party: 'Prima parte',
  second_party: 'Seconda parte',
  third_party: 'Terza parte',
@@ -579,6 +624,9 @@ const it = {
  numbers_only: 'Solo numeri',
  letters_only: 'Solo lettere',
  regexp_validation: 'Validazione regexp',
+  custom_validation: 'Validazione Personalizzata',
+  length_validation: 'Validazione Lunghezza',
+  number_range: 'Intervallo Numerico',
  enter_pdf_password: 'Inserisci password PDF',
  wrong_password: 'Password errata',
  currency: 'Valuta',
@@ -608,6 +656,7 @@ const it = {
 }

 const pt = {
+  fixed: 'Fixo',
  default: 'Padrão',
  save_as_custom_field: 'Salvar como personalizado',
  kba: 'KBA',
@@ -639,11 +688,18 @@ 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?',
  keep: 'Manter',
  align: 'Alinhar',
+  resize: 'Redimensionar',
+  width: 'Largura',
+  height: 'Altura',
  left: 'Esquerda',
  heading: 'Cabeçalho',
  validation: 'Validação',
@@ -658,6 +714,8 @@ const pt = {
  price: 'Preço',
  equal: 'Igual',
  not_equal: 'Não é igual',
+  greater_than: 'Maior que',
+  less_than: 'Menor que',
  contains: 'Contém',
  does_not_contain: 'Não contém',
  not_empty: 'Não vazio',
@@ -667,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',
@@ -676,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',
@@ -698,6 +758,7 @@ const pt = {
  page: 'Página',
  draw_new_area: 'Desenhar nova área',
  copy_to_all_pages: 'Copiar para todas as páginas',
+  more: 'Mais',
  add_option: 'Adicionar opção',
  option: 'Opção',
  options: 'Opções',
@@ -782,6 +843,9 @@ const pt = {
  numbers_only: 'Somente números',
  letters_only: 'Somente letras',
  regexp_validation: 'Validação de expressão regular',
+  custom_validation: 'Validação Personalizada',
+  length_validation: 'Validação de Comprimento',
+  number_range: 'Intervalo de Números',
  enter_pdf_password: 'Digite a senha do PDF',
  wrong_password: 'Senha incorreta',
  currency: 'Moeda',
@@ -811,6 +875,7 @@ const pt = {
 }

 const fr = {
+  fixed: 'Fixe',
  default: 'Par défaut',
  save_as_custom_field: 'Enregistrer comme personnalisé',
  kba: 'KBA',
@@ -843,6 +908,9 @@ const fr = {
  field_not_found: 'Champ introuvable',
  clear: 'Effacer',
  align: 'Aligner',
+  resize: 'Redimensionner',
+  width: 'Largeur',
+  height: 'Hauteur',
  add_all_required_fields_to_continue: 'Ajoutez tous les champs obligatoires pour continuer',
  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Le PDF téléversé contient des champs de formulaire. Les conserver ou les supprimer ?',
  keep: 'Conserver',
@@ -857,9 +925,15 @@ 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',
+  greater_than: 'Supérieur à',
+  less_than: 'Inférieur à',
  contains: 'Contient',
  does_not_contain: 'Ne contient pas',
  not_empty: 'Non vide',
@@ -879,6 +953,7 @@ const fr = {
  up: 'Haut',
  down: 'Bas',
  checked: 'Coché',
+  current_date: 'Date du jour',
  save: 'Enregistrer',
  cancel: 'Annuler',
  any: "N'importe lequel",
@@ -905,10 +980,12 @@ const fr = {
  page: 'Page',
  draw_new_area: 'Dessiner une zone',
  copy_to_all_pages: 'Copier sur toutes les pages',
+  more: 'Plus',
  add_option: 'Ajouter une option',
  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',
@@ -985,6 +1062,9 @@ const fr = {
  numbers_only: 'Chiffres uniquement',
  letters_only: 'Lettres uniquement',
  regexp_validation: 'Validation par expression régulière',
+  custom_validation: 'Validation Personnalisée',
+  length_validation: 'Validation de Longueur',
+  number_range: 'Plage de Nombres',
  enter_pdf_password: 'Saisir le mot de passe du PDF',
  wrong_password: 'Mot de passe incorrect',
  currency: 'Devise',
@@ -1014,6 +1094,7 @@ const fr = {
 }

 const de = {
+  fixed: 'Fest',
  default: 'Standard',
  save_as_custom_field: 'Als benutzerdefiniert speichern',
  kba: 'KBA',
@@ -1046,6 +1127,9 @@ const de = {
  field_not_found: 'Feld nicht gefunden',
  clear: 'Leeren',
  align: 'Ausrichten',
+  resize: 'Größe ändern',
+  width: 'Breite',
+  height: 'Höhe',
  add_all_required_fields_to_continue: 'Fügen Sie alle erforderlichen Felder hinzu, um fortzufahren',
  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Das hochgeladene PDF enthält Formularfelder. Beibehalten oder entfernen?',
  keep: 'Beibehalten',
@@ -1060,9 +1144,15 @@ 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',
+  greater_than: 'Größer als',
+  less_than: 'Kleiner als',
  contains: 'Enthält',
  does_not_contain: 'Enthält nicht',
  not_empty: 'Nicht leer',
@@ -1082,6 +1172,7 @@ const de = {
  up: 'Nach oben',
  down: 'Nach unten',
  checked: 'Markiert',
+  current_date: 'Aktuelles Datum',
  save: 'Speichern',
  cancel: 'Abbrechen',
  any: 'Beliebig',
@@ -1108,10 +1199,12 @@ const de = {
  page: 'Seite',
  draw_new_area: 'Bereich zeichnen',
  copy_to_all_pages: 'Auf alle Seiten kopieren',
+  more: 'Mehr',
  add_option: 'Option hinzufügen',
  option: 'Option',
  options: 'Optionen',
  condition: 'Bedingung',
+  make_dynamic: 'Dynamisch machen',
  first_party: 'Erste Partei',
  second_party: 'Zweite Partei',
  third_party: 'Dritte Partei',
@@ -1188,6 +1281,9 @@ const de = {
  numbers_only: 'Nur Zahlen',
  letters_only: 'Nur Buchstaben',
  regexp_validation: 'RegExp-Validierung',
+  custom_validation: 'Benutzerdefinierte Validierung',
+  length_validation: 'Längenvalidierung',
+  number_range: 'Zahlenbereich',
  enter_pdf_password: 'PDF-Passwort eingeben',
  wrong_password: 'Falsches Passwort',
  currency: 'Währung',
@@ -1217,6 +1313,7 @@ const de = {
 }

 const nl = {
+  fixed: 'Vast',
  default: 'Standaard',
  save_as_custom_field: 'Opslaan als aangepast',
  kba: 'KBA',
@@ -1249,6 +1346,9 @@ const nl = {
  field_not_found: 'Veld niet gevonden',
  clear: 'Wissen',
  align: 'Uitlijnen',
+  resize: 'Formaat wijzigen',
+  width: 'Breedte',
+  height: 'Hoogte',
  add_all_required_fields_to_continue: 'Voeg alle vereiste velden toe om door te gaan',
  uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Geüploade PDF bevat formuliervelden. Behouden of verwijderen?',
  keep: 'Behouden',
@@ -1263,9 +1363,15 @@ 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',
+  greater_than: 'Groter dan',
+  less_than: 'Kleiner dan',
  contains: 'Bevat',
  does_not_contain: 'Bevat niet',
  not_empty: 'Niet leeg',
@@ -1285,6 +1391,7 @@ const nl = {
  up: 'Omhoog',
  down: 'Omlaag',
  checked: 'Aangevinkt',
+  current_date: 'Huidige datum',
  save: 'Opslaan',
  cancel: 'Annuleren',
  any: 'Elke',
@@ -1311,10 +1418,12 @@ const nl = {
  page: 'Pagina',
  draw_new_area: 'Nieuw gebied tekenen',
  copy_to_all_pages: 'Kopieer naar alle pag.',
+  more: 'Meer',
  add_option: 'Optie toevoegen',
  option: 'Optie',
  options: 'Opties',
  condition: 'Voorwaarde',
+  make_dynamic: 'Dynamisch maken',
  first_party: 'Eerste partij',
  second_party: 'Tweede partij',
  third_party: 'Derde partij',
@@ -1391,6 +1500,9 @@ const nl = {
  numbers_only: 'Alleen cijfers',
  letters_only: 'Alleen letters',
  regexp_validation: 'Regex validatie',
+  custom_validation: 'Aangepaste Validatie',
+  length_validation: 'Lengte Validatie',
+  number_range: 'Getalbereik',
  enter_pdf_password: 'Voer PDF-wachtwoord in',
  wrong_password: 'Onjuist wachtwoord',
  currency: 'Valuta',
@@ -2,87 +2,20 @@
  <svg
    height="40"
    width="40"
-    version="1.1"
+    style="color: #e97a42"
+    viewBox="0 0 180 180"
    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    viewBox="0 0 511.998 511.998"
-    xml:space="preserve"
  >
    <path
-      style="fill:#AA968C;"
-      d="M503.999,247.999c0,128.13-111.033,240-248,240S8,376.129,8,247.999s111.033-224,248-224
-    S503.999,119.869,503.999,247.999z"
-    />
-    <path
-      style="fill:#AA968C;"
-      d="M255.999,23.999C119.033,23.999,8,119.868,8,247.999c0,24.631,4.138,48.647,11.74,71.397
-    c25.518,34.29,66.232,56.602,112.26,56.602c53.893,0,100.6-30.495,124-75.13c23.4,44.636,70.107,75.13,124,75.13
-    c46.028,0,86.743-22.312,112.26-56.602c7.602-22.75,11.74-46.767,11.74-71.397C503.999,119.868,392.966,23.999,255.999,23.999z"
+      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
-      style="fill:#C8AF9B;"
-      cx="256"
-      cy="351.999"
-      r="136"
+      fill="currentColor"
+      cx="71.927"
+      cy="32.004"
+      r="2.829"
    />
-    <g>
-      <circle
-        style="fill:#464655;"
-        cx="132"
-        cy="203.999"
-        r="28"
-      />
-      <circle
-        style="fill:#464655;"
-        cx="380"
-        cy="203.999"
-        r="28"
-      />
-      <path
-        style="fill:#464655;"
-        d="M269.949,284.516c-7.672,10.741-20.227,10.741-27.899,0l-12.101-16.941
-      c-7.672-10.741-3.15-19.53,10.05-19.53h32c13.2,0,17.723,8.788,10.05,19.53L269.949,284.516z"
-      />
-    </g>
-    <path
-      style="fill:#AA968C;"
-      d="M 350.964 399.998 C 316.628 399.998 299.021 351.998 255.882 351.998 C 212.742 351.998 195.135 399.998 160.801 399.998 C 145.395 399.998 131.723 394.147 120.621 374.798 C 131.595 439.03 187.893 487.998 255.881 487.998 C 323.868 487.998 380.168 439.03 391.14 374.798 C 380.04 394.148 366.368 399.998 350.964 399.998 Z"
-    />
-    <g>
-      <path
-        style="fill:#8C7873;"
-        d="M32,423.998c-3.172,0-6.18-1.906-7.43-5.031c-1.641-4.105,0.359-8.758,4.461-10.402l160.008-64
-      c4.062-1.617,8.758,0.352,10.398,4.457s-0.359,8.758-4.461,10.402l-160.008,64C34,423.811,32.992,423.998,32,423.998z"
-      />
-      <path
-        style="fill:#8C7873;"
-        d="M15.992,375.995c-3.547,0-6.781-2.375-7.727-5.965c-1.125-4.273,1.422-8.648,5.695-9.773l152-40
-      c4.289-1.121,8.648,1.426,9.773,5.703c1.125,4.273-1.422,8.648-5.695,9.773l-152,40C17.351,375.913,16.672,375.995,15.992,375.995z
-      "
-      />
-      <path
-        style="fill:#8C7873;"
-        d="M7.992,335.995c-3.812,0-7.187-2.73-7.867-6.609c-0.773-4.352,2.133-8.5,6.484-9.27l136-24
-      c4.328-0.77,8.508,2.141,9.266,6.488c0.773,4.352-2.133,8.5-6.484,9.27l-136,24C8.922,335.956,8.453,335.995,7.992,335.995z"
-      />
-      <path
-        style="fill:#8C7873;"
-        d="M480,423.998c3.172,0,6.18-1.906,7.43-5.031c1.641-4.105-0.359-8.758-4.461-10.402l-160.008-64
-      c-4.063-1.617-8.758,0.352-10.398,4.457s0.359,8.758,4.461,10.402l160.008,64C478,423.811,479.007,423.998,480,423.998z"
-      />
-      <path
-        style="fill:#8C7873;"
-        d="M496.007,375.995c3.547,0,6.781-2.375,7.727-5.965c1.125-4.273-1.422-8.648-5.695-9.773l-152-40
-      c-4.289-1.121-8.648,1.426-9.773,5.703c-1.125,4.273,1.422,8.648,5.695,9.773l152,40
-      C494.648,375.913,495.328,375.995,496.007,375.995z"
-      />
-      <path
-        style="fill:#8C7873;"
-        d="M504.007,335.995c3.813,0,7.188-2.73,7.867-6.609c0.773-4.352-2.133-8.5-6.484-9.27l-136-24
-      c-4.328-0.77-8.508,2.141-9.266,6.488c-0.773,4.352,2.133,8.5,6.484,9.27l136,24C503.078,335.956,503.546,335.995,504.007,335.995z
-      "
-      />
-    </g>
  </svg>
 </template>

@@ -29,7 +29,7 @@
        :is-drag="isDrag"
        @move="onSelectionBoxMove"
        @contextmenu="openSelectionContextMenu"
-        @close-context-menu="closeSelectionContextMenu"
+        @close-context-menu="closeContextMenu"
      />
      <FieldArea
        v-for="(item, i) in areas"
@@ -48,6 +48,7 @@
        :default-submitters="defaultSubmitters"
        :max-page="totalPages - 1"
        :is-select-mode="isSelectMode"
+        :is-mobile="isMobile"
        @start-resize="resizeDirection = $event"
        @stop-resize="resizeDirection = null"
        @remove="$emit('remove-area', item.area)"
@@ -74,29 +75,39 @@
        class="absolute outline-dashed outline-gray-400 pointer-events-none z-20"
        :style="selectionRectStyle"
      />
-      <ContextMenu
-        v-if="contextMenu"
+      <FieldContextMenu
+        v-if="contextMenu && contextMenu.field"
        :context-menu="contextMenu"
        :field="contextMenu.field"
+        :with-signature-id="withSignatureId"
+        :with-prefillable="withPrefillable"
        :editable="editable"
-        :with-fields-detection="withFieldsDetection"
+        :default-field="defaultFieldsIndex[contextMenu.field.name]"
        @copy="handleCopy"
        @delete="handleDelete"
-        @paste="handlePaste"
-        @autodetect-fields="handleAutodetectFields"
        @close="closeContextMenu"
+        @set-draw="$emit('set-draw', $event)"
+        @scroll-to="$emit('scroll-to', $event)"
+        @save="save"
+        @add-custom-field="$emit('add-custom-field', $event)"
      />
-      <ContextMenu
-        v-if="selectionContextMenu"
-        :context-menu="selectionContextMenu"
+      <SelectionContextMenu
+        v-else-if="contextMenu && contextMenu.areas"
+        :context-menu="contextMenu"
        :editable="editable"
-        :is-multi-selection="true"
-        :selected-areas="selectedAreasRef.value"
        :template="template"
        @copy="handleSelectionCopy"
        @delete="handleSelectionDelete"
-        @align="handleSelectionAlign"
-        @close="closeSelectionContextMenu"
+        @close="closeContextMenu"
+      />
+      <PageContextMenu
+        v-else-if="contextMenu && !contextMenu.field && !contextMenu.areas"
+        :context-menu="contextMenu"
+        :editable="editable"
+        :with-fields-detection="withFieldsDetection"
+        @paste="handlePaste"
+        @autodetect-fields="handleAutodetectFields"
+        @close="closeContextMenu"
      />
    </div>
    <div
@@ -119,17 +130,21 @@

 <script>
 import FieldArea from './area'
-import ContextMenu from './context_menu'
+import FieldContextMenu from './field_context_menu'
+import SelectionContextMenu from './selection_context_menu'
+import PageContextMenu from './page_context_menu'
 import SelectionBox from './selection_box'

 export default {
  name: 'TemplatePage',
  components: {
    FieldArea,
-    ContextMenu,
+    FieldContextMenu,
+    SelectionContextMenu,
+    PageContextMenu,
    SelectionBox
  },
-  inject: ['fieldTypes', 'defaultDrawFieldType', 'fieldsDragFieldRef', 'customDragFieldRef', 'assignDropAreaSize', 'selectedAreasRef', 'template', 'isSelectModeRef'],
+  inject: ['fieldTypes', 'defaultDrawFieldType', 'fieldsDragFieldRef', 'customDragFieldRef', 'assignDropAreaSize', 'selectedAreasRef', 'template', 'isSelectModeRef', 'save'],
  props: {
    image: {
      type: Object,
@@ -140,6 +155,11 @@ export default {
      required: false,
      default: null
    },
+    isMobile: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
    withSignatureId: {
      type: Boolean,
      required: false,
@@ -228,7 +248,7 @@ export default {
      default: false
    }
  },
-  emits: ['draw', 'drop-field', 'remove-area', 'copy-field', 'paste-field', 'scroll-to', 'copy-selected-areas', 'delete-selected-areas', 'align-selected-areas', 'autodetect-fields', 'add-custom-field'],
+  emits: ['draw', 'drop-field', 'remove-area', 'copy-field', 'paste-field', 'scroll-to', 'copy-selected-areas', 'delete-selected-areas', 'autodetect-fields', 'add-custom-field', 'set-draw'],
  data () {
    return {
      areaRefs: [],
@@ -236,13 +256,12 @@ export default {
      resizeDirection: null,
      newAreas: [],
      contextMenu: null,
-      selectionRect: null,
-      selectionContextMenu: null
+      selectionRect: null
    }
  },
  computed: {
    isSelectMode () {
-      return this.isSelectModeRef.value && !this.drawFieldType && this.editable && !this.drawField
+      return this.isSelectModeRef.value && !this.drawFieldType && this.editable && !this.drawField && !this.drawCustomField
    },
    pageSelectedAreas () {
      if (!this.selectedAreasRef.value) return []
@@ -305,11 +324,6 @@ export default {
        return 'text'
      }
    },
-    isMobile () {
-      const isMobileSafariIos = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit/i.test(navigator.userAgent)
-
-      return isMobileSafariIos || /android|iphone|ipad/i.test(navigator.userAgent)
-    },
    resizeDirectionClasses () {
      return {
        nwse: 'cursor-nwse-resize',
@@ -399,29 +413,32 @@ export default {
      }
    },
    openSelectionContextMenu (event) {
+      if (!this.editable) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+
      const rect = this.$el.getBoundingClientRect()

-      this.selectionContextMenu = {
+      this.contextMenu = {
        x: event.clientX,
        y: event.clientY,
        relativeX: (event.clientX - rect.left) / rect.width,
-        relativeY: (event.clientY - rect.top) / rect.height
+        relativeY: (event.clientY - rect.top) / rect.height,
+        areas: this.selectedAreasRef.value
      }
    },
-    closeSelectionContextMenu () {
-      this.selectionContextMenu = null
-    },
    handleSelectionCopy () {
      this.$emit('copy-selected-areas')
-      this.closeSelectionContextMenu()
+
+      this.closeContextMenu()
    },
    handleSelectionDelete () {
      this.$emit('delete-selected-areas')
-      this.closeSelectionContextMenu()
-    },
-    handleSelectionAlign (direction) {
-      this.$emit('align-selected-areas', direction)
-      this.closeSelectionContextMenu()
+
+      this.closeContextMenu()
    },
    closeContextMenu () {
      this.contextMenu = null
@@ -0,0 +1,159 @@
+<template>
+  <div
+    ref="menu"
+    class="fixed z-50 p-1 bg-white shadow-lg rounded-lg border border-neutral-200 cursor-default"
+    style="min-width: 170px"
+    :style="menuStyle"
+    @mousedown.stop
+    @pointerdown.stop
+  >
+    <button
+      class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
+      :class="!hasClipboardData ? 'opacity-50 cursor-not-allowed' : 'hover:bg-neutral-100'"
+      :disabled="!hasClipboardData"
+      @click.stop="!hasClipboardData ? null : $emit('paste')"
+    >
+      <span class="flex items-center space-x-2">
+        <IconClipboard class="w-4 h-4" />
+        <span>{{ t('paste') }}</span>
+      </span>
+      <span class="text-xs text-base-content/60 ml-4">{{ isMac ? '⌘V' : 'Ctrl+V' }}</span>
+    </button>
+    <button
+      class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
+      @click.stop="handleToggleSelectMode"
+    >
+      <span class="flex items-center space-x-2">
+        <IconClick
+          v-if="!isSelectModeRef.value"
+          class="w-4 h-4"
+        />
+        <IconNewSection
+          v-else
+          class="w-4 h-4"
+        />
+        <span>{{ isSelectModeRef.value ? t('draw_fields') : t('select_fields') }}</span>
+      </span>
+      <span class="text-xs text-base-content/60 ml-4">Tab</span>
+    </button>
+    <hr
+      v-if="showAutodetectFields"
+      class="my-1 border-neutral-200"
+    >
+    <button
+      v-if="showAutodetectFields"
+      class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+      @click.stop="$emit('autodetect-fields')"
+    >
+      <IconSparkles class="w-4 h-4" />
+      <span>{{ t('autodetect_fields') }}</span>
+    </button>
+  </div>
+</template>
+
+<script>
+import { IconClipboard, IconClick, IconNewSection, IconSparkles } from '@tabler/icons-vue'
+
+export default {
+  name: 'PageContextMenu',
+  components: {
+    IconClipboard,
+    IconClick,
+    IconNewSection,
+    IconSparkles
+  },
+  inject: ['t', 'isSelectModeRef'],
+  props: {
+    contextMenu: {
+      type: Object,
+      default: null,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    withFieldsDetection: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['paste', 'close', 'autodetect-fields'],
+  computed: {
+    isMac () {
+      return (navigator.userAgentData?.platform || navigator.platform)?.toLowerCase()?.includes('mac')
+    },
+    hasClipboardData () {
+      try {
+        const clipboard = localStorage.getItem('docuseal_clipboard')
+
+        if (clipboard) {
+          const data = JSON.parse(clipboard)
+
+          return Date.now() - data.timestamp < 3600000
+        }
+
+        return false
+      } catch {
+        return false
+      }
+    },
+    menuStyle () {
+      return {
+        left: this.contextMenu.x + 'px',
+        top: this.contextMenu.y + 'px'
+      }
+    },
+    showAutodetectFields () {
+      return this.withFieldsDetection && this.editable
+    }
+  },
+  mounted () {
+    document.addEventListener('keydown', this.onKeyDown)
+    document.addEventListener('mousedown', this.handleClickOutside)
+
+    this.$nextTick(() => {
+      this.checkMenuPosition()
+    })
+  },
+  beforeUnmount () {
+    document.removeEventListener('keydown', this.onKeyDown)
+    document.removeEventListener('mousedown', this.handleClickOutside)
+  },
+  methods: {
+    checkMenuPosition () {
+      if (this.$refs.menu) {
+        const rect = this.$refs.menu.getBoundingClientRect()
+        const overflow = rect.bottom - window.innerHeight
+
+        if (overflow > 0) {
+          this.contextMenu.y = this.contextMenu.y - overflow - 4
+        }
+      }
+    },
+    onKeyDown (event) {
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        this.$emit('close')
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v' && this.hasClipboardData) {
+        event.preventDefault()
+        event.stopPropagation()
+
+        this.$emit('paste')
+      }
+    },
+    handleClickOutside (event) {
+      if (this.$refs.menu && !this.$refs.menu.contains(event.target)) {
+        this.$emit('close')
+      }
+    },
+    handleToggleSelectMode () {
+      this.isSelectModeRef.value = !this.isSelectModeRef.value
+
+      this.$emit('close')
+    }
+  }
+}
+</script>
@@ -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"
@@ -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>
@@ -119,6 +171,7 @@
      <ConditionsModal
        :item="item"
        :build-default-name="buildDefaultName"
+        @save="$emit('change')"
        @close="isShowConditionsModal = false"
      />
    </Teleport>
@@ -128,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'],
+  inject: ['t', 'getFieldTypeIndex', 'baseFetch'],
  props: {
    item: {
      type: Object,
@@ -167,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,
@@ -183,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: {
@@ -199,6 +268,96 @@ export default {
  methods: {
    upload: Upload.methods.upload,
    buildDefaultName: Field.methods.buildDefaultName,
+    closeDropdown () {
+      this.$el.getRootNode().activeElement.blur()
+    },
+    makeDynamic () {
+      this.isMakeDynamicLoading = true
+
+      Promise.all([
+        this.baseFetch(`/templates/${this.template.id}/dynamic_documents`, {
+          method: 'POST',
+          body: JSON.stringify({ uuid: this.document.uuid }),
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }),
+        import(/* webpackChunkName: "dynamic-editor" */ './dynamic_document')
+      ]).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

@@ -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'],
@@ -0,0 +1,348 @@
+<template>
+  <div>
+    <div
+      v-if="!isShowFontModal && !isShowConditionsModal"
+      ref="menu"
+      class="fixed z-50 p-1 bg-white shadow-lg rounded-lg border border-neutral-200 cursor-default"
+      style="min-width: 170px"
+      :style="menuStyle"
+      @mousedown.stop
+      @pointerdown.stop
+    >
+      <ContextSubmenu
+        :icon="IconLayoutAlignMiddle"
+        :label="t('align')"
+      >
+        <button
+          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+          @click.stop="alignSelectedAreas('left')"
+        >
+          <IconLayoutAlignLeft class="w-4 h-4" />
+          <span>{{ t('align_left') }}</span>
+        </button>
+        <button
+          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+          @click.stop="alignSelectedAreas('right')"
+        >
+          <IconLayoutAlignRight class="w-4 h-4" />
+          <span>{{ t('align_right') }}</span>
+        </button>
+        <button
+          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+          @click.stop="alignSelectedAreas('top')"
+        >
+          <IconLayoutAlignTop class="w-4 h-4" />
+          <span>{{ t('align_top') }}</span>
+        </button>
+        <button
+          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+          @click.stop="alignSelectedAreas('bottom')"
+        >
+          <IconLayoutAlignBottom class="w-4 h-4" />
+          <span>{{ t('align_bottom') }}</span>
+        </button>
+      </ContextSubmenu>
+      <ContextSubmenu
+        :icon="IconAspectRatio"
+        :label="t('resize')"
+      >
+        <button
+          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+          @click.stop="resizeSelectedAreas('width')"
+        >
+          <IconArrowsHorizontal class="w-4 h-4" />
+          <span>{{ t('width') }}</span>
+        </button>
+        <button
+          class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+          @click.stop="resizeSelectedAreas('height')"
+        >
+          <IconArrowsVertical class="w-4 h-4" />
+          <span>{{ t('height') }}</span>
+        </button>
+      </ContextSubmenu>
+      <hr
+        v-if="showFont || showCondition"
+        class="my-1 border-neutral-200"
+      >
+      <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"
+        @click.stop="openFontModal"
+      >
+        <IconTypography class="w-4 h-4" />
+        <span>{{ t('font') }}</span>
+      </button>
+      <button
+        v-if="showCondition"
+        class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm"
+        @click.stop="openConditionModal"
+      >
+        <IconRouteAltLeft class="w-4 h-4" />
+        <span>{{ t('condition') }}</span>
+      </button>
+      <hr 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"
+        @click.stop="$emit('copy')"
+      >
+        <span class="flex items-center space-x-2">
+          <IconCopy class="w-4 h-4" />
+          <span>{{ t('copy') }}</span>
+        </span>
+        <span class="text-xs text-base-content/60 ml-4">{{ isMac ? '⌘C' : 'Ctrl+C' }}</span>
+      </button>
+      <button
+        class="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">
+          <IconTrashX class="w-4 h-4" />
+          <span>{{ t('remove') }}</span>
+        </span>
+        <span class="text-xs text-base-content/60 ml-4">Del</span>
+      </button>
+    </div>
+    <Teleport
+      v-if="isShowFontModal"
+      :to="modalContainerEl"
+    >
+      <FontModal
+        :field="multiSelectField"
+        :area="contextMenu.area"
+        :editable="editable"
+        :build-default-name="buildDefaultName"
+        @save="handleSaveMultiSelectFontModal"
+        @close="closeModal"
+      />
+    </Teleport>
+    <Teleport
+      v-if="isShowConditionsModal"
+      :to="modalContainerEl"
+    >
+      <ConditionsModal
+        :item="multiSelectField"
+        :build-default-name="buildDefaultName"
+        :exclude-field-uuids="selectedFields.map(f => f.uuid)"
+        @save="handleSaveMultiSelectConditionsModal"
+        @close="closeModal"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script>
+import { IconCopy, IconTrashX, IconTypography, IconRouteAltLeft, IconLayoutAlignLeft, IconLayoutAlignRight, IconLayoutAlignTop, IconLayoutAlignBottom, IconLayoutAlignMiddle, IconAspectRatio, IconArrowsHorizontal, IconArrowsVertical } from '@tabler/icons-vue'
+import FontModal from './font_modal'
+import ConditionsModal from './conditions_modal'
+import ContextSubmenu from './field_context_submenu'
+import Field from './field'
+import FieldType from './field_type'
+
+export default {
+  name: 'SelectionContextMenu',
+  components: {
+    IconCopy,
+    IconTrashX,
+    IconTypography,
+    IconRouteAltLeft,
+    IconLayoutAlignLeft,
+    IconLayoutAlignRight,
+    IconLayoutAlignTop,
+    IconLayoutAlignBottom,
+    FontModal,
+    IconArrowsHorizontal,
+    IconArrowsVertical,
+    ConditionsModal,
+    ContextSubmenu
+  },
+  inject: ['t', 'save', 'selectedAreasRef', 'getFieldTypeIndex'],
+  props: {
+    contextMenu: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    template: {
+      type: Object,
+      required: true
+    },
+    withCondition: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['copy', 'delete', 'close'],
+  data () {
+    return {
+      isShowFontModal: false,
+      isShowConditionsModal: false,
+      multiSelectField: null
+    }
+  },
+  computed: {
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
+    },
+    selectedFields () {
+      return this.selectedAreasRef.value.map((area) => {
+        return this.template.fields.find((f) => f.areas?.includes(area))
+      }).filter(Boolean)
+    },
+    isMac () {
+      return (navigator.userAgentData?.platform || navigator.platform)?.toLowerCase()?.includes('mac')
+    },
+    menuStyle () {
+      return {
+        left: this.contextMenu.x + 'px',
+        top: this.contextMenu.y + 'px'
+      }
+    },
+    showFont () {
+      return true
+    },
+    showCondition () {
+      return this.withCondition
+    },
+    fieldNames: FieldType.computed.fieldNames,
+    fieldLabels: FieldType.computed.fieldLabels
+  },
+  mounted () {
+    document.addEventListener('keydown', this.onKeyDown)
+    document.addEventListener('mousedown', this.handleClickOutside)
+
+    this.$nextTick(() => this.checkMenuPosition())
+  },
+  beforeUnmount () {
+    document.removeEventListener('keydown', this.onKeyDown)
+    document.removeEventListener('mousedown', this.handleClickOutside)
+  },
+  methods: {
+    IconLayoutAlignMiddle,
+    IconAspectRatio,
+    buildDefaultName: Field.methods.buildDefaultName,
+    checkMenuPosition () {
+      if (this.$refs.menu) {
+        const rect = this.$refs.menu.getBoundingClientRect()
+        const overflow = rect.bottom - window.innerHeight
+
+        if (overflow > 0) {
+          this.contextMenu.y = this.contextMenu.y - overflow - 4
+        }
+      }
+    },
+    onKeyDown (event) {
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        this.$emit('close')
+      }
+    },
+    handleClickOutside (event) {
+      if (this.$refs.menu && !this.$refs.menu.contains(event.target)) {
+        this.$emit('close')
+      }
+    },
+    openFontModal () {
+      this.multiSelectField = {
+        name: this.t('fields_selected').replace('{count}', this.selectedFields.length),
+        preferences: {}
+      }
+
+      const preferencesStrings = this.selectedFields.map((f) => JSON.stringify(f.preferences || {}))
+
+      if (preferencesStrings.every((s) => s === preferencesStrings[0])) {
+        this.multiSelectField.preferences = JSON.parse(preferencesStrings[0])
+      }
+
+      this.isShowFontModal = true
+    },
+    openConditionModal () {
+      this.multiSelectField = {
+        name: this.t('fields_selected').replace('{count}', this.selectedFields.length),
+        conditions: []
+      }
+
+      const conditionStrings = this.selectedFields.map((f) => JSON.stringify(f.conditions || []))
+
+      if (conditionStrings.every((s) => s === conditionStrings[0])) {
+        this.multiSelectField.conditions = JSON.parse(conditionStrings[0])
+      }
+
+      this.isShowConditionsModal = true
+    },
+    closeModal () {
+      this.isShowFontModal = false
+      this.isShowConditionsModal = false
+      this.multiSelectField = null
+
+      this.$emit('close')
+    },
+    alignSelectedAreas (direction) {
+      const areas = this.selectedAreasRef.value
+
+      let targetValue
+
+      if (direction === 'left') {
+        targetValue = Math.min(...areas.map(a => a.x))
+        areas.forEach((area) => { area.x = targetValue })
+      } else if (direction === 'right') {
+        targetValue = Math.max(...areas.map(a => a.x + a.w))
+        areas.forEach((area) => { area.x = targetValue - area.w })
+      } else if (direction === 'top') {
+        targetValue = Math.min(...areas.map(a => a.y))
+        areas.forEach((area) => { area.y = targetValue })
+      } else if (direction === 'bottom') {
+        targetValue = Math.max(...areas.map(a => a.y + a.h))
+        areas.forEach((area) => { area.y = targetValue - area.h })
+      }
+
+      this.save()
+
+      this.$emit('close')
+    },
+    resizeSelectedAreas (dimension) {
+      const areas = this.selectedAreasRef.value
+
+      const values = areas.map(a => dimension === 'width' ? a.w : a.h).sort((a, b) => a - b)
+      const medianValue = values[Math.floor(values.length / 2)]
+
+      if (dimension === 'width') {
+        areas.forEach((area) => { area.w = medianValue })
+      } else if (dimension === 'height') {
+        areas.forEach((area) => {
+          const diff = medianValue - area.h
+          area.y = area.y - diff
+          area.h = medianValue
+        })
+      }
+
+      this.save()
+
+      this.$emit('close')
+    },
+    handleSaveMultiSelectFontModal () {
+      this.selectedFields.forEach((field) => {
+        field.preferences = { ...field.preferences, ...this.multiSelectField.preferences }
+      })
+
+      this.save()
+
+      this.closeModal()
+    },
+    handleSaveMultiSelectConditionsModal () {
+      this.selectedFields.forEach((field) => {
+        field.conditions = JSON.parse(JSON.stringify(this.multiSelectField.conditions))
+      })
+
+      this.save()
+
+      this.closeModal()
+    }
+  }
+}
+</script>
@@ -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'],
@@ -290,7 +290,11 @@ export default {
        if (resp.ok) {
          resp.json().then((data) => {
            this.$emit('success', data)
-            this.$refs.input.value = ''
+
+            if (this.$refs.input) {
+              this.$refs.input.value = ''
+            }
+
            this.isLoading = false
          })
        } else if (resp.status === 422) {
@@ -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
@@ -164,11 +164,13 @@ class ProcessSubmitterCompletionJob
    next_submitter_items =
      if submission.template_submitters.any? { |s| s['order'] }
        submitter_groups =
-          submission.template_submitters.group_by.with_index { |s, index| s['order'] || index }
+          submission.template_submitters
+                    .group_by.with_index { |s, index| s['order'] || index }
+                    .sort_by(&:first).pluck(1)

-        current_group_index = submitter_groups.find { |_, group| group.any? { |s| s['uuid'] == submitter.uuid } }&.first
+        current_group_index = submitter_groups.index { |group| group.any? { |s| s['uuid'] == submitter.uuid } }

-        if submitter_groups[current_group_index + 1] &&
+        if current_group_index && submitter_groups[current_group_index + 1] &&
           submitters_index.values_at(*submitter_groups[current_group_index].pluck('uuid'))
                           .compact.all?(&:completed_at?)
          submitter_groups[current_group_index + 1]
@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+class SendTemplateArchivedWebhookRequestJob
+  include Sidekiq::Job
+
+  sidekiq_options queue: :webhooks
+
+  MAX_ATTEMPTS = 10
+
+  def perform(params = {})
+    template = Template.find_by(id: params['template_id'])
+
+    return unless template
+
+    webhook_url = WebhookUrl.find_by(id: params['webhook_url_id'])
+
+    return unless webhook_url
+
+    attempt = params['attempt'].to_i
+
+    return if webhook_url.url.blank? || webhook_url.events.exclude?('template.archived')
+
+    resp = SendWebhookRequest.call(webhook_url, event_type: 'template.archived',
+                                                event_uuid: params['event_uuid'],
+                                                record: template,
+                                                attempt:,
+                                                data: template.as_json(only: %i[id archived_at]))
+
+    if (resp.nil? || resp.status.to_i >= 400) && attempt <= MAX_ATTEMPTS &&
+       (!Docuseal.multitenant? || template.account.account_configs.exists?(key: :plan))
+      SendTemplateArchivedWebhookRequestJob.perform_in((2**attempt).minutes, {
+                                                         **params,
+                                                         'attempt' => attempt + 1,
+                                                         'last_status' => resp&.status.to_i
+                                                       })
+    end
+  end
+end
@@ -26,7 +26,7 @@ class SendTestWebhookRequestJob
        Addressable::URI.parse(webhook_url.url).normalize
      end

-      raise HttpsError, 'Only HTTPS is allowed.' if uri.scheme != 'https'
+      raise HttpsError, 'Only HTTPS is allowed.' if uri.scheme != 'https' || [443, nil].exclude?(uri.port)
      raise LocalhostError, "Can't send to localhost." if uri.host.in?(SendWebhookRequest::LOCALHOSTS)
    end

@@ -5,6 +5,8 @@ class ApplicationMailer < ActionMailer::Base
  layout 'mailer'

  register_interceptor ActionMailerConfigsInterceptor
+  register_interceptor HtmlToPlainTextInterceptor
+  register_preview_interceptor HtmlToPlainTextInterceptor

  register_observer ActionMailerEventsObserver

@@ -14,12 +14,7 @@ class SubmitterMailer < ApplicationMailer
      @email_message = submitter.account.email_messages.find_by(uuid: submitter.preferences['email_message_uuid'])
    end

-    template_submitters_index =
-      if @email_message.blank?
-        build_submitter_preferences_index(@submitter)
-      else
-        {}
-      end
+    template_submitters_index = @email_message.blank? ? build_submitter_preferences_index(@submitter) : {}

    @body = @email_message&.body.presence ||
            template_submitters_index.dig(@submitter.uuid, 'request_email_body').presence ||
@@ -34,7 +29,9 @@ 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)

    I18n.with_locale(@current_account.locale) do
      subject = build_invite_subject(@subject, @email_config, submitter)
@@ -133,6 +130,8 @@ class SubmitterMailer < ApplicationMailer
    assign_message_metadata('submitter_documents_copy', @submitter)
    reply_to = build_submitter_reply_to(submitter, email_config: @email_config, documents_copy_email: true)

+    maybe_set_custom_domain(@submitter)
+
    I18n.with_locale(@current_account.locale) do
      subject =
        @subject.present? ? ReplaceEmailVariables.call(@subject, submitter:) : I18n.t(:your_document_copy)
@@ -262,4 +261,10 @@ class SubmitterMailer < ApplicationMailer
  def fetch_config_email_body(email_config, _submitter = nil)
    email_config ? email_config.value['body'].presence : nil
  end
+
+  def maybe_set_custom_domain(submitter)
+    if Docuseal.multitenant? && (config = AccountConfig.find_by(account_id: submitter.account_id, key: :custom_domain))
+      @custom_domain = config.value
+    end
+  end
 end
@@ -49,6 +49,7 @@ class AccountConfig < ApplicationRecord
  WITH_AUDIT_VALUES_KEY = 'with_audit_values'
  WITH_AUDIT_SENDER_KEY = 'with_audit_sender'
  WITH_SUBMITTER_TIMEZONE_KEY = 'with_submitter_timezone'
+  WITH_TIMESTAMP_SECONDS_KEY = 'with_timestamp_seconds'
  REQUIRE_SIGNING_REASON_KEY = 'require_signing_reason'
  REUSE_SIGNATURE_KEY = 'reuse_signature'
  WITH_FIELD_LABELS_KEY = 'with_field_labels'
@@ -56,6 +57,14 @@ 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,
+    SUBMITTER_COMPLETED_EMAIL_KEY => %w[template.name submission.submitters submission.link].freeze,
+    SUBMITTER_INVITATION_REMINDER_EMAIL_KEY => %w[template.name submitter.link account.name].freeze,
+    SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY => %w[template.name documents.link account.name].freeze
+  }.freeze

  DEFAULT_VALUES = {
    SUBMITTER_INVITATION_EMAIL_KEY => lambda {
@@ -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
 #
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Alex Turchyn	22d4c1bd10	Merge from docusealco/wip	2026-03-23 14:59:53 +02:00
Pete Matsyburka	e3dfb0ae83	add SMTP_ENABLE_TLS	2026-03-23 10:02:54 +02:00
Pete Matsyburka	8d7c3f0e26	fix generation	2026-03-23 09:48:39 +02:00
Pete Matsyburka	b11775ebda	remove premailer	2026-03-22 18:13:41 +02:00
Pete Matsyburka	608191183a	update deps	2026-03-21 13:37:31 +02:00
Pete Matsyburka	2ba903e170	fix specs	2026-03-18 10:18:28 +02:00
Alex Turchyn	342b64d502	add translations	2026-03-18 09:52:58 +02:00
Pete Matsyburka	1a8f048aaa	update devise	2026-03-18 09:52:21 +02:00
Pete Matsyburka	7309581b75	add template archived event	2026-03-18 09:52:21 +02:00
Pete Matsyburka	36d59c40a7	add template update event	2026-03-18 08:36:36 +02:00
Pete Matsyburka	ed3c7c324b	adjust save dynamic	2026-03-16 17:24:07 +02:00
Alex Turchyn	fd868360a3	Merge from docusealco/wip	2026-03-16 17:07:07 +02:00
Pete Matsyburka	8dc2ebfbe0	fix builder save	2026-03-16 16:59:45 +02:00
Alex Turchyn	997711b34a	Merge from docusealco/wip	2026-03-16 13:36:06 +02:00
Pete Matsyburka	ac01b7129d	add i18n	2026-03-16 12:42:58 +02:00
Pete Matsyburka	f4b7528c0d	fix send form	2026-03-16 08:52:42 +02:00
Pete Matsyburka	d7b9ae5df5	add datenow size	2026-03-16 08:21:36 +02:00
Pete Matsyburka	4db29126e9	fix variables list	2026-03-16 08:04:02 +02:00
Pete Matsyburka	4cfee2fe45	fix schema documents	2026-03-15 15:02:46 +02:00
Pete Matsyburka	db5dbd6ac2	adjust dynamic editor	2026-03-15 14:05:20 +02:00
Pete Matsyburka	44db775b89	fix variable style	2026-03-14 17:47:53 +02:00
Alex Turchyn	8e2e780a1a	fix webhook events filtering	2026-03-13 20:04:09 +02:00
Pete Matsyburka	7aba2eb4da	disable decline	2026-03-12 08:58:56 +02:00
Pete Matsyburka	3e250bfb28	error update if declined	2026-03-11 23:44:06 +02:00
Pete Matsyburka	9c02ed66f5	fix field scroll	2026-03-11 14:43:16 +02:00
Pete Matsyburka	f5ae8c60d3	preload dynamic editor	2026-03-11 10:44:12 +02:00
Pete Matsyburka	e90ac391b2	update readme	2026-03-10 19:09:00 +02:00
Pete Matsyburka	0e5f949bcf	remove email from signing reason	2026-03-10 11:39:00 +02:00
Pete Matsyburka	b7c270bef8	dir auto section	2026-03-10 10:31:45 +02:00
Pete Matsyburka	5f16b506f5	fix n+1	2026-03-10 08:12:32 +02:00
Pete Matsyburka	176148fc71	adjust default initial	2026-03-09 17:29:46 +02:00
Alex Turchyn	861daaedf4	Merge from docusealco/wip	2026-03-09 10:40:29 +02:00
Pete Matsyburka	d8430f4e63	fix migration	2026-03-09 09:02:56 +02:00
Pete Matsyburka	dd44864485	fix field position	2026-03-06 11:37:53 +02:00
Pete Matsyburka	b3bb29f383	fix brakeman	2026-03-05 21:42:55 +02:00
Pete Matsyburka	b4d137c0de	remove flash	2026-03-05 12:30:26 +02:00
Alex Turchyn	62a969d8fe	add MCP support	2026-03-05 12:17:14 +02:00
Pete Matsyburka	961f09e092	set dynamic fields	2026-03-05 10:08:29 +02:00
Pete Matsyburka	b2dfa83f18	upload json	2026-03-04 12:27:15 +02:00
Pete Matsyburka	37196ff89f	add dynamic documents	2026-03-04 10:13:30 +02:00
Pete Matsyburka	b50d982497	smtp timeout env vars	2026-03-03 22:49:55 +02:00
Pete Matsyburka	4a484aca69	hide storage nav if configured with env	2026-03-03 22:01:44 +02:00
Pete Matsyburka	0bf37d571a	update color	2026-03-03 18:46:06 +02:00
Alex Turchyn	d4e94ac2bc	Merge from docusealco/wip	2026-03-02 17:26:04 +02:00
Pete Matsyburka	75bc789bb1	add reply to	2026-03-02 14:47:37 +02:00
Pete Matsyburka	bc231d5bf1	add reply to	2026-03-02 14:34:16 +02:00
Alex Turchyn	ab9008b3be	fix brakeman SQL injection warning	2026-03-01 16:14:15 +02:00
Pete Matsyburka	65491936c3	fix archived export	2026-02-26 17:20:05 +02:00
Pete Matsyburka	e589998840	add field type class	2026-02-26 11:08:26 +02:00
Pete Matsyburka	0afba8d11e	adjust with prefillable	2026-02-26 11:03:08 +02:00
Pete Matsyburka	f622ed168f	fix autocomplete	2026-02-25 13:01:03 +02:00
Pete Matsyburka	5a31df40d8	add field settings classes	2026-02-25 11:02:00 +02:00
Pete Matsyburka	db3b80c96c	fix clone	2026-02-25 11:02:00 +02:00
Pete Matsyburka	bd28a761d0	adjust bmp loader	2026-02-25 11:02:00 +02:00
Pete Matsyburka	4f2830a34d	increase image resolution	2026-02-25 11:02:00 +02:00
Pete Matsyburka	a5716cd518	show html textarea	2026-02-25 11:02:00 +02:00
Pete Matsyburka	d035525c7a	additional terms	2026-02-25 11:02:00 +02:00
Alex Turchyn	13fa87c449	Merge from docusealco/wip	2026-02-23 13:56:04 +02:00
Pete Matsyburka	246ccfb049	fix highlight	2026-02-23 08:31:38 +02:00
Pete Matsyburka	cbffb1e5b8	cloudflare r2 fix	2026-02-22 20:13:19 +02:00
Pete Matsyburka	c4b007411d	radio select in formula	2026-02-22 19:54:06 +02:00
Pete Matsyburka	04264fe937	fix reason field	2026-02-22 12:15:44 +02:00
Pete Matsyburka	0c37ad12b7	add variables key	2026-02-22 09:46:04 +02:00
Pete Matsyburka	8c5298ed2e	refactor link tooltip	2026-02-22 09:28:30 +02:00
Pete Matsyburka	262118e047	update deps	2026-02-22 07:37:05 +02:00
Pete Matsyburka	e5b63ea2b0	fix multi party email form	2026-02-21 17:31:04 +02:00
Pete Matsyburka	746757d402	rtl in editor	2026-02-21 16:38:25 +02:00
Pete Matsyburka	e6e640328b	use br for email content	2026-02-21 16:20:48 +02:00
Pete Matsyburka	845782a69c	link input width	2026-02-21 15:48:59 +02:00
Pete Matsyburka	fc6baa1b3b	adjust autolink	2026-02-21 15:48:58 +02:00
Pete Matsyburka	47822ecc15	remove autolink	2026-02-21 14:55:11 +02:00
Pete Matsyburka	3d0c7f1118	markdown in preferences	2026-02-21 14:44:19 +02:00
Pete Matsyburka	e9c8e4d325	adjust editor	2026-02-21 14:32:10 +02:00
Alex Turchyn	39cc82ce0c	add markdown editor	2026-02-21 11:15:09 +02:00
Pete Matsyburka	451f83421a	fix cell render	2026-02-21 10:49:05 +02:00
Pete Matsyburka	5073f2eefb	adjsut sign yourself	2026-02-21 10:17:58 +02:00
Pete Matsyburka	231fff5508	canvas blocked message	2026-02-21 09:53:03 +02:00
Pete Matsyburka	f1d146eca3	fix typos	2026-02-20 22:39:03 +02:00
Pete Matsyburka	b6635fcc4f	change user only when root	2026-02-20 22:25:12 +02:00
Pete Matsyburka	fb5e13ee4c	adjust recipients form	2026-02-20 18:26:10 +02:00
Pete Matsyburka	ba84741a64	invite party via field	2026-02-20 12:41:45 +02:00
Pete Matsyburka	65c275ac17	rename	2026-02-20 10:16:06 +02:00
Pete Matsyburka	825322d489	adjust for custom domain	2026-02-20 09:14:36 +02:00
Pete Matsyburka	739e2abdf8	vips size limit	2026-02-19 14:24:05 +02:00
Pete Matsyburka	1d2394e31e	size limit	2026-02-19 14:17:59 +02:00
Pete Matsyburka	1b41af798d	update	2026-02-17 19:42:47 +02:00
Pete Matsyburka	118f4a231b	detailed time format	2026-02-17 18:09:34 +02:00
Pete Matsyburka	e48652f425	fix rubocop	2026-02-17 10:29:00 +02:00
Pete Matsyburka	848f01edf8	add spec	2026-02-17 10:19:29 +02:00
Pete Matsyburka	43fbc42770	fix reason field	2026-02-17 10:04:11 +02:00
Pete Matsyburka	2c736a0eed	validate readonly field	2026-02-17 08:53:13 +02:00
Alex Turchyn	33ca930055	Merge from docusealco/wip Wip	2026-02-16 15:08:07 +02:00
Pete Matsyburka	3b396f8421	fix redirect	2026-02-16 10:00:51 +02:00
Pete Matsyburka	aa77e3a8d3	adjust port check	2026-02-16 08:08:41 +02:00
Pete Matsyburka	75316d8d87	fix draw custom field	2026-02-15 22:02:00 +02:00
Pete Matsyburka	a999109a5c	add port check	2026-02-15 12:18:53 +02:00
Pete Matsyburka	bdd33c7d6b	fix spec	2026-02-15 09:53:31 +02:00
Pete Matsyburka	61c5ee22a0	hide form credentials	2026-02-15 09:11:40 +02:00
Pete Matsyburka	12c5b909e0	use cancan	2026-02-14 19:13:05 +02:00
Pete Matsyburka	871ef6dda6	add fetch options	2026-02-14 18:50:48 +02:00
Pete Matsyburka	40052a2d7c	use query_params	2026-02-14 17:42:08 +02:00
Pete Matsyburka	347be0137d	refactor 2fa	2026-02-14 17:35:10 +02:00
Pete Matsyburka	fe6baba8bf	fix erb lint	2026-02-14 12:10:21 +02:00
Pete Matsyburka	ed8c313bd4	timestamp controller multitenant	2026-02-14 12:02:37 +02:00
Pete Matsyburka	ca0acb34d6	use url for open modal	2026-02-14 12:02:31 +02:00
Pete Matsyburka	34ea639c25	escape wildcard query	2026-02-14 12:02:25 +02:00
Pete Matsyburka	680ab9dbed	raise invalid param	2026-02-14 10:18:58 +02:00
Pete Matsyburka	9377766e52	fix url download	2026-02-14 09:08:52 +02:00
Pete Matsyburka	7a2c37454e	update favicon	2026-02-12 15:56:54 +02:00
Pete Matsyburka	8f6f418f54	fix font size	2026-02-12 14:27:15 +02:00
Pete Matsyburka	9b7745c565	hide resend on archived	2026-02-11 17:32:04 +02:00
Alex Turchyn	a389e8cc38	Merge from docusealco/wip	2026-02-11 16:49:32 +02:00
Pete Matsyburka	2056301f70	remember send tab selection	2026-02-11 13:14:09 +02:00
Pete Matsyburka	93babe3660	update logo	2026-02-11 10:01:12 +02:00
Pete Matsyburka	4aef2d8eb0	update deps	2026-02-10 09:02:37 +02:00
Pete Matsyburka	c5ec2ed230	fix document condition	2026-02-05 11:56:22 +02:00
Pete Matsyburka	a156d5f6cc	increase webhook timeout	2026-02-05 08:42:53 +02:00
Pete Matsyburka	f84674cddd	adjust field focus	2026-02-04 17:05:12 +02:00
Pete Matsyburka	b7b62c197a	fix date field	2026-02-04 16:56:35 +02:00
Pete Matsyburka	f5350eac36	prefill typed signature and initials from name	2026-02-04 16:48:40 +02:00
Pete Matsyburka	ee6228db15	only required field prop	2026-02-04 10:51:11 +02:00
Pete Matsyburka	3e434c0878	fix	2026-02-04 00:47:34 +02:00
Pete Matsyburka	7c5372a8e2	fix pdf sign	2026-02-02 22:04:43 +02:00
Alex Turchyn	6ab68cc36b	Merge from docusealco/wip	2026-02-02 14:13:54 +02:00
Pete Matsyburka	ee2400a5c5	touch signature attachment	2026-02-02 12:46:34 +02:00
Pete Matsyburka	80be5d2cf5	sandbox	2026-02-01 08:10:02 +02:00
Pete Matsyburka	76cf44a31b	fix	2026-01-31 22:17:11 +02:00
Pete Matsyburka	eb63113227	use trilogy mysql	2026-01-31 22:15:17 +02:00
Pete Matsyburka	b7045fb3d9	fix azure proxy	2026-01-31 13:07:42 +02:00
Pete Matsyburka	11a5b5842d	starttls label	2026-01-31 11:41:52 +02:00
Pete Matsyburka	362994afd5	adjust i18n	2026-01-31 10:26:09 +02:00
Pete Matsyburka	d7682f4ebd	add number conditions	2026-01-31 09:00:24 +02:00
Pete Matsyburka	56d4fe7fa9	add white color	2026-01-31 07:58:12 +02:00
Pete Matsyburka	93a852ac14	fix save modal	2026-01-30 21:45:55 +02:00
Pete Matsyburka	964db0ab08	fix menu	2026-01-30 21:03:56 +02:00
Pete Matsyburka	8547295da7	border color	2026-01-30 20:53:47 +02:00
Pete Matsyburka	c75050fa46	adjust kba	2026-01-30 18:17:47 +02:00
Pete Matsyburka	65372c52aa	fix order	2026-01-30 17:42:50 +02:00
Alex Turchyn	12c767b7d3	add more options to context menu	2026-01-30 16:36:50 +02:00
Pete Matsyburka	2fc5e9cfb3	format cells	2026-01-30 11:21:47 +02:00
Pete Matsyburka	bccc78ee65	optimize builder	2026-01-30 10:23:51 +02:00
Pete Matsyburka	c0793f3ce7	cell font settings	2026-01-29 21:43:01 +02:00
Pete Matsyburka	a8dd8699a3	adjust kba	2026-01-29 15:55:15 +02:00
Pete Matsyburka	91bb25e8b6	fix reload	2026-01-29 15:33:24 +02:00
Pete Matsyburka	c3f4480cdc	add submitter index	2026-01-29 13:01:44 +02:00
Pete Matsyburka	33e226861e	add SMTP_SSL_VERIFY env	2026-01-29 11:34:37 +02:00
Pete Matsyburka	4f5acbec9d	readonly radio	2026-01-28 21:36:48 +02:00
Pete Matsyburka	d2c9bbf6ab	optimize conditions	2026-01-28 13:24:05 +02:00
Pete Matsyburka	b5e57e1f2f	add include fields	2026-01-28 11:49:35 +02:00
Pete Matsyburka	c82c8b2272	fix race condition	2026-01-28 08:50:44 +02:00
Pete Matsyburka	43f1b598a7	adjust smtp noverify	2026-01-28 08:27:25 +02:00
Pete Matsyburka	5081e387d0	fix undefined	2026-01-27 20:13:26 +02:00
Pete Matsyburka	1e5f55c1d6	fix Point is invalid	2026-01-27 20:07:57 +02:00