Skip to content

feat: add format presets for date and number inline variables#99

Merged
liamwalder merged 2 commits intodevelopfrom
feat/format-inline-variables
Mar 26, 2026
Merged

feat: add format presets for date and number inline variables#99
liamwalder merged 2 commits intodevelopfrom
feat/format-inline-variables

Conversation

@tristan-mouchet
Copy link
Copy Markdown
Collaborator

Summary

Add date and number format presets for inline CMS variables, allowing users to choose how dates and numbers are displayed (e.g. "Oct 23, 2025", "23/10/2025", "100%", "1,234.56"). Formatting is applied consistently across the canvas editor, preview mode, and published pages using the user's configured timezone.

Changes

  • Add variable-format-utils.ts with date/number format presets using Intl.DateTimeFormat and Intl.NumberFormat
  • Add VariableFormatSelector popover component for selecting format presets on inline variable badges
  • Add dynamic-variable-view.tsx shared factory to eliminate duplicate DynamicVariable NodeView code between RichTextEditor and CanvasTextEditor
  • Extract buildFieldVariableData helper to deduplicate variable construction across 3 components
  • Thread formatFieldValue with format preset through all rendering paths (canvas, preview, HTML export)
  • Thread user timezone setting through server-side format rendering to respect configured timezone
  • Fix variable overwrite bug in injectCollectionData where ...layer.variables spread could clobber already-resolved text when resolving image/video/audio bindings

Test plan

  • Add a date inline variable — verify default format is applied ("date-long")
  • Click the variable badge to open format selector — verify grouped sections (Date & time, Date, Time)
  • Select different date formats and confirm they render correctly on canvas
  • Add a number inline variable — verify default format ("integer") and selector shows number formats
  • Open preview — verify formatting matches the canvas
  • Publish and verify formatting on the genege
  • Change the timezone setting and confirm dates shift accordingly on preview/published pages
  • Test a layer with both text and image CMS bindings — verify both resolve correctly (regression for the overwrite fix)

- Add date/number format presets using Intl APIs (variable-format-utils)
- Add format selector popover for inline variable badges
- Apply formatting on canvas, preview, and published pages
- Thread user timezone through server-side format rendering
- Extract shared DynamicVariable NodeView factory (dynamic-variable-view)
- Extract buildFieldVariableData helper to eliminate duplication
- Fix variable overwrite bug in injectCollectionData spreads
@tristan-mouchet tristan-mouchet added the Feature request A new feature request label Mar 26, 2026
@tristan-mouchet tristan-mouchet self-assigned this Mar 26, 2026
@tristan-mouchet tristan-mouchet added the Feature request A new feature request label Mar 26, 2026
@liamwalder liamwalder merged commit ebdf68e into develop Mar 26, 2026
2 checks passed
@liamwalder liamwalder deleted the feat/format-inline-variables branch March 26, 2026 10:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature request A new feature request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants