API Reference

Every prop, callback, and plugin hook in one place—plus behavioral notes, defaults, and examples so you can wire the editor confidently in controlled React apps, SSR environments, or complex dashboards.

Use this reference when you need precise answers about props, event callbacks, plugin object shapes, and styling hooks. Each section breaks down default values, accepted types, behavioral notes, and inline examples so you can wire the editor confidently, extend the toolbar with plugins, and understand the browser guarantees that ship with the package.

• Controlled-first: The editor is fully controlled. Pass value and onChange just like any other input and lean on React state for persistence.
• Progressive enhancement: Every optional prop has sensible defaults so you can start with <Editor /> and add knobs incrementally.
• Interoperable: Plugin definitions, storage keys, and CSS hooks are shared across docs pages—jump between sections for deeper dives.

Editor Component

The main component exported from the package. Import it directly for the default bundle, or pull named exports (coming soon) for lighter builds that exclude optional tooling. The component is tree-shake friendly and works in both client-only and SSR frameworks.

Import

import Editor from '@webbycrown/react-advanced-richtext-editor'; // Import the default bundle

Props

All props are optional except value/onChange when using the editor in controlled mode (recommended). Combine sizing props, theming props, and plugin arrays to match your UX requirements.

Value

<Editor 
  value={htmlContent}        // Current HTML content
  onChange={setHtmlContent}  // Update handler
/>

OnChange

<Editor 
  value={content}           // Current HTML content
  onChange={(html) => {     // Callback when content changes
    console.log('Content changed:', html);
    setContent(html);       // Update state with new HTML
  }} 
/>

Tip: Debounce expensive work (auto-saving, validation) inside your onChange handler rather than throttling the editor itself. The callback always receives sanitized HTML; if you also need plain text snippets, derive them in the handler before persisting.

Height

// Fixed height in pixels
<Editor height={500} />
// Auto height - grows with content
<Editor height="auto" />
// Responsive height - adapts to parent container
<Editor height="responsive" />

Behavior: The editor clamps to minHeight but grows when height="auto". Use "responsive" when the parent container controls vertical space (e.g., flex column layouts) so the editor stretches to fill the available height.

Width

Layout tips: Keep the width at “100%” for fluid layouts; use fixed pixel widths only when embedding inside panels with known sizes. When pairing with CSS grid, set the parent column width and leave the editor at “100%” for predictable wrapping.

MinHeight

Use this to ensure short documents still provide a comfortable canvas. Combined with height=”auto”, the editor will grow beyond minHeight as users type.

ClassName

Attach a custom class when you want to scope theme overrides (see Theming page) or differentiate multiple editor instances on the same screen.

AllowedTags

Attach a custom class when you want to scope theme overrides (see Theming page) or differentiate multiple editor instances on the same screen.

Supported Tags:

• Text formatting: p, h1, h2, h3, h4, h5, h6, strong, em, u, s, sup, sub, span
• Structure: div, blockquote, pre, code, br, hr
• Lists: ul, ol, li
• Links & Media: a, img
• Tables: table, thead, tbody, tr, th, td

DOMPurify enforces this whitelist. If you inject custom tags via plugins, add them here so they survive serialization.

StorageKey

Useful for draft experiences and survival across accidental refreshes. When using multi-tenant dashboards, derive the key from user or document IDs to avoid collisions.

plugins

See Plugins Documentation for detailed plugin API.

Structure reminder: Plugins are plain objects so you can memoize them or fetch them from an API. Keep the array reference stable (e.g., wrap in useMemo) to avoid re-rendering the entire toolbar on every keystroke.

Plugin API

Plugin Object

A plugin object can have the following properties:

Combine these properties to describe exactly how each toolbar button should behave. For example, a plugin with tag and icon becomes a simple wrapper, while one with action can open modals, call APIs, or insert any HTML you need.

Events

OnChange Event

Fired whenever the editor content changes. The callback is synchronous and runs after the DOM mutation completes, so you always receive the latest sanitized HTML. Use it for autosave, analytics, or syncing derived state in your app.

<Editor 
  onChange={(html) => {  // Callback receives new HTML content
    // Handle content change
    console.log('New content:', html);
  }}
/>

Performance tip: If you need to send updates to a backend in real time, debounce the network call rather than the editor. This keeps typing latency low while still throttling API traffic.

Styling

CSS Classes

The editor uses the following CSS classes that you can override:

• .rte-editor-container – Main container
• .rte-toolbar – Toolbar wrapper
• .rte-toolbar-button – Toolbar buttons
• .rte-editor-content – Editor content area
• .rte-editor-content[contenteditable] – ContentEditable element

Target these selectors in global CSS, CSS Modules, or styled-components. Because the editor exposes stable class names, upgrades won’t break your overrides.

Custom Styling

// Style the toolbar
.my-custom-editor .rte-toolbar {
  background: #f0f0f0;
  border-radius: 8px;
}

// Style the editor content area
.my-custom-editor .rte-editor-content {
  min-height: 300px;
  padding: 20px;
}

Further customization: Combine className with CSS variables from the Theming page to control both structure and palette. For example, set --rte-primary-color for button accents while also adjusting padding via CSS.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)

Requires browsers with:

• contentEditable API support
• localStorage support
• ES6+ JavaScript features

If you need to support legacy browsers without contentEditable (e.g., IE11), consider rendering a fallback component and gating access. Feature-detect before mounting the editor to avoid hydration issues.