{"_id":"@bmin-mit/tiptap-slash-commands","_rev":"4-800b0ab4a28ec1b23d1f30dcf6738fde","name":"@bmin-mit/tiptap-slash-commands","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@bmin-mit/tiptap-slash-commands","version":"1.0.0","_id":"@bmin-mit/tiptap-slash-commands@1.0.0","maintainers":[{"name":"bmmit","email":"bmmit.work@gmail.com"}],"dist":{"shasum":"ee5d0f73705f0bcd048b1f1c2756b3756938e9e1","tarball":"https://registry.npmjs.org/@bmin-mit/tiptap-slash-commands/-/tiptap-slash-commands-1.0.0.tgz","fileCount":7,"integrity":"sha512-5k4O2Hy/mgT2u0ctJfE9Y10p491rciMnA/f7/BtasTD/gnkpdGoeu4sZWVz6Plc7yTXcKLBWqAbKAGK8I7VS0g==","signatures":[{"sig":"MEUCIBfifupCGBVHi+IUgmWTwThX4AKrjbPc11MOVeBCVBibAiEA+FcPxfQAQ0506ZW2zY78O1c3WTPkkDj294tkwGhFbWE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":49987},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"16540d786dc6aa6774c783e8b5e9fa4856e8bb01","scripts":{"dev":"tsup --watch","build":"tsup"},"_npmUser":{"name":"bmmit","email":"bmmit.work@gmail.com"},"_npmVersion":"10.9.3","directories":{},"_nodeVersion":"22.18.0","dependencies":{"cmdk":"^1.1.1","tippy.js":"^6.3.7","tunnel-rat":"^0.1.2"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","vite":"^7.2.2","@tiptap/pm":"^3.11.1","typescript":"^5.9.3","@types/react":"^19.0.0","@tiptap/react":"^3.11.1","@tabnote/configs":"workspace:*","@types/react-dom":"^19.0.0","@tiptap/suggestion":"^3.11.1"},"peerDependencies":{"react":">=19","@tiptap/pm":">=3","@tiptap/react":">=3","@tiptap/suggestion":">=3"},"_npmOperationalInternal":{"tmp":"tmp/tiptap-slash-commands_1.0.0_1765096192666_0.8864904685558075","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bmin-mit/tiptap-slash-commands","version":"1.0.1","_id":"@bmin-mit/tiptap-slash-commands@1.0.1","maintainers":[{"name":"bmmit","email":"bmmit.work@gmail.com"}],"homepage":"https://github.com/bmin-mit/TabNote-Extension/tree/main/packages/slash-commands","bugs":{"url":"https://github.com/bmin-mit/TabNote-Extension/issues"},"dist":{"shasum":"6d4f00b868f76981f9b483b68f6dbfbbda388401","tarball":"https://registry.npmjs.org/@bmin-mit/tiptap-slash-commands/-/tiptap-slash-commands-1.0.1.tgz","fileCount":7,"integrity":"sha512-ENi1C76FSye10DcCJVDRt3ekSZ6f9GGp1bMjEmFJ3PXhPv1/2e1w4531IjuraS8mee8hiGmqcK3q/q/QXYhvRQ==","signatures":[{"sig":"MEUCIA3lvyUs2KLA7JjyEUa5JohTivOoS2SKYbG8Ncd0FC9mAiEAwedcFW3lGq7HNJHsQpn1HVK9GOt6wu8p1Csu2CanlcE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":49675},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"4c496438296041af9ae7e72d7799a3f9ad576655","scripts":{"dev":"tsup --watch","build":"tsup"},"_npmUser":{"name":"bmmit","email":"bmmit.work@gmail.com"},"repository":{"url":"git+https://github.com/bmin-mit/TabNote-Extension.git","type":"git"},"_npmVersion":"10.9.3","directories":{},"_nodeVersion":"22.18.0","dependencies":{"cmdk":"^1.1.1","tippy.js":"^6.3.7","tunnel-rat":"^0.1.2"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","vite":"^7.2.2","@tiptap/pm":"^3.11.1","typescript":"^5.9.3","@types/react":"^19.0.0","@tiptap/react":"^3.11.1","@tabnote/configs":"workspace:*","@types/react-dom":"^19.0.0","@tiptap/suggestion":"^3.11.1"},"peerDependencies":{"react":">=19","@tiptap/pm":">=3","@tiptap/react":">=3","@tiptap/suggestion":">=3"},"_npmOperationalInternal":{"tmp":"tmp/tiptap-slash-commands_1.0.1_1765096811590_0.850134479673716","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bmin-mit/tiptap-slash-commands","version":"1.0.2","license":"MIT","_id":"@bmin-mit/tiptap-slash-commands@1.0.2","maintainers":[{"name":"bmmit","email":"bmmit.work@gmail.com"}],"homepage":"https://github.com/bmin-mit/TabNote-Extension/tree/main/packages/slash-commands","bugs":{"url":"https://github.com/bmin-mit/TabNote-Extension/issues"},"dist":{"shasum":"093940bca636cbe1c4c6e7846340a15e7fc69f69","tarball":"https://registry.npmjs.org/@bmin-mit/tiptap-slash-commands/-/tiptap-slash-commands-1.0.2.tgz","fileCount":8,"integrity":"sha512-Fi22NaWWJWw0qRCyshcOiJCglZcpaiLWNpD9QBuLoXTOkq3AViDk0jnGlGBi8pZ5HQTRz7IhLiJb/whAtzlfkA==","signatures":[{"sig":"MEQCIDLXKldvmOpxjlapQtfQxzIyRdj7dwkpC0IPB8Ea9ojGAiBgkBYloFPHkR0omXPtANuDvnVBuyrHwvevYMN3HGgaKg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":50890},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"55b23e258f5b225e6567ec6f5f2ad286c6577f94","scripts":{"dev":"tsup --watch","lint":"biome check","build":"tsup","format":"biome format --write","check-types":"tsc --noEmit"},"_npmUser":{"name":"bmmit","email":"bmmit.work@gmail.com"},"repository":{"url":"git+https://github.com/bmin-mit/TabNote-Extension.git","type":"git"},"_npmVersion":"10.9.3","directories":{},"_nodeVersion":"22.18.0","dependencies":{"cmdk":"^1.1.1","tippy.js":"^6.3.7","tunnel-rat":"^0.1.2"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","vite":"^7.2.2","@tiptap/pm":"^3.11.1","typescript":"^5.9.3","@types/react":"^19.0.0","@tiptap/react":"^3.11.1","@tabnote/configs":"workspace:*","@types/react-dom":"^19.0.0","@tiptap/suggestion":"^3.11.1"},"peerDependencies":{"react":">=19","@tiptap/pm":">=3","@tiptap/react":">=3","@tiptap/suggestion":">=3"},"_npmOperationalInternal":{"tmp":"tmp/tiptap-slash-commands_1.0.2_1765097277251_0.9196344717582754","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@bmin-mit/tiptap-slash-commands","version":"1.0.3","type":"module","repository":{"type":"git","url":"git+https://github.com/bmin-mit/TabNote-Extension.git"},"homepage":"https://github.com/bmin-mit/TabNote-Extension/tree/main/packages/slash-commands","license":"MIT","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsup","dev":"tsup --watch","lint":"biome check","format":"biome format --write","check-types":"tsc --noEmit"},"peerDependencies":{"react":">=19","@tiptap/pm":">=3","@tiptap/react":">=3","@tiptap/suggestion":">=3"},"devDependencies":{"@tabnote/configs":"workspace:*","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","tsup":"^8.5.1","typescript":"^5.9.3","vite":"^7.2.2","@tiptap/pm":"^3.11.1","@tiptap/react":"^3.11.1","@tiptap/suggestion":"^3.11.1"},"dependencies":{"cmdk":"^1.1.1","tippy.js":"^6.3.7","tunnel-rat":"^0.1.2"},"_id":"@bmin-mit/tiptap-slash-commands@1.0.3","gitHead":"2ba18a17803b411ce23a02eea9000feb62b686a4","description":"A Tiptap headless UI extension for Reach that adds a slash command menu for your project. Inspired by\r [@harshtalks/slash-tiptap](https://www.npmjs.com/package/@harshtalks/slash-tiptap) and [Novel](https://novel.sh/)","bugs":{"url":"https://github.com/bmin-mit/TabNote-Extension/issues"},"_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-dejId7PlLtKenFZUlLyeLqrdpO4NSewpObX77qh3yIJwZlxaV3HMpYgc+j6BvEOZ1YQc6e8A+HgvMuU5wt+k6A==","shasum":"36ab88ef9bf29085953c97f2c58ae60f7b023262","tarball":"https://registry.npmjs.org/@bmin-mit/tiptap-slash-commands/-/tiptap-slash-commands-1.0.3.tgz","fileCount":9,"unpackedSize":54680,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDzlsK2y/SojUEjrh8oFTQosqFforBhFhDPq6bh1Ou26QIhALGzGMiiGXycbwYBOYZ7kmzjIdzOf+M/e+0LEISDbnaQ"}]},"_npmUser":{"name":"bmmit","email":"bmmit.work@gmail.com"},"directories":{},"maintainers":[{"name":"bmmit","email":"bmmit.work@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tiptap-slash-commands_1.0.3_1765099316198_0.9582352201371573"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-07T08:29:52.572Z","modified":"2025-12-07T09:21:56.578Z","1.0.0":"2025-12-07T08:29:52.824Z","1.0.1":"2025-12-07T08:40:11.780Z","1.0.2":"2025-12-07T08:47:57.403Z","1.0.3":"2025-12-07T09:21:56.354Z"},"bugs":{"url":"https://github.com/bmin-mit/TabNote-Extension/issues"},"license":"MIT","homepage":"https://github.com/bmin-mit/TabNote-Extension/tree/main/packages/slash-commands","repository":{"type":"git","url":"git+https://github.com/bmin-mit/TabNote-Extension.git"},"maintainers":[{"name":"bmmit","email":"bmmit.work@gmail.com"}],"readme":"# A Headless Slash Commands Menu for Tiptap in React \r\n\r\nA Tiptap headless UI extension for Reach that adds a slash command menu for your project. Inspired by\r\n[@harshtalks/slash-tiptap](https://www.npmjs.com/package/@harshtalks/slash-tiptap) and [Novel](https://novel.sh/)\r\n\r\nIt uses `cmdk` for the command menu implementation.\r\n\r\nYou can find an example implementation at \r\n[TabNote Extension](https://github.com/bmin-mit/TabNote-Extension/tree/main/apps/web)\r\n\r\n## Why do we need another implementation for the slash menu when Novel and harshtalks already did it?\r\n\r\nWhen I was building TabNote, a Chrome extension that lets you take notes directly on your new tab page, I tried using\r\nboth **Novel** and **@harshtalks/slash-tiptap** for the slash menu feature.\r\n - **Novel’s implementation** is tightly coupled to its own editor configuration, making it difficult to reuse in standalone projects.\r\n - **@harshtalks/slash-tiptap** bundles Tiptap directly in its dependencies, which can lead to version conflicts if your project uses a different or newer version of Tiptap.\r\n\r\nTo address these issues in my own side project, I created this library. It treats Tiptap as a peer dependency, avoids\r\nshipping any unnecessary editor code, and provides a lightweight, focused extension that you can integrate into any\r\nrich text editor setup.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @bmin-mit/tiptap-slash-commands @tiptap/pm @tiptap/react @tiptap/suggestion\r\n# or\r\nyarn a @bmin-mit/tiptap-slash-commands @tiptap/pm @tiptap/react @tiptap/suggestion\r\n# or\r\npnpm i @bmin-mit/tiptap-slash-commands @tiptap/pm @tiptap/react @tiptap/suggestion\r\n# or\r\nbun i @bmin-mit/tiptap-slash-commands @tiptap/pm @tiptap/react @tiptap/suggestion\r\n```\r\n\r\n## Usage\r\n\r\n### 1. Configure the Extension\r\n\r\nAdd the extension and keyboard helper to your Tiptap editor configuration.\r\n\r\n```tsx\r\nimport { useEditor, EditorContent } from '@tiptap/react'\r\nimport { enableKeyboardNavigation, SlashCommandsExtension } from '@bmin-mit/tiptap-slash-commands'\r\n\r\nconst editor = useEditor({\r\n  extensions: [\r\n    SlashCommandsExtension,\r\n    // ... other extensions\r\n  ],\r\n  editorProps: {\r\n    handleDOMEvents: {\r\n        keydown: (_, v) => enableKeyboardNavigation(v),\r\n    },\r\n  },\r\n  // ...\r\n})\r\n```\r\n\r\n### 2. Setup the Component Tree\r\n\r\nWrap your editor and command menu with `SlashCommands.Root`. Use `SlashCommands.Commands` and `SlashCommands.List` to define the menu and `SlashCommands.Item` for each command.\r\nThe `SlashCommands` instance is already included in `cmdk`'s components like `Empty` (`SlashCommands.Empty`).\r\n\r\n```tsx\r\nimport { SlashCommands } from '@bmin-mit/tiptap-slash-commands'\r\n\r\nfunction MyEditor() {\r\n  // ... editor setup\r\n\r\n  return (\r\n    <SlashCommands.Root editor={editor}>\r\n      <EditorContent editor={editor} />\r\n      \r\n      <SlashCommands.Commands>\r\n        <SlashCommands.List>\r\n          <SlashCommands.Item \r\n            onCommand={({ editor, range }) => {\r\n              editor.chain().focus().deleteRange(range).setHeading({ level: 1 }).run()\r\n            }}\r\n          >\r\n            Heading 1\r\n          </SlashCommands.Item>\r\n          \r\n          <SlashCommands.Item \r\n            onCommand={({ editor, range }) => {\r\n              editor.chain().focus().deleteRange(range).setHeading({ level: 2 }).run()\r\n            }}\r\n          >\r\n            Heading 2\r\n          </SlashCommands.Item>\r\n          \r\n          <SlashCommands.Item \r\n            onCommand={({ editor, range }) => {\r\n              editor.chain().focus().deleteRange(range).setBulletList().run()\r\n            }}\r\n          >\r\n            Bullet List\r\n          </SlashCommands.Item>\r\n        </SlashCommands.List>\r\n      </SlashCommands.Commands>\r\n    </SlashCommands.Root>\r\n  )\r\n}\r\n```\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md","description":"A Tiptap headless UI extension for Reach that adds a slash command menu for your project. Inspired by\r [@harshtalks/slash-tiptap](https://www.npmjs.com/package/@harshtalks/slash-tiptap) and [Novel](https://novel.sh/)"}