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

React Components

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

React components and providers for integrating Plate editors into React applications with full state management and context support.

Capabilities

Plate Component

The main Plate editor component that renders the complete editor interface.

/**
 * Main Plate editor component
 * @param props - Plate component properties
 * @returns JSX element for the editor
 */
function Plate(props: PlateProps): JSX.Element;

interface PlateProps<E extends PlateEditor = PlateEditor> {
  /** Editor instance to use */
  editor?: E;
  
  /** Custom children to render */
  children?: React.ReactNode;
  
  /** Decoration function */
  decorate?: (entry: NodeEntry) => Range[];
  
  /** Change handler for value changes */
  onChange?: (value: TElement[]) => void;
  
  /** Selection change handler */
  onSelectionChange?: (selection: TRange | null) => void;
  
  /** Value change handler */
  onValueChange?: (value: TElement[]) => void;
}

Usage Examples:

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

// Basic usage
function MyEditor() {
  const editor = createPlateEditor({
    value: [
      {
        type: 'p',
        children: [{ text: 'Hello, Plate!' }],
      },
    ]
  });
  
  return (
    <Plate editor={editor}>
      <PlateContent />
    </Plate>
  );
}

// Controlled editor
function ControlledEditor() {
  const [value, setValue] = useState([
    { type: 'p', children: [{ text: 'Initial content' }] }
  ]);
  
  const editor = createPlateEditor({ value });
  
  return (
    <Plate editor={editor} onChange={setValue}>
      <PlateContent placeholder="Type something..." />
    </Plate>
  );
}

PlateContent

The editable content area component that renders the actual editor content.

/**
 * Main editable content component
 * @param props - PlateContent component properties
 * @returns JSX element for the editable content
 */
function PlateContent(props: PlateContentProps): JSX.Element;

interface PlateContentProps {
  /** Placeholder text */
  placeholder?: string;
  
  /** Whether editor is read-only */
  readOnly?: boolean;
  
  /** Whether editor is disabled */
  disabled?: boolean;
  
  /** Auto focus behavior */
  autoFocus?: boolean;
  
  /** Spell checking */
  spellCheck?: boolean;
  
  /** CSS class name */
  className?: string;
  
  /** Inline styles */
  style?: React.CSSProperties;
  
  /** Additional props */
  [key: string]: any;
}

Usage Example:

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

function MyEditor() {
  return (
    <Plate>
      <PlateContent 
        placeholder="Start typing..." 
        className="my-editor-content"
      />
    </Plate>
  );
}

PlateSlate

Wrapper component for Slate that provides plugin enhancements.

/**
 * Wrapper component for Slate with plugin enhancements
 * @param props - PlateSlate component properties
 * @returns JSX element for Slate wrapper
 */
function PlateSlate(props: PlateSlateProps): JSX.Element;

interface PlateSlateProps {
  /** Children components */
  children?: React.ReactNode;
  
  /** Editor instance */
  editor?: PlateEditor;
  
  /** Initial value */
  initialValue?: TElement[];
  
  /** Change handler */
  onChange?: (value: TElement[]) => void;
}

Usage Example:

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

function MyEditor() {
  return (
    <PlateSlate>
      <PlateContent />
    </PlateSlate>
  );
}

DefaultLeaf

Default leaf renderer component for text content.

/**
 * Default leaf component for text rendering
 * @param props - Leaf rendering properties
 * @returns JSX element for the text leaf
 */
function DefaultLeaf(props: PlateRenderLeafProps): JSX.Element;

interface PlateRenderLeafProps {
  /** Text node */
  leaf: TText;
  
  /** Text content */
  text: TText;
  
  /** Child text content */
  children: React.ReactNode;
  
  /** Text attributes */
  attributes: React.TextareaHTMLAttributes<HTMLSpanElement>;
}

Usage Example:

import { DefaultLeaf } from "@udecode/plate-common/react";

// Used internally by PlateContent, but can be customized
function MyCustomLeaf(props: PlateRenderLeafProps) {
  return <DefaultLeaf {...props} />;
}

Component Types

/**
 * Base plate editor interface for React components
 */
interface PlateEditor<V = TElement[], P extends AnyPlatePlugin[] = AnyPlatePlugin[]> {
  /** Editor children (document content) */
  children: V;
  
  /** Plugin list */
  plugins: P;
  
  /** Editor state methods */
  getPlugin<K extends string>(key: K): PlatePlugin<K> | undefined;
  setPlateState: (state: Partial<PlateStoreState>) => void;
  useOption: <K extends string>(plugin: PlatePlugin<K>, key: string) => any;
  useOptions: <K extends string>(plugin: PlatePlugin<K>) => any;
}

/**
 * Any plate plugin type for React
 */
type AnyPlatePlugin = PlatePlugin<string>;

/**
 * Render props for elements and leaves
 */
interface PlateRenderElementProps {
  /** Element node */
  element: TElement;
  
  /** Child components */
  children: React.ReactNode;
  
  /** Element attributes */
  attributes: React.HTMLAttributes<HTMLElement>;
}

/**
 * Node entry type for decorations
 */
type NodeEntry = [TNode, Path];

/**
 * Range type for selections
 */
interface Range {
  anchor: Point;
  focus: Point;
}

interface Point {
  path: Path;
  offset: number;
}

type Path = number[];