Common utility package that serves as a centralized re-export hub for core Plate rich-text editor functionality
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
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';
};
}