[Documentation]: Svelte installation guide not compatible with Svelte 5

[rChaoz]

What’s the URL to the page you’re sending feedback for?

https://tiptap.dev/docs/editor/getting-started/install/svelte

What part of the documentation needs improvement?

The Svelte guide for TipTap is made for components with Svelte 4 syntax, i.e. without runes. In runes mode, state needs to be defined using $state(), and using editor = editor no longer works to trigger an update, as can be seen here.

For Svelte 5, instead, the new createSubscriber() API should be used, which can be used to manually tell Svelte when to trigger an update (i.e. on transaction). The code to make the editor reactive can look something like this (repl):

export function makeReactive(editor: Editor): Editor {
    const subscribe = createSubscriber((update) => {
        editor.on("transaction", update)
        return () => editor.off("transaction", update)
    })
    return new Proxy(editor, {
        get(editor, property, receiver) {
            subscribe()
            return Reflect.get(editor, property, receiver)
        },
    })
}

Or, without a proxy, but then has to be accessed using editor.current instead, which is not ideal as the editor itself doesn't change:

export function makeReactive(editor: Editor): Editor {
    const subscribe = createSubscriber((update) => {
        editor.on("transaction", update)
        return () => editor.off("transaction", update)
    })
    return {
        get current() {
            subscribe()
            return editor
        }
    }
}

[MentalGear]

Also run into this problem! Svelte 5 in runes mode is now the standard, and this should really be added to the official guide to ensure developers can actually use Svelte with TipTap.

[IcyFoxe]

After a lot of searching, I found a simple way to make TipTap work in Svelte 5 while still following the documentation. Maybe it's a bit of a workaround, but it works fine with the new rune system.

Basically you need to make these small changes to the tutorial to make it work in Svelte 5.

Before:

let element: Element | undefined;
let editor: Editor | undefined;

After:

let element: Element | undefined = $state();
let editor: Editor | undefined = $state();

Before:

onTransaction: () => {
  // force re-render so `editor.isActive` works as expected
  editor = editor;
},

After:

onTransaction: ({ editor: newEditor }) => {
  // force re-render so editor.isActive works as expected
  editor = undefined;
  editor = newEditor;
},

Everything else is the same as in the documentation.
Hope someone will find it useful. Feel free to correct me if there's a better approach.

---

Also, please update TipTap and the documentation to work correctly with Svelte 5. I really like this text editor, and I've been using it for a long time in Vue as well.

[MentalGear]

Thx all for your solution attempts. None of the above methods worked for me though, but getting the content from the editor and setting it manually to the :bindcontent value.

content = editor.state.doc.content.content[0].textContent

This highlights the need for an official solution (@bdbch & others might want to take a look).

EDIT: correction still not sovled: textContent/content only provides the text content, not the html content.

This is what actually did it for me:

        onTransaction: (event) => {
                let { editor: newEditor } = event

                // debugger
                editor = undefined
                editor = newEditor

                content = editor.getHTML()