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

editor-core.mddocs/

Editor Core System

Core editor creation, configuration, and management functionality that provides the foundation for building rich text editors with Plate's plugin system.

Capabilities

SlateEditor Creation

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

SlateEditor Interface

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

Slate Enhancement

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

Editor State Management

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;

Core Types

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