NextJS Slate Editor

A modern, customizable Slate.js editor component designed specifically for Next.js applications.

Features

• 🚀 Built with Slate.js for powerful rich text editing
• ⚡ Optimized for Next.js with SSR support
• 🎨 Customizable styling with Tailwind CSS
• 📦 Zero-config setup
• 🔧 TypeScript support
• 🎯 Modern React patterns with hooks

Installation

npm install nextjs-slate-editor

Peer Dependencies

Make sure you have these installed in your project:

npm install slate slate-react react react-dom

Quick Start

import { SlateEditor } from 'nextjs-slate-editor'
import { useState, useMemo } from 'react'
import { createEditor, Descendant } from 'slate'

function MyComponent() {
  const editor = useMemo(() => createEditor(), [])
  const [value, setValue] = useState<Descendant[]>([
    {
      type: 'paragraph',
      children: [{ text: 'Hello, World!' }],
    },
  ])

  return (
    <SlateEditor
      editor={editor}
      value={value}
      onChange={setValue}
      placeholder="Start typing..."
    />
  )
}

API Reference

SlateEditor Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | editor | BaseEditor | - | Slate editor instance | | value | Descendant[] | - | Editor content | | onChange | (value: Descendant[]) => void | - | Change handler | | placeholder | string | 'Enter some text...' | Placeholder text | | className | string | - | Additional CSS classes | | readOnly | boolean | false | Read-only mode | | autoFocus | boolean | false | Auto-focus on mount |

Customization

Styling

The editor uses Tailwind CSS classes. You can customize the appearance by passing custom classes:

<SlateEditor
  className="border-2 border-gray-300 rounded-lg p-4"
  // ... other props
/>

Custom Elements

You can extend the editor with custom elements and formatting:

import { SlateEditor, withCustomElements } from 'nextjs-slate-editor'

const CustomEditor = withCustomElements(createEditor())

<SlateEditor
  editor={CustomEditor}
  // ... other props
/>

Development

# Install dependencies
npm install

# Start development mode
npm run dev

# Build for production
npm run build

# Type checking
npm run type-check

# Linting
npm run lint

License

MIT