React Components

/**
 * 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;
}

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>
  );
}

/**
 * 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;
}

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

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

/**
 * 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;
}

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

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

/**
 * 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>;
}

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

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

/**
 * 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[];