Paragraph Template

Overview

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.

Key Features & Functionality

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