svelte-tiptap

> Svelte components for tiptap v2


Installation

``bash
npm i svelte-tiptap


or


yarn add svelte-tiptap
`

> [!NOTE]
> This package just provides components for svelte. For configuring/customizing the editor, refer tiptap's official documentation.

For any issues with the editor. You may need to open the issue on tiptap's repository

You can find some examples for the editor here

Usage

A Simple editor.

`svelte



`

Refer https://www.tiptap.dev/api/commands/ for available commands

Extensions

Refer: https://www.tiptap.dev/api/extensions

$3

This will make a contextual menu appear near a selection of text.

The markup and styling are totally up to you.

`svelte




`

Refer: https://www.tiptap.dev/api/extensions/floating-menu

$3

This will make a contextual menu appear near a selection of text. Use it to let users apply marks to their text selection.

The markup and styling are totally up to you.

`svelte




`

Refer: https://www.tiptap.dev/api/extensions/bubble-menu

SvelteNodeViewRenderer

SvelteNodeViewRenderer enables rendering Svelte Components as NodeViews. The following is an example for creating a counter component

$3

`ts
import { Node, mergeAttributes } from '@tiptap/core';
import { SvelteNodeViewRenderer } from 'svelte-tiptap';

import CounterComponent from './Counter.svelte';

export const SvelteCounterExtension = Node.create({
name: 'svelteCounterComponent',
group: 'block',
atom: true,
draggable: true, // Optional: to make the node draggable
inline: false,

addAttributes() {
return {
count: {
default: 0,
},
};
},

parseHTML() {
return [{ tag: 'svelte-counter-component' }];
},

renderHTML({ HTMLAttributes }) {
return ['svelte-counter-component', mergeAttributes(HTMLAttributes)];
},

addNodeView() {
return SvelteNodeViewRenderer(CounterComponent);
},
});
`

$3

`svelte



Svelte Component



`

$3

`ts
import { onMount, onDestroy } from 'svelte';
import type { Readable } from 'svelte/store';
import { Editor, EditorContent } from 'svelte-tiptap';
import StarterKit from '@tiptap/starter-kit';

import { SvelteCounterExtension } from './SvelteExtension';

let editor = $state() as Readable;

onMount(() => {
editor = createEditor({
extensions: [StarterKit, SvelteCounterExtension],
content:

This is still the text editor you’re used to, but enriched with node views.

Did you see that? That’s a Svelte component. We are really living in the future.

,
});
});
`

$3

Refer https://www.tiptap.dev/guide/node-views/react/#all-available-props for the list of all available attributes. You can access them like

`ts
import type { NodeViewProps } from '@tiptap/core';

let { node, updateAttributes }: NodeViewProps = $props();

// update attributes
const handleClick = () => {
updateAttributes({ count: node.attrs.count + 1 });
};
`

$3

To make your node views draggable, set draggable: true in the extension and add data-drag-handle to the DOM element that should function as the drag handle.

$3

There is another action called editable which helps you adding editable content to your node view. Here is an example.

`svelte



Svelte Editable Component




`

The NodeViewWrapper and NodeViewContent components render a