@richhtmleditor/react

React component for Rich HTML Editor, built on @richhtmleditor/core. Drop-in WYSIWYG with toolbar presets, dark mode, custom React toolbar tools, and enterprise plugin support.

Current release: 1.2.10 — Depends on @richhtmleditor/core ^1.2.10.

Repository: github.com/rajkishorsahu89/richhtmleditor

Demo: richhtmleditor.stackkitlabs.com — demo · guide · API. Doc Preview joint demo: stackkitlabs.com/products/doc-preview

What's in 1.2.10

• RichHtmlEditor — React wrapper around createEditor with lifecycle-safe mount/destroy
• Controlled content — content prop syncs HTML into the editor instance
• Custom tools — customToolIds + renderTool for React-rendered toolbar buttons
• Plugins — pass plugins for AI, comments, workflows, and collab
• Re-exports all public symbols from @richhtmleditor/core

New in 1.2.10

| Feature | React usage | | --- | --- | | Callout blocks — info / warning / success / error styled blocks | editorRef.current.commands.insertCallout("info") or toolbar Callout dropdown | | Embed blocks — YouTube, Loom, Figma auto-embed | Paste URL to auto-embed; or editorRef.current.commands.insertEmbed(url) | | Word goal + progress bar | editorRef.current.commands.setWordGoal(500) — progress bar in status bar | | Reading time | Displayed automatically: status bar shows ~N min read | | Dark mode toggle | dark={true} prop or toolbar toggleDarkMode button | | Markdown shortcuts | Always on — ## → H2, **bold**, _italic_, `code` | | Markdown import | editorRef.current.commands.importMarkdown() — opens .md file picker | | Case change | editorRef.current.commands.caseChange("upper" \| "lower" \| "title" \| "sentence") | | Smart typography | Auto-converts straight quotes, -- → em dash, ... → ellipsis | | Autolink | URLs auto-link on paste and after typing a space | | Task lists | features={{ taskList: true }} — checkbox bullet lists | | XLSX / CSV paste | Paste from Excel or Google Sheets → inserts a table | | Table sort | Click any <th> to sort column; click again to reverse | | Undo history panel | editorRef.current.commands.undoHistoryPanel() — sidebar with full undo stack | | TOC navigation | Click a TOC entry in the outline panel → scrolls to that heading | | Preview modal | editorRef.current.commands.previewModal() — read-only rendered preview overlay | | Autoresize | features={{ autoresize: true }} — editor grows with content | | Mobile touch | Touch-optimised toolbar; 40 px tap targets on pointer: coarse devices |

Ships as ESM with TypeScript declarations. Peer deps: react and react-dom ^18 || ^19. Import @richhtmleditor/themes CSS in your app entry.

Keywords: richhtmleditor react wysiwyg rich-text-editor component

Install

npm install @richhtmleditor/react @richhtmleditor/themes
# Adds @richhtmleditor/core automatically.
# Peer deps: react ^18 || ^19, react-dom ^18 || ^19.

Usage — component

import { useState } from "react";
import { RichHtmlEditor } from "@richhtmleditor/react";
import "@richhtmleditor/themes/richhtmleditor.css";

export function EditorDemo() {
  const [html, setHtml] = useState("<p>Hello <strong>world</strong></p>");

  return (
    <RichHtmlEditor
      content={html}
      toolbar={{ preset: "standard" }}
      features={{ tables: true, media: true }}
      onChange={(c) => setHtml(c.html)}
    />
  );
}

Usage — custom React toolbar tool

<RichHtmlEditor
  toolbar={{
    preset: "standard",
    layout: ["bold", "italic", "|", "approve"]
  }}
  customToolIds={["approve"]}
  renderTool={(tool) => (
    <button type="button" onClick={() => alert("Approved!")}>
      Approve
    </button>
  )}
/>

Usage — enterprise plugins

import { createAiPlugin } from "@richhtmleditor/ai";
import { createCommentsPlugin } from "@richhtmleditor/comments";
import { createWorkflowsPlugin } from "@richhtmleditor/workflows";
import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";

const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });

<RichHtmlEditor
  toolbar={{ preset: "full" }}
  features={gate.features}
  plugins={[
    createAiPlugin({ onGenerate: async (req) => callYourLlm(req) }),
    createCommentsPlugin({ author: "Reviewer" }),
    createWorkflowsPlugin({ actor: "Legal", role: "editor" })
  ]}
/>

API

RichHtmlEditor props

| Prop | Type | Description | | --- | --- | --- | | content | string | Controlled HTML content. | | editable | boolean | Enable editing (default true). | | dark | boolean | Dark theme tokens. | | theme | EditorThemeTokens | Custom CSS variable overrides. | | toolbar | ToolbarConfig \| ToolbarPresetId | Toolbar preset or custom layout. | | features | EditorFeatureFlags | Feature gates. | | plugins | EditorPlugin[] | Enterprise and custom plugins. | | customToolIds | string[] | Tool IDs to render with renderTool. | | renderTool | (tool, defaultRender) => ReactNode | Custom React toolbar renderer. | | onChange | (content: EditorContent) => void | Fired on document edits. | | onSave | (content: EditorContent) => void | Fired on save command. | | className | string | Wrapper class name. | | style | CSSProperties | Wrapper inline styles. |

React vs Angular naming

| React | Angular | | --- | --- | | <RichHtmlEditor /> | <richhtmleditor> | | onChange | (contentChange) | | onSave | (save) | | content | [content] |

Related packages

• @richhtmleditor/core — framework-agnostic engine (auto-installed).
• @richhtmleditor/themes — shared CSS.
• @richhtmleditor/angular — Angular component.
• @richhtmleditor/vue — Vue 3 component.
• @richhtmleditor/enterprise — licence and feature gates.
• @richhtmleditor/ai — AI authoring plugin.
• @richhtmleditor/comments — review comments plugin.
• @richhtmleditor/workflows — approval workflows plugin.
• @richhtmleditor/collab — Yjs collaboration plugin.
• @richhtmleditor/diagrams — Mermaid diagrams plugin.
• @richhtmleditor/math — LaTeX/MathML equation plugin.
• @richhtmleditor/export — DOCX/PDF/HTML export plugin.
• @richhtmleditor/spellcheck — real-time spell check plugin.
• @richhtmleditor/templates — document templates plugin.
• @richhtmleditor/mentions — @ mentions plugin.

License

MIT