npm package: @mohammadnoroozi/text-editor
Description: A beautiful, customizable rich text editor built with TipTap and React
Latest version: 2.1.2

# Text Editor

A beautiful, customizable rich text editor built with [TipTap](https://tiptap.dev/) and React.

## Installation

```bash
npm install @mohammadnoroozi/text-editor
```

<!-- ### Peer Dependencies

This package requires the following peer dependencies:

```bash
npm install react react-dom @tiptap/core @tiptap/react @tiptap/pm
```

For the full editor experience with all features, also install:

```bash
npm install @tiptap/starter-kit @tiptap/extension-highlight @tiptap/extension-image @tiptap/extension-list @tiptap/extension-subscript @tiptap/extension-superscript @tiptap/extension-text-align @tiptap/extension-typography @tiptap/extensions
``` -->

## Quick Start

### Using the Pre-built Editor

The easiest way to get started is to use the pre-built `SimpleEditor` component:

```tsx
import { SimpleEditor } from "@mohammadnoroozi/text-editor";
import "@mohammadnoroozi/text-editor/styles.css";

function App() {
  return <SimpleEditor />;
}
```

### Building a Custom Editor

You can also build your own editor using the individual components and hooks:

```tsx
import { useEditor, EditorContent, EditorContext } from "@tiptap/react";
import { StarterKit } from "@tiptap/starter-kit";
import {
  Toolbar,
  ToolbarGroup,
  ToolbarSeparator,
  MarkButton,
  HeadingDropdownMenu,
  UndoRedoButton,
} from "@mohammadnoroozi/text-editor";
import "@mohammadnoroozi/text-editor/styles.css";

function CustomEditor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: "<p>Hello World!</p>",
  });

  return (
    <EditorContext.Provider value={{ editor }}>
      <Toolbar>
        <ToolbarGroup>
          <UndoRedoButton action="undo" />
          <UndoRedoButton action="redo" />
        </ToolbarGroup>
        <ToolbarSeparator />
        <ToolbarGroup>
          <HeadingDropdownMenu levels={[1, 2, 3]} />
        </ToolbarGroup>
        <ToolbarSeparator />
        <ToolbarGroup>
          <MarkButton type="bold" />
          <MarkButton type="italic" />
          <MarkButton type="strike" />
        </ToolbarGroup>
      </Toolbar>
      <EditorContent editor={editor} />
    </EditorContext.Provider>
  );
}
```

## Available Components

### UI Primitives

- `Button`, `ButtonGroup` - Basic button components
- `Toolbar`, `ToolbarGroup`, `ToolbarSeparator` - Toolbar components
- `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem` - Dropdown menu components
- `Popover`, `PopoverTrigger`, `PopoverContent` - Popover components
- `Tooltip`, `TooltipTrigger`, `TooltipContent` - Tooltip components
- `Card`, `CardHeader`, `CardBody`, `CardFooter` - Card components
- `Input`, `InputGroup` - Input components
- `Badge` - Badge component
- `Separator` - Separator component
- `Spacer` - Spacer component

### Editor Buttons & Controls

- `MarkButton` - Toggle text marks (bold, italic, strike, code, underline, superscript, subscript)
- `HeadingButton`, `HeadingDropdownMenu` - Heading controls
- `ListButton`, `ListDropdownMenu` - List controls (bullet, ordered, task)
- `BlockquoteButton` - Blockquote toggle
- `CodeBlockButton` - Code block toggle
- `TextAlignButton` - Text alignment controls
- `UndoRedoButton` - Undo/redo controls
- `LinkPopover`, `LinkButton` - Link editing
- `ColorHighlightPopover` - Text and background color controls
- `ImageUploadButton` - Image upload control

### TipTap Extensions

- `ImageUploadNode` - Image upload node extension
- `HorizontalRule` - Custom horizontal rule extension
- `NodeBackground` - Background color extension for nodes

### Hooks

- `useTiptapEditor` - Access editor instance from context
- `useBlockquote`, `useCodeBlock`, `useHeading`, `useList`, `useMark`, `useTextAlign`, `useUndoRedo` - Editor state hooks
- `useLinkPopover` - Link popover state management
- `useImageUpload` - Image upload handling
- `useIsBreakpoint` - Responsive breakpoint detection
- `useWindowSize` - Window size tracking
- `useCursorVisibility` - Cursor visibility management

### Utilities

- `cn` - Class name utility
- `handleImageUpload` - Default image upload handler
- `isMarkInSchema`, `isNodeInSchema` - Schema checking utilities
- Various editor helper functions

### Icons

All icons are exported and can be used independently:

```tsx
import { BoldIcon, ItalicIcon, LinkIcon } from "@mohammadnoroozi/text-editor";
```

## Styling

Import the styles in your application:

```tsx
import "@mohammadnoroozi/text-editor/styles.css";
```

The editor uses CSS custom properties (variables) for theming. You can override these to customize the appearance.

## TypeScript

This package is written in TypeScript and includes type definitions.

## License

MIT