@ecodrix/erix-editor

Lean, standalone rich-text editor extracted from @ecodrix/erix-react. No platform coupling — no @ecodrix/erix-api, no ErixProvider.

Install

pnpm add @ecodrix/erix-editor

Peer deps (minimal): react, react-dom, lucide-react, clsx, tailwind-merge, radix-ui. No framer-motion — all animation is pure CSS.

Local playground (test before installing in a host)

A minimal Next.js harness lives in app/ (dev-only — never published). It imports the built package from dist/, exactly as a consumer would, so you can verify the editor in isolation before publishing:

pnpm install
pnpm build:lib   # compile src → dist
pnpm dev         # open http://localhost:3000

The playground page uses plain CSS (no Tailwind/design system) to prove the editor is fully self-contained and never leaks into or depends on host styles. It also exercises theme switching and auto-detected HTML/Markdown/JSON/text input. After editing src/, re-run pnpm build:lib and the dev server reloads.

Style isolation

The editor never touches your app's global styles. All CSS is:

• prefixed (erix-) and scoped under .erix-app,
• shipped as a prebuilt stylesheet (@ecodrix/erix-editor/styles) — no Tailwind setup needed in the host,
• free of any global reset or */[data-radix-*] rules that could leak.

Usage

import { ErixEditor } from "@ecodrix/erix-editor";
import "@ecodrix/erix-editor/styles";

export default function Page() {
  return <ErixEditor style={{ height: 400 }} onChange={console.log} />;
}

Image insertion

By default the toolbar's insert-image button opens a minimal native URL-input popover that calls engine.image(url). To plug in a richer picker (upload, media library), pass an imagePicker slot to the provider:

<ErixEditor
  imagePicker={({ onInsert, children }) => (
    <MyUploader onDone={(url) => onInsert(url)}>{children}</MyUploader>
  )}
/>