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

transform-functions.mddocs/

Transform Functions

Editor manipulation functions for programmatic content modification, selection handling, and editor state management.

Capabilities

Core Transform Interface

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

Node Manipulation Transforms

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

Selection Transforms

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

Block Transforms

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

Text Transforms

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

Advanced Transform Utilities

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;

Transform Extension System

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

Transform Pipeline

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

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