@rtif-sdk/web

Web platform implementation for RTIF (Rich Text Input Format). A vanilla TypeScript rich text editor built on contenteditable, with plugin presets, keyboard shortcuts, clipboard handling, IME support, and accessibility.

Install

npm install @rtif-sdk/web

Quick Start

import { createWebEditor, PRESET_STANDARD } from '@rtif-sdk/web';

const editor = createWebEditor({
  root: document.getElementById('editor')!,
  plugins: PRESET_STANDARD,
  placeholder: 'Start typing...',
  accessibleLabel: 'Document editor',
});

// Subscribe to changes
editor.onChange((state) => {
  console.log('Document:', JSON.stringify(state.doc));
});

Presets

Four plugin presets are included, each a superset of the previous:

| Preset | Plugins | Includes | |--------|---------|----------| | PRESET_PLAINTEXT | 0 | No formatting | | PRESET_BASIC | 4 | Bold, italic, underline, link | | PRESET_STANDARD | 11 | + strikethrough, code, heading, list, blockquote, code block, HR | | PRESET_FULL | 19 | + text color, font size, font family, alignment, indent, callout, image, embed |

Features

• 8 RTIF operation types with full undo/redo
• IME/composition input (CJK, accent keys, dictation)
• Clipboard: copy/cut/paste with RTIF JSON, HTML, and plain text formats
• Keyboard shortcuts (Cmd/Ctrl+B, I, U, K, Z, etc.)
• Plugin system for custom block types, marks, commands, and input rules
• Content pipeline for paste/drop handling (images, URLs, files)
• @mention trigger infrastructure
• Accessibility: ARIA roles, keyboard-only operation, screen reader support

Plugin Kit

Create custom plugins with minimal boilerplate:

import { defineBooleanMark, defineBlockType } from '@rtif-sdk/web';

const highlight = defineBooleanMark({
  markType: 'highlight',
  shortcut: { key: 'h', mod: true, shift: true },
  renderer: { apply(el) { el.style.backgroundColor = 'yellow'; } },
});

AI Agent Setup

This package ships AI coding assistant rules for Claude Code, Cursor, and GitHub Copilot — including React integration guidance. Since @rtif-sdk/react depends on this package, npx rtif-setup works whether you installed @rtif-sdk/web or @rtif-sdk/react. After installing, run:

npx rtif-setup

This installs framework guidance, plugin scaffolding commands, code review checklists, and a troubleshooting agent into your project. Supports selective targets:

npx rtif-setup claude        # Claude Code only
npx rtif-setup cursor copilot # Cursor + Copilot
npx rtif-setup --gitignore   # Also add generated files to .gitignore

License

MIT