Installation
You can install @erag/text-editor-react using your preferred package manager.
Install Package
npm install @erag/text-editor-reactpnpm add @erag/text-editor-reactyarn add @erag/text-editor-reactPeer Dependencies
Ensure your project has React 18 or React 19 installed together with React DOM:
{
"peerDependencies": {
"react": ">=18.0.0 <20",
"react-dom": ">=18.0.0 <20"
}
}The package itself requires Node.js 24 or newer for local development, building, and publishing:
node --version
# v24.0.0 or newerNode.js is not used by the editor at browser runtime.
Import Stylesheet
The component requires its package stylesheet for toolbar layout, menus, dialogs, mentions, merge tags, image resize handles, and the built-in light/dark theme tokens.
Import the CSS stylesheet once in your main application entry point (e.g., main.tsx, app.tsx, or a root layout file):
import '@erag/text-editor-react/style.css';The stylesheet follows prefers-color-scheme: dark by default with a black editor surface. To control the theme yourself, add class="dark", data-theme="dark", or data-theme="light" to the document's <html> element. See CSS customization for palette overrides.
Alternatively, you can import it directly inside the React component that renders the editor:
import { Editor } from '@erag/text-editor-react';
import '@erag/text-editor-react/style.css';Framework setup
- Vite (React 18/19): Import the component and stylesheet as shown above. No extra plugin or configuration is required.
- Next.js (App Router): The editor uses hooks and browser APIs, so add the
'use client'directive at the top of the component file that renders<Editor />. Import the stylesheet in that file or inapp/layout.tsx. - Inertia.js (React): Use the editor inside any page in
resources/js/pages. See Laravel and Inertia for auseFormexample.
'use client';
import { useState } from 'react';
import { Editor } from '@erag/text-editor-react';
import '@erag/text-editor-react/style.css';
export default function PostEditor() {
const [content, setContent] = useState('');
return <Editor value={content} onChange={setContent} />;
}CSS reset compatibility
If your application uses a CSS reset, list markers inside standard lists (<ul>, <ol>) might normally be hidden.
@erag/text-editor-react includes scoped marker and indentation styles inside .erag-editor, ensuring list items and numbers render cleanly without conflicts.