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

utility-functions.mddocs/

Utility Functions

Essential utility functions for node manipulation, plugin management, and editor state operations.

Capabilities

Node Manipulation Utilities

Functions for deep node operations and hierarchy manipulation.

/**
 * Apply transformations deeply to node hierarchy
 * @param options - Transformation configuration
 * @returns Transformed node structure
 */
function applyDeepToNodes(options: {
  /** Source node to transform */
  node: any;
  /** Source data to apply */
  source: any;
  /** Transform function to apply */
  apply: (node: any) => any;
}): any;

/**
 * Merge properties deeply into node hierarchy
 * @param options - Merge configuration
 * @returns Merged node structure
 */
function mergeDeepToNodes(options: {
  /** Target node to merge into */
  node: any;
  /** Source properties to merge */
  source: any;
}): any;

/**
 * Apply default values deeply to node hierarchy
 * @param options - Default configuration
 * @returns Node with defaults applied
 */
function defaultsDeepToNodes(options: {
  /** Target node */
  node: any;
  /** Default values to apply */
  source: any;
}): any;

Usage Examples:

import { applyDeepToNodes, mergeDeepToNodes } from "@platejs/core";

// Add metadata to all nodes
const nodesWithMetadata = applyDeepToNodes({
  node: editorValue,
  source: { timestamp: Date.now() },
  apply: (node) => ({ ...node, metadata: { timestamp: Date.now() } })
});

// Merge styling into specific node types
const styledNodes = mergeDeepToNodes({
  node: editorValue,
  source: { 
    p: { className: 'paragraph' },
    h1: { className: 'heading-1' }
  }
});

Plugin Management Utilities

Functions for plugin system operations and configuration.

/**
 * Override plugins by key with new configurations
 * @param plugins - Array of plugins to modify
 * @param overrides - Override configurations by plugin key
 * @returns Array of plugins with overrides applied
 */
function overridePluginsByKey(
  plugins: any[],
  overrides: Record<string, any>
): any[];

/**
 * Get injected plugins based on match conditions
 * @param editor - Editor instance
 * @param match - Match function for plugin injection
 * @returns Array of injected plugins
 */
function getInjectedPlugins(
  editor: SlateEditor,
  match: (plugin: any) => boolean
): any[];

/**
 * Omit plugin context properties
 * @param plugin - Plugin to modify
 * @param keys - Keys to omit
 * @returns Plugin without specified context
 */
function omitPluginContext<T>(
  plugin: T,
  keys: string[]
): Omit<T, keyof any>;

Usage Examples:

import { overridePluginsByKey, getCorePlugins } from "@platejs/core";

// Override specific plugin configurations
const customizedPlugins = overridePluginsByKey(
  getCorePlugins(),
  {
    'history': { options: { maxSize: 200 } },
    'debug': { options: { logLevel: 'warn' } }
  }
);

const editor = createSlateEditor({
  plugins: customizedPlugins
});

Node Property Utilities

Functions for extracting and manipulating node properties.

/**
 * Get plugin-specific node properties
 * @param editor - Editor instance
 * @param plugin - Plugin configuration
 * @returns Node properties for the plugin
 */
function getPluginNodeProps<T>(
  editor: SlateEditor,
  plugin: WithRequiredKey<T>
): Record<string, any>;

/**
 * Get node data attributes for HTML rendering
 * @param node - Node to extract attributes from
 * @returns Object with data attributes
 */
function getNodeDataAttributes(node: any): Record<string, string>;

/**
 * Get Slate CSS classes for node styling
 * @param options - Styling options
 * @returns CSS class string
 */
function getSlateClass(options: {
  type?: string;
  selected?: boolean;
  focused?: boolean;
}): string;

Document Fragment Utilities

Functions for working with document fragments and normalization.

/**
 * Normalize descendants to document fragment
 * @param descendants - Array of descendant nodes
 * @returns Normalized document fragment
 */
function normalizeDescendantsToDocumentFragment(
  descendants: any[]
): DocumentFragment;

