Oyat Editor

A powerful, feature-rich Plate.js editor component with AI integration, collaboration features, and extensive customization options.

Features

• 🚀 Rich Text Editing - Full-featured WYSIWYG editor with modern UI
• 🤖 AI Integration - Built-in AI assistance for content generation and editing
• 👥 Collaboration - Comments, suggestions, and discussion features
• 🎨 Customizable - Extensive theming and plugin system
• 📱 Responsive - Works seamlessly across all device sizes
• ♿ Accessible - Built with accessibility in mind
• 🔧 TypeScript - Full TypeScript support with comprehensive type definitions

Installation

npm install @oyat/editor
# or
yarn add @oyat/editor
# or
pnpm add @oyat/editor

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react react-dom platejs

Quick Start

import React from 'react';
import { PlateEditor, TooltipProvider } from '@oyat/editor';
// Styles are automatically included - no separate import needed!

function App() {
  const handleChange = (value) => {
    console.log('Editor content:', value);
  };

  return (
    <TooltipProvider>
      <PlateEditor initialValue="Start typing here..." onChange={handleChange} />
    </TooltipProvider>
  );
}

export default App;

Note: Wrap the editor in TooltipProvider so toolbar buttons and other controls display tooltips correctly.

Advanced Usage

With Media Picker

import React from 'react';
import { PlateEditor, TooltipProvider } from '@oyat/editor';

function EditorWithMediaPicker() {
  return (
    <TooltipProvider>
      <PlateEditor
        initialValue="Start typing..."
        onChange={(value) => console.log(value)}
        mediaPicker={({ onSelect }) => (
          <button onClick={() => onSelect({ url: 'https://example.com/image.jpg' })}>
            Insert Image
          </button>
        )}
      />
    </TooltipProvider>
  );
}

With TypeScript

import React from 'react';
import { PlateEditor, TooltipProvider, type PlateEditorProps, type Value } from '@oyat/editor';

function TypedEditor() {
  const [value, setValue] = React.useState<Value | undefined>();

  const handleChange: PlateEditorProps['onChange'] = (newValue) => {
    setValue(newValue);
    console.log('Editor content:', newValue);
  };

  return (
    <TooltipProvider>
      <PlateEditor initialValue={value} onChange={handleChange} />
    </TooltipProvider>
  );
}

API Reference

PlateEditor Props

interface PlateEditorProps {
  initialValue?: Value | string;
  onChange?: (value: Value) => void;
  mode?: 'draft' | 'full';
  mediaPicker?: MediaPickerRenderProp;
}

| Prop | Type | Default | Description | | -------------- | ------------------------ | ----------- | ---------------------------------------- | | initialValue | Value \| string | undefined | Initial content for the editor | | onChange | (value: Value) => void | undefined | Callback when content changes | | mode | 'draft' \| 'full' | 'draft' | Draft mode shows suggestions; full accepts | | mediaPicker | MediaPickerRenderProp | undefined | Custom media picker for image insertion |

Available Plugin Kits

• AlignKit - Text alignment controls
• AutoformatKit - Markdown-style autoformatting
• BasicBlocksKit - Headings, paragraphs, blockquotes
• BasicMarksKit - Bold, italic, underline, etc.
• BlockMenuKit - Block-level menu controls
• BlockPlaceholderKit - Block placeholders
• CalloutKit - Callout/admonition blocks
• CodeBlockKit - Syntax-highlighted code blocks
• ColumnKit - Multi-column layouts
• CommentKit - Comment system
• CursorOverlayKit - Collaborative cursor overlay
• DateKit - Date picker integration
• DndKit - Drag and drop functionality
• DocxKit - DOCX import support
• ExitBreakKit - Soft/hard break handling
• FixedToolbarKit - Fixed toolbar UI
• FloatingToolbarKit - Floating toolbar UI
• FontKit - Font family and size controls
• LineHeightKit - Line height controls
• LinkKit - Link creation and management
• ListKit - Ordered and unordered lists
• MathKit - Mathematical expressions
• MediaKit - Image and media handling
• MentionKit - User mentions
• SlashKit - Slash command menu
• SuggestionKit - Content suggestions
• TableKit - Table creation and editing
• TocKit - Table of contents
• ToggleKit - Collapsible content blocks

Styling

The editor comes with built-in Tailwind CSS styles that are automatically included when you import the component - no separate CSS import needed!

Custom Styling

The editor uses Tailwind CSS and includes all necessary theme variables. You can customize the appearance by:

• Overriding CSS variables in your own stylesheet
• Using Tailwind utility classes
• Applying custom themes via your Tailwind configuration

Development

Project Setup

If you want to set up the project from scratch:

# Create a new Vite React TypeScript project
pnpm create vite oyat-editor --template react-ts

cd oyat-editor

# Install shadcn/ui for Vite
# Follow: https://ui.shadcn.com/docs/installation/vite

# Add Plate UI components
pnpm dlx shadcn@latest add https://platejs.org/r/plate-ui

# Add Plate AI editor
pnpm dlx shadcn@latest add https://platejs.org/r/editor-ai

pnpm add @platejs/diff

Building the Library

npm run build:lib

This will:

• Build the library using Vite
• Generate TypeScript declarations automatically
• Output to dist/ folder with optimized bundles

Development Mode

Start the development server:

npm run dev

Type Checking

Run TypeScript type checking:

npm run type-check

Linting

npm run lint

Publishing

To publish a new version to npm:

# 1. Make sure all changes are committed
git add .
git commit -m "Your commit message"

# 2. Build the library
npm run build:lib

# 3. Verify the build output
ls -la dist/
# Should see: index.js, index.d.ts, and component declarations

# 4. Bump version (choose one)
npm version patch  # 1.0.0 → 1.0.1 (bug fixes)
npm version minor  # 1.0.0 → 1.1.0 (new features)
npm version major  # 1.0.0 → 2.0.0 (breaking changes)

# 5. Login to npm (if not already logged in)
npm login

# 6. Publish to npm
npm publish
# Note: First publish of a scoped package (@oyat/editor) requires: npm publish --access public

# 7. Verify publication
npm view @oyat/editor version
# Or visit: https://www.npmjs.com/package/@oyat/editor

Note: The prepublishOnly script automatically runs build:lib before publishing.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• 📦 NPM Package
• 📖 Documentation
• 🐛 Issue Tracker

Acknowledgments

• Built with Plate.js - The rich text editor framework
• Powered by Slate.js - The completely customizable framework for building rich text editors
• UI components from Radix UI - Low-level UI primitives
• Styled with Tailwind CSS - Utility-first CSS framework