CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-platejs--core

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

Plate Core

Plate Core is the foundation of the Plate rich text editor framework, providing a comprehensive plugin system, editor creation utilities, serialization capabilities, and extensible architecture for building rich text editing experiences. It extends Slate.js with powerful abstractions, type safety, and a rich ecosystem of plugins and utilities.

Package Information

  • Package Name: @platejs/core
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @platejs/core

Core Imports

import { createSlateEditor, SlateEditor } from "@platejs/core";
import { createSlatePlugin, getCorePlugins } from "@platejs/core";

For specific functionality:

import { 
  HtmlPlugin, 
  deserializeHtml, 
  HistoryPlugin,
  DebugPlugin
} from "@platejs/core";

Basic Usage

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

// Create a basic editor with core plugins
const editor = createSlateEditor({
  plugins: getCorePlugins()
});

// Create a custom plugin
const CustomPlugin = createSlatePlugin({
  key: 'custom',
  node: { type: 'custom' }
});

// Create editor with custom plugins
const customEditor = createSlateEditor({
  plugins: [
    ...getCorePlugins(),
    CustomPlugin
  ]
});

// Basic editor operations
editor.insertText('Hello world');
editor.insertBreak();

Architecture

Plate Core is built around several key architectural components:

  • Plugin System: Comprehensive plugin architecture where all functionality is plugin-based, including core features
  • Editor Factory: createSlateEditor function that creates fully-configured editor instances with plugin integration
  • Core Plugins: 12+ essential plugins automatically included for basic editor functionality
  • Type System: Full TypeScript integration with sophisticated type inference for plugins and editor operations
  • Extensibility: Multiple extension points allowing deep customization of editor behavior
  • Serialization: Multi-format serialization support (HTML, AST fragments, custom formats)
  • Performance: Built-in optimizations including chunking for large documents and lazy plugin loading

Capabilities

Editor Creation and Configuration

Core functionality for creating and configuring Slate editors with Plate enhancements, plugin integration, and type safety.

function createSlateEditor(options?: {
  plugins?: any[];
  value?: any[];
  editor?: BaseEditor;
}): SlateEditor;

function withSlate(editor: BaseEditor): SlateEditor;

Editor Creation

Plugin System

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

function createSlatePlugin<T>(config: PluginConfig<T>): SlatePlugin<T>;
function getCorePlugins(): CorePlugin[];
function getSlatePlugin<T>(plugin: WithRequiredKey<T>): T;

interface PluginConfig<T = {}> {
  key: string;
  node?: NodeConfig;
  api?: ApiConfig;
  transforms?: TransformConfig;
  options?: T;
}

Plugin System

HTML Serialization

Complete HTML serialization and deserialization system with customizable parsing, cleaning utilities, and Slate format conversion.

const HtmlPlugin: SlatePlugin;

function deserializeHtml(
  editor: SlateEditor, 
  options: {
    element: HTMLElement | string;
    collapseWhiteSpace?: boolean;
  }
): any[];

function serializeHtml(
  editor: SlateEditor,
  options?: { nodes?: any[] }
): string;

HTML Serialization

Core Plugins

Essential plugins that provide fundamental editor functionality including history, debugging, DOM management, and node handling.

const HistoryPlugin: SlatePlugin;
const DebugPlugin: SlatePlugin;
const DOMPlugin: SlatePlugin;
const ParserPlugin: SlatePlugin;
const NodeIdPlugin: SlatePlugin;

Core Plugins

Transform Functions

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

interface EditorTransforms {
  init(options: { value?: any[]; selection?: any }): void;
  setValue(value: any[]): void;
  insertExitBreak(): void;
  resetBlock(options?: { type?: string }): void;
}

Transform Functions

Type System and Interfaces

Comprehensive TypeScript interfaces and type utilities for type-safe editor development with full plugin inference.

interface SlateEditor extends BaseEditor {
  api: EditorApi;
  plugins: Record<string, any>;
  transforms: EditorTransforms;
  getPlugin<T>(plugin: WithRequiredKey<T>): T;
  getApi<T>(plugin?: WithRequiredKey<T>): EditorApi & InferApi<T>;
}

interface BaseEditor {
  children: any[];
  selection: any;
  operations: any[];
}

type InferApi<T> = T extends { api: infer A } ? A : {};
type InferTransforms<T> = T extends { transforms: infer Tr } ? Tr : {};

Type System

Event Handling and Hotkeys

Comprehensive event handling system with cross-platform hotkey support, customizable shortcuts, and event pipeline management.

interface Hotkeys {
  createHotkey(hotkey: string): (event: KeyboardEvent) => boolean;
  isHotkey(hotkey: string, event: KeyboardEvent): boolean;
  parseHotkey(hotkey: string): { key: string; modifiers: string[] };
}

const Hotkeys: Hotkeys;

Event Handling

Utility Functions

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

function applyDeepToNodes(options: {
  node: any;
  source: any;
  apply: (node: any) => any;
}): any;

function mergeDeepToNodes(options: {
  node: any;
  source: any;
}): any;

function overridePluginsByKey(
  plugins: any[],
  overrides: Record<string, any>
): any[];

Utility Functions

Multi-format Serialization

Support for multiple serialization formats including HTML, AST fragments, and custom format parsing with extensible parser system.

const AstPlugin: SlatePlugin;
const ParserPlugin: SlatePlugin;

interface ParserOptions {
  format: string;
  mimeType: string;
  deserialize: (data: string) => any[];
}

Multi-format Serialization

Constants and Enums

// Plugin priorities
const PRIORITY_LOW = 75;
const PRIORITY_NORMAL = 100;
const PRIORITY_HIGH = 125;

// Core plugin keys
const PLUGIN_KEYS = {
  HISTORY: 'history',
  DEBUG: 'debug',
  HTML: 'html',
  DOM: 'dom',
  PARSER: 'parser'
} as const;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@platejs/core@49.2.x
Publish Source
CLI
Badge
tessl/npm-platejs--core badge