📝 BimiEditor — Premium React Rich Text Editor

A stunning, lightweight, and highly customizable WYSIWYG Rich Text Editor for React applications. Built on top of native Web APIs and custom React hooks, BimiEditor offers advanced formatting, file attachments, sanitization, keyboard accessibility, history navigation, accessibility auditing, and PDF export out of the box.

---

✨ Features

• 🎨 Rich Formatting: Bold, Italic, Underline, Custom Text Colors (Harmonious Palette + Hex Input), Custom Font Families, and Line Spacing.
• 📐 Semantic Headings & Blocks: Real semantic headers (<h1> to <h6>), blockquotes, code blocks, lists (ordered/unordered), and horizontal rules.
• 🖼️ Image & Media Resize: Drag-and-drop or select images. Crop, delete, and resize images or tables dynamically inside the editor.
• 📎 File Attachment Chips: Attach files instantly, rendering them as beautifully styled, interactive capsule chips.
• 🌐 Media Embeds: Seamlessly embed YouTube videos and Twitter/X feeds with automatic URL sanitization.
• 🛠️ Smart Tools & Utilities:
  • Help Me Write: AI-assisted placeholder prompt for quick drafting.
  • Confidential Mode: One-click toggle banner for sensitive content warnings.
  • Signature Injection: Quick template injection for professional signatures.
  • Content & Accessibility Checker: Instantly flags missing alt texts, empty headings, and non-descriptive links ("click here").
  • PDF Export: Downloads clean, printable documents preserving list spacing and typography.
• 📜 Version History Slider: Scrub through changes using a visual history slider with manual snapshot commits.
• 🔒 Word Sanitizer: Automatically cleans dirty markup pasted from Microsoft Word and strips out unsafe tags/scripts.
• ⌨️ Keyboard Accessibility: Full arrow-key navigation for color pickers, modal close on Escape, and standard Word processor shortcuts.

---

🚀 Setup & Integration

Follow these simple steps to integrate BimiEditor into your project:

1. Install Dependencies

Ensure you have the required peer dependencies installed in your project:

npm install lucide-react

Note: Make sure your project has React (v16.8+) installed.

2. Copy the Files

Download or copy the Editor folder into your project's component directory (e.g., src/components/Editor). Your folder structure should look like this:

src/components/Editor/
├── dialogs/
│   ├── AccessibilityPanel.jsx
│   ├── EmbedModal.jsx
│   ├── HelpModal.jsx
│   ├── HistorySlider.jsx
│   └── LinkModal.jsx
├── hooks/
│   ├── useEditorHistory.js
│   ├── useFileHandlers.js
│   └── useSelection.js
├── utils/
│   ├── constants.js
│   └── sanitizer.js
├── ColorSwatches.jsx
├── MenuItem.jsx
├── ResizeOverlay.jsx
├── Toolbar.jsx
├── ToolbarButton.jsx
├── index.jsx
└── styles.css

3. Tailwind CSS Configuration

Since BimiEditor uses Tailwind CSS for layout and animations, you must ensure Tailwind scans the editor files. Update your tailwind.config.js to include the Editor component files:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    // Add path to BimiEditor component files
    "./src/components/Editor/**/*.{js,jsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

---

💻 Usage Example

Here is how you can import and render BimiEditor in a parent React component:

Standard React (Vite / CRA)

import React, { useState } from 'react';
import BimiEditor from './components/Editor';

function App() {
  const [content, setContent] = useState('<p>Start typing your masterpiece...</p>');

  const handleFileAttach = (file) => {
    console.log('File attached:', file.name, file.size);
    // Handle uploading the attachment to your storage bucket here
  };

  return (
    <div className="max-w-5xl mx-auto p-6 min-h-screen flex flex-col justify-center">
      <h1 className="text-3xl font-extrabold text-slate-800 mb-6">Create Post</h1>
      
      <BimiEditor
        value={content}
        onChange={setContent}
        placeholder="Share your thoughts with the world..."
        darkMode={false}
        onFileAttach={handleFileAttach}
      />
      
      <div className="mt-8 p-4 bg-slate-50 border border-slate-100 rounded-xl">
        <h3 className="font-semibold text-slate-700 mb-2">HTML Output Preview:</h3>
        <code className="text-xs text-slate-600 block break-all font-mono">
          {content}
        </code>
      </div>
    </div>
  );
}

