Variables for
Lexxy rich text

Type {{ in the editor or use the toolbar menu to insert a variable. Pick a person or edit the hash on the sticker, and the After side updates as you go.

gem "lexxy-variables" Docs on GitHub
Beforelive editor, click to type

          

          
Pick a person, or click the sticker and edit the values.

        


        

        

          
Afterescaped and sanitized HTML

          

        

      

    


    

      

        
What you get

        
    
          
  • A {{ prompt and toolbar menu
    Type two braces or open the toolbar menu to pick from a catalog you define.
    • 
          
  • Stored as attachments
    Each variable is an Action Text attachment with its own content type, not literal {{ }} markup.
    • 
          
  • Safe by default
    Plain string substitution. Values are escaped and the body is never parsed as a template.
    • 
          
  • Static or database backed
    List variables in config, or point the catalog at a model. Chips remember their record, so renaming a key doesn't break saved content.
    • 
          
  • Optional Liquid
    Opt in for dotted keys, filters and drops like user.first_name.
    • 
          
  • HTML, text and Markdown
    with_variables returns Action Text content, so to_plain_text and to_markdown chain from it.
    • 
          
  • Custom chip types
    Register more types, like snippets that expand to rich HTML before sanitizing.
    • 
          
  • Tenants and locales
    Pass a context: and a locale: through each render.
    • 
          
  • Follows your Lexxy theme
    The stylesheet is built on Lexxy's own CSS variables. Works with importmap or any bundler.
    • 
        

      

    


    

      
Install

      
    
        
  1. 
          
    Add the gem and the extension
    Ruby 3.2+, Rails 8.0+ and Lexxy 1.0+. Install Lexxy per its docs. The engine pins the extension for importmap, so you register it and load its stylesheet. With a bundler, use @import "lexxy-variables/styles" instead.
    
          
    

    # Gemfile
gem "lexxy-variables"
    

    <%# app/views/layouts/application.html.erb %>
<%= stylesheet_link_tag "lexxy_variables" %>
    

    // app/javascript/application.js
import * as Lexxy from "lexxy"
import VariableExtension from "lexxy-variables"

Lexxy.configure({ global: { extensions: [ VariableExtension ] } })
    
          
    
        
    2. 
        
  2. 
          
    List your variables
    The catalog is what people pick from in the editor. Use a plain list, or back it with a model that has key, name and value columns. Then each chip resolves to its record's value and survives a key rename.
    
          
    

    # config/initializers/lexxy_variables.rb
LexxyVariables.configure do |c|
  c.catalog = [
    { key: "first_name", name: "First name" },
    { key: "team",       name: "Team" }
  ]
end
    

    # Or from the database. Variable is your own model
# with key, name and value columns.
class Variable < ApplicationRecord
  include LexxyVariables::Attachable
end

LexxyVariables.configure do |c|
  c.catalog = -> { Variable.all } # every row shows up in the editor
end
    
          
    
        
    3. 
        
  3. 
          
    Add the prompt to the editor
    Render it inside rich_text_area. It feeds both the {{ prompt and the toolbar menu.
    
          
    

    <%= form.rich_text_area :body do %>
  <%= lexxy_variables_prompt %>
<% end %>
    
          
    
        
    4. 
        
  4. 
          
    Pass a hash when you render
    Each chip resolves to its value. Values are escaped for HTML automatically.
    
          
    

    <%= @record.body.with_variables(
      first_name: @person.first_name,
      team:       "Acme Co") %>
    
          
    
        
    5. 
      

    


    

      
        Full docs on GitHub
        Every option, Liquid drops, database variables, custom chip types and styling.