Composer Plate

A reusable Plate editor library with AI capabilities, extensive plugins, and pre-built components. Works with any React application (Vite, Create React App, Next.js, etc.).

Features

• Full-featured Plate editor with AI integration
• Pre-configured plugins for rich text editing
• shadcn/ui components
• TypeScript support with full type definitions
• Tailwind CSS v4 styling
• Framework agnostic - works with any React setup

Installation

npm install @your-org/composer-plate
# or
yarn add @your-org/composer-plate

Peer Dependencies

This package requires:

{
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0"
}

Setup

1. Install Tailwind CSS v4

This library requires Tailwind CSS v4. Install it in your project:

npm install tailwindcss@next @tailwindcss/postcss@next

2. Configure Tailwind

Create or update your CSS file to import Tailwind and the editor styles:

/* app.css or index.css or styles.css */
@import 'tailwindcss';
@import '@your-org/composer-plate/styles';

Make sure this CSS file is imported in your app's entry point.

3. Configure PostCSS (if needed)

Create postcss.config.mjs:

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

Usage

Vite + React

// main.tsx or App.tsx
import './index.css'; // Make sure this imports Tailwind + editor styles

import { PlateEditor } from '@your-org/composer-plate';
import { Toaster } from 'sonner';

function App() {
  return (
    <div className="h-screen w-full">
      <PlateEditor />
      <Toaster />
    </div>
  );
}

export default App;

Create React App

// App.tsx
import './App.css'; // Make sure this imports Tailwind + editor styles

import { PlateEditor } from '@your-org/composer-plate';
import { Toaster } from 'sonner';

function App() {
  return (
    <div className="h-screen w-full">
      <PlateEditor />
      <Toaster />
    </div>
  );
}

export default App;

Next.js

// app/layout.tsx or pages/_app.tsx
import '@your-org/composer-plate/styles';
import './globals.css'; // Your Tailwind imports

// In your page component
'use client'; // Only needed in Next.js App Router

import { PlateEditor } from '@your-org/composer-plate';
import { Toaster } from 'sonner';

export default function EditorPage() {
  return (
    <div className="h-screen w-full">
      <PlateEditor />
      <Toaster />
    </div>
  );
}

Custom Configuration

Create your own editor with custom configuration:

import { usePlateEditor, Plate } from 'platejs/react';
import { normalizeNodeId } from 'platejs';
import { EditorKit, Editor, EditorContainer } from '@your-org/composer-plate';

export function MyCustomEditor() {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: normalizeNodeId([
      {
        type: 'p',
        children: [{ text: 'Start typing...' }],
      },
    ]),
  });

  return (
    <Plate editor={editor}>
      <EditorContainer>
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Using Individual Plugins

You can import and use individual plugin kits:

import {
  AIKit,
  BasicBlocksKit,
  TableKit,
  LinkKit,
  MarkdownKit
} from '@your-org/composer-plate';

const myPlugins = [
  ...BasicBlocksKit,
  ...TableKit,
  ...LinkKit,
  ...MarkdownKit,
];

Accessing the Editor Instance

Use the useEditor hook to access the editor instance:

import { useEditor } from '@your-org/composer-plate';

function MyComponent() {
  const editor = useEditor();

  // Use the editor instance
  // editor.tf.insert.text('Hello world');
}

Vite Configuration

If you're using Vite, you may need to add this to your vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['@your-org/composer-plate'],
  },
});

Environment Variables

If you want to use AI features, set up the following environment variables:

VITE_OPENAI_API_KEY=your_openai_api_key        # For Vite
REACT_APP_OPENAI_API_KEY=your_openai_api_key   # For CRA
NEXT_PUBLIC_OPENAI_API_KEY=your_openai_api_key # For Next.js

# Same pattern for UploadThing
VITE_UPLOADTHING_TOKEN=your_uploadthing_token

API Components

Main Components

• PlateEditor - Complete pre-configured editor
• Editor - Core editor component
• EditorContainer - Container wrapper for the editor
• FixedToolbar - Fixed toolbar component
• FloatingToolbar - Floating toolbar component

Plugin Kits

All plugin kits are available for custom configurations:

• AIKit, CopilotKit - AI-powered features
• BasicBlocksKit, BasicMarksKit - Essential formatting
• TableKit, MediaKit - Rich content
• LinkKit, MentionKit - Interactive elements
• And many more...

UI Components

All shadcn/ui components used by the editor are re-exported for convenience:

• Button, Dialog, DropdownMenu, Command, etc.

Troubleshooting

Styles not applying

Make sure you're importing the styles in your main CSS file:

@import '@your-org/composer-plate/styles';

Tailwind classes not working

Ensure Tailwind CSS v4 is properly configured and your CSS file includes:

@import 'tailwindcss';

Module resolution errors

If you get module resolution errors, ensure your bundler is configured to handle ES modules and CSS imports.

Development

This package includes a Next.js development environment for testing:

# Install dependencies
npm install

# Run the development server
npm run dev

# Build the library
npm run build

# Type check
npm run typecheck

Visit http://localhost:3000/demo for the development environment.

Requirements

• Node.js 20+
• React 18+ or 19+
• Tailwind CSS 4+

License

MIT