Paragraph Template

Lets authors create paragraph templates with inline variable placeholders (locked, free-text, or restricted dropdown), then lets end users fill in those variables directly within the rendered text while enforcing validation rules and approved value lists.

Builder Component:

• Inline paragraph editor where authors type text and highlight portions to mark as variables
• Three variable types: Locked (non-editable), Free Text (user types any value), Restricted (user picks from a dropdown)
• Configurable default values for each variable type
• Numeric field option with min/max range validation for free-text variables
• Attribute selection from a configurable list of variable codes
• Click any existing variable chip to edit its configuration
• Remove variables by hovering and clicking the X button
• Preview toggle to see how end users will experience the template
• Undo support (Ctrl/Cmd+Z) for reverting changes
• Placeholder text when field is empty
• Outputs template string and variables JSON for saving

Viewer Component:

• Renders templates with interactive inline chips at each variable position
• Locked values display as read-only inline text
• Free-text values present an auto-sizing inline input
• Restricted values open a dropdown on click with checkmark on current selection
• Changed values highlighted in purple with smooth animation
• Reset-to-default button appears on changed values
• Tab key navigation between editable fields
• Numeric range validation (enforces min/max from builder config)
• Pre-populated values support for restoring previously saved selections
• Print/export-friendly read-only mode (strips all styling for clean output)
• Customizable placeholder, validation message, and empty state text