Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
rChaoz opened this issue Jan 14, 2025 · 0 comments
Open
Labels
Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Type: Documentation The issue or pullrequest is related to documentation

Comments

@rChaoz
Copy link

rChaoz commented Jan 14, 2025

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
        }
    }
}
@rChaoz rChaoz added Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Type: Documentation The issue or pullrequest is related to documentation labels Jan 14, 2025
@rChaoz rChaoz changed the title [Documentation]: Svelte installation guide not working for Svelte 5 components [Documentation]: Svelte installation guide not compatible with Svelte 5 Jan 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Type: Documentation The issue or pullrequest is related to documentation
Projects
None yet
Development

No branches or pull requests

1 participant