or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-hooks.mdcomponent-extensions.mdcontent-rendering.mdcore-integration.mdeditor-hooks.mdindex.mdtable-extensions.mdui-components.mdutilities.md
tile.json

tessl/npm-remirror--react

Hooks and components for consuming remirror with your fave framework React.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@remirror/react@2.0.x

To install, run

npx @tessl/cli install tessl/npm-remirror--react@2.0.0

index.mddocs/

@remirror/react

@remirror/react is a comprehensive React integration library for the Remirror rich text editor toolkit. It provides hooks, components, and utilities for building sophisticated text editing experiences with React, offering features like controlled editor state management, customizable extensions system, and declarative component architecture. The library serves as the primary React interface for the Remirror ecosystem, enabling developers to create cross-platform text editors with TypeScript support and seamless integration with existing React applications.

Package Information

  • Package Name: @remirror/react
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @remirror/react

Core Imports

import { 
  Remirror, 
  useRemirror, 
  useCommands,
  ToggleBoldButton,
  ReactExtension 
} from "@remirror/react";

For CommonJS:

const { 
  Remirror, 
  useRemirror, 
  useCommands,
  ToggleBoldButton,
  ReactExtension 
} = require("@remirror/react");

Basic Usage

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

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

  return (
    <div>
      <Remirror manager={manager} initialContent={state}>
        <BaselineButtonGroup>
          <ToggleBoldButton />
          <ToggleItalicButton />
        </BaselineButtonGroup>
      </Remirror>
    </div>
  );
}

Architecture

@remirror/react is built around several key architectural components:

  • Core Integration: React hooks and context providers for managing editor state and lifecycle
  • Component System: Pre-built UI components including buttons, toolbars, and menus for common editor actions
  • Extension Framework: React-specific extensions that integrate with the broader Remirror extension system
  • Portal System: Advanced React portal management for rendering complex node views and floating UI elements
  • Table Support: Specialized React components and extensions for interactive table editing
  • Rendering System: JSON-to-React renderer for displaying editor content as React components

Capabilities

Core Editor Integration

Essential hooks and components for integrating Remirror editors with React applications. Provides state management, command access, and the main Remirror component.

function useRemirror<Extension extends AnyExtension>(
  props: UseRemirrorProps<Extension>
): UseRemirrorReturn<Extension>;

interface Remirror extends React.Component<RemirrorProps> {}

Core Integration

Editor Hooks

Specialized hooks for accessing editor state, commands, and functionality. Essential for building custom editor interfaces and handling editor events.

function useCommands(): RemirrorCommands;
function useChainedCommands(): ChainedFromExtensions<Extensions>;
function useHelpers(): RemirrorHelpers;
function useEditorState(): EditorState;
function useEditorView(): EditorView;

Editor Hooks

UI Components

Pre-built React components for common editor functionality including formatting buttons, toolbars, and specialized UI elements.

interface ToggleBoldButton extends React.Component {}
interface ToggleItalicButton extends React.Component {}
interface BaseToolbar extends React.Component {}
interface FloatingToolbar extends React.Component {}

UI Components

Advanced Hooks

Extended hooks for sophisticated editor interactions including positioning, suggestions, keyboard handling, and event management.

function usePositioner(): UsePositionerReturn;
function useMention(): MentionState;
function useKeymap(keymap: ProsemirrorKeyBindings): void;
function useEditorEvent<T>(
  event: string,
  handler: (params: T) => void
): void;

Advanced Hooks

React Component Extensions

Extensions and utilities for integrating React components as ProseMirror node views and managing the portal system.

class ReactComponentExtension extends Extension<ReactComponentOptions> {}

interface PortalContainer {
  render(Component: ComponentType, props?: any): string;
  remove(key: string): void;
}

function usePortals(): PortalMap;

Component Extensions

Table Extensions

React-specific table functionality with interactive components for creating and editing tables within the editor.

class TableExtension extends NodeExtension<TableOptions> {}
interface TableComponents extends React.Component {}
interface TableCellMenu extends React.Component<TableCellMenuProps> {}

Table Extensions

Content Rendering

JSON-to-React rendering system for displaying editor content as React components with customizable handlers.

interface RemirrorRenderer extends React.Component<{
  json: RemirrorJSON;
  typeMap?: Record<string, ComponentType>;
}> {}

interface Doc extends React.Component<{ json: RemirrorJSON }> {}

Content Rendering

Utilities

React-specific utility functions for element manipulation, type checking, and React component handling.

function isValidElement(element: unknown): element is ReactElement;
function getElementProps(element: ReactElement): Record<string, any>;
function addKeyToElement(element: ReactElement, key: string): ReactElement;

Utilities

Types

Core Types

interface UseRemirrorProps<Extension extends AnyExtension = AnyExtension> {
  extensions: () => Extension[];
  content?: RemirrorContentType;
  selection?: PrimitiveSelection;
  stringHandler?: StringHandler;
  onError?: (error: Error) => void;
}

interface UseRemirrorReturn<Extension extends AnyExtension = AnyExtension> {
  manager: RemirrorManager<Extension>;
  state: EditorState;
  getContext: () => FrameworkOutput<Extension>;
}

interface RemirrorProps {
  manager: RemirrorManager;
  initialContent?: RemirrorContentType;
  children?: React.ReactNode;
  classNames?: string[];
  editable?: boolean;
  autoFocus?: boolean | FocusType;
}