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

tessl/npm-udecode--plate-common

Common utility package that serves as a centralized re-export hub for core Plate rich-text editor functionality

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@udecode/plate-common@39.0.x

To install, run

npx @tessl/cli install tessl/npm-udecode--plate-common@39.0.0

index.mddocs/

Plate Common

Plate Common provides a centralized re-export hub for core Plate rich-text editor functionality. It consolidates commonly used modules from the Plate ecosystem into a single convenient package, offering both core editor capabilities and React-specific integrations.

Package Information

  • Package Name: @udecode/plate-common
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @udecode/plate-common

Core Imports

Core functionality (non-React):

import { 
  createSlateEditor, 
  createSlatePlugin, 
  SlateEditor,
  BaseEditor,
  TEditor 
} from "@udecode/plate-common";

React components and hooks:

import { 
  Plate, 
  PlateContent,
  PlateSlate,
  createPlateEditor,
  usePlateEditor,
  usePlateSelectors,
  usePlateStates,
  usePlateActions
} from "@udecode/plate-common/react";

CommonJS (core):

const { 
  createSlateEditor, 
  createSlatePlugin, 
  SlateEditor 
} = require("@udecode/plate-common");

CommonJS (React):

const { 
  Plate, 
  PlateContent, 
  createPlateEditor, 
  usePlateEditor 
} = require("@udecode/plate-common/react");

Basic Usage

import { createPlateEditor } from "@udecode/plate-common/react";
import { Plate, PlateContent } from "@udecode/plate-common/react";

// React component usage
function MyEditor() {
  const editor = createPlateEditor({
    plugins: [
      // Plugin configuration
    ],
    value: [
      {
        type: 'p',
        children: [{ text: 'Hello, Plate!' }],
      },
    ]
  });

  return (
    <Plate editor={editor}>
      <PlateContent />
    </Plate>
  );
}

Architecture

Plate Common is built around several key architectural components:

  • Core Editor System: Non-React editor functionality (createSlateEditor, SlateEditor) that works server-side and in Node.js environments
  • React Editor System: React-specific editor functionality (createPlateEditor, PlateEditor) with hooks and components
  • Plugin Architecture: Extensible plugin system supporting both core (SlatePlugin) and React (PlatePlugin) plugins
  • Component System: React components like Plate, PlateContent, and PlateSlate for building editors
  • State Management: Comprehensive state management through stores and React hooks
  • Utility Libraries: Slate operations, React utilities, and general development helpers

Capabilities

Editor Core System

Core editor creation, configuration, and management functionality. Provides the foundation for building rich text editors with plugin support.

// Core (non-React) editor creation
function createSlateEditor<T extends AnySlatePlugin[]>(
  options?: CreateSlateEditorOptions<T>
): SlateEditor<T>;

// React editor creation  
function createPlateEditor<V, P extends AnyPlatePlugin[]>(
  options?: CreatePlateEditorOptions<V, P>
): PlateEditor<V, P>;

interface SlateEditor<T extends AnySlatePlugin[] = AnySlatePlugin[]> 
  extends BaseEditor {
  key: string;
  id: string;
  plugins: T;
}

Editor Core

Plugin System

Comprehensive plugin creation and management system for extending editor functionality with type-safe configuration.

// Core plugin creation
function createSlatePlugin<K extends string>(
  config: SlatePluginConfig<K>
): SlatePlugin<K>;

// React plugin creation
function createPlatePlugin<K extends string>(
  config: PlatePluginConfig<K>
): PlatePlugin<K>;

interface SlatePlugin<K extends string = string> {
  key: K;
  node?: {
    type?: string;
    isElement?: boolean;
    isLeaf?: boolean;
    isVoid?: boolean;
    isInline?: boolean;
  };
  options?: Record<string, any>;
  api?: Record<string, any>;
  transforms?: Record<string, any>;
}

Plugin System

Slate Operations

Core Slate.js operations and utilities for manipulating editor content, including nodes, ranges, and transformations.

function findNode<T extends TNode>(
  editor: TEditor,
  options?: FindNodeOptions
): TNodeEntry<T> | undefined;

function insertNodes<T extends TNode>(
  editor: TEditor,
  nodes: T | T[],
  options?: InsertNodesOptions
): void;

Slate Operations

React Components

React components and providers for integrating Plate editors into React applications.

interface PlateProps<E extends PlateEditor = PlateEditor> {
  editor?: E;
  children?: React.ReactNode;
  decorate?: (entry: NodeEntry) => Range[];
  onChange?: (value: TElement[]) => void;
  onSelectionChange?: (selection: TRange | null) => void;
  onValueChange?: (value: TElement[]) => void;
}

function Plate<E extends PlateEditor>(props: PlateProps<E>): JSX.Element;
function PlateContent(props: PlateContentProps): JSX.Element;
function PlateSlate(props: PlateSlateProps): JSX.Element;

React Components

React Hooks

React hooks for editor state management, selection handling, and plugin interaction.

function usePlateEditor<V, P extends AnyPlatePlugin[]>(
  options?: CreatePlateEditorOptions<V, P>,
  deps?: React.DependencyList
): PlateEditor<V, P> | null;

function usePlateSelectors<T = any>(): {
  editor: () => PlateEditor<T> | null;
  value: () => TElement[];
  selection: () => TRange | null;
  // ... other selectors
};

function usePlateActions(): {
  setEditor: (editor: PlateEditor) => void;
  setValue: (value: TElement[]) => void;
  setSelection: (selection: TRange | null) => void;
  // ... other actions
};

function usePlateStates<T = any>(): {
  editor: PlateEditor<T> | null;
  value: TElement[];
  selection: TRange | null;
  // ... other states
};

React Hooks

Utility Functions

General utilities for object manipulation, type operations, and common development patterns.

function pick<T, K extends keyof T>(
  object: T, 
  keys: K[]
): Pick<T, K>;

function omit<T, K extends keyof T>(
  object: T, 
  keys: K[]
): Omit<T, K>;

Utility Functions

Global Types

Common types used across multiple capabilities:

// Core Editor Types
interface TEditor {
  children: TElement[];
  selection: TRange | null;
  operations: TOperation[];
  marks: Record<string, any> | null;
  [key: string]: unknown;
}

interface TElement {
  type: string;
  children: TNode[];
  [key: string]: unknown;
}

interface TText {
  text: string;
  [key: string]: unknown;
}

type TNode = TEditor | TElement | TText;

// Plugin Configuration Types
interface AnyPluginConfig {
  key: string;
  options?: Record<string, any>;
  api?: Record<string, any>;
  transforms?: Record<string, any>;
}

interface PluginConfig<
  K extends string = string,
  O = {},
  A = {},
  T = {}
> extends AnyPluginConfig {
  key: K;
  options: O;
  api: A;
  transforms: T;
}

// Utility Types
type UnionToIntersection<U> = 
  (U extends any ? (k: U) => void : never) extends 
  ((k: infer I) => void) ? I : never;

type Override<T, U> = Omit<T, keyof U> & U;

type WithRequiredKey<T extends AnyPluginConfig> = T & {
  key: NonNullable<T['key']>;
};