ncwysiwyg

Advanced WYSIWYG editor React component with track changes, comments, table editing, and DOCX import/export. Built on TipTap/ProseMirror.

Features

• Rich text editing (bold, italic, underline, strikethrough, highlight, subscript, superscript)
• Headings (H1–H6), font family, font size, line height, text color
• Text alignment (left, center, right, justify)
• Ordered and bullet lists with style variants
• Tables with column/row resizing, cell formatting, merge/split, and context menus
• Images with drag-to-resize and bubble menu editing
• Track changes (insertions/deletions) with author attribution and accept/reject
• Comments with sidebar panel
• DOCX export/import with tracked changes, comments, images, and table styling preserved
• PDF export (via browser print)
• Source HTML editor and preview
• Indentation, special characters, spellcheck toggle, fullscreen mode

Installation

npm install ncwysiwyg

Peer Dependencies

The component requires React 18+ as a peer dependency:

npm install react react-dom

Usage

import { NCWysiwygEditor } from 'ncwysiwyg'
import 'ncwysiwyg/styles.css'

function App() {
  return (
    <NCWysiwygEditor
      content="<p>Hello world</p>"
      author="John Doe"
      onChange={(html) => console.log(html)}
      height={600}
    />
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | '' | Initial HTML content for the editor | | author | string | 'User' | Author name for track changes and comments. When set, the name is locked and cannot be changed by the user | | onChange | (html: string) => void | — | Callback fired on every content change with the HTML string | | onJsonChange | (json: Record<string, unknown>) => void | — | Callback fired on every content change with the TipTap JSON document | | className | string | — | Additional CSS class name for the editor wrapper | | height | string \| number | 600 | Height of the editor. Numbers are treated as pixels, strings are used as-is (e.g. '80vh') | | showCollaborationToolbar | boolean | true | Show or hide the collaboration toolbar (author, track changes, accept/reject, comments, download/import, undo/redo) | | downloadFilename | string | 'document' | Base filename used when downloading as PDF or DOCX (e.g. 'Contract' produces Contract.docx) |

Examples

Blank editor

<NCWysiwygEditor />

With initial content and a locked author

When author is provided, the name displays as read-only in the toolbar — users cannot change it:

<NCWysiwygEditor
  content="<h2>Contract Draft</h2><p>This agreement is entered into...</p>"
  author="Jane Smith"
  onChange={(html) => saveToServer(html)}
  height="80vh"
/>

Editable author name

Omit the author prop to let users set their own name via the toolbar dropdown (persisted to localStorage):

<NCWysiwygEditor
  onChange={(html) => saveToServer(html)}
/>

Custom height and class

<NCWysiwygEditor
  className="my-editor-wrapper"
  height={400}
/>

Without collaboration toolbar

Hide the collaboration row (author, track changes, accept/reject, comments, download/import, undo/redo) to use the editor as a simple rich text editor:

<NCWysiwygEditor
  showCollaborationToolbar={false}
  onChange={(html) => setContent(html)}
/>

CSS

The component ships with all required styles (Tailwind utilities, ProseMirror table styles, track change tooltips, image resize handles, etc.) in a single CSS file. Import it once at the top of your app:

import 'ncwysiwyg/styles.css'

Note: The CSS includes a minimal set of CSS custom properties (variables) for theming. If your app already uses a shadcn/ui-style theme with the same variable names (--background, --foreground, --primary, etc.), the editor will inherit your theme automatically.

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build the library
npm run build:lib

# Full build (typecheck + build)
npm run build

Publishing to npm

# 1. Build the library
npm run build:lib

# 2. Verify the package contents
npm pack --dry-run

# 3. Publish
npm publish

For scoped packages, use:

npm publish --access public

Local Testing (without publishing)

You can test the package locally in another project using npm link:

# In this project directory
npm link

# In your consumer project
npm link ncwysiwyg

Or use a relative path in the consumer's package.json:

{
  "dependencies": {
    "ncwysiwyg": "file:../path/to/NCWYSIWYG"
  }
}

Then in the consumer project:

npm install

License

MIT