Field Editor
The field editor is a modal panel that opens when an editor clicks the “Edit” button on a section overlay. It provides a form to edit all fields in a section at once, with editors appropriate to each content type.
Opening the field editor
Any section wrapped with cms_editable_section gets an Edit button on hover:
<%= cms_editable_section(page: 'home', section: 'services_preview', display_title: 'Services Preview') do %>
<%= cards_section('services_preview', grid_cols: 3) %>
<% end %>
Hovering over this section reveals a dashed border and a sticky “Edit” button in the top-right corner. Clicking the button opens the field editor for the home / services_preview section.
The sticky scroll behavior
The Edit button uses the cms-sticky-overlay Stimulus controller. When the section is visible at the top of the viewport during scrolling, the overlay button sticks to the top of the screen so it doesn’t scroll off. This is especially useful for long sections.
The button stays sticky while the cursor is anywhere within the section. When the cursor leaves the section, the overlay retracts.
Editors by content type
| Content Type | Editor |
|---|---|
text |
Single-line text input with optional character counter |
rich_text |
Trix rich text editor (Action Text) |
image |
File upload with drag-and-drop and preview |
boolean |
Toggle switch |
url |
Text input with URL validation |
color |
Color picker |
dropdown |
Select menu with predefined options |
cards |
Card manager — add, remove, reorder cards with per-card fields |
bullets |
Bullet manager — add, remove, reorder bullets with title and description |
Cards editor
The cards editor provides a full card management interface:
- Add new cards with a form
- Drag to reorder
- Per-card fields: title, description, icon (from the icon library), background color, gradient toggle, image upload, link URL
Each card’s image is stored as an ActiveStorage attachment on the PageContent record.
Bullets editor
The bullets editor is a simpler list manager:
- Add, remove, reorder bullet items
- Each bullet has: title (required), description (optional)
After saving
The field editor saves each field independently via Turbo. After saving, the modal closes and the page reflects the updated content. Changes are cached automatically — the next page load serves from SolidCache.
The previous value is saved in PaperTrail, so changes can be reviewed and reverted from the CMS admin.