add font type

app/javascript/submission_form/area.vue

@@ -3,7 +3,7 @@
     class="field-area flex absolute lg:text-base -outline-offset-1"
     dir="auto"
     :style="computedStyle"
-    :class="{ 'font-mono': field.preferences?.font === 'Courier', 'font-serif': field.preferences?.font === 'Times', 'text-[1.6vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'field-area-active outline-red-500 outline-dashed outline-2 z-10': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
+    :class="{ 'text-[1.6vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'field-area-active outline-red-500 outline-dashed outline-2 z-10': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
   >
     <div
       v-if="(!withFieldPlaceholder || !field.name || field.type === 'cells') && !isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
@@ -168,7 +168,7 @@
     <div
       v-else-if="field.type === 'cells'"
       class="w-full flex items-center"
-      :class="{ 'justify-end': field.preferences?.align === 'right' }"
+      :class="{ 'justify-end': field.preferences?.align === 'right', ...fontClasses }"
     >
       <div
         v-for="(char, index) in modelValue"
@@ -184,7 +184,7 @@
       ref="textContainer"
       dir="auto"
       class="flex items-center px-0.5 w-full"
-      :class="alignClasses[field.preferences?.align]"
+      :class="{ ...alignClasses, ...fontClasses }"
     >
       <span
         v-if="field && field.name && withFieldPlaceholder && !modelValue && modelValue !== 0"
@@ -326,10 +326,26 @@ export default {
       }
     },
     alignClasses () {
+      if (!this.field.preferences) {
+        return {}
+      }
+
+      return {
+        'text-center': this.field.preferences.align === 'center',
+        'text-left': this.field.preferences.align === 'left',
+        'text-right': this.field.preferences.align === 'right'
+      }
+    },
+    fontClasses () {
+      if (!this.field.preferences) {
+        return {}
+      }
+
       return {
-        center: 'text-center',
+        'font-mono': this.field.preferences.font === 'Courier',
-        left: 'text-left',
+        'font-serif': this.field.preferences.font === 'Times',
-        right: 'text-right'
+        'font-bold': ['bold_italic', 'bold'].includes(this.field.preferences.font_type),
+        italic: ['bold_italic', 'italic'].includes(this.field.preferences.font_type)
       }
     },
     option () {

app/javascript/template_builder/area.vue

@@ -161,7 +161,7 @@
       ref="touchValueTarget"
       class="flex items-center h-full w-full"
       dir="auto"
-      :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
+      :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex % bgColors.length], isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas) ? fontClasses : 'justify-center']"
       @click="focusValueInput"
     >
       <span
