@softimist/platejs-customization

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

Features

🎨 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
📦 Tree-shakeable - Import only what you need
🚀 Production Ready - Optimized build with source maps

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";
import "platejs-customization/dist/index.css";
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 (
    <PlateLiteEditor
      value={value}
      onChange={handleChange}
      placeholder="Start typing..."
    />
  );
}

export default App;

With Custom Styling

import { PlateLiteEditor } from "platejs-customization";
import "platejs-customization/dist/index.css";

function CustomEditor() {
  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 "@softimist/platejs-customization";

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

  // Your component logic
}

Styling

The package includes CSS that needs to be imported:

import "platejs-customization/dist/index.css";

You can override the default styles by providing your own CSS classes through the className and editorClassName props.

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.