Editor Hooks

/**
 * Access to all available editor commands
 * @returns Object containing all available commands
 */
function useCommands(): RemirrorCommands;

/**
 * Access to chainable command API for complex operations
 * @returns Chainable command interface
 */
function useChainedCommands(): ChainedFromExtensions<Extensions>;

/**
 * Access to editor helper methods for querying state
 * @returns Object containing helper methods
 */
function useHelpers(): RemirrorHelpers;

import React from 'react';
import { useCommands, useChainedCommands } from '@remirror/react';

function CustomToolbar() {
  const commands = useCommands();
  const chain = useChainedCommands();

  const makeBoldAndItalic = () => {
    chain.toggleBold().toggleItalic().run();
  };

  return (
    <div>
      <button onClick={() => commands.toggleBold()}>Bold</button>
      <button onClick={makeBoldAndItalic}>Bold + Italic</button>
    </div>
  );
}

/**
 * Access to the current ProseMirror EditorState
 * @returns Current editor state
 */
function useEditorState(): EditorState;

/**
 * Access to the ProseMirror EditorView instance
 * @returns Current editor view
 */
function useEditorView(): EditorView;

/**
 * Reference to the editor's DOM element
 * @returns Ref object containing the editor DOM element
 */
function useEditorDomRef(): React.RefObject<HTMLElement>;

/**
 * Access to the extension manager
 * @returns Current RemirrorManager instance
 */
function useManager(): RemirrorManager;

/**
 * Get the current editor selection
 * @returns Current selection object
 */
function useCurrentSelection(): Selection;

/**
 * Get the currently selected text
 * @returns Currently selected text as string
 */
function useSelectedText(): string;

/**
 * Get the range of a mark at the current position
 * @param mark - Mark type to check for
 * @returns Range information for the mark
 */
function useMarkRange(mark?: MarkType): MarkRange | undefined;

/**
 * Detect when the document has changed
 * @returns Boolean indicating if document changed in last update
 */
function useDocChanged(): boolean;

import React from 'react';
import { useSelectedText, useCurrentSelection } from '@remirror/react';

function SelectionInfo() {
  const selectedText = useSelectedText();
  const selection = useCurrentSelection();

  return (
    <div>
      <p>Selected text: "{selectedText}"</p>
      <p>Selection from {selection.from} to {selection.to}</p>
    </div>
  );
}

/**
 * Access a specific extension instance
 * @param Constructor - Extension constructor or name
 * @returns Extension instance or undefined
 */
function useExtension<T extends AnyExtension>(
  Constructor: ExtensionConstructor<T> | string
): T | undefined;

/**
 * Check if an extension is available
 * @param Constructor - Extension constructor or name
 * @returns Boolean indicating extension availability
 */
function useHasExtension<T extends AnyExtension>(
  Constructor: ExtensionConstructor<T> | string
): boolean;

/**
 * Check if marks or nodes are currently active
 * @param types - Mark or node types to check
 * @returns Boolean indicating if any are active
 */
function useActive(types?: string | string[]): boolean;

/**
 * Get attributes of a node or mark at current position
 * @param type - Node or mark type
 * @returns Attributes object or undefined
 */
function useAttrs(type?: string | NodeType | MarkType): ProsemirrorAttributes | undefined;

import React from 'react';
import { useExtension, useActive, BoldExtension } from '@remirror/react';

function BoldStatus() {
  const boldExtension = useExtension(BoldExtension);
  const isBold = useActive('bold');

  return (
    <div>
      <p>Bold extension loaded: {boldExtension ? 'Yes' : 'No'}</p>
      <p>Currently bold: {isBold ? 'Yes' : 'No'}</p>
    </div>
  );
}

/**
 * Listen to extension events
 * @param event - Event name to listen to
 * @param handler - Event handler function
 * @param options - Event options
 */
function useExtensionEvent<T = any>(
  event: string,
  handler: (params: T) => void,
  options?: { priority?: number }
): void;

/**
 * Listen to custom extension events
 * @param event - Custom event name
 * @param handler - Event handler function
 */
function useExtensionCustomEvent<T = any>(
  event: string,
  handler: (params: T) => void
): void;

import React, { useState } from 'react';
import { useExtensionEvent } from '@remirror/react';

function EventLogger() {
  const [events, setEvents] = useState<string[]>([]);

  useExtensionEvent('focus', () => {
    setEvents(prev => [...prev, 'Editor focused']);
  });

  useExtensionEvent('blur', () => {
    setEvents(prev => [...prev, 'Editor blurred']);
  });

  return (
    <div>
      <h3>Recent Events:</h3>
      <ul>
        {events.map((event, index) => (
          <li key={index}>{event}</li>
        ))}
      </ul>
    </div>
  );
}

/**
 * Access to the portal container for rendering React components
 * @returns Portal container instance
 */
function usePortalContainer(): PortalContainer;

/**
 * Force a component re-render
 * @returns Function to trigger re-render
 */
function useForceUpdate(): () => void;

/**
 * Access internationalization functions and current locale
 * @returns i18n utilities and current locale information
 */
function useI18n(): UseI18nReturn;

interface UseI18nReturn {
  /** Current locale */
  locale: string;
  /** Translation function */
  t: (key: string, values?: Record<string, any>) => string;
  /** Format date function */
  formatDate: (date: Date) => string;
  /** Format number function */
  formatNumber: (num: number) => string;
}

interface UseExtensionCallback<T extends AnyExtension = AnyExtension> {
  /** The extension instance */
  extension: T;
  /** Extension context */
  context: ExtensionContext<T>;
}

interface ExtensionContext<T extends AnyExtension = AnyExtension> {
  /** Current editor state */
  state: EditorState;
  /** Current editor view */
  view: EditorView;
  /** Extension manager */
  manager: RemirrorManager;
}

interface MarkRange {
  /** Start position of the mark */
  from: number;
  /** End position of the mark */
  to: number;
  /** The mark instance */
  mark: Mark;
  /** Text content within the mark */
  text: string;
}

interface RemirrorCommands {
  /** Toggle bold formatting */
  toggleBold: () => CommandFunction;
  /** Toggle italic formatting */
  toggleItalic: () => CommandFunction;
  /** Toggle underline formatting */
  toggleUnderline: () => CommandFunction;
  /** Insert text at current position */
  insertText: (text: string) => CommandFunction;
  /** Delete current selection */
  deleteSelection: () => CommandFunction;
  /** Focus the editor */
  focus: () => CommandFunction;
  /** Blur the editor */
  blur: () => CommandFunction;
  /** Undo last action */
  undo: () => CommandFunction;
  /** Redo last undone action */
  redo: () => CommandFunction;
  /** Additional commands from extensions */
  [commandName: string]: (...args: any[]) => CommandFunction;
}

interface RemirrorHelpers {
  /** Check if mark is active */
  isMarkActive: (type: string) => boolean;
  /** Check if node is active */
  isNodeActive: (type: string) => boolean;
  /** Get mark attributes */
  getMarkAttrs: (type: string) => ProsemirrorAttributes | undefined;
  /** Get node attributes */
  getNodeAttrs: (type: string) => ProsemirrorAttributes | undefined;
  /** Additional helpers from extensions */
  [helperName: string]: (...args: any[]) => any;
}

interface ChainedFromExtensions<Extension extends AnyExtension = AnyExtension> {
  /** Chain multiple commands together */
  [commandName: string]: (...args: any[]) => ChainedFromExtensions<Extension>;
  /** Execute the command chain */
  run: () => boolean;
}