@svuick/editor

Installation

npm i @svuick/editor

What is this?

This package provides an unstyled WYSIWYG text editor component using tiptap.

Example

This is a very basic implementation. For more complex examples look here.

Usage

<script lang="ts">
	import Editor from '@svuick/editor';
	import StarterKit from '@tiptap/starter-kit';
	import type { Level } from '@tiptap/extension-heading';

	let content = '';

	const headingLevels = [1, 2, 3] as Level[];
</script>

<Editor bind:content let:editor>
	<div>
		{#each headingLevels as level}
			<button
				on:click={() => editor.chain().focus().toggleHeading({ level }).run()}
				class:active={editor.isActive('heading', { level })}>H{level}</button
			>
		{/each}
		<button
			on:click={() => editor.chain().focus().setParagraph().run()}
			class:active={editor.isActive('paragraph')}>P</button
		>
		<button
			on:click={() => editor.chain().focus().toggleBold().run()}
			class:active={editor.isActive('bold')}>bold</button
		>
		<button
			on:click={() => editor.chain().focus().toggleItalic().run()}
			class:active={editor.isActive('italic')}>italic</button
		>
		<button
			on:click={() => editor.chain().focus().toggleStrike().run()}
			class:active={editor.isActive('strike')}>strike</button
		>
	</div>
</Editor>

<style>
	:global(.svuick-editor) {
		outline: none;
		padding: 0.5rem;
	}
</style>