platejs-customization

A powerful, customizable rich-text editor component built on top of Plate.js for React applications.

Quick Start

import { PlateLiteEditor } from "platejs-customization";
// That's it! No CSS import needed ✨

function App() {
  return <PlateLiteEditor value={value} onChange={handleChange} />;
}

Works exactly like shadcn/ui - just import the component and use it!

Features

• ✨ Zero Configuration - Just import and use, no CSS import needed!
• 🎨 Fully Customizable - Extensive props for styling and behavior
• 📝 Rich Text Editing - All Plate.js features including:
  • Basic formatting (bold, italic, underline, etc.)
  • Lists (ordered and unordered)
  • Tables
  • Code blocks with syntax highlighting
  • Media embeds (images, videos)
  • Math equations
  • Mentions
  • Comments and suggestions
  • Slash commands
  • AI-powered features
• 🎯 TypeScript Support - Full type definitions included
• 🔒 CSS Isolation - Styles don't conflict with your app
• 📦 Optimized - Small bundle size with automatic CSS injection
• 🚀 Production Ready - Works like shadcn/ui components

Installation

# Using pnpm (recommended)
pnpm add platejs-customization platejs react react-dom

# Using npm
npm install platejs-customization platejs react react-dom

# Using yarn
yarn add platejs-customization platejs react react-dom

Peer Dependencies

This package requires the following peer dependencies:

• react >= 18.0.0
• react-dom >= 18.0.0
• platejs >= 49.0.0

Usage

Basic Example

import { useState } from "react";
import { PlateLiteEditor } from "platejs-customization";
// ✅ No CSS import needed - styles are automatically loaded!
import type { Value } from "platejs";

function App() {
  const [value, setValue] = useState<Value>([{ type: "p", children: [{ text: "Hello, world!" }] }]);

  const handleChange = (newValue: Value) => {
    setValue(newValue);
    console.log("Editor content changed:", newValue);
  };

  return (
    <div className="container mx-auto p-4">
      <PlateLiteEditor value={value} onChange={handleChange} placeholder="Start typing..." />
    </div>
  );
}

export default App;

Note: Styles are automatically injected when you use the component - no manual CSS import required!

With Custom Styling

import { PlateLiteEditor } from "platejs-customization";

function CustomEditor({ value, handleChange }) {
  return (
    <PlateLiteEditor
      value={value}
      onChange={handleChange}
      placeholder="Enter your content here..."
      className="max-w-4xl mx-auto p-4"
      editorClassName="min-h-[400px] border rounded-lg p-4"
    />
  );
}

Read-Only Mode

import { PlateLiteEditor } from "platejs-customization";

function ReadOnlyEditor() {
  return <PlateLiteEditor value={content} readOnly={true} />;
}

API Reference

PlateLiteEditor Props

| Prop | Type | Default | Description | | ----------------- | ------------------------ | --------------------------- | ----------------------------------- | | value | Value | undefined | The editor content value | | onChange | (value: Value) => void | undefined | Callback fired when content changes | | placeholder | string | "Type your message here." | Placeholder text | | className | string | undefined | CSS class for the container | | editorClassName | string | undefined | CSS class for the editor | | readOnly | boolean | false | Whether the editor is read-only | | autoFocus | boolean | false | Whether to auto-focus on mount | | disabled | boolean | false | Whether the editor is disabled |

Advanced Usage

Custom Editor Kit

import { EditorKit, useEditor } from "platejs-customization";
import { usePlateEditor } from "platejs/react";

// Use the full editor kit
const editor = usePlateEditor({
  plugins: EditorKit,
  value: initialValue,
});

Using Individual Hooks

import { useDebounce, useIsTouchDevice, useMounted } from "platejs-customization";

function MyComponent() {
  const isTouchDevice = useIsTouchDevice();
  const isMounted = useMounted();
  const debouncedValue = useDebounce(value, 500);

  // Your component logic
}

Styling & CSS

Automatic Style Loading

✨ No CSS import needed! Styles are automatically injected when you use the component.

