nextjs-wysiwyg v0.3.0

Next.js Enterprise WYSIWYG Editor

A high-performance, accessible, and feature-rich WYSIWYG editor for Next.js applications.

Features

• 🚀 High Performance

  • Virtual rendering
  • Optimized updates
  • Lazy loading

• 👥 Real-time Collaboration

  • Cursor tracking
  • User presence
  • Comments
  • Version control

• 📝 Rich Content Management

  • Version history
  • Autosave
  • Content validation
  • Undo/redo

• ♿ Accessibility

  • ARIA support
  • Keyboard navigation
  • Screen reader compatibility
  • High contrast support

Installation

npm install nextjs-wysiwyg

Quick Start

import { Editor } from 'nextjs-wysiwyg';
import 'nextjs-wysiwyg/dist/index.css';

export default function MyEditor() {
  return (
    <Editor
      config={{
        features: {
          text: {
            bold: true,
            italic: true,
          },
          blocks: {
            heading: true,
            bulletList: true,
          },
        },
      }}
      onChange={(content) => console.log(content)}
    />
  );
}

Configuration

EditorConfig

interface EditorConfig {
  features: {
    text?: {
      bold?: boolean;
      italic?: boolean;
      underline?: boolean;
      code?: boolean;
      strikethrough?: boolean;
    };
    blocks?: {
      heading?: boolean;
      bulletList?: boolean;
      orderedList?: boolean;
      blockquote?: boolean;
      codeBlock?: boolean;
    };
    advanced?: {
      table?: boolean;
      image?: boolean;
      link?: boolean;
    };
    enterprise?: {
      collaboration?: {
        enabled?: boolean;
        roomName?: string;
        endpoint?: string;
        user?: {
          name: string;
          color: string;
        };
      };
    };
  };
}

Props

Collaboration

Enable real-time collaboration:

<Editor
  config={{
    features: {
      enterprise: {
        collaboration: {
          enabled: true,
          roomName: 'my-document',
          endpoint: 'wss://collaboration.example.com',
          user: {
            name: 'John Doe',
            color: '#ff0000',
          },
        },
      },
    },
  }}
/>

Styling

The editor comes with a default modern, minimal UI. You can customize it using CSS variables:

:root {
  --primary-color: #2563eb;
  --surface-color: #ffffff;
  --text-primary: #0f172a;
  --border-color: #e2e8f0;
}

Browser Support

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

License

MIT