React Hooks

/**
 * Hook to create a memoized Plate editor instance
 * @param options - Editor configuration options
 * @param deps - Dependencies for memoization
 * @returns Configured PlateEditor instance or null
 */
function usePlateEditor<V = TElement[], P extends AnyPlatePlugin[] = AnyPlatePlugin[]>(
  options?: CreatePlateEditorOptions<V, P>,
  deps?: React.DependencyList
): PlateEditor<V, P> | null;

interface CreatePlateEditorOptions<V = TElement[], P extends AnyPlatePlugin[] = AnyPlatePlugin[]> {
  /** Unique identifier for the editor */
  id?: string;
  
  /** Array of plugins to register */
  plugins?: P;
  
  /** Initial value for the editor */
  value?: V;
  
  /** Whether to normalize initial value */
  normalizeInitialValue?: boolean;
  
  /** Whether to enable the editor */
  enabled?: boolean;
}

/**
 * Hook to access the current Slate editor instance
 * @returns Current editor from context
 */
function useSlateEditor(): SlateEditor;

/**
 * Hook to access static Slate editor instance
 * @returns Static editor instance
 */
function useSlateStatic(): SlateEditor;

/**
 * Hook to access Plate store with all selectors, actions, and states
 * @returns Object containing all store functions
 */
function usePlateStates<T = any>(): {
  editor: PlateEditor<T> | null;
  value: TElement[];
  selection: TRange | null;
  readOnly: boolean;
  // ... other states
};

/**
 * Hook to get props for the Editable component
 * @returns Props object for Editable component
 */
function useEditableProps(): EditableProps;

/**
 * Hook to get props for the Slate component
 * @returns Props object for Slate component
 */
function useSlateProps(): SlateProps;

import { usePlateEditor, usePlateStates, useEditableProps } from "@udecode/plate-common/react";
import { createPlatePlugin } from "@udecode/plate-common/react";

function MyEditorComponent() {
  const editor = usePlateEditor({
    plugins: [
      createPlatePlugin({
        key: 'paragraph',
        node: { type: 'p' }
      })
    ],
    value: [
      { type: 'p', children: [{ text: 'Initial content' }] }
    ]
  });

  // Access store states
  const { value, selection } = usePlateStates();
  
  // Get props for editable content
  const editableProps = useEditableProps();

  return <Plate editor={editor} />;
}

/**
 * Hook to access Plate selector functions
 * @returns Object containing selector functions
 */
function usePlateSelectors<T = any>(): {
  /** Get current editor value */
  value: () => TElement[];
  
  /** Get current editor instance */
  editor: () => PlateEditor<T> | null;
  
  /** Get current selection */
  selection: () => TRange | null;
  
  /** Get editor read-only state */
  readOnly: () => boolean;
  
  /** Get focused state */
  focused: () => boolean;
  
  /** Get editor version for change tracking */
  versionEditor: () => number;
  
  /** Get selection version for change tracking */
  versionSelection: () => number;
  
  /** Get value version for change tracking */
  versionValue: () => number;
}

/**
 * Hook to access Plate action functions
 * @returns Object containing action functions
 */
function usePlateActions(): {
  /** Set editor instance */
  setEditor: (editor: PlateEditor) => void;
  
  /** Set editor value */
  setValue: (value: TElement[]) => void;
  
  /** Set editor selection */
  setSelection: (selection: TRange | null) => void;
  
  /** Set read-only state */
  setReadOnly: (readOnly: boolean) => void;
  
  /** Set focused state */
  setFocused: (focused: boolean) => void;
  
  /** Increment editor version */
  incrementVersion: () => void;
  
  /** Increment selection version */
  incrementSelectionVersion: () => void;
  
  /** Increment value version */
  incrementValueVersion: () => void;
  
  /** Reset editor state */
  reset: () => void;
}

/**
 * Hook to check if a node is selected
 * @returns True if current node is selected
 */
function useSelected(): boolean;

/**
 * Hook to check if editor is focused
 * @returns True if editor has focus
 */
function useFocused(): boolean;

/**
 * Hook to access current editor selection
 * @returns Current selection range
 */
function usePlateSelection(): TRange | null;

/**
 * Hook to track selection changes
 * @param callback - Function called when selection changes
 */
function useSelectionChange(
  callback: (selection: TRange | null) => void
): void;

/**
 * Hook to access plugin API methods
 * @param plugin - Plugin configuration
 * @returns Plugin API object
 */
function usePluginApi<C extends AnyPluginConfig>(
  plugin: WithRequiredKey<C>
): InferApi<C>;

/**
 * Hook to access plugin transforms
 * @param plugin - Plugin configuration
 * @returns Plugin transforms object
 */
function usePluginTransforms<C extends AnyPluginConfig>(
  plugin: WithRequiredKey<C>
): InferTransforms<C>;