@@ -386,11 +386,19 @@ export default {
     defaultName () {
       return this.buildDefaultName(this.field, this.template.fields)
     },
-    alignClasses () {
+    fontClasses () {
+      if (!this.field.preferences) {
+        return {}
+      }
+
       return {
-        center: 'justify-center',
+        'justify-center': this.field.preferences.align === 'center',
-        left: 'justify-start',
+        'justify-start': this.field.preferences.align === 'left',
-        right: 'justify-end'
+        'justify-end': this.field.preferences.align === 'right',
+        'font-mono': this.field.preferences.font === 'Courier',
+        'font-serif': this.field.preferences.font === 'Times',
+        'font-bold': ['bold_italic', 'bold'].includes(this.field.preferences.font_type),
+        italic: ['bold_italic', 'italic'].includes(this.field.preferences.font_type)
       }
     },
     optionIndexText () {

app/views/submissions/_value.html.erb

@@ -1,7 +1,8 @@
 <% align = field.dig('preferences', 'align') %>
 <% color = field.dig('preferences', 'color') %>
 <% font = field.dig('preferences', 'font') %>
-<field-value dir="auto" class="flex absolute text-[1.6vw] lg:text-base <%= 'font-mono' if font == 'Courier' %> <%= 'font-serif' if font == 'Times' %> <%= align == 'right' ? 'justify-end' : (align == 'center' ? 'justify-center' : '') %>" style="<%= "color: #{color}; " if color.present? %>width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%; <%= "font-size: clamp(4pt, 1.6vw, #{field['preferences']['font_size'].to_i * 1.23}pt); line-height: `clamp(6pt, 2.0vw, #{(field['preferences']['font_size'].to_i * 1.23) + 3}pt)`" if field.dig('preferences', 'font_size') %>">
+<% font_type = field.dig('preferences', 'font_type') %>
+<field-value dir="auto" class="flex absolute text-[1.6vw] lg:text-base <%= 'font-mono' if font == 'Courier' %> <%= 'font-serif' if font == 'Times' %> <%= 'font-bold' if font_type == 'bold' || font_type == 'bold_italic' %> <%= 'italic' if font_type == 'italic' || font_type == 'bold_italic' %> <%= align == 'right' ? 'justify-end' : (align == 'center' ? 'justify-center' : '') %>" style="<%= "color: #{color}; " if color.present? %>width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%; <%= "font-size: clamp(4pt, 1.6vw, #{field['preferences']['font_size'].to_i * 1.23}pt); line-height: `clamp(6pt, 2.0vw, #{(field['preferences']['font_size'].to_i * 1.23) + 3}pt)`" if field.dig('preferences', 'font_size') %>">
   <% if field['type'] == 'signature' %>
     <div class="flex flex-col justify-between h-full overflow-hidden">
       <div class="flex-grow flex overflow-hidden" style="min-height: 50%">

lib/submissions/generate_result_attachments.rb

@@ -4,12 +4,29 @@ module Submissions
   module GenerateResultAttachments
     FONT_SIZE = 11
     FONT_PATH = '/fonts/GoNotoKurrent-Regular.ttf'
+    FONT_BOLD_PATH = '/fonts/GoNotoKurrent-Bold.ttf'
     FONT_NAME = if File.exist?(FONT_PATH)
                   FONT_PATH
                 else
                   'Helvetica'
                 end
 
+    FONT_BOLD_NAME = if File.exist?(FONT_BOLD_PATH)
+                       FONT_BOLD_PATH
+                     else
+                       'Helvetica'
+                     end
+
+    FONT_ITALIC_NAME = 'Helvetica'
+    FONT_BOLD_ITALIC_NAME = 'Helvetica'
+
+    FONT_VARIANS = {
+      none: FONT_NAME,
+      bold: FONT_BOLD_NAME,
+      italic: FONT_ITALIC_NAME,
+      bold_italic: FONT_BOLD_ITALIC_NAME
+    }.freeze
+
     SIGN_REASON = 'Signed by %<name>s with DocuSeal.com'
 
     RTL_REGEXP = TextUtils::RTL_REGEXP
@@ -18,12 +35,15 @@ module Submissions
     TEXT_TOP_MARGIN = 1
     MAX_PAGE_ROTATE = 20
 
-    COURIER_FONT = 'Courier'
-
     A4_SIZE = [595, 842].freeze
 
     TESTING_FOOTER = 'Testing Document - NOT LEGALLY BINDING'
     DEFAULT_FONTS = %w[Times Helvetica Courier].freeze
+    FONTS_LINE_HEIGHT = {
+      'Times' => 1.4,
+      'Helvetica' => 1.4,
+      'Courier' => 1.6
+    }.freeze
 
     MISSING_GLYPH_REPLACE = {
       '▪' => '-',
@@ -192,8 +212,16 @@ module Submissions
           fill_color = field.dig('preferences', 'color').presence
 
           font_name = field.dig('preferences', 'font')
+          font_variant = (field.dig('preferences', 'font_type').presence || 'none').to_sym
+
           font_name = FONT_NAME unless font_name.in?(DEFAULT_FONTS)
-          font = pdf.fonts.add(font_name)
+
+          if font_variant != :none && font_name == FONT_NAME
+            font_name = FONT_VARIANS[font_variant]
+            font_variant = nil unless font_name.in?(DEFAULT_FONTS)
+          end
+
+          font = pdf.fonts.add(font_name, variant: font_variant)
 
           value = submitter.values[field['uuid']]
           value = field['default_value'] if field['type'] == 'heading'
@@ -449,7 +477,7 @@ module Submissions
             end
 
             text_params = { font:, fill_color:, font_size: }
-            text_params[:line_height] = text_params[:font_size] * 1.6 if font_name == COURIER_FONT
+            text_params[:line_height] = text_params[:font_size] * (FONTS_LINE_HEIGHT[font_name] || 1)
 
             text = HexaPDF::Layout::TextFragment.create(value, **text_params)
 
@@ -458,7 +486,7 @@ module Submissions
 
             if preferences_font_size.blank? && box_height > (area['h'] * height) + 1
               text_params[:font_size] = (font_size / 1.4).to_i
-              text_params[:line_height] = text_params[:font_size] * 1.6 if font_name == COURIER_FONT
+              text_params[:line_height] = text_params[:font_size] * (FONTS_LINE_HEIGHT[font_name] || 1)
 
               text = HexaPDF::Layout::TextFragment.create(value, **text_params)
 
@@ -469,7 +497,7 @@ module Submissions
 
             if preferences_font_size.blank? && box_height > (area['h'] * height) + 1
               text_params[:font_size] = (font_size / 1.9).to_i
-              text_params[:line_height] = text_params[:font_size] * 1.6 if font_name == COURIER_FONT
+              text_params[:line_height] = text_params[:font_size] * (FONTS_LINE_HEIGHT[font_name] || 1)
 
               text = HexaPDF::Layout::TextFragment.create(value, **text_params)