Core plugin system and editor functionality for the Plate rich text editor framework
—
Editor manipulation functions for programmatic content modification, selection handling, and editor state management.
The editor provides a comprehensive transform API accessible via editor.transforms or editor.tf.
interface EditorTransforms {
/** Initialize editor with value and selection */
init(options: { value?: any[]; selection?: any }): void;
/** Set editor value programmatically */
setValue(value: any[]): void;
/** Insert exit break from block elements */
insertExitBreak(): void;
/** Reset block to default paragraph type */
resetBlock(options?: { type?: string }): void;
}Usage Examples:
import { createSlateEditor, getCorePlugins } from "@platejs/core";
const editor = createSlateEditor({
plugins: getCorePlugins()
});
// Initialize editor with content
editor.transforms.init({
value: [
{ type: 'p', children: [{ text: 'Initial content' }] }
]
});
// Set new value
editor.transforms.setValue([
{ type: 'h1', children: [{ text: 'New heading' }] },
{ type: 'p', children: [{ text: 'New paragraph' }] }
]);Advanced node manipulation functions for deep editor operations.
/**
* Apply transformations deeply to node hierarchy
* @param options - Transformation options
* @returns Transformed node
*/
function applyDeepToNodes(options: {
node: any;
source: any;
apply: (node: any) => any;
}): any;
/**
* Merge properties deeply into node hierarchy
* @param options - Merge options
* @returns Merged node
*/
function mergeDeepToNodes(options: {
node: any;
source: any;
}): any;
/**
* Apply default values deeply to node hierarchy
* @param options - Default options
* @returns Node with defaults applied
*/
function defaultsDeepToNodes(options: {
node: any;
source: any;
}): any;Usage Examples:
import { applyDeepToNodes, mergeDeepToNodes } from "@platejs/core";
// Apply custom styling to all nodes
const styledNodes = applyDeepToNodes({
node: editorValue,
source: { className: 'custom-style' },
apply: (node) => ({ ...node, className: 'custom-style' })
});
// Merge properties into nodes
const mergedNodes = mergeDeepToNodes({
node: editorValue,
source: { metadata: { version: 1 } }
});Functions for programmatic selection manipulation and navigation.
interface SelectionTransforms {
/** Move selection to start of editor */
selectAll(): void;
/** Move selection to end of editor */
selectEnd(): void;
/** Collapse selection to a point */
collapse(options?: { edge?: 'start' | 'end' }): void;
/** Expand selection to include range */
select(range: any): void;
}Specialized transforms for block-level operations.
/**
* Insert exit break from current block
* Handles exiting from complex blocks like code blocks or lists
*/
function insertExitBreak(): void;
/**
* Reset current block to default type
* @param options - Reset options
*/
function resetBlock(options?: {
type?: string;
properties?: Record<string, any>;
}): void;
/**
* Toggle block type between two types
* @param type - Target block type
* @param defaultType - Default type to toggle back to
*/
function toggleBlock(type: string, defaultType?: string): void;Usage Examples:
// Reset current block to paragraph
editor.transforms.resetBlock({ type: 'p' });
// Insert exit break (useful for code blocks, lists)
editor.transforms.insertExitBreak();Functions for text-level operations and formatting.
interface TextTransforms {
/** Insert text at current selection */
insertText(text: string): void;
/** Delete text in current selection */
deleteText(): void;
/** Insert line break */
insertBreak(): void;
/** Insert soft break (shift+enter) */
insertSoftBreak(): void;
}Utility functions for complex editor operations.
/**
* Normalize descendants to document fragment
* @param descendants - Array of descendant nodes
* @returns Document fragment
*/
function normalizeDescendantsToDocumentFragment(
descendants: any[]
): DocumentFragment;
/**
* Override editor behavior with custom functions
* @param editor - Editor instance
* @param overrides - Override functions
* @returns Enhanced editor
*/
function overrideEditor(
editor: SlateEditor,
overrides: Record<string, Function>
): SlateEditor;Plugins can extend the transform system with custom operations:
interface TransformExtension {
[transformName: string]: (editor: SlateEditor, ...args: any[]) => void;
}
// Example plugin with custom transforms
const CustomPlugin = createSlatePlugin({
key: 'custom',
transforms: {
insertCustomBlock: (editor, options) => {
editor.insertNode({
type: 'custom-block',
...options,
children: [{ text: '' }]
});
},
formatText: (editor, format) => {
editor.addMark(format, true);
}
}
});
// Usage
editor.transforms.insertCustomBlock({ data: 'example' });
editor.getTransforms(CustomPlugin).insertCustomBlock({ data: 'example' });Transforms support pipeline processing for complex operations:
/**
* Pipe multiple transform operations
* @param editor - Editor instance
* @param transforms - Array of transform functions
*/
function pipeTransforms(
editor: SlateEditor,
transforms: Array<(editor: SlateEditor) => void>
): void;Install with Tessl CLI
npx tessl i tessl/npm-platejs--core