Core plugin system and editor functionality for the Plate rich text editor framework
—
Comprehensive plugin architecture for extending editor functionality with type-safe configuration, lifecycle hooks, and extensibility patterns.
Creates a new plugin with comprehensive configuration options and type safety.
/**
* Creates a new Slate plugin with configuration
* @param config - Plugin configuration object
* @returns Configured plugin instance
*/
function createSlatePlugin<T>(config: PluginConfig<T>): SlatePlugin<T>;
interface PluginConfig<T = {}> {
/** Unique plugin identifier */
key: string;
/** Node configuration for element/leaf plugins */
node?: NodeConfig;
/** API methods extension */
api?: ApiConfig;
/** Transform functions extension */
transforms?: TransformConfig;
/** Plugin-specific options */
options?: T;
/** Plugin dependencies */
dependencies?: string[];
/** Plugin priority for loading order */
priority?: number;
}
interface NodeConfig {
/** Node type identifier */
type?: string;
/** Whether this is a leaf node */
isLeaf?: boolean;
/** Whether this is a container element */
isContainer?: boolean;
/** Node properties */
props?: Record<string, any>;
}Usage Examples:
import { createSlatePlugin } from "@platejs/core";
// Basic element plugin
const ParagraphPlugin = createSlatePlugin({
key: 'paragraph',
node: {
type: 'p',
isContainer: true
}
});
// Plugin with API extension
const CustomPlugin = createSlatePlugin({
key: 'custom',
api: {
create: (options: any) => {
// Custom API method
}
},
transforms: {
insert: (editor, options) => {
// Custom transform
}
}
});Retrieves a plugin instance by key with full type inference.
/**
* Get a plugin instance by key
* @param plugin - Plugin identifier or plugin with key
* @returns Plugin instance with full type information
*/
function getSlatePlugin<T>(plugin: WithRequiredKey<T>): T;Plugins support comprehensive lifecycle hooks for editor integration.
interface PluginLifecycle {
/** Called when plugin is initialized */
onInit?: (editor: SlateEditor) => void;
/** Called when editor value changes */
onChange?: (editor: SlateEditor) => void;
/** Called when selection changes */
onSelectionChange?: (editor: SlateEditor) => void;
/** Called before editor operations */
onBeforeOperation?: (editor: SlateEditor, operation: any) => void;
}Plugins can extend the editor API with custom methods.
interface ApiConfig {
[methodName: string]: (editor: SlateEditor, ...args: any[]) => any;
}Usage Examples:
const LinkPlugin = createSlatePlugin({
key: 'link',
node: { type: 'a' },
api: {
insert: (editor, { url, text }) => {
editor.insertNode({
type: 'a',
url,
children: [{ text }]
});
},
remove: (editor) => {
// Remove link functionality
}
}
});
// Usage
editor.api.link.insert({ url: 'https://example.com', text: 'Link' });Plugins can add custom transform functions to the editor.
interface TransformConfig {
[transformName: string]: (editor: SlateEditor, ...args: any[]) => void;
}Plugins can declare dependencies on other plugins for proper loading order.
const AdvancedPlugin = createSlatePlugin({
key: 'advanced',
dependencies: ['paragraph', 'history'],
// Plugin will load after its dependencies
});interface SlatePlugin<T = {}> {
key: string;
options: T;
node?: NodeConfig;
api?: Record<string, Function>;
transforms?: Record<string, Function>;
priority: number;
dependencies: string[];
}
type CorePlugin = SlatePlugin<any>;
type WithRequiredKey<T> = T & { key: string };Install with Tessl CLI
npx tessl i tessl/npm-platejs--core