Froala Inline Text Editor

A production-ready commercial plugin that replaces the default GrapesJS rich-text editor with the full Froala WYSIWYG experience — inline editing, advanced formatting, image and link tools, personalization tokens, and seamless GrapesJS Studio integration. Strict TypeScript throughout, dual-version Froala support (4.x and 5.x), and battle-tested lifecycle cleanup that survives rapid enable/disable cycles without leaking DOM.

Who it's for

Teams shipping landing pages, email templates, SaaS onboarding flows, and visual editors who have outgrown the stock GrapesJS RTE and don't want to spend a week wiring Froala themselves. If you've already licensed Froala (or plan to) and use GrapesJS or GrapesJS Studio in production, this plugin removes around a thousand lines of integration glue — and the eight or nine subtle bugs you'd otherwise discover the hard way.

What you get

Inline and block editing, configured per tag.Block-level editing for paragraphs and divs with the full Froala toolbar. Lightweight inline mode for<span>,<a>,<button>, and heading elements with a streamlined toolbar. Choose which tags get inline behavior via a singleinlineconfig option — no monkey-patching.

Native GrapesJS Studio support.Officially compatible with@grapesjs/studio-sdk. Froala's stylesheet is auto-injected into the canvas iframe via theinjectCanvasStylesoption, so the editor renders correctly inside Studio without any manual stylesheet wiring. Ships with a runnable Studio demo.

Dual Froala version support — 4.x and 5.x.Runtime version detection through a single compatibility adapter. Upgrade or downgrade Froala without touching plugin code. Peer range is locked at>=4.0.14 <6so you control your editor version on your own schedule.

Personalization tokens out of the box.A ready-madepersonalization_ddFroala command inserts dropdown-selected merge tokens like{{Name}},{{Email}}, or any token set you configure. Drop straight into email template builders and marketing tools — no custom command code required.

Memory-safe lifecycle.Every long-lived resource is tracked and released on disable: debouncedMutationObservers for content and toolbar (50 ms), the canvas iframemousedownlistener, pendingsetTimeouts, and — critically — any orphan.fr-toolbarnodes that Froala v5 occasionally strands during destroy races. Verified zero leaks across twenty rapid enable/disable cycles in the e2e suite.

Smart toolbar positioning.Toolbar position updates respond to GrapesJSrteToolbarPosUpdateevents, viewport resizes, and scroll. Borders, radius, and spacing are fully configurable. Caret restoration uses a safe fallback chain (caretRangeFromPoint→caretPositionFromPoint) so cursor placement survives the WebKit/Chromium edge cases that break naïve integrations.

First-class TypeScript.The entire plugin is written in strict-mode TypeScript. Type declarations (.d.ts) and declaration maps ship in the bundle — your editor jumps straight from afroala(editor, options)call into a fully typed options object. Zero implicitany.

Multi-format distribution.

• ESM (.mjs) for modern bundlers
• CommonJS (.cjs) for Node and legacy tools
• UMD (.min.js) for<script>tag installs
• Source maps for all three

The minified bundle is roughly 50 KB (Froala itself remains a peer dependency you bring separately).

Technical specs

What's new

• 1.2.0 — GrapesJS Studio integration.Auto-injects Froala styles into the Studio canvas iframe. Studio demo and Playwright e2e coverage shipped alongside.
• 1.1.1 — Toolbar leak fix.Defensive sweep eliminates orphan.fr-toolbarnodes during Froala v5 destroy races under rapid enable/disable cycles.
• 1.1.0 — TypeScript migration.Full source moved to strict TypeScript; declarations emitted from source; commercial license adopted.
• 1.0.0 — Marketplace release.Modular architecture (eight focused modules instead of one 380-line file), dual Froala version support, full test coverage, CI/CD pipeline.