Core editor creation, configuration, and management functionality that provides the foundation for building rich text editors with Plate's plugin system.
Creates a new Slate editor instance with Plate-specific enhancements and plugin support.
/**
* Creates a new Slate editor instance with Plate enhancements
* @param options - Configuration options for the editor
* @returns Configured SlateEditor instance
*/
function createSlateEditor<T extends AnySlatePlugin[]>(
options?: CreateSlateEditorOptions<T>
): SlateEditor<T>;
interface CreateSlateEditorOptions<T extends AnySlatePlugin[] = AnySlatePlugin[]> {
/** Unique identifier for the editor instance */
id?: string;
/** Array of plugins to register with the editor */
plugins?: T;
/** Initial value for the editor */
value?: TElement[];
/** Whether to normalize on initialization */
normalize?: boolean;
/** Custom selection configuration */
selection?: TRange | null;
}Usage Examples:
import { createSlateEditor, createSlatePlugin } from "@udecode/plate-common";
// Basic editor
const editor = createSlateEditor({
id: 'my-editor',
value: [
{
type: 'p',
children: [{ text: 'Hello world' }],
},
],
});
// Editor with plugins
const editorWithPlugins = createSlateEditor({
plugins: [
createSlatePlugin({
key: 'paragraph',
node: { type: 'p' }
})
]
});The enhanced editor interface that extends the base Slate editor with Plate functionality.
/**
* Enhanced Slate editor with Plate functionality
*/
interface SlateEditor<T extends AnySlatePlugin[] = AnySlatePlugin[]>
extends BaseEditor {
/** Unique key for the editor instance */
key: string;
/** Unique identifier for the editor instance */
id: string;
/** Array of registered plugins */
plugins: T;
}
interface BaseEditor extends TEditor {
/** Get API methods for a specific plugin */
getApi<P extends AnySlatePlugin = AnySlatePlugin>(
plugin: P
): InferApi<P>;
/** Get injectable properties for a plugin */
getInjectProps<P extends AnySlatePlugin>(
plugin: P
): InjectNodeProps<P>;
/** Get a specific option value from a plugin */
getOption<
P extends AnySlatePlugin,
K extends keyof InferOptions<P>
>(
plugin: P,
optionKey: K
): InferOptions<P>[K];
/** Get all options for a plugin */
getOptions<P extends AnySlatePlugin>(
plugin: P
): InferOptions<P>;
/** Get the options store for a plugin */
getOptionsStore<P extends AnySlatePlugin>(
plugin: P
): StoreApi<P['key'], InferOptions<P>>;
/** Get transform methods for a plugin */
getTransforms<P extends AnySlatePlugin>(
plugin: P
): InferTransforms<P>;
/** Set a specific option value for a plugin */
setOption<
P extends AnySlatePlugin,
K extends keyof InferOptions<P>
>(
plugin: P,
optionKey: K,
value: InferOptions<P>[K]
): void;
/** Set multiple options for a plugin */
setOptions<P extends AnySlatePlugin>(
plugin: P,
options: Partial<InferOptions<P>>
): void;
/** React hook to use a plugin option (React only) */
useOption<
P extends AnySlatePlugin,
K extends keyof InferOptions<P>
>(
plugin: P,
optionKey: K
): InferOptions<P>[K];
}HOC that enhances a base Slate editor with Plate functionality.
/**
* Higher-order component that enhances editor with Slate functionality
* @param editor - Base editor to enhance
* @param options - Configuration options
* @returns Enhanced editor with Slate capabilities
*/
function withSlate<T extends TEditor>(
editor: T,
options?: WithSlateOptions
): T & SlateEditor;
interface WithSlateOptions {
plugins?: AnySlatePlugin[];
id?: string;
}Usage Example:
import { createEditor } from 'slate';
import { withSlate } from "@udecode/plate-common";
// Enhance a basic Slate editor
const baseEditor = createEditor();
const enhancedEditor = withSlate(baseEditor);Core functionality for managing editor state and configuration.
/**
* Reset the editor to initial state
* @param editor - Editor instance to reset
* @param options - Reset options
*/
function resetEditor(
editor: SlateEditor,
options?: ResetEditorOptions
): void;
interface ResetEditorOptions {
/** Value to reset to */
value?: TElement[];
/** Whether to clear selection */
clearSelection?: boolean;
/** Whether to clear history */
clearHistory?: boolean;
}
/**
* Get current editor value
* @param editor - Editor instance
* @returns Current editor content
*/
function getEditorValue(editor: SlateEditor): TElement[];
/**
* Set editor value
* @param editor - Editor instance
* @param value - New value to set
*/
function setEditorValue(
editor: SlateEditor,
value: TElement[]
): void;/**
* Store API interface for plugin state management
*/
interface StoreApi<K extends string, T> {
get: () => T;
set: (value: T | ((prev: T) => T)) => void;
subscribe: (listener: (value: T) => void) => () => void;
}
/**
* Injectable node properties for plugin rendering
*/
interface InjectNodeProps<P extends AnySlatePlugin> {
/** Element properties to inject */
element?: Record<string, any>;
/** Text properties to inject */
text?: Record<string, any>;
/** Additional props for the node */
props?: Record<string, any>;
}
/**
* Core plugin type
*/
type AnySlatePlugin = SlatePlugin<string>;
/**
* Type inference helpers for plugin configuration
*/
type InferOptions<P extends AnySlatePlugin> =
P extends { options: infer O } ? O : {};
type InferApi<P extends AnySlatePlugin> =
P extends { api: infer A } ? A : {};
type InferTransforms<P extends AnySlatePlugin> =
P extends { transforms: infer T } ? T : {};