raydit-editor

@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

• Exported TypeScript types - Users get full IntelliSense
• Added customization props - className, editorClassName, showToolbar, etc.
• Removed commented code - Cleaner codebase
• Proper peer dependencies - React is a peer dependency
• Build configuration - Using tsup for modern bundling
• Export sub-components - Advanced users can import individual pieces
• 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