Comprehensive plugin creation and management system for extending Plate editor functionality with type-safe configuration and modular architecture.
Creates a typed Plate plugin with configuration, API methods, and transforms.
/**
* Creates a core Slate plugin (non-React)
* @param config - Plugin configuration object
* @returns Configured SlatePlugin instance
*/
function createSlatePlugin<K extends string>(
config: SlatePluginConfig<K>
): SlatePlugin<K>;
/**
* Creates a React Plate plugin
* @param config - Plugin configuration object
* @returns Configured PlatePlugin instance
*/
function createPlatePlugin<K extends string>(
config: PlatePluginConfig<K>
): PlatePlugin<K>;Usage Examples:
import { createSlatePlugin, createPlatePlugin } from "@udecode/plate-common";
// Core plugin (non-React)
const paragraphPlugin = createSlatePlugin({
key: 'paragraph',
node: {
type: 'p',
isElement: true
},
options: {
hotkey: 'mod+shift+0'
}
});
// React plugin
const boldPlugin = createPlatePlugin({
key: 'bold',
node: {
isLeaf: true
},
options: {
hotkey: 'mod+b'
},
api: {
bold: {
toggle: (editor) => {
// Toggle bold formatting
}
}
}
});The core plugin interface that defines plugin structure and capabilities.
/**
* Core plugin interface for editor functionality
*/
interface EditorPlugin<C extends AnyPluginConfig = AnyPluginConfig> {
/** Unique plugin identifier */
key: string;
/** Node configuration for the plugin */
node: PlateNodeProps;
/** Plugin options and configuration */
options: InferOptions<C>;
/** API methods provided by the plugin */
api: InferApi<C>;
/** Transform methods for content manipulation */
transforms: InferTransforms<C>;
/** Injection configuration for rendering */
inject?: InjectConfig;
/** HTML parsing and serialization */
parsers?: ParserConfig;
/** Event handlers */
handlers?: HandlerConfig;
/** Plugin dependencies */
dependencies?: string[];
/** Plugin priority for loading order */
priority?: number;
}
interface PlateNodeProps {
/** Node type identifier */
type?: string;
/** Whether this is an inline element */
isInline?: boolean;
/** Whether this is a void element */
isVoid?: boolean;
/** Whether this is a leaf node */
isLeaf?: boolean;
/** Component to render for this node type */
component?: React.ComponentType<any>;
}Creates plugin factory functions for reusable plugin creation patterns.
/**
* Creates a factory function for creating plugins of a specific type
* @param baseConfig - Base configuration for the plugin type
* @returns Factory function for creating plugin instances
*/
function createPluginFactory<T extends AnyPluginConfig>(
baseConfig: T
): PluginFactory<T>;
interface PluginFactory<T extends AnyPluginConfig> {
(config?: Partial<T>): EditorPlugin<T>;
key: T['key'];
node: PlateNodeProps;
}Usage Example:
// Create a reusable plugin factory
const createElementPlugin = createPluginFactory({
key: 'element',
node: { type: 'element' }
});
// Use the factory to create specific plugins
const headingPlugin = createElementPlugin({
key: 'heading',
node: { type: 'h1' },
options: { level: 1 }
});Methods for registering and managing plugins within the editor.
/**
* Register a plugin with the editor
* @param editor - Editor instance
* @param plugin - Plugin to register
*/
function registerPlugin<C extends AnyPluginConfig>(
editor: SlateEditor,
plugin: EditorPlugin<C>
): void;
/**
* Unregister a plugin from the editor
* @param editor - Editor instance
* @param pluginKey - Key of plugin to unregister
*/
function unregisterPlugin(
editor: SlateEditor,
pluginKey: string
): void;
/**
* Get a registered plugin by key
* @param editor - Editor instance
* @param pluginKey - Plugin key to retrieve
* @returns Plugin instance or undefined
*/
function getPlugin<C extends AnyPluginConfig>(
editor: SlateEditor,
pluginKey: string
): EditorPlugin<C> | undefined;
/**
* Check if a plugin is registered
* @param editor - Editor instance
* @param pluginKey - Plugin key to check
* @returns True if plugin is registered
*/
function hasPlugin(
editor: SlateEditor,
pluginKey: string
): boolean;Base types and interfaces for plugin configuration.
/**
* Base plugin configuration interface
*/
interface AnyPluginConfig {
/** Unique plugin identifier */
key: string;
/** Plugin options */
options?: Record<string, any>;
/** API methods */
api?: Record<string, any>;
/** Transform methods */
transforms?: Record<string, any>;
}
/**
* Typed plugin configuration
*/
interface PluginConfig<
K extends string = string,
O = {},
A = {},
T = {}
> extends AnyPluginConfig {
key: K;
options: O;
api: A;
transforms: T;
}
/**
* Plugin configuration with required key
*/
type WithRequiredKey<T extends AnyPluginConfig> = T & {
key: NonNullable<T['key']>;
};Configuration for injecting properties and behavior into rendered nodes.
/**
* Injection configuration for plugin rendering
*/
interface InjectConfig {
/** Properties to inject into node props */
props?: InjectPropsConfig;
/** Node properties to inject */
nodeProps?: InjectNodePropsConfig;
/** Target nodes for injection */
targetPlugins?: string[];
/** Injection query conditions */
query?: InjectQueryConfig;
}
interface InjectPropsConfig {
/** Properties to inject */
[key: string]: any;
/** Conditional injection based on node */
validNode?: (node: TNode) => boolean;
/** Transform props before injection */
transformProps?: (props: any) => any;
}
interface InjectNodePropsConfig {
/** Default node properties */
defaultNodeValue?: any;
/** Rules for node property injection */
rules?: InjectNodeRule[];
}
interface InjectNodeRule {
/** Condition for applying rule */
match: (node: TNode) => boolean;
/** Properties to inject when matched */
props: Record<string, any>;
}Configuration for handling editor events within plugins.
/**
* Event handler configuration for plugins
*/
interface HandlerConfig {
/** Keyboard event handlers */
onKeyDown?: KeyboardHandler[];
/** Mouse event handlers */
onClick?: ClickHandler[];
/** Selection change handlers */
onSelectionChange?: SelectionHandler[];
/** Content change handlers */
onChange?: ChangeHandler[];
}
interface KeyboardHandler {
/** Key combination to handle */
key: string;
/** Handler function */
handler: (editor: SlateEditor, event: KeyboardEvent) => boolean | void;
/** Prevent default behavior */
preventDefault?: boolean;
}
interface ClickHandler {
/** Handler function */
handler: (editor: SlateEditor, event: MouseEvent) => boolean | void;
/** Target element selector */
target?: string;
}/**
* Core plugin that provides basic editor functionality
*/
interface CorePlugin extends EditorPlugin {
key: 'core';
options: {
/** Editor normalization settings */
normalize?: boolean;
/** Selection behavior configuration */
selection?: SelectionConfig;
};
}
/**
* HTML plugin for serialization and parsing
*/
interface HtmlPlugin extends EditorPlugin {
key: 'html';
options: {
/** HTML serialization rules */
serialize?: SerializeConfig;
/** HTML parsing rules */
deserialize?: DeserializeConfig;
};
}
/**
* Length plugin for content length tracking
*/
interface LengthPlugin extends EditorPlugin {
key: 'length';
options: {
/** Maximum content length */
maxLength?: number;
/** Length calculation method */
method?: 'character' | 'word';
};
}