YJD React Rich Editor

A professional-grade React rich text editor component with extensive formatting options, built for modern web applications and commercial use.

Features

✨ Rich Text Formatting

• Bold, italic, underline, strikethrough
• Subscript and superscript
• Text color and background color
• Font family and text size
• Text alignment and line height
• Text capitalization

🎯 Advanced Features

• Modular architecture with extensible formats
• Lists and indentation controls
• Links and images with popup interfaces
• Tables with dedicated toolbar
• Video embedding support
• Emoji picker integration
• Content import functionality
• Word count and breadcrumb navigation
• Responsive design with resize handles

🔧 Developer Friendly

• Registry-based module system
• Extensible format and module architecture
• Event-driven content change callbacks
• TypeScript support with full type definitions
• Modern React integration with hooks
• Customizable UI components

Installation

npm install @oix1987/yjd-react

or

yarn add @oix1987/yjd-react

Quick Start

import React, { useState } from "react";
import RichEditor from "@oix1987/yjd-react";

function App() {
  const [content, setContent] = useState("<p>Hello World!</p>");

  return (
    <div>
      <h1>My Rich Editor</h1>
      <RichEditor
        content={content}
        placeholder="Start typing your content here..."
        height={400}
        width="100%"
        onChange={(newContent) => {
          console.log("Content changed:", newContent);
          setContent(newContent);
        }}
      />
    </div>
  );
}

export default App;

Component Props

The RichEditor component accepts the following props:

| Prop | Type | Default | Description | | ------------- | ---------- | ------------------- | ------------------------------------------- | | width | string | 800 | Width of the editor (px or %) | | height | number | 400 | Minimum height of the editor area (px) | | maxWidth | number | 1200 | Maximum width of the container | | maxHeight | number | 800 | Maximum height of the container | | placeholder | string | 'Start typing...' | Placeholder text | | content | string | null | Initial HTML content | | toolbar1 | object[] | See below | Configuration for Toolbar 1 | | toolbar2 | object[] | See below | Configuration for Toolbar 2 | | onChange | function | undefined | Callback (content) => { ... } | | options | object | See below | Advanced internal options |

Toolbar Configuration

To customize the toolbar, pass toolbar1 and toolbar2 props using JSX syntax:

<RichEditor
  toolbar1={[
    { group: 'text-format', items: ['bold', 'italic', 'underline'] },
    { group: 'link', items: ['link'] }
  ]}
  toolbar2={[
    { group: 'media', items: ['image', 'video'] }
  ]}
/>

Available Toolbar Commands

bold, italic, underline, strike, subscript, superscript, color, background, link, table, heading, font-family, line-height, capitalization, text-align, list, indent-increase, indent-decrease, text-size, emoji, image, video, tag, undo, redo, code-view, more (toggles toolbar 2).

Advanced Options

The options prop allows fine-grained control over internal modules:

<RichEditor
  options={{
    theme: 'light', // 'light' or 'dark'
    features: {
      emoji: true,
      image: true,
      table: true,
      wordCount: true,
      breadcrumb: true
    },
    history: {
      delay: 1000,
      maxStack: 100
    }
  }}
/>

Available Modules: toolbar, history, block-toolbar, table-toolbar, code-view, resize-handles.

Usage Examples

Basic Usage

import RichEditor from "@oix1987/yjd-react";

function MyEditor() {
  return (
    <RichEditor
      width="800px"
      height={500}
      placeholder="Write something amazing..."
      onChange={(content) => console.log(content)}
    />
  );
}

Controlled Component

import RichEditor from "@oix1987/yjd-react";
import { useState } from "react";

function ControlledEditor() {
  const [editorContent, setEditorContent] = useState("<p>Initial content</p>");

  return (
    <RichEditor
      content={editorContent}
      onChange={setEditorContent}
      width="100%"
      height={400}
    />
  );
}

Advanced Configuration

import RichEditor from "@oix1987/yjd-react";

