@raydit-editor

A powerful rich text editor built with TipTap and React.

Installation

```bash npm install @raydit-editor

or

yarn add @raydit-editor

or

pnpm add @raydit-editor ```

Note: This package requires Tailwind CSS to be set up in your project.

Usage

```tsx import { RayditEditor } from '@raydit-editor'; import "RayditEditor/dist/index.css";

function App() { const [content, setContent] = useState('');

return ( <RayditEditor content={content} onChange={(html) => setContent(html)} onBlur={(html) => console.log('Saved:', html)} autoFocus /> ); } ```

Props

| Prop | Type | Default | Description | | ------------------- | ------------------------ | ------------------------------ | ------------------------------ | | content | string | "" | Initial HTML content | | onChange | (html: string) => void | - | Called on every content change | | onBlur | (html: string) => void | - | Called when editor loses focus | | autoFocus | boolean | false | Auto-focus on mount | | disabled | boolean | false | Disable editing | | className | string | "" | Custom wrapper class | | editorClassName | string | "" | Custom editor class | | placeholder | string | "Write, Type / for commands" | Placeholder text | | showToolbar | boolean | true | Show selection toolbar | | showTableControls | boolean | true | Show table row/column controls |

Styling

This package uses Tailwind CSS. Make sure your Tailwind config includes:

License

MIT ```

🎯 Key Improvements Made

1. Exported TypeScript types - Users get full IntelliSense
2. Added customization props - className, editorClassName, showToolbar, etc.
3. Removed commented code - Cleaner codebase
4. Proper peer dependencies - React is a peer dependency
5. Build configuration - Using tsup for modern bundling
6. Export sub-components - Advanced users can import individual pieces
7. Removed dark mode assumption - Let users handle theming

⚠️ Additional Considerations

1. CSS Strategy

You need to decide how to handle styles:

• Option A: Bundle Tailwind (increases package size)
• Option B: Require users to have Tailwind (current approach)
• Option C: Provide vanilla CSS alternative

4. Publishing Checklist

• [ ] All TypeScript errors resolved
• [ ] Build succeeds (npm run build)
• [ ] README is complete
• [ ] LICENSE file added
• [ ] Version number set correctly
• [ ] Test in a separate project before publishing
• [ ] Set up npm account and organization