CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-platejs--core

Core plugin system and editor functionality for the Plate rich text editor framework

Pending
Overview
Eval results
Files

plugin-system.mddocs/

Plugin System

Comprehensive plugin architecture for extending editor functionality with type-safe configuration, lifecycle hooks, and extensibility patterns.

Capabilities

createSlatePlugin

Creates a new plugin with comprehensive configuration options and type safety.

/**
 * Creates a new Slate plugin with configuration
 * @param config - Plugin configuration object
 * @returns Configured plugin instance
 */
function createSlatePlugin<T>(config: PluginConfig<T>): SlatePlugin<T>;

interface PluginConfig<T = {}> {
  /** Unique plugin identifier */
  key: string;
  /** Node configuration for element/leaf plugins */
  node?: NodeConfig;
  /** API methods extension */
  api?: ApiConfig;
  /** Transform functions extension */
  transforms?: TransformConfig;
  /** Plugin-specific options */
  options?: T;
  /** Plugin dependencies */
  dependencies?: string[];
  /** Plugin priority for loading order */
  priority?: number;
}

interface NodeConfig {
  /** Node type identifier */
  type?: string;
  /** Whether this is a leaf node */
  isLeaf?: boolean;
  /** Whether this is a container element */
  isContainer?: boolean;
  /** Node properties */
  props?: Record<string, any>;
}

Usage Examples:

import { createSlatePlugin } from "@platejs/core";

// Basic element plugin
const ParagraphPlugin = createSlatePlugin({
  key: 'paragraph',
  node: { 
    type: 'p',
    isContainer: true 
  }
});

// Plugin with API extension
const CustomPlugin = createSlatePlugin({
  key: 'custom',
  api: {
    create: (options: any) => {
      // Custom API method
    }
  },
  transforms: {
    insert: (editor, options) => {
      // Custom transform
    }
  }
});

getSlatePlugin

Retrieves a plugin instance by key with full type inference.

/**
 * Get a plugin instance by key
 * @param plugin - Plugin identifier or plugin with key
 * @returns Plugin instance with full type information
 */
function getSlatePlugin<T>(plugin: WithRequiredKey<T>): T;

Plugin Lifecycle

Plugins support comprehensive lifecycle hooks for editor integration.

interface PluginLifecycle {
  /** Called when plugin is initialized */
  onInit?: (editor: SlateEditor) => void;
  /** Called when editor value changes */
  onChange?: (editor: SlateEditor) => void;
  /** Called when selection changes */
  onSelectionChange?: (editor: SlateEditor) => void;
  /** Called before editor operations */
  onBeforeOperation?: (editor: SlateEditor, operation: any) => void;
}

Plugin API Extensions

Plugins can extend the editor API with custom methods.

interface ApiConfig {
  [methodName: string]: (editor: SlateEditor, ...args: any[]) => any;
}

Usage Examples:

const LinkPlugin = createSlatePlugin({
  key: 'link',
  node: { type: 'a' },
  api: {
    insert: (editor, { url, text }) => {
      editor.insertNode({
        type: 'a',
        url,
        children: [{ text }]
      });
    },
    remove: (editor) => {
      // Remove link functionality
    }
  }
});

// Usage
editor.api.link.insert({ url: 'https://example.com', text: 'Link' });

Plugin Transform Extensions

Plugins can add custom transform functions to the editor.

interface TransformConfig {
  [transformName: string]: (editor: SlateEditor, ...args: any[]) => void;
}

Plugin Dependencies

Plugins can declare dependencies on other plugins for proper loading order.

const AdvancedPlugin = createSlatePlugin({
  key: 'advanced',
  dependencies: ['paragraph', 'history'],
  // Plugin will load after its dependencies
});

Core Plugin Types

interface SlatePlugin<T = {}> {
  key: string;
  options: T;
  node?: NodeConfig;
  api?: Record<string, Function>;
  transforms?: Record<string, Function>;
  priority: number;
  dependencies: string[];
}

type CorePlugin = SlatePlugin<any>;
type WithRequiredKey<T> = T & { key: string };

Install with Tessl CLI

npx tessl i tessl/npm-platejs--core

docs

core-plugins.md

editor-creation.md

event-handling.md

html-serialization.md

index.md

multi-format-serialization.md

plugin-system.md

transform-functions.md

type-system.md

utility-functions.md

tile.json