@rtif-sdk/react

React bindings for the RTIF rich text editor. Provides hooks, components, and a toolbar system on top of @rtif-sdk/web.

Install

npm install @rtif-sdk/react

Quick Start

import { Editor, DefaultToolbar } from '@rtif-sdk/react';
import '@rtif-sdk/web/styles/all.css';

function MyEditor() {
  return (
    <Editor
      preset="standard"
      placeholder="Start writing..."
      onChange={(state) => console.log(state.doc)}
    >
      <DefaultToolbar />
    </Editor>
  );
}

Integration Tiers

// Tier 1 — Hello world
<Editor placeholder="Start writing..." />

// Tier 2 — Production
<Editor defaultDoc={doc} preset="standard" onChange={save}>
  <DefaultToolbar />
</Editor>

// Tier 3 — Custom toolbar
<Editor preset="full">
  <Toolbar>
    <ToolbarButton command="toggleMark:bold" label="B" />
    <HeadingSelect items={headingItems} />
  </Toolbar>
</Editor>

// Tier 4 — Full control
const editor = useEditor({ preset: 'full', onChange: save });
<EditorProvider editor={editor}>
  <MyToolbar />
  <EditorContent />
</EditorProvider>

Hooks

| Hook | Returns | Purpose | |------|---------|---------| | useEditor(config) | EditorHandle | Create/manage editor. Auto-destroys on unmount. | | useEditorContext() | EditorHandle | Access editor from child of <Editor> | | useIsActive(command) | boolean | Toolbar toggle state | | useCanExecute(command) | boolean | Toolbar disabled state | | useMarksAtCursor() | Record | Active marks at cursor | | useBlockAtCursor() | Block \| null | Block at cursor | | useEditorFocused() | boolean | Editor focus state | | useEditorState() | EditorState | Full state (use sparingly) | | useMention(config) | UseMentionResult | @mention trigger | | useSlashCommands(config) | UseSlashCommandsResult | /slash commands | | useTrigger(config) | UseTriggerResult | Custom trigger character |

AI Agent Setup

AI coding assistant rules (including React-specific guidance) ship with the @rtif-sdk/web dependency. After installing, run:

npx rtif-setup

This sets up framework rules, plugin scaffolding commands, and a troubleshooting agent for Claude Code, Cursor, and/or GitHub Copilot. See the @rtif-sdk/web README for details.

License

MIT