Core Editor Integration

/**
 * Primary hook for initializing and managing a Remirror editor instance
 * @param props - Configuration object with extensions, content, and options
 * @returns Manager, state, and context getter for the editor
 */
function useRemirror<Extension extends AnyExtension = AnyExtension>(
  props: UseRemirrorProps<Extension>
): UseRemirrorReturn<Extension>;

interface UseRemirrorProps<Extension extends AnyExtension = AnyExtension> {
  /** Function that returns the extensions to be used by the editor */
  extensions: () => Extension[];
  /** Initial content for the editor */
  content?: RemirrorContentType;
  /** Initial selection position */
  selection?: PrimitiveSelection;
  /** How to handle string content (html, markdown, etc.) */
  stringHandler?: StringHandler;
  /** Error handler for editor errors */
  onError?: (error: Error) => void;
}

interface UseRemirrorReturn<Extension extends AnyExtension = AnyExtension> {
  /** The extension manager instance */
  manager: RemirrorManager<Extension>;
  /** The current editor state */
  state: EditorState;
  /** Function to get the current framework context */
  getContext: () => FrameworkOutput<Extension>;
}

import { useRemirror, ReactExtension } from '@remirror/react';

function MyEditor() {
  const { manager, state } = useRemirror({
    extensions: () => [new ReactExtension()],
    content: '<p>Hello world!</p>',
    selection: 'end',
    stringHandler: 'html',
  });

  return <Remirror manager={manager} initialContent={state} />;
}

/**
 * Main React component that renders the Remirror editor
 * @param props - Configuration props for the editor component
 */
interface Remirror extends React.Component<RemirrorProps> {}

interface RemirrorProps {
  /** The extension manager instance from useRemirror */
  manager: RemirrorManager;
  /** Initial content for the editor */
  initialContent?: RemirrorContentType;
  /** Child components to render within the editor context */
  children?: React.ReactNode;
  /** CSS class names to apply to the editor */
  classNames?: string[];
  /** Whether the editor is editable */
  editable?: boolean;
  /** Auto focus configuration */
  autoFocus?: boolean | FocusType;
}

import React from 'react';
import { Remirror, useRemirror, ReactExtension } from '@remirror/react';

function EditorWithToolbar() {
  const { manager, state } = useRemirror({
    extensions: () => [new ReactExtension()],
    content: '<p>Start typing...</p>',
  });

  return (
    <Remirror 
      manager={manager} 
      initialContent={state}
      autoFocus
      classNames={['editor-container']}
    >
      {/* Child components have access to editor context */}
      <div>Your toolbar components go here</div>
    </Remirror>
  );
}

/**
 * Alternative editor component with different rendering approach
 */
interface EditorComponent extends React.Component<RemirrorProps> {}

/**
 * React context for accessing Remirror editor state and methods
 */
const RemirrorContext: React.Context<RemirrorContextType>;

/**
 * Hook to access the Remirror context
 * @returns The current Remirror context value
 */
function useRemirrorContext(): UseRemirrorContextType;

/**
 * Internationalization context provider
 */
interface I18nProvider extends React.Component<I18nProps> {}

interface I18nProps {
  /** Locale configuration */
  locale?: string;
  /** Translation messages */
  messages?: Record<string, string>;
  /** Child components */
  children: React.ReactNode;
}

/**
 * Component for handling HTML content changes
 */
interface OnChangeHTML extends React.Component<OnChangeHTMLProps> {}

interface OnChangeHTMLProps {
  /** Callback when HTML content changes */
  onChange: (html: string) => void;
}

/**
 * Component for handling JSON content changes
 */
interface OnChangeJSON extends React.Component<OnChangeJSONProps> {}

interface OnChangeJSONProps {
  /** Callback when JSON content changes */
  onChange: (json: RemirrorJSON) => void;
}

import React, { useState } from 'react';
import { Remirror, OnChangeHTML, useRemirror, ReactExtension } from '@remirror/react';

function EditorWithHTMLOutput() {
  const [html, setHtml] = useState('');
  const { manager, state } = useRemirror({
    extensions: () => [new ReactExtension()],
  });

  return (
    <div>
      <Remirror manager={manager} initialContent={state}>
        <OnChangeHTML onChange={setHtml} />
      </Remirror>
      <div>Current HTML: {html}</div>
    </div>
  );
}

/**
 * Create a Remirror manager configured for React
 * @param options - Configuration options for the manager
 * @returns Configured RemirrorManager instance
 */
function createReactManager<Extension extends AnyExtension>(
  options: CreateReactManagerOptions<Extension>
): RemirrorManager<Extension>;

interface CreateReactManagerOptions<Extension extends AnyExtension> {
  /** Extensions to include in the manager */
  extensions: Extension[];
  /** Framework-specific settings */
  settings?: ManagerSettings;
}

/**
 * Create a ProseMirror EditorView instance
 * @param element - DOM element to mount the editor
 * @param state - Initial editor state
 * @returns EditorView instance
 */
function createEditorView(
  element: HTMLElement,
  state: EditorState
): EditorView;

interface ReactExtensions extends AnyExtension[] {}

interface ReactFrameworkOutput<Extension extends AnyExtension = AnyExtension> {
  /** Extension manager */
  manager: RemirrorManager<Extension>;
  /** Current editor state */
  state: EditorState;
  /** Editor view instance */
  view: EditorView;
  /** Available commands */
  commands: RemirrorCommands;
  /** Helper methods */
  helpers: RemirrorHelpers;
  /** Chain commands */
  chain: ChainedFromExtensions<Extension>;
}

interface UseRemirrorContextType<Extension extends AnyExtension = AnyExtension> {
  /** Framework output */
  framework: ReactFrameworkOutput<Extension>;
  /** Root element props */
  getRootProps: (config?: GetRootPropsConfig) => RefKeyRootProps;
}

interface GetRootPropsConfig {
  /** Additional CSS classes */
  className?: string;
  /** Additional props to merge */
  props?: Record<string, any>;
}

interface RefKeyRootProps extends RefProps {
  /** Ref to the editor element */
  ref: React.RefObject<HTMLElement>;
  /** CSS class names */
  className: string;
  /** Additional HTML attributes */
  [key: string]: any;
}

interface RefProps {
  /** Ref callback */
  ref: React.Ref<HTMLElement>;
}

/**
 * Hook to get the reason for the last editor update
 * @returns The update reason
 */
function useUpdateReason(): UpdateReason;

interface UpdateReason {
  /** The source of the update */
  source: 'local' | 'remote' | 'init';
  /** Whether this was a state change */
  stateUpdate: boolean;
  /** Whether this was a transaction */
  transactions: readonly Transaction[];
}