/**
 * Hook to get and set plugin options
 * @param plugin - Plugin configuration
 * @param optionKey - Option key to access
 * @returns Tuple of [optionValue, setOptionValue]
 */
function usePluginOption<
  C extends AnyPluginConfig,
  K extends keyof InferOptions<C>
>(
  plugin: WithRequiredKey<C>,
  optionKey: K
): [InferOptions<C>[K], (value: InferOptions<C>[K]) => void];

/**
 * Hook to check if a plugin is enabled
 * @param pluginKey - Plugin key to check
 * @returns True if plugin is enabled
 */
function usePluginEnabled(pluginKey: string): boolean;

/**
 * Hook for handling keyboard events
 * @param handlers - Map of key combinations to handlers
 */
function useHotkeys(
  handlers: Record<string, (event: KeyboardEvent) => void>
): void;

/**
 * Hook for handling editor changes
 * @param callback - Function called when editor changes
 * @param deps - Dependency array for the callback
 */
function useEditorChange(
  callback: (editor: SlateEditor) => void,
  deps?: React.DependencyList
): void;

/**
 * Hook for handling editor blur events
 * @param callback - Function called when editor loses focus
 */
function useEditorBlur(
  callback: (editor: SlateEditor) => void
): void;

/**
 * Hook for handling editor focus events
 * @param callback - Function called when editor gains focus
 */
function useEditorFocus(
  callback: (editor: SlateEditor) => void
): void;

/**
 * Hook to access the Plate store
 * @param scope - Store scope
 * @returns Store API
 */
function usePlateStore(scope?: string): PlateStoreApi;

interface PlateStoreApi {
  /** Get store state */
  get: () => PlateStoreState;
  
  /** Set store state */
  set: (state: Partial<PlateStoreState>) => void;
  
  /** Subscribe to store changes */
  subscribe: (listener: (state: PlateStoreState) => void) => () => void;
}

interface PlateStoreState {
  /** Current editor instance */
  editor: SlateEditor;
  
  /** Editor value */
  value: TElement[];
  
  /** Current selection */
  selection: TRange | null;
  
  /** Read-only state */
  readOnly: boolean;
  
  /** Focused state */
  focused: boolean;
  
  /** Plugin options */
  pluginOptions: Record<string, any>;
}

/**
 * Hook to access plugin option store
 * @param plugin - Plugin configuration
 * @returns Plugin option store API
 */
function usePluginOptionStore<C extends AnyPluginConfig>(
  plugin: WithRequiredKey<C>
): StoreApi<C['key'], InferOptions<C>>;

/**
 * Hook for isomorphic layout effect
 * @param effect - Effect function
 * @param deps - Dependency array
 */
function useIsomorphicLayoutEffect(
  effect: React.EffectCallback,
  deps?: React.DependencyList
): void;

/**
 * Hook for deep comparison of dependencies
 * @param value - Value to compare
 * @returns Memoized value that only changes on deep equality
 */
function useDeepCompareMemo<T>(value: T): T;

/**
 * Hook for previous value tracking
 * @param value - Current value
 * @returns Previous value
 */
function usePrevious<T>(value: T): T | undefined;

/**
 * Hook for debounced values
 * @param value - Value to debounce
 * @param delay - Debounce delay in milliseconds
 * @returns Debounced value
 */
function useDebounce<T>(value: T, delay: number): T;

/**
 * Hook for mounting state
 * @returns True if component is mounted
 */
function useMounted(): boolean;

/**
 * Hook to access Plate context
 * @param scope - Context scope
 * @returns Plate context value
 */
function usePlateContext(scope?: string): PlateContextValue;

/**
 * Hook to access Slate context
 * @returns Slate context value
 */
function useSlate(): SlateContextValue;

/**
 * Hook to check if component is inside Plate provider
 * @returns True if inside PlateProvider
 */
function useIsInPlate(): boolean;

/**
 * Configuration for controllable state hook
 */
interface ControllableStateConfig<T> {
  /** Controlled value */
  value?: T;
  
  /** Default uncontrolled value */
  defaultValue?: T;
  
  /** Change callback */
  onChange?: (value: T) => void;
  
  /** Value name for debugging */
  name?: string;
}

/**
 * Hotkey handler configuration
 */
interface HotkeyHandler {
  /** Key combination string */
  keys: string;
  
  /** Handler function */
  handler: (event: KeyboardEvent) => void;
  
  /** Handler options */
  options?: HotkeyOptions;
}

interface HotkeyOptions {
  /** Prevent default behavior */
  preventDefault?: boolean;
  
  /** Enable in form fields */
  enableOnFormTags?: boolean;
  
  /** Enable on content editable */
  enableOnContentEditable?: boolean;
  
  /** Split key combinations */
  splitKey?: string;
}

/**
 * Editor change event data
 */
interface EditorChangeData {
  /** Current editor value */
  value: TElement[];
  
  /** Previous editor value */
  previousValue: TElement[];
  
  /** Operations that caused the change */
  operations: TOperation[];
}