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.

S
Description
Minimal reusable inline website editing engine for Filament previews
Readme MIT
184 KiB
v0.2.2
Latest
2026-10-12 10:19:12 +00:00
Languages
JavaScript 90.7%
CSS 4.8%
PHP 4.5%