nc-editor

A comprehensive rich text editor React component with advanced formatting features.

Features

• 🎨 Rich text formatting with font family, size, and color controls
• 👁️ Visual and source view editing modes
• 📋 Insert tables, images, code blocks, and comments
• 🔄 Table manipulation (merge cells, insert/delete rows/columns)
• 🌐 LTR (left-to-right) text direction optimized for most languages
• 🔍 Find and replace functionality
• 🖥️ Fullscreen mode
• 📊 Word and character count
• ⚡ Zero configuration required - works out of the box

Installation

npm install nc-editor
# or
yarn add nc-editor

Dependencies

This component uses Tailwind CSS for styling. You need to set up Tailwind in your project:

npm install -D tailwindcss postcss autoprefixer @tailwindcss/typography
# or
yarn add -D tailwindcss postcss autoprefixer @tailwindcss/typography

Configure your tailwind.config.js:

module.exports = {
  content: [
    // Your project content paths
    "./node_modules/nc-editor/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [require("@tailwindcss/typography")],
};

Basic Usage

import React, { useState } from "react";
import { NCEditor } from "nc-editor";

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

  return (
    <NCEditor
      value={content}
      onChange={setContent}
      placeholder="Start typing..."
    />
  );
}

That's it! No wrapper components or additional configuration needed. The editor defaults to LTR (left-to-right) text direction and works seamlessly in any React application.

Props

| Prop | Type | Default | Description | | ---------------------- | ----------------------- | ------------------- | ------------------------------------- | | value | string | '' | HTML content of the editor | | onChange | (value: string) => void | required | Called when content changes | | placeholder | string | undefined | Placeholder text when editor is empty | | className | string | undefined | Additional CSS classes | | readOnly | boolean | false | Makes the editor read-only | | autoInsertTable | boolean | false | Auto-inserts a 2x2 table on init | | defaultFontFamily | string | 'Arial, sans-serif' | Default font family | | defaultFontSize | string | '16px' | Default font size | | defaultTextColor | string | '#000000' | Default text color | | defaultBackgroundColor | string | '' | Default background color | | showWordCount | boolean | false | Shows word and character count |

Advanced Usage

Customized Editor

import React, { useState } from "react";
import { NCEditor } from "nc-editor";

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

  return (
    <NCEditor
      value={content}
      onChange={setContent}
      defaultFontFamily="Georgia, serif"
      defaultFontSize="18px"
      defaultTextColor="#333333"
      showWordCount={true}
      placeholder="Start writing your masterpiece..."
    />
  );
}

Migration from v0.2.0

If you're upgrading from v0.2.0 or earlier, you can now simplify your code:

Before (v0.2.0):

import { NCEditor } from "nc-editor";
import { DirectionProvider } from "nc-editor/dist/lib/direction-context";

function MyEditor() {
  return (
    <DirectionProvider>
      <NCEditor value={content} onChange={setContent} />
    </DirectionProvider>
  );
}

After (v0.2.2+):

import { NCEditor } from "nc-editor";

function MyEditor() {
  return <NCEditor value={content} onChange={setContent} />;
}

The DirectionProvider is no longer available - the editor is now optimized for LTR text only! 🎉

Troubleshooting

Text Direction Issues

Problem: Need RTL (right-to-left) support.

Solution: As of v0.2.2, the editor is optimized for LTR text only. RTL support has been removed to simplify the component and improve performance. If you need RTL support, please use v0.2.1 or earlier.

Styling Issues

Problem: Editor styling not working properly.

Solution: Make sure you've included the Tailwind CSS setup as described in the installation section, especially:

• Include @tailwindcss/typography plugin
• Add nc-editor to your Tailwind content paths

TypeScript Issues

Problem: TypeScript errors with the component props.

Solution: The component exports full TypeScript definitions. Make sure you're importing from the main package:

import { NCEditor } from "nc-editor"; // ✅ Correct

Changelog

v0.2.2 (Latest)

• 🔧 Simplified: Removed RTL support to optimize for LTR-only use cases
• ⚡ Improved: Better performance with simplified text direction handling
• 🧹 Cleaned: Removed direction prop and DirectionProvider for simpler API
• 📦 Reduced: Smaller bundle size without RTL-related code

v0.2.1

• 🐛 Fixed: Direction context dependency causing RTL issues in npm modules
• ✨ Added: Optional direction prop for explicit direction control
• 🔧 Improved: Zero configuration required - works out of the box
• 📚 Enhanced: Better TypeScript support and documentation

v0.2.0

• ✨ Initial release with comprehensive rich text editing features

License

MIT