https://github.com/douganderson444/tapmenu
TapMenu - Tailwind Styled TipTap Menu
https://github.com/douganderson444/tapmenu
Last synced: 3 months ago
JSON representation
TapMenu - Tailwind Styled TipTap Menu
- Host: GitHub
- URL: https://github.com/douganderson444/tapmenu
- Owner: DougAnderson444
- Created: 2023-02-17T16:21:33.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-04-10T21:53:12.000Z (about 1 year ago)
- Last Synced: 2025-02-25T01:47:05.097Z (3 months ago)
- Language: HTML
- Homepage: https://douganderson444.github.io/tapmenu
- Size: 1.37 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TapMenu - Tailwind Styled TipTap Menu
Uses [Tiptap](https://tiptap.dev/), [Tailwindcss](https://tailwindcss.com/docs/guides/sveltekit) with [Iconify SVGs](https://iconify.design/) to make a contet menu.
- [x] [Menu](https://tiptap.dev/)
- [x] [Icons](https://www.npmjs.com/package/iconify-icon)
- [x] Slash Command for inserting while inline
## Demo
[View Demo](https://douganderson444.github.io/tapmenu/)
## Use
### Svelte
As shown in the `./src/routes/+page.svelte` demo code:
```svelte
import { TapMenu } from '@douganderson444/tapmenu';
console.log('Content is now: ', e.detail)}>
Hello Entry World! 🌍️
```
### Vanilla JS [Deprecated after v0.0.4]
Pass in the html `content` as a prop to enable the Menu to pop up when displaying it. Any changes will be propoated back on the `change` event for you to save/update, whatever
```js
import TapMenu from '@douganderson444/tapmenu/esm/TapMenu.svelte.js';
const contentedMenu = new TapMenu({
target: document.getElementById('target'),
props: {
content: '
Hello World 🌍️
'
}
});
contentedMenu.$on('change', (e) => {
console.log('Content is now: ', e.detail);
});
```
and
```html
```