@jonahschulte/rtf-editor

React WYSIWYG editor for RTF documents with track changes support.

Features

• WYSIWYG Editing - Rich text editing powered by Quill
• Track Changes Support - Visual display of insertions and deletions
• Accept/Reject Changes - Individual or bulk change management
• Multiple View Modes - Markup, Final, and Original views
• Customizable Styling - Custom colors for track changes
• Responsive Design - Works on desktop and mobile

Installation

npm install @jonahschulte/rtf-editor

Peer Dependencies

npm install react react-dom

Usage

Basic Usage

import { RTFEditor } from '@jonahschulte/rtf-editor';

function App() {
  const [rtfContent, setRtfContent] = useState('');

  return (
    <RTFEditor
      value={rtfContent}
      onChange={(rtf, html) => setRtfContent(rtf)}
      showSidebar
      showTrackChangesToolbar
    />
  );
}

With Track Changes Callbacks

import { RTFEditor } from '@jonahschulte/rtf-editor';

function App() {
  const handleTrackChangesUpdate = (doc, changes) => {
    console.log(`${changes.length} changes remaining`);
  };

  return (
    <RTFEditor
      value={rtfContent}
      onChange={handleChange}
      onTrackChangesUpdate={handleTrackChangesUpdate}
      showSidebar
      showTrackChangesToolbar
    />
  );
}

Custom Colors

<RTFEditor
  value={rtfContent}
  onChange={handleChange}
  trackChangesColors={{
    insertionColor: '#e6ffe6',
    deletionColor: '#ffe6e6',
    insertionBorderColor: '#00cc00',
    deletionBorderColor: '#cc0000',
  }}
/>

Read-Only Mode

<RTFEditor
  value={rtfContent}
  readOnly
  showSidebar
  defaultViewMode="final"
/>

Props

Prop	Type	Default	Description
value	string	''	RTF content
onChange	(rtf: string, html: string) => void	-	Called when content changes
onTrackChangesUpdate	(doc, changes) => void	-	Called when changes are accepted/rejected
readOnly	boolean	false	Disable editing
placeholder	string	'Start typing...'	Placeholder text
showSidebar	boolean	true	Show track changes sidebar
showTrackChangesToolbar	boolean	true	Show track changes toolbar
defaultViewMode	'markup' | 'final' | 'original'	'markup'	Initial view mode
className	string	''	Custom CSS class
height	string | number	400	Editor height
toolbarOptions	array	-	Custom Quill toolbar options
trackChangesColors	object	-	Custom colors for track changes

View Modes

Mode	Description
markup	Shows all changes with visual styling (green for insertions, red strikethrough for deletions)
final	Shows the document as if all changes were accepted
original	Shows the document as if all changes were rejected

Components

The package also exports individual components for custom layouts:

import {
  RTFEditor,
  TrackChangesSidebar,
  TrackChangesToolbar
} from '@jonahschulte/rtf-editor';

Related

• @jonahschulte/rtf-toolkit - Core RTF parsing and rendering library

License

MIT