A powerful, highly-configurable RK Rich Text Editor for React applications, featuring an extended toolbar, HTML source mode, and advanced plugins like Mentions and Variables.

Installation

Install the package via npm, yarn, or pnpm:

npm install rk-rich-editor
# or
yarn add rk-rich-editor

Features

• Visual & HTML Modes: Switch seamlessly between a WYSIWYG visual editor and a powerful Monaco-based HTML source editor.
• Customizable Tools: Pick and choose exactly which formatting buttons and tools to show in the toolbar.
• Variables & Mentions: Built-in support for mentioning users and inserting variables, with fully customizable trigger characters.
• Media & Tables: Easily insert images, iframe media wrappers, and complex tables.

Gallery

Modern, clean interface with comprehensive formatting toolbar.

Support for complex embedded React components like Tables and dynamic statuses.

Advanced text formatting features including code blocks, quotes, and custom fonts.

Usage Example

Here is a complete example of how to use <RkEditor /> in your React project, including how to configure specific tools and custom trigger characters like @ for mentions and $ for variables.

import React, { useState } from 'react';
import { RkEditor } from 'rk-rich-editor';
import 'rk-rich-editor/dist/style.css'; // Don't forget to import the CSS block!

export default function MyEditor() {
  const [content, setContent] = useState('<p>Hello world!</p>');

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>My Custom Editor</h2>
      
      <RkEditor
        initialContent={content}
        onContentChange={(newContent) => setContent(newContent)}
        
        // Configuration Object
        config={{
          minHeight: 400,
          placeholder: 'Start typing... Use @ to tag users and $ to insert a variable!',
          
          // 1. Pick exactly which tools to show in the toolbar
          allowedTools: [
            'modeSwitch', // Allow switching to HTML mode
            'bold', 'italic', 'underline',
            'bulletList', 'orderedList',
            'heading', 'textColor', 'link', 'image'
          ],
          
          // 2. Custom Trigger Characters
          mentionTrigger: '@',
          variableTrigger: '$',
          
          // 3. Define the options that appear when triggering
          mentions: [
            { id: '1', label: 'JohnDoe', description: 'Admin' },
            { id: '2', label: 'JaneSmith', description: 'Editor' }
          ],
          variables: [
            { id: 'company_name', label: 'Company Name' },
            { id: 'current_date', label: 'Today Date' }
          ]
        }}
      />
      
      <div style={{ marginTop: '20px' }}>
        <h3>Raw HTML Output:</h3>
        <pre>{content}</pre>
      </div>
    </div>
  );
}

API Reference

Component Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialContent | string | '' | Initial HTML string. | | onContentChange| (content: string) => void | undefined | Callback fired when the editor content changes. | | config | EditorConfig | {} | Advanced configuration object (see below). | | showMenuBar | boolean | true | Shows or hides the top File/Edit/View menu bar. | | className | string | undefined | Custom CSS class for the wrapper. |

EditorConfig Options

• allowedTools: Array of strings defining which extended toolbar items to render (e.g. ['bold', 'italic', 'heading', 'image', 'history']).
• mentionTrigger: String character(s) to open the mentions dropdown (default: @).
• variableTrigger: String character(s) to open the variables dropdown (default: {{).
• mentions: Array of MentionItem objects.
• variables: Array of VariableItem objects.
• minHeight / maxHeight: Number (in pixels) defining height constraints.
• placeholder: String to show when the editor is empty.

Report Issue

If you find a bug or want to suggest a feature:

https://github.com/kishorkatariya/rich-canvas-editor/issues/new