npm package: @naresh-io/rich-text-editor-vue
Description: A feature-rich WYSIWYG editor built with TipTap and Vue 3
Author: Naresh IO
Latest version: 0.1.1

# Rich Text Editor Vue

A feature-rich WYSIWYG editor for Vue 3, built on top of [TipTap](https://tiptap.dev/).

## Features

- 📝 **Full-featured editing**: Text formatting, headings, lists, tables, images, code blocks, and more
- 🖼️ **Image support**: Upload, resize, align, and add captions to images
- 📊 **Advanced tables**: Merge cells, adjust alignment, add/remove rows and columns
- 📐 **Column layouts**: Create multi-column content with 5 preset layouts
- 🎯 **Collapsible sections**: Details/summary blocks for organized content
- 📑 **Table of Contents**: Auto-generated TOC with smooth scrolling
- ⌨️ **Slash commands**: Notion-style `/` menu for quick insertions
- 😊 **Emoji support**: Built-in emoji picker
- 🎨 **Customizable**: Headless mode for full styling control
- ♿ **Accessible**: Keyboard shortcuts and screen reader support
- 📱 **Responsive**: Mobile-friendly interface

## Installation

```bash
npm install @naresh-io/rich-text-editor-vue
```

## Basic Usage

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { RichTextEditor } from '@naresh-io/rich-text-editor-vue';
import '@naresh-io/rich-text-editor-vue/rich-text-editor.css';

const content = ref({
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [{ type: 'text', text: 'Start writing...' }],
    },
  ],
});

async function handleImageUpload(file, onProgress) {
  // Upload to your server
  const formData = new FormData();
  formData.append('image', file);

  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData,
  });

  const data = await response.json();

  return {
    url: data.url,
    assetId: data.id,
    width: data.width,
    height: data.height,
  };
}
</script>

<template>
  <RichTextEditor
    v-model="content"
    :image-upload-handler="handleImageUpload"
    placeholder="Start writing..."
  />
</template>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `v-model` | `TiptapDocument` | *required* | Editor content (JSON) |
| `editable` | `boolean` | `true` | Enable/disable editing |
| `autofocus` | `boolean` | `false` | Auto-focus on mount |
| `placeholder` | `string` | `'Start writing...'` | Placeholder text |
| `characterLimit` | `number` | `undefined` | Max character count (unset = unlimited) |
| `tableOfContents` | `boolean` | `false` | Show table of contents sidebar |
| `showFloatingMenus` | `boolean` | `false` | Show bubble menu, image/column toolbars, table handle, drag handle |
| `imageUploadHandler` | `ImageUploadHandler` | `undefined` | Handle image uploads |
| `headless` | `boolean` | `false` | Disable default styles |

## Read-Only Mode

Use `RichTextPreview` for displaying content without editing:

```vue
<script setup lang="ts">
import { RichTextPreview } from '@naresh-io/rich-text-editor-vue';
import '@naresh-io/rich-text-editor-vue/rich-text-editor.css';
</script>

<template>
  <RichTextPreview v-model="content" />
</template>
```

## Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| `Ctrl/Cmd + B` | Bold |
| `Ctrl/Cmd + I` | Italic |
| `Ctrl/Cmd + U` | Underline |
| `Ctrl/Cmd + K` | Add link |
| `Ctrl/Cmd + \` | Clear formatting |
| `Ctrl/Cmd + Z` | Undo |
| `Ctrl/Cmd + Shift + Z` | Redo |
| `/` | Open slash command menu |
| `:` | Open emoji picker |

## Headless Mode

For full styling control, use headless mode and provide your own CSS:

```vue
<RichTextEditor
  v-model="content"
  headless
/>
```

Then style using CSS variables:

```css
:root {
  --rte-color-primary: #6366f1;
  --rte-color-primary-hover: #4f46e5;
  --rte-border-radius: 0.5rem;
  /* ... more variables */
}
```

## TypeScript Support

Full TypeScript support with exported types:

```typescript
import type {
  TiptapDocument,
  RichTextEditorProps,
  ImageUploadHandler,
  UploadResult,
} from '@naresh-io/rich-text-editor-vue';
```

## License

MIT © [Naresh IO](https://github.com/naresh-io)

## Contributing

Contributions are welcome! Please open an issue or PR on [GitHub](https://github.com/naresh-io/rich-text-editor-vue).