Complete API Reference

API Documentation

Comprehensive guide to the editor's API, plugin system, and advanced features. Learn how to extend and customize the editor to fit your specific needs.

Plugin System

Extend functionality with custom plugins

The plugin system is the heart of extensibility in this editor. Extend the editor with custom plugins that can wrap text in HTML tags, execute document commands, or perform custom actions. Plugins integrate seamlessly into the toolbar and provide a consistent user experience.

Plugin Types

Plugins can be one of four types: HTML Tag Plugins (wrap selected text), Command Plugins (execute document commands), Action Plugins (custom functions), or Type Plugins (built-in plugin types).

1. HTML Tag Plugin

Wraps selected text with a custom HTML tag.

{
  name: "highlight",
  icon: "🖍️",
  title: "Highlight Text",
  tag: "mark"
}

2. Command Plugin

Executes a document command (like formatBlock, bold, etc.).

{
  name: "heading2",
  icon: "H2",
  title: "Heading 2",
  cmd: "formatBlock",
  arg: "h2"
}

3. Action Plugin

Executes a custom function when clicked.

{
  name: "timestamp",
  icon: "⏱️",
  title: "Insert Timestamp",
  action: (editor) => {
    const now = new Date();
    document.execCommand(
      "insertText", 
      false, 
      now.toLocaleString()
    );
  }
}

4. Type Plugin

Uses built-in plugin types (like "timestamp").

{
  name: "timestamp",
  icon: "⏱️",
  title: "Insert Time",
  type: "timestamp"
}

Complete Plugin Example

Real-world implementation with multiple plugin types

import Editor from '@webbycrown/react-advanced-richtext-editor';
import { FaHighlighter, FaClock } from 'react-icons/fa';

const customPlugins = [
  {
    name: "timestamp",
    icon: <FaClock />,
    title: "Insert Timestamp",
    action: (editor) => {
      const now = new Date();
      const timestamp = now.toLocaleString();
      document.execCommand("insertText", false, timestamp);
    },
  },
  {
    name: "highlight",
    icon: <FaHighlighter />,
    title: "Highlight Text",
    tag: "mark"
  },
  {
    name: "heading2",
    icon: "H2",
    title: "Heading 2",
    cmd: "formatBlock",
    arg: "h2"
  }
];

function MyEditor() {
  const [content, setContent] = useState('');
  
  return (
    <Editor
      value={content}
      onChange={setContent}
      plugins={customPlugins}
      height={400}
    />
  );
}

Supported HTML Tags

Complete list of supported HTML elements

The editor supports a comprehensive set of HTML tags. Use the allowedTags prop to restrict which tags can be used. All tags are automatically sanitized using DOMPurify for security.

Text & Structure Tags

<p><h1><h2><h3><h4><h5><h6><div><span><br><hr>

Formatting Tags

<strong><em><u><s><sup><sub><mark><code><pre>

List & Block Tags

<ul><ol><li><blockquote><dl><dt><dd>

Media & Table Tags

<a><img><table><thead><tbody><tfoot><tr><th><td><caption>

Plugin Properties Reference

Complete API for plugin configuration

Property	Type	Required	Description
name	string	Yes	Unique identifier for the plugin
icon	string \| ReactNode	Yes	Icon displayed in toolbar (emoji, text, or React component)
title	string	Yes	Tooltip text shown on hover
tag	string	No	HTML tag to wrap selected text (for tag plugins)
cmd	string	No	Document command to execute (for command plugins)
arg	string	No	Argument for the command (for command plugins)
action	function	No	Custom function to execute (for action plugins)
type	string	No	Built-in plugin type (e.g., "timestamp")

Security Features

Enterprise-grade security built-in

Security is a top priority. The editor includes multiple layers of protection to ensure safe content handling and prevent common web vulnerabilities like XSS attacks, malicious scripts, and unsafe HTML injection.

🛡️

DOMPurify Integration

All HTML content is automatically sanitized using DOMPurify, a battle-tested XSS sanitizer. This ensures that malicious scripts, event handlers, and dangerous HTML are removed before content is saved or displayed.

Tag Whitelisting

Use the allowedTags prop to restrict which HTML tags can be used in the editor. This provides fine-grained control over what content users can create, perfect for comment systems and restricted content areas.

Safe Paste

Pasted content from external sources (Microsoft Word, Google Docs, web pages, etc.) is automatically cleaned and sanitized. Malicious scripts, unwanted styles, and unsafe HTML are removed while preserving formatting and structure.

Link Security

Links automatically include security attributes (target="_blank",rel="noopener noreferrer") to prevent security vulnerabilities like tabnabbing and window.opener attacks.

⚠️ Security Best Practices

Always use the allowedTags prop to restrict HTML tags in user-generated content
Never disable DOMPurify sanitization in production environments
Validate and sanitize content on the server-side as well
Use Content Security Policy (CSP) headers for additional protection

Advanced Usage Patterns

Real-world examples and best practices

Creating a Custom Plugin with React Icons

import { FaHighlighter } from 'react-icons/fa';

const highlightPlugin = {
  name: "highlight",
  icon: <FaHighlighter />,
  title: "Highlight Text",
  tag: "mark"
};

Plugin with Custom Action

const insertDatePlugin = {
  name: "insertDate",
  icon: "📅",
  title: "Insert Current Date",
  action: () => {
    const date = new Date().toLocaleDateString();
    document.execCommand("insertText", false, date);
  }
};

Multiple Plugins Array

const plugins = [
  { name: "highlight", icon: "🖍️", title: "Highlight", tag: "mark" },
  { name: "timestamp", icon: "⏱️", title: "Insert Time", type: "timestamp" },
  { name: "h2", icon: "H2", title: "Heading 2", cmd: "formatBlock", arg: "h2" }
];

<Editor plugins={plugins} ... />