import { PlateLiteEditor } from "platejs-customization";
// That's it! Styles load automatically 🎉

function MyEditor() {
  return <PlateLiteEditor value={value} onChange={handleChange} />;
}

CSS Isolation & Layout Integration

The editor CSS is automatically scoped and will NOT affect your application:

• ✅ Works with any layout (sidebar, navbar, etc.)
• ✅ No conflicts with your existing CSS
• ✅ No global style pollution
• ✅ Works with your Tailwind/design system

The component respects your project's existing styles and theme.

Using in Complex Layouts

The editor works seamlessly with any layout structure:

// ✅ Works perfectly with sidebar layouts
function Dashboard() {
  return (
    <div className="flex">
      {/* Your sidebar - NOT affected by editor styles */}
      <aside className="w-64 bg-gray-800">
        <nav>...</nav>
      </aside>

      {/* Main content area */}
      <main className="flex-1">
        {/* Your navbar - NOT affected */}
        <header className="bg-white shadow">...</header>

        {/* Editor in content area - fully scoped */}
        <div className="p-6">
          <PlateLiteEditor
            value={value}
            onChange={handleChange}
            className="max-w-4xl"
            editorClassName="min-h-[500px] border rounded-lg p-4"
          />
        </div>
      </main>
    </div>
  );
}

Custom Styling

You can customize the editor using the provided props:

<PlateLiteEditor
  // Container styling (wrapper around editor)
  className="max-w-4xl mx-auto my-8"
  // Editor content area styling
  editorClassName="min-h-[600px] bg-white border-2 border-gray-300 rounded-xl p-6 shadow-lg"
  value={value}
  onChange={handleChange}
/>

Tailwind CSS Integration

If your project uses Tailwind CSS, the editor styles work alongside it without conflicts:

<div className="container mx-auto p-4">
  <h1 className="text-3xl font-bold mb-6">My Editor</h1>

  {/* Editor with Tailwind classes */}
  <PlateLiteEditor
    className="bg-gray-50 rounded-lg shadow-md"
    editorClassName="prose prose-lg max-w-none p-8"
    value={value}
    onChange={handleChange}
  />
</div>

Dark Mode Support

The editor includes built-in dark mode support. Add the dark class to any parent element:

<div className="dark">
  <PlateLiteEditor value={value} onChange={handleChange} />
</div>

Troubleshooting

Problem: Editor doesn't show properly

Solution: Styles are auto-injected. If you still have issues:

1. Make sure you're using the latest version: pnpm update platejs-customization
2. Check browser console for any errors
3. Ensure your bundler supports dynamic imports

Problem: CSS conflicts with my design system

Solution: The editor uses CSS variables that can be customized:

/* In your global CSS */
:root {
  /* Override editor variables if needed */
  --primary: your-color;
  --radius: your-border-radius;
}

The editor will respect your existing Tailwind configuration.

Problem: Styles not loading in production

Solution: Ensure your bundler includes CSS files in the build:

• Vite: Works out of the box ✅
• Next.js: Works out of the box ✅
• Webpack: Ensure css-loader and style-loader are configured

TypeScript

Full TypeScript support is included:

import type { PlateLiteEditorProps, MyEditor } from "platejs-customization";
import type { Value } from "platejs";

// Use types in your components
const props: PlateLiteEditorProps = {
  value: myValue,
  onChange: handleChange,
};

Dependencies

This package bundles the following Plate.js plugins:

• AI features
• Autoformat
• Basic blocks and marks
• Code blocks
• Tables
• Comments and suggestions
• Media embeds
• Math equations
• And many more!

See the full list in package.json.

Development

Local Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build the library
pnpm build:lib

# Lint
pnpm lint

Building

# Build library for production
pnpm build:lib

# Generate type declarations only
pnpm build:types

Publishing

# Build and publish to npm
pnpm publish

Note: The prepublishOnly script will automatically build the library before publishing.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Author

zonaet

Support

For issues and questions, please open an issue on the GitHub repository.

Changelog

See CHANGELOG.md for version history and changes.