Summary
Adds rich text editor integration (Quill + TinyMCE) for the Global Variables plugin (PR #743) and a new Shortcodes plugin. This implements Part 2 (Rich Text Inline Tokens) from #719, which was explicitly planned as a follow-up in the original PR.
What This Enables
Global Variables — Editor Integration
- Quill: Custom
VariableBlot renders {variable_key} tokens as styled blue chips in the editor
- TinyMCE:
tinymce.PluginManager.add() registers a "Var" toolbar button with chip rendering
- Searchable picker dropdown fetches variables from
/api/global-variables
- Token↔chip roundtrip: chips in editor →
{key} in database → chips on reload
- Existing
{key} text auto-converted to chips on content load
Shortcodes Plugin (New)
[[shortcode_name param="value"]] syntax with registered handler functions
- Handler registry with built-in handlers:
current_date, phone_link, cta_button, plan_count, provider_rating
- Server-side resolution via
content:read hook (priority 60, runs after variables at 50)
- Full CRUD admin page with handler status badges and live preview
- Quill integration: purple
ShortcodeBlot chips + "SC" toolbar button
- TinyMCE integration: PluginManager-based button with chip rendering
Shared Editor Utilities
quill-shared.ts — Quill constructor Proxy (injects custom formats), searchable picker dropdown, enhancer polling framework
tinymce-shared.ts — PluginManager approach (the official TinyMCE plugin API), picker dropdown, chip CSS injection into editor iframe
admin-template.ts — Shared HTML wrapper with Tailwind + HTMX + CSRF auto-injection
Enhanced Admin Pages
- Both plugins have full CRUD admin pages (add, inline edit, delete, toggle active/inactive)
- "Rich Text Editor Integration" settings card with toggle + editor auto-detection
- Warning when no editor plugin is active
Related Issues
Technical Notes
- Editor scripts are self-contained HTML (styles + scripts) injectable via
afterAuth middleware
- Quill: uses
Proxy to patch constructor for custom format whitelisting
- TinyMCE: uses
PluginManager.add() (official API) + server-side HTML replacement to inject button names into toolbar/plugins arrays
- Both editors support token↔chip serialization (editor DOM → DB tokens → editor DOM)
- Content resolution: variables (priority 50) → shortcodes (priority 60)
- Opt-out:
?resolve_variables=false, ?resolve_shortcodes=false
Summary
Adds rich text editor integration (Quill + TinyMCE) for the Global Variables plugin (PR #743) and a new Shortcodes plugin. This implements Part 2 (Rich Text Inline Tokens) from #719, which was explicitly planned as a follow-up in the original PR.
What This Enables
Global Variables — Editor Integration
VariableBlotrenders{variable_key}tokens as styled blue chips in the editortinymce.PluginManager.add()registers a "Var" toolbar button with chip rendering/api/global-variables{key}in database → chips on reload{key}text auto-converted to chips on content loadShortcodes Plugin (New)
[[shortcode_name param="value"]]syntax with registered handler functionscurrent_date,phone_link,cta_button,plan_count,provider_ratingcontent:readhook (priority 60, runs after variables at 50)ShortcodeBlotchips + "SC" toolbar buttonShared Editor Utilities
quill-shared.ts— Quill constructor Proxy (injects custom formats), searchable picker dropdown, enhancer polling frameworktinymce-shared.ts— PluginManager approach (the official TinyMCE plugin API), picker dropdown, chip CSS injection into editor iframeadmin-template.ts— Shared HTML wrapper with Tailwind + HTMX + CSRF auto-injectionEnhanced Admin Pages
Related Issues
Technical Notes
afterAuthmiddlewareProxyto patch constructor for custom format whitelistingPluginManager.add()(official API) + server-side HTML replacement to inject button names into toolbar/plugins arrays?resolve_variables=false,?resolve_shortcodes=false