export default App;

Next.js Integration (Client-Only Rendering)

Since BimiEditor relies heavily on browser APIs (like DOMParser, window.getSelection(), document.execCommand), you must load it dynamically with SSR disabled when using Next.js:

'use client';

import React, { useState } from 'react';
import dynamic from 'next/dynamic';

// Dynamically import editor to prevent server-side rendering issues
const BimiEditor = dynamic(() => import('./components/Editor'), {
  ssr: false,
  loading: () => <div className="h-96 w-full animate-pulse bg-gray-100 rounded-3xl border border-gray-200" />
});

export default function Page() {
  const [content, setContent] = useState('');

  return (
    <main className="p-8 max-w-4xl mx-auto">
      <BimiEditor value={content} onChange={setContent} />
    </main>
  );
}

---

⚙️ Component API

Prop	Type	Default	Description
value	string	""	The initial HTML string content for the editor.
onChange	(html: string) => void	undefined	Callback fired on input change, debounced automatically. Pass updated html string back to parent state.
placeholder	string	"Start typing your masterpiece..."	Text to display when the editor content is empty.
className	string	""	Additional CSS classes applied to the root editor container wrapper.
darkMode	boolean	false	Toggles the editor into dark mode styling.
onFileAttach	(file: File) => void	undefined	Callback function fired when a user selects a file via attachment icon.

---

⌨️ Keyboard Shortcuts

BimiEditor supports professional productivity shortcuts to format content instantly:

Shortcut	Description
Ctrl + B	Bold
Ctrl + I	Italic
Ctrl + U	Underline
Ctrl + Z	Undo last action
Ctrl + Y / Ctrl + Shift + Z	Redo last action
Ctrl + K	Open Hyperlink Modal
Ctrl + Shift + 7	Insert Numbered List
Ctrl + Shift + 8	Insert Bulleted List
Ctrl + Shift + 9	Insert Blockquote
Ctrl + Shift + C	Insert Code Block
Ctrl + Shift + H	Insert Horizontal Line
Ctrl + Shift + S	Manually Save snapshot (History state)
Tab	Indent active list item (make it nested child)
Shift + Tab	Outdent active list item (make it parent item)
Escape	Dismiss all popups, sliders, and modals

---

🏛️ Project Directory Structure

Here is a quick overview of what each module does:

• 🗂️ dialogs/: Modals for user interactions:
  • AccessibilityPanel.jsx: Visual drawer showing quality audits.
  • EmbedModal.jsx: Interface for YouTube/Twitter links.
  • HelpModal.jsx: Pop-up window displaying keyboard shortcuts.
  • HistorySlider.jsx: Timeline tracker allowing undo/redo scrubbing.
  • LinkModal.jsx: Interactive popup to manage URL targets, label strings, and tab behavior.
• 🗂️ hooks/: Core logic separation:
  • useEditorHistory.js: Stores state snapshot lists up to 100 entries. Includes debounce limits.
  • useFileHandlers.js: Manages copy/pasting files, drag-and-drop, base64 image parsing, and file size limits (5MB).
  • useSelection.js: Interacts with text selection, custom font scaling, spacing, alignment, and semantic heading tags.
• 🗂️ utils/: Helper files:
  • constants.js: Lists font settings, keyboard lists, emojis, color choices, and size limits.
  • sanitizer.js: Secure functions to parse hex values, extract youtube IDs, and strip cross-site script (XSS) inputs.

---

🧑‍💻 Customization

Changing the Color Swatch Selection

You can alter the default color selection palette in constants.js:

export const COLOR_PALETTE = [
    '#000000', '#4b5563', // ... custom colors
];

Changing Default Font Families

Modify the font list array inside constants.js:

export const FONT_FAMILIES = [
    'Arial', 'Verdana', 'Helvetica', 'Times New Roman', // ... custom font names
];

---

🛡️ License

This component is open-source. Feel free to copy, modify, and integrate it into your projects. Happy coding! 🚀