@imksh/editor

A modern, reusable Lexical-based rich text editor component for React. Production-ready with comprehensive formatting, embedded media support, and an intuitive toolbar.

Screenshots

Light Theme

Dark Theme

Features

• ✨ Rich Text Formatting: Bold, italic, underline, strikethrough, inline code
• 📝 Block Elements: Headings, paragraphs, blockquotes, code blocks
• 📋 Lists: Bullet, numbered, and check lists
• 🔗 Links & Media: Link insertion, image insertion, and image editing with built-in dialogs or external drawers
• 📊 Tables: Full table support with add/remove rows and columns
• 🎨 Styling: Font size, text color, background highlight, alignment
• ⌨️ Keyboard Shortcuts: Full keyboard support including undo/redo
• 🎯 Dynamic Responsive Toolbar: Intelligently collapses formatting groups into dropdowns as screen width decreases, driven entirely by CSS Container Queries for zero-lag performance.
• 🪟 Fullscreen Mode: Built-in toggle to expand the editor to the full screen.
• 🔄 HTML I/O: Import and export as HTML
• 💾 Auto-Save: Built-in debounced auto-save plugin (if applicable)
• ♿ Accessible: Semantic HTML and keyboard navigation

Installation

npm install @imksh/editor

Peer Dependencies

Make sure you have React and Lexical installed:

npm install react react-dom lexical @lexical/react @lexical/rich-text @lexical/list @lexical/link @lexical/code @lexical/table @lexical/html @lexical/selection @lexical/utils @lexical/markdown prismjs lucide-react

Quick Start

Basic Usage

import { RichTextEditor } from "@imksh/editor";
import "@imksh/editor/style.css"; // Essential for toolbar layout and responsiveness
import { useState } from "react";

export default function MyComponent() {
  const [html, setHtml] = useState("<p>Hello world</p>");

  return (
    <RichTextEditor
      value={html}
      onChange={setHtml}
      placeholder="Start typing..."
      minHeight={400}
    />
  );
}

With Feature Flags

<RichTextEditor
  value={html}
  onChange={setHtml}
  // Disable specific features
  table={false}
  image={false}
  codeBlock={false}
  // Styling
  minHeight={300}
  maxHeight={600} // Enables internal scroll with sticky toolbar
  className="my-editor"
/>

With Custom Image Upload Handler

If you want the editor to handle file uploads when the user selects a local file, provide the onImageUpload prop.

<RichTextEditor
  value={html}
  onChange={setHtml}
  onImageUpload={async (file) => {
    // Upload file to your server
    const formData = new FormData();
    formData.append("file", file);
    const response = await fetch("/api/upload", {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    return data.url; // Return the hosted image URL
  }}
/>

With External Image Drawer / Media Gallery

If your app already has an external media gallery or image drawer, you can completely bypass the editor's default image dialog by providing onOpenImageDrawer. When the user clicks the Image icon in the toolbar, your custom callback is triggered.

<RichTextEditor
  value={html}
  onChange={setHtml}
  onOpenImageDrawer={(insertImageCallback) => {
    // 1. Open your custom media drawer UI here
    setMyMediaDrawerOpen(true);

    // 2. Save the insertImageCallback somewhere so you can call it later
    // When the user selects an image in your drawer, simply call:
    // insertImageCallback("https://my-domain.com/selected-image.jpg");
  }}
/>

Image Editing

After an image is inserted, selecting it opens a floating image toolbar with quick actions:

• Align left, center, or right
• Replace the image source
• Delete the image node

If onOpenImageDrawer is provided, both the insert flow and the replace flow can hand off to your own media picker. If not, the editor falls back to a URL prompt for replacement.

The editor also ships with screenshot assets in docs/images that you can use in your own docs or demos:

API Reference

Props

| Prop | Type | Default | Description | | ------------------- | ------------------------------------------- | -------------------- | --------------------------------------------------- | | value | string | '' | Initial HTML content | | onChange | (html: string) => void | — | Fires when content changes (debounced 300ms) | | placeholder | string | 'Start writing...' | Placeholder text when empty | | readOnly | boolean | false | Read-only mode (disables editing and hides toolbar) | | autoFocus | boolean | false | Auto-focus the editor on mount | | minHeight | number \| string | 200 | Minimum editor height | | maxHeight | number \| string | — | Maximum editor height (enables internal scroll) | | height | number \| string | — | Fixed editor height (enables internal scroll) | | disabled | boolean | false | Disable editing (grayed-out appearance) | | showToolbar | boolean | true | Show/hide the toolbar | | className | string | '' | Additional CSS class on wrapper | | onImageUpload | (file: File) => Promise<string> | — | Image upload handler (returns image URL) | | onOpenImageDrawer | (callback: (url: string) => void) => void | — | Custom external image picker integration |

Feature Flags

All features are enabled by default. Set any to false to disable it from the toolbar and the editor completely:

| Flag | Type | Default | | ---------------- | --------- | ------- | | bold | boolean | true | | italic | boolean | true | | underline | boolean | true | | strikethrough | boolean | true | | inlineCode | boolean | true | | codeBlock | boolean | true | | headings | boolean | true | | fontSize | boolean | true | | textColor | boolean | true | | highlight | boolean | true | | alignment | boolean | true | | bulletList | boolean | true | | numberedList | boolean | true | | checkList | boolean | true | | blockquote | boolean | true | | link | boolean | true | | image | boolean | true | | table | boolean | true | | horizontalRule | boolean | true | | undoRedo | boolean | true |

Example: Minimal Editor

<RichTextEditor
  value={html}
  onChange={setHtml}
  headings={false}
  fontSize={false}
  textColor={false}
  highlight={false}
  table={false}
  image={false}
  link={false}
/>

Example: Full-Featured Editor

<RichTextEditor
  value={html}
  onChange={setHtml}
  minHeight={300}
  maxHeight={600}
  showToolbar={true}
  bold={true}
  italic={true}
  underline={true}
  strikethrough={true}
  inlineCode={true}
  codeBlock={true}
  headings={true}
  fontSize={true}
  textColor={true}
  highlight={true}
  alignment={true}
  bulletList={true}
  numberedList={true}
  checkList={true}
  blockquote={true}
  link={true}
  image={true}
  table={true}
  horizontalRule={true}
  undoRedo={true}
/>

Keyboard Shortcuts

| Shortcut | Action | | ---------------------- | ----------------------------- | | Ctrl/Cmd + B | Bold | | Ctrl/Cmd + I | Italic | | Ctrl/Cmd + U | Underline | | Ctrl/Cmd + Shift + X | Strikethrough | | Ctrl/Cmd + E | Center align | | Ctrl/Cmd + L | Left align | | Ctrl/Cmd + R | Right align | | Ctrl/Cmd + J | Justify | | Ctrl/Cmd + Z | Undo | | Ctrl/Cmd + Shift + Z | Redo | | Tab | Insert tab in code blocks | | Escape | Exit code block or Fullscreen |

Styling

The editor comes with default styles. To customize, you can:

1. Override CSS variables (coming soon)
2. Use the className prop for wrapper styling
3. Import styles (Required for Toolbar Layout):

import "@imksh/editor/style.css";

Browser Support

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

License

MIT © 2024 Karan Sharma

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues, questions, or suggestions, please open an issue on GitHub.

Made with ❤️ by Karan Sharma