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 real-time collaboration features
• 📝 Markdown Support - Import/export Markdown with full compatibility
• 🎨 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 } from "@oyat/editor";
// Styles are automatically included - no separate import needed!

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

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

export default App;

Advanced Usage

Custom Plugin Configuration

import React from "react";
import { PlateEditor, EditorKit, AlignKit, BasicMarksKit } from "@oyat/editor";

function CustomEditor() {
  // Create a custom plugin configuration
  const customPlugins = [
    ...BasicMarksKit,
    ...AlignKit,
    // Add your custom plugins here
  ];

  return (
    <PlateEditor
      plugins={customPlugins}
      initialValue="Custom editor with specific plugins"
      onChange={(value) => console.log(value)}
    />
  );
}

With TypeScript

import React from "react";
import { PlateEditor, 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 <PlateEditor initialValue={value} onChange={handleChange} />;
}

API Reference

PlateEditor Props

interface PlateEditorProps {
  initialValue?: Value | string;
  onChange?: (value: Value) => void;
}

| Prop | Type | Default | Description | | -------------- | ------------------------ | ----------- | ------------------------------ | | initialValue | Value \| string | undefined | Initial content for the editor | | onChange | (value: Value) => void | undefined | Callback when content changes |

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
• CalloutKit - Callout/admonition blocks
• CodeBlockKit - Syntax-highlighted code blocks
• CommentKit - Comment system
• DateKit - Date picker integration
• DndKit - Drag and drop functionality
• FontKit - Font family and size controls
• LinkKit - Link creation and management
• ListKit - Ordered and unordered lists
• MarkdownKit - Markdown import/export
• 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, editor.css, etc.

# 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

# 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
• 💬 Discussions

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