Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sibiraj-s/svelte-tiptap

Svelte components for tiptap v2
https://github.com/sibiraj-s/svelte-tiptap

svelte tiptap tiptap-v2 wyswig-editor

Last synced: 6 days ago
JSON representation

Svelte components for tiptap v2

Awesome Lists containing this project

README 

        
# svelte-tiptap



> Svelte components for tiptap v2



[![Tests](https://github.com/sibiraj-s/svelte-tiptap/actions/workflows/tests.yml/badge.svg)](https://github.com/sibiraj-s/svelte-tiptap/actions/workflows/tests.yml)

[![NPM Version](https://badgen.net/npm/v/svelte-tiptap)](https://www.npmjs.com/package/svelte-tiptap)

[![Total Downloads](https://badgen.net/npm/dt/svelte-tiptap)](https://www.npmjs.com/package/svelte-tiptap)

[![Monthly Downloads](https://badgen.net/npm/dm/svelte-tiptap)](https://www.npmjs.com/package/svelte-tiptap)

[![License](https://badgen.net/npm/license/svelte-tiptap)](https://github.com/sibiraj-s/svelte-tiptap/blob/master/LICENSE)



## 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](https://www.tiptap.dev/).



For any issues with the editor. You may need to open the issue on [tiptap's repository](https://github.com/ueberdosis/tiptap/issues)



You can find some [examples for the editor here](./src/routes/)



## Usage



A Simple editor.



```svelte



  import { onMount } from 'svelte';

  import type { Readable } from 'svelte/store';

  import { createEditor, Editor, EditorContent } from 'svelte-tiptap';

  import StarterKit from '@tiptap/starter-kit';



  let editor = $state() as Readable<Editor>;



  onMount(() => {

    editor = createEditor({

      extensions: [StarterKit],

      content: `Hello world!`,

    });

  });



```



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



## Extensions



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



### Floating menu



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



The markup and styling are totally up to you.



```svelte



  import { EditorContent, FloatingMenu } from 'svelte-tiptap';



  // ...create the editor instance on mount



```



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



### Bubble Menu



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



  import { EditorContent, BubbleMenu } from 'svelte-tiptap';



  // ...create the editor instance on mount



```



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



### Create a Node Extension



```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);

  },

});

```



### Create a Component



```svelte



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

  import cx from 'clsx';

  import { NodeViewWrapper } from 'svelte-tiptap';



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



  const handleClick = () => {

    updateAttributes({ count: node.attrs.count + 1 });

  };



  Svelte Component



  


    

      This button has been clicked {node.attrs.count} times.

    

  



```



### Use the extension



```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.


      `,

  });

});

```



### Access/Update Attributes



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 });

};

```



### Dragging



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.



### Adding a content editable



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



```svelte



  import { NodeViewWrapper, NodeViewContent } from 'svelte-tiptap';



  Svelte Editable Component



  

  



```



The NodeViewWrapper and NodeViewContent components render a `
` HTML tag (`` for inline nodes),

but you can change that. For example `` should render a paragraph.

One limitation though: That tag must not change during runtime.



Refer: https://www.tiptap.dev/guide/node-views/react/#adding-a-content-editable



## Contributing



All types of contributions are welcome. See [CONTRIBUTING.md](./.github/CONTRIBUTING.md) to get started.