or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

editor-core.mdindex.mdplugin-system.mdreact-components.mdreact-hooks.mdslate-operations.mdutility-functions.md
tile.json

plugin-system.mddocs/

Plugin System

Comprehensive plugin creation and management system for extending Plate editor functionality with type-safe configuration and modular architecture.

Capabilities

Plugin Creation

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
      }
    }
  }
});

EditorPlugin Interface

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>;
}

Plugin Factory

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 }
});

Plugin Registration

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;

Plugin Configuration Types

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']>;
};

Plugin Injection System

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>;
}

Plugin Event Handlers

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;
}

Built-in Plugin Types

/**
 * 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';
  };
}