/**
 * Convert nodes to HTML elements
 * @param nodes - Slate nodes to convert
 * @returns Array of HTML elements
 */
function nodesToElements(nodes: any[]): HTMLElement[];

Type Checking Utilities

Functions for runtime type checking and validation.

/**
 * Check if value matches a specific node type
 * @param value - Value to check
 * @param type - Expected node type
 * @returns True if value matches type
 */
function isType(value: any, type: string): boolean;

/**
 * Check if node is a specific element type
 * @param node - Node to check
 * @param type - Element type to match
 * @returns True if node matches element type
 */
function isElement(node: any, type?: string): boolean;

/**
 * Check if node is a text node
 * @param node - Node to check
 * @returns True if node is text
 */
function isText(node: any): boolean;

/**
 * Check if editor selection is outside specific bounds
 * @param editor - Editor instance
 * @param bounds - Boundary configuration
 * @returns True if selection is outside bounds
 */
function isSelectOutside(
  editor: SlateEditor,
  bounds?: { path?: number[]; offset?: number }
): boolean;

Event Pipeline Utilities

Functions for managing event processing pipelines.

/**
 * Pipe insert data query through processing chain
 * @param editor - Editor instance
 * @param dataTransfer - Data transfer object
 * @returns Processed data
 */
function pipeInsertDataQuery(
  editor: SlateEditor,
  dataTransfer: DataTransfer
): any;

/**
 * Pipe node change events through processing chain
 * @param editor - Editor instance
 * @param node - Changed node
 * @returns Processing result
 */
function pipeOnNodeChange(
  editor: SlateEditor,
  node: any
): void;

/**
 * Pipe text change events through processing chain
 * @param editor - Editor instance
 * @param text - Changed text
 * @returns Processing result
 */
function pipeOnTextChange(
  editor: SlateEditor,
  text: string
): void;

CSS Class Utilities

Functions for managing CSS classes and styling.

/**
 * Strip HTML class names from elements
 * @param html - HTML string to process
 * @returns HTML with class names removed
 */
function stripHtmlClassNames(html: string): string;

/**
 * Strip Slate data attributes from HTML
 * @param html - HTML string to process
 * @returns HTML with Slate attributes removed
 */
function stripSlateDataAttributes(html: string): string;

/**
 * Generate CSS class string for Slate elements
 * @param options - Class generation options
 * @returns CSS class string
 */
function generateSlateClass(options: {
  prefix?: string;
  type?: string;
  modifiers?: string[];
}): string;

Editor Enhancement Utilities

Functions for extending and modifying editor behavior.

/**
 * Override editor methods with custom implementations
 * @param editor - Editor instance to modify
 * @param overrides - Override method implementations
 * @returns Enhanced editor
 */
function overrideEditor(
  editor: SlateEditor,
  overrides: Record<string, Function>
): SlateEditor;

/**
 * Extend editor API with additional methods
 * @param editor - Editor instance
 * @param extensions - API extensions
 * @returns Editor with extended API
 */
function extendApi(
  editor: SlateEditor,
  extensions: Record<string, Function>
): SlateEditor;

/**
 * Get inject match configuration for plugin
 * @param plugin - Plugin configuration
 * @returns Inject match function
 */
function getInjectMatch<T>(
  plugin: WithRequiredKey<T>
): (node: any) => boolean;

Usage Examples:

import { 
  overrideEditor, 
  extendApi, 
  isType,
  getSlateClass 
} from "@platejs/core";

// Extend editor with custom methods
const enhancedEditor = extendApi(editor, {
  insertSpecialBlock: () => {
    editor.insertNode({
      type: 'special-block',
      children: [{ text: '' }]
    });
  },
  
  hasBlockType: (type: string) => {
    const [match] = editor.nodes({
      match: n => isType(n, type)
    });
    return !!match;
  }
});

// Use enhanced API
enhancedEditor.api.insertSpecialBlock();
const hasHeading = enhancedEditor.api.hasBlockType('h1');

// Generate CSS classes
const elementClass = getSlateClass({
  type: 'paragraph',
  selected: true,
  focused: false
});

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