feat: add italic and underline text styles to template builder

Add italic and underline toggle options for text blocks in the template
builder, matching the existing bold toggle functionality.

Author: kasvith

src/renderer/src/components/template-builder/BlockPreview.tsx

@@ -55,7 +55,9 @@ export const BlockPreview = ({ block }: BlockPreviewProps) => {
             <div
               className={cn(
                 'mt-1 text-sm text-muted-foreground truncate max-w-md',
-                block.props.bold && 'font-semibold'
+                block.props.bold && 'font-semibold',
+                block.props.italic && 'italic',
+                block.props.underline && 'underline'
               )}
               dangerouslySetInnerHTML={{
                 __html: block.props.content.substring(0, 100)

src/renderer/src/components/template-builder/LivePreview.tsx

@@ -101,6 +101,12 @@ export const LivePreview = ({ templateStructure }: LivePreviewProps) => {
                   .preview-content .bold {
                     font-weight: 700;
                   }
+                  .preview-content .italic {
+                    font-style: italic;
+                  }
+                  .preview-content .underline {
+                    text-decoration: underline;
+                  }
                   .preview-content .pt-1 {
                     padding-top: 2pt;
                   }

src/renderer/src/components/template-builder/properties/TextProperties.tsx

@@ -88,6 +88,28 @@ export const TextProperties = ({ block, onUpdate }: TextPropertiesProps) => {
           onCheckedChange={(checked) => updateProps({ bold: checked })}
         />
       </div>
+
+      <div className="flex items-center justify-between">
+        <Label htmlFor="italic" className="text-sm">
+          Italic
+        </Label>
+        <Switch
+          id="italic"
+          checked={block.props.italic}
+          onCheckedChange={(checked) => updateProps({ italic: checked })}
+        />
+      </div>
+
+      <div className="flex items-center justify-between">
+        <Label htmlFor="underline" className="text-sm">
+          Underline
+        </Label>
+        <Switch
+          id="underline"
+          checked={block.props.underline}
+          onCheckedChange={(checked) => updateProps({ underline: checked })}
+        />
+      </div>
     </div>
   )
 }

src/renderer/src/lib/template-renderer.ts

@@ -117,8 +117,10 @@ const renderText = (block: TextBlock, context: TemplateContext): string => {
   const fontSizeClass = `text-${props.fontSize || 'base'}`
   const alignmentStyle = `text-align: ${props.alignment || 'left'}`
   const boldClass = props.bold ? 'bold' : ''
+  const italicClass = props.italic ? 'italic' : ''
+  const underlineClass = props.underline ? 'underline' : ''
 
-  return `<div class="${fontSizeClass} ${boldClass} keep-together" style="${alignmentStyle}">${content}</div>`
+  return `<div class="${fontSizeClass} ${boldClass} ${italicClass} ${underlineClass} keep-together" style="${alignmentStyle}">${content}</div>`
 }
 
 // Render data field block

src/renderer/src/styles/screen.css

@@ -175,6 +175,10 @@ body {
   font-style: italic;
 }
 
+.underline {
+  text-decoration: underline;
+}
+
 .text-center {
   text-align: center;
 }

src/shared/constants/template-fields.ts

@@ -279,7 +279,9 @@ export const BLOCK_DEFINITIONS: BlockDefinition[] = [
       content: '',
       alignment: 'left',
       fontSize: 'base',
-      bold: false
+      bold: false,
+      italic: false,
+      underline: false
     }
   },
   {

src/shared/types/template-blocks.d.ts

@@ -29,6 +29,8 @@ export interface TextBlockProps {
   alignment: 'left' | 'center' | 'right'
   fontSize: 'sm' | 'base' | 'lg' | 'xl' | '2xl'
   bold: boolean
+  italic: boolean
+  underline: boolean
 }
 
 export interface TextBlock extends BaseBlock {