ueberdosis/tiptap

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

Open

#6,025 创建于 2025年1月14日

在 GitHub 查看
 (7 评论) (6 反应) (1 负责人)TypeScript (1,979 fork)batch import
area: docscomplexity: easygood first issueimpact: medium

仓库指标

Star
 (23,454 star)
PR 合并指标
 (平均合并 4天 13小时) (30 天内合并 46 个 PR)

描述

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

贡献者指南