tessl/npm-udecode--plate-common

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Plate Common

Name: tessl/npm-udecode--plate-common
Author: tessl

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