QuickLinksMenu 🧩

A Tiptap extension + React UI that lets users insert UTM-tracked links via chip-style buttons. Built for marketing, analytics, and editorial workflows.

🔧 Installation

npm install tiptap-quick-links-menu
Here’s an updated and polished `README.md` for your `QuickLinksMenu` Tiptap extension, including a demo usage section and author credits:

---

## 📘 README: `tiptap-quick-links-menu`

```markdown
# tiptap-quick-links-menu 🧩

[![npm version](https://img.shields.io/npm/v/tiptap-quick-links-menu)](https://www.npmjs.com/package/tiptap-quick-links-menu)
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![GitHub stars](https://img.shields.io/github/stars/rishi-kumar-verma/tiptap-quick-links-menu?style=social)](https://github.com/rishi-kumar-verma/tiptap-quick-links-menu)

A Tiptap extension + React UI that lets users insert predefined UTM-tracked links into the editor via chip-style buttons. Built for marketing, analytics, and editorial workflows.

---

## 🚀 Demo Usage

### 1. Install the Package

```bash
npm install tiptap-quick-links-menu @tiptap/react @tiptap/starter-kit

2. Register the Extension

import { QuickLinksMenu } from 'tiptap-quick-links-menu';
import StarterKit from '@tiptap/starter-kit';

const editor = new Editor({
  extensions: [
    StarterKit,
    QuickLinksMenu.configure({
      links: [
        { label: 'Docs', url: 'https://example.com/docs?utm_source=editor' },
        { label: 'Signup', url: 'https://example.com/signup?utm_source=editor' },
      ],
    }),
  ],
});

3. Use the Command

editor.commands.insertQuickLink('Docs', 'https://example.com/docs?utm_source=editor');

4. React UI Component

import { QuickLinksMenuUI } from 'tiptap-quick-links-menu';

<QuickLinksMenuUI
  editor={editor}
  links={[
    { label: 'Docs', url: 'https://example.com/docs?utm_source=editor' },
    { label: 'Signup', url: 'https://example.com/signup?utm_source=editor' },
  ]}
/>

🧩 API

QuickLinksMenu.configure({ links })

| Option | Type | Description | |--------|------|-------------| | links | Array<{ label: string; url: string }> | List of quick links |

editor.commands.insertQuickLink(label, url)

Inserts a link with the given label and URL.

👨‍💻 Author

Made with ❤️ by Rishi Kumar Verma

🪪 License

MIT