react-eira-editorFlexible editing. Simple integration.

00 Demo

Try the standalone editor with all tools: formatting, fonts, alignment, lists, links, images, attachments, tables, undo/redo, HTML, preview and @ mentions.

Đang tải editor / Loading editor…

Installation

Run one of these commands in your React project. Peer dependencies: react and react-dom ^18.2.0 or ^19.0.0.

npm install @eira-core/react-eira-editor

# pnpm
pnpm add @eira-core/react-eira-editor

# Yarn
yarn add @eira-core/react-eira-editor

Import style.css once for the editor UI. In Next.js App Router, use Editor inside a Client Component ('use client').

Start with HTML

value accepts HTML and onChange returns updated HTML. This controlled example enables headings, text formatting and undo/redo.

'use client';

import { useState } from 'react';
import { Editor } from '@eira-core/react-eira-editor';
import { formattingPlugin } from '@eira-core/react-eira-editor/plugins/formatting';
import { headingPlugin } from '@eira-core/react-eira-editor/plugins/headings';
import { historyPlugin } from '@eira-core/react-eira-editor/plugins/history';
import '@eira-core/react-eira-editor/style.css';

// Keep the plugin configuration outside render.
const plugins = [headingPlugin, formattingPlugin, historyPlugin];

export default function ArticleEditor() {
  const [html, setHTML] = useState('<p>Hello, Eira!</p>');

  return (
    <Editor
      plugins={plugins}
      value={html}
      onChange={setHTML}
      locale="vi"
      minHeight={240}
      aria-label="Article content"
    />
  );
}

Uncontrolled usage

Use defaultValue when you do not need to keep content in state. The following snippets reuse plugins and state from the example above unless they define their own configuration.

<Editor
  plugins={plugins}
  defaultValue="<p>Start writing here.</p>"
  onChange={(html) => console.log(html)}
/>

Choose the features you need

Without plugins, Editor provides basic HTML editing with no toolbar. Import plugins from their individual entry points and add them to plugins in the desired toolbar order.

import { tablePlugin } from '@eira-core/react-eira-editor/plugins/table';

const plugins = [tablePlugin];

Define plugins outside render or memoize with useMemo. Configuration defines the document schema; remount with a new key and compatible HTML to change it. Plugin names must be unique.

Props / API

All props are optional. Import EditorProps, EditorStyles, EditorClassNames and other types from the main entry point.

Edit, read only or display content

readOnly prevents edits while keeping the interface. preview displays content in place without editor tools or empty spacing. Reuse the document’s plugins so images, tables and attachments render correctly.

<Editor value={html} plugins={plugins} preview />

// Hide the main toolbar while keeping plugin behavior.
<Editor value={html} onChange={setHTML} plugins={plugins} toolbar={false} />

Toggle preview without remounting; switching modes does not emit onChange or discard history. previewPlugin is a separate feature that opens a preview dialog.

Upload images and files to your API

Supply uploadImage or uploadFile callbacks that return a URL. The editor inserts content only after a successful upload; signal allows cancellation when closing the dialog or unmounting.

import { createImagePlugin } from '@eira-core/react-eira-editor/plugins/image';
import { createFilePlugin } from '@eira-core/react-eira-editor/plugins/file';

// This endpoint belongs to your application.
async function uploadFile(file: File, { signal }: { signal: AbortSignal }) {
  const body = new FormData();
  body.append('file', file);
  const response = await fetch('/api/uploads', { method: 'POST', body, signal });
  if (!response.ok) throw new Error('Upload failed');
  const { url } = await response.json();
  return url; // An HTTP(S) URL or a relative path.
}

const plugins = [
  createImagePlugin({ uploadImage: uploadFile, maxFileSize: 10 * 1024 * 1024 }),
  createFilePlugin({ uploadFile, accept: '.pdf,.docx', maxFileSize: 20 * 1024 * 1024 }),
];

<Editor plugins={plugins} value={html} onChange={setHTML} />

Without callbacks, images/files are embedded as local data URLs with a default 10 MiB limit. Images support PNG, JPEG, WebP, GIF and AVIF. accept is only a file picker hint; validate file types and sizes in your API.

Mention users with @

import { mentionPlugin } from '@eira-core/react-eira-editor/plugins/mention';

const plugins = [mentionPlugin];
const mentionOptions = {
  items: [{ id: 'u1', label: 'Nguyễn An', description: 'Developer' }],
};

<Editor plugins={plugins} mention mentionOptions={mentionOptions} />

MentionItem requires id and label, with optional avatar and description. Use loadItems(query, { signal }) returning a Promise instead of items for API search. MentionOptions supports minChars (0), debounceMs (250), limit (8), renderItem, onSelect and onClick.

Connect to your forms

The value/onChange/onBlur API and ref work with popular form libraries. These are separate integration snippets; import Controller from react-hook-form, Form from antd or useField from formik in the corresponding application.

// React Hook Form — inside a component using useForm().
<Controller
  name="content"
  control={control}
  render={({ field }) => (
    <Editor {...field} plugins={plugins} aria-label="Content" />
  )}
/>

// Ant Design
<Form.Item name="content" label="Content">
  <Editor plugins={plugins} aria-label="Content" />
</Form.Item>

// Formik — inside a component using useField('content').
<Editor
  value={field.value}
  onChange={(html) => helpers.setValue(html)}
  onBlur={() => helpers.setTouched(true)}
  plugins={plugins}
  aria-label="Content"
/>

name is metadata, not a hidden input. For native HTML submission, add the value to FormData yourself. Give the editable area an aria-label or aria-labelledby.

Control the editor with ref

import { useRef } from 'react';
import { Editor, type EditorRef } from '@eira-core/react-eira-editor';

export function EditorWithActions() {
  const editorRef = useRef<EditorRef>(null);

  return (
    <>
      <Editor ref={editorRef} plugins={plugins} defaultValue="<p>Hello!</p>" />
      <button type="button" onClick={() => editorRef.current?.focus('end')}>
        Focus
      </button>
      <button type="button" onClick={() => editorRef.current?.insertHTML('<p>New paragraph</p>')}>
        Insert HTML
      </button>
    </>
  );
}

Content mutations return false in disabled, readOnly or preview mode. Use onReady(api) to receive the same API without a ref.

Integration notes

• HTML is converted through the plugin schema, not preserved byte for byte. Missing plugins may cause unsupported nodes to be dropped.
• Echoing onChange back into value preserves the caret. External value replacements reset history; ref mutations are undoable with historyPlugin.
• Validate and sanitize HTML at your application’s storage/render boundary. Preserve data-eira-mention, data-mention-id and data-eira-file metadata for mentions/attachments.
• Nested tables and merged-cell editing are unsupported. Images support width and alignment controls; drag-and-drop upload and pointer image resizing are not implemented.

← EiraCore