function AdvancedEditor() {
  return (
    <RichEditor
      width="100%"
      height={600}
      placeholder="Multi-toolbar editor..."
      options={{
        theme: "light",
        maxWidth: 1200,
        maxHeight: 800,
        features: {
          emoji: true,
          image: true,
          table: true,
          wordCount: true,
          breadcrumb: true,
        }
      }}
      onChange={(content) => console.log(content)}
    />
  );
}

Full-Featured Editor

import RichEditor from "@oix1987/yjd-react";
import { useState } from "react";

function RichTextEditor() {
  const [content, setContent] = useState("");

  const handleContentChange = (newContent) => {
    setContent(newContent);
    console.log("Content updated:", newContent);
  };

  return (
    <div style={{ maxWidth: "1200px", margin: "0 auto", padding: "20px" }}>
      <RichEditor
        width="100%"
        height={600}
        placeholder="Create your masterpiece..."
        content={content}
        onChange={handleContentChange}
        options={{
          features: {
            emoji: true,
            image: true,
            table: true,
            wordCount: true,
            breadcrumb: true,
          }
        }}
      />

      <div style={{ marginTop: "20px" }}>
        <h3>Content Preview:</h3>
        <div dangerouslySetInnerHTML={{ __html: content }} />
      </div>
    </div>
  );
}

Available Formats and Modules

The editor includes a comprehensive set of built-in formats and modules:

Text Formatting Formats

• Bold - Bold text formatting
• Italic - Italic text formatting
• Underline - Underlined text
• Strike - Strikethrough text
• Subscript - Subscript text
• Superscript - Superscript text

Colors and Styling Formats

• Color - Text color picker
• Background - Background color picker
• TextSize - Font size control
• FontFamily - Font family selection
• LineHeight - Line height control
• Capitalization - Text capitalization options

Layout and Structure Formats

• TextAlign - Text alignment controls
• Heading - Heading levels (H1-H6)
• List - Ordered and unordered lists
• Indent - Text indentation controls

Media and Links Formats

• Link - Insert and edit links
• Image - Insert and manage images
• Video - Insert videos
• Emoji - Emoji picker integration

Advanced Features

• Table - Insert and edit tables
• Tag - Insert custom tags
• Import - Content import functionality

Built-in Modules

• Toolbar - Main toolbar functionality
• History - Undo/redo functionality
• BlockToolbar - Block-level formatting toolbar
• TableToolbar - Table-specific toolbar
• CodeView - HTML code view
• ResizeHandles - Editor resize functionality

Event Handling

The onChange callback receives the updated content as an HTML string:

const handleContentChange = (content) => {
  // content is an HTML string
  console.log("New content:", content);

  // You can parse or process the content as needed
  const textOnly = content.replace(/<[^>]*>/g, ""); // Strip HTML tags
  console.log("Text only:", textOnly);
};

<ReactRichEditor onChange={handleContentChange} />;

Styling

The editor comes with built-in styles, but you can customize the appearance:

<ReactRichEditor
  width="100%"
  height="500px"
  style={{
    border: "2px solid #e1e5e9",
    borderRadius: "8px",
    boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
  }}
/>

Requirements

• React 16.8.0 or higher
• React DOM 16.8.0 or higher

Browser Support

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

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

ISC License. See LICENSE file for details.

Commercial Licensing

For commercial use, enterprise support, or custom licensing options, please contact:

• Author: Oix1987
• Email: [Contact for commercial licensing]
• Repository: GitHub Repository

Support

If you encounter any issues or have questions:

1. Check the Issues page
2. Create a new issue with a detailed description
3. Include code examples and browser information
4. For commercial support, contact the author directly

Changelog

v1.0.1

• Initial release of YJD React Rich Editor
• Modular architecture with extensible formats
• Comprehensive formatting options
• React integration with hooks
• TypeScript support
• Commercial licensing available

Made with ❤️ for the React community