TapMenu - Tailwind Styled TipTap Menu

Uses Tiptap, Tailwindcss with Iconify SVGs to make a contet menu.

• [x] Menu
• [x] Icons
• [x] Slash Command for inserting while inline

Demo

View Demo

Use

Svelte

As shown in the ./src/routes/+page.svelte demo code:

<script>
	import { TapMenu } from '@douganderson444/tapmenu';
</script>

<TapMenu on:change={(e) => console.log('Content is now: ', e.detail)}>
	<p>Hello Entry World! 🌍️</p>
</TapMenu>

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

import TapMenu from '@douganderson444/tapmenu/esm/TapMenu.svelte.js';

const contentedMenu = new TapMenu({
	target: document.getElementById('target'),
	props: {
		content: '<p>Hello World 🌍️<p>'
	}
});

contentedMenu.$on('change', (e) => {
	console.log('Content is now: ', e.detail);
});

and

<div id="target"><div></div></div>