{"_id":"@alikmanukian/vue-markdown-editor","name":"@alikmanukian/vue-markdown-editor","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@alikmanukian/vue-markdown-editor","version":"1.0.0","description":"A Tiptap-based Markdown editor component for Vue 3","type":"module","main":"dist/index.cjs","module":"dist/index.es.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs"},"./styles":"./dist/vue-markdown-editor.css"},"scripts":{"dev":"vite","build":"vite build","typecheck":"vue-tsc --noEmit","test":"vitest","test:coverage":"vitest --coverage","test:ui":"vitest --ui"},"keywords":["vue","vue3","markdown","editor","tiptap","wysiwyg"],"author":{"name":"Alik Manukian"},"license":"MIT","peerDependencies":{"remixicon":">=4.0.0","vue":"^3.0.0"},"peerDependenciesMeta":{"remixicon":{"optional":false}},"dependencies":{"@tiptap/extension-link":"^3.0.0","@tiptap/markdown":"^3.0.0","@tiptap/starter-kit":"^3.0.0","@tiptap/vue-3":"^3.0.0"},"devDependencies":{"@vitejs/plugin-vue":"^6.0.0","@vue/test-utils":"^2.4.6","happy-dom":"^20.8.3","remixicon":"^4.9.1","typescript":"^5.6.0","vite":"^7.0.0","vite-plugin-dts":"^4.0.0","vitest":"^4.0.18","vue":"^3.5.0","vue-tsc":"^3.0.0"},"_id":"@alikmanukian/vue-markdown-editor@1.0.0","gitHead":"6c037bcb885b05616d2c976f187db89add474bac","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-qhPWcgKlr3lv5PBZBNvy7tS9xtrJ2b45Pyx8R01MI2a0WhA2KMKHZHC3sjkdxhhhbUZGT89UeKuH+HgFXalCMQ==","shasum":"65c6479a9745935e0c02acc8f075cfa563236457","tarball":"https://registry.npmjs.org/@alikmanukian/vue-markdown-editor/-/vue-markdown-editor-1.0.0.tgz","fileCount":14,"unpackedSize":1064511,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHcEaLumg8bsZLZtlAy9I6Gme7bGc9NzViAbUlsSUhIJAiBHrtvDXnPu/JR9pAme8biLHzKITefKY7jWCQ4x9a1XNQ=="}]},"_npmUser":{"name":"alikmanukian","email":"alikmanukian@gmail.com"},"directories":{},"maintainers":[{"name":"alikmanukian","email":"alikmanukian@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-markdown-editor_1.0.0_1772806712603_0.22372586367058078"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-06T14:18:32.528Z","1.0.0":"2026-03-06T14:18:32.824Z","modified":"2026-03-06T14:18:33.005Z"},"maintainers":[{"name":"alikmanukian","email":"alikmanukian@gmail.com"}],"description":"A Tiptap-based Markdown editor component for Vue 3","keywords":["vue","vue3","markdown","editor","tiptap","wysiwyg"],"author":{"name":"Alik Manukian"},"license":"MIT","readme":"# @alikmanukian/vue-markdown-editor\n\nA lightweight, customizable Markdown editor component for Vue 3, built on top of [Tiptap](https://tiptap.dev/).\n\n- WYSIWYG editing with Markdown output\n- Configurable toolbar (bold, italic, strikethrough, lists, links, and more)\n- Default styles with full CSS variable theming — override anything without `!important`\n- Zero dependency on any UI framework (no shadcn, no Tailwind required)\n- Fully typed with TypeScript\n\n---\n\n## Installation\n\n```bash\nnpm install @alikmanukian/vue-markdown-editor remixicon\n```\n\n> **Why remixicon?** The toolbar uses [Remix Icons](https://remixicon.com/) for its buttons. It is listed as a peer dependency so you control how and where you import it — and you can reuse it across your project.\n\n---\n\n## Quick Start\n\n### 1. Import the styles\n\nIn your app's entry file (`main.ts` or equivalent):\n\n```ts\n// Remixicon — required for toolbar icons\nimport 'remixicon/fonts/remixicon.css';\n\n// Editor default styles\nimport '@alikmanukian/vue-markdown-editor/styles';\n```\n\n### 2. Use the component\n\n```vue\n\n\n\n \n\n```\n\nThat's it. The editor binds to `v-model` and emits the current content as a Markdown string on every change.\n\n---\n\n## Props\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `modelValue` | `string` | `''` | The Markdown content (use with `v-model`) |\n| `toolbar` | `ToolbarAction[]` | See below | Which toolbar buttons to display and in what order |\n| `placeholder` | `string` | — | Placeholder text shown when the editor is empty |\n\n### Default toolbar\n\n```ts\n['bold', 'italic', 'strike', 'bulletList', 'orderedList']\n```\n\nThe link button is always appended at the end of the toolbar.\n\n### Available `ToolbarAction` values\n\n| Value | Description |\n|---|---|\n| `bold` | Bold |\n| `italic` | Italic |\n| `strike` | Strikethrough |\n| `bulletList` | Unordered list |\n| `orderedList` | Ordered list |\n| `blockquote` | Blockquote |\n| `code` | Inline code |\n| `codeBlock` | Code block |\n| `horizontalRule` | Horizontal rule |\n| `undo` | Undo |\n| `redo` | Redo |\n\n---\n\n## Events\n\n| Event | Payload | Description |\n|---|---|---|\n| `update:modelValue` | `string` | Emitted on every content change with the current Markdown string |\n\n---\n\n## Customizing Styles\n\n### Method 1 — CSS Custom Properties (recommended)\n\nAll visual aspects of the editor are controlled by CSS custom properties. Override them in your own stylesheet after importing the default styles:\n\n```css\n/* Apply to all editor instances */\n:root {\n --vme-border-color: #a855f7;\n --vme-focus-border-color: #9333ea;\n --vme-focus-ring: rgba(147, 51, 234, 0.25);\n --vme-border-radius: 10px;\n --vme-content-min-height: 300px;\n}\n```\n\nOr scope it to a specific instance using the `.vme-editor` class:\n\n```css\n.my-form .vme-editor {\n --vme-border-color: #f59e0b;\n --vme-focus-border-color: #d97706;\n --vme-border-radius: 0;\n}\n```\n\n### Method 2 — Replace default styles entirely\n\nSkip importing the default styles and write your own from scratch using the `vme-*` class names:\n\n```ts\n// main.ts — do NOT import the default styles\nimport 'remixicon/fonts/remixicon.css';\nimport './my-editor-styles.css'; // your own styles\n```\n\n```css\n/* my-editor-styles.css */\n.vme-editor { /* wrapper */ }\n.vme-toolbar { /* toolbar