TROPIKAL Filament WYSIWYG
A small, dependency-free browser editing engine for real website previews. Works with Filament 3 and 5 host adapters. The browser engine has no framework dependency; an optional Laravel 12 service provider serves the same engine to the Filament parent without copying assets between repositories. It is not a CMS, rich-document editor or generic HTML page builder.
import { createInlineEditor } from '@tropikal/filament-wysiwyg';
const editor = createInlineEditor(document, ({ address, value }) => saveDraft(address, value));
editor.start(heading, 'hero.heading', {
kind: 'text', value: 'Your current heading', placeholders: [],
});
One click focuses text. Enter applies, Shift+Enter adds a line, Escape cancels.
Blur commits only changes. Paste inserts plain text. formatted preserves only
emphasis/strong tags and escapes literal characters for an HTML-input boundary.
Plain values remain plain strings. Complete rendered values must match the host's
declared value; protected/interpolated/composite/rich fields remain contextual controls.
The host owns authorization, allowed addresses, validation, media uploads,
locales, draft concurrency, undo/recovery and publication. Never authorize a write
from a DOM attribute alone. Iframe adapters must check both message source and
exact origin; never use wildcard target origins. Do not rerender active text and
destroy the caret. Call destroy() on teardown.
Images are selected by the host and edited with its existing media controls;
the engine deliberately does not own file storage or duplicate business models.
Pin an immutable repository commit in each consumer's lockfile. Run npm ci
and npm run verify before release. There is no runtime dependency or build step.
createEditQueue({ storage, key, deliver, onChange }) serializes draft RPCs and
backs up pending text in browser storage. Scope key to user/site/page. Failed
edits remain pending across reloads; show explicit Retry/Discard controls, never
automatically replay a stored edit against a newer draft. onChange(pending, durable) reports storage denial so the UI can ask the user to keep a copy.
Only call the host's authorized editing command from deliver; do not accept
operations or arbitrary executable payloads from browser storage. Publication
should wait while hasPending() is true. This is not a synchronization service.
Laravel hosts can install the Composer package tropikal-ai/filament-wysiwyg
from this public VCS repository at an immutable released tag, then import
WysiwygServiceProvider::assetUrl() in their existing Filament view. The route
serves only the package's static module and validates its content hash. It has
no content API, database or configurable file path. The npm and Composer
lockfiles should resolve to the same release commit.