This case happened when I used a combination of tiptap and yjs. I wanted to create a multi-version history and then convert the version record into tiptap format. i also have reported this to tiptap : When i use Y.createDocFromSnapshot,then use TiptapTransformer.fromYdoc happen error · ueberdosis/tiptap · Discussion #5047 · GitHub
when i click createVersion, view will add a div,but i click this div, only the first will’not report error,when I create multiple historical div tags, I will get an error whenever I click on one that is not the first one. i find it that tiptap transformer actually use the y-prosemirror’s’yDocToProsemirrorJSON’ fucntion , happen error when converting to delta shema
this is the case code:
vue:
<template>
<div>person: <el-avatar v-for="user in users" :key="user.name"> {{ user.name }} </el-avatar>
<button class="create-btn" @click="createVersion">createVersion</button>
<button class="version-time" v-for="(version, index) in versionsRef" :key="index" @click="reverseThisVersion(version)">
{{new Date(version.date).toLocaleString()}}
</button>
</div>
<editor-content :editor="editor" />
<content-item-menu v-if="editor" :editor="editor"></content-item-menu>
<text-menu v-if="editor" :editor="editor"></text-menu>
</template>
js:
const createVersion = () => {
const versions = ydoc.getArray('versions')
const snapshot = Y.snapshot(ydoc)
versions.push([{
date: new Date().getTime(),
// snapshot: Y.encodeSnapshot(snapshot),
snapshot,
clientID: ydoc.clientID
}])
versionsRef.value = versions.toArray() as Array<object>
}
const reverseThisVersion = (version)=>{
const { snapshot } = version;
console.log('snapshot',snapshot)
const result = Y.createDocFromSnapshot(ydoc, snapshot);
console.log('result', result)
const node = TiptapTransformer.fromYdoc(result);
// happen error
console.log('node', node)
}
error message :
Uncaught TypeError: item.toDelta is not a function
at serialize (chunk-3S5FCWXE.js?v=80aede96:1148:26)
at Array.map (<anonymous>)
at yXmlFragmentToProsemirrorJSON (chunk-3S5FCWXE.js?v=80aede96:1185:20)
at yDocToProsemirrorJSON (chunk-3S5FCWXE.js?v=80aede96:1140:10)
at @hocuspocus_transformer.js?t=1712665928636&v=80aede96:2434:21
at Array.forEach (<anonymous>)
at Prosemirror.fromYdoc (@hocuspocus_transformer.js?t=1712665928636&v=80aede96:2433:15)
at Tiptap.fromYdoc (@hocuspocus_transformer.js?t=1712665928636&v=80aede96:2465:35)
at Proxy.reverseThisVersion ([fileId].vue:69:36)
at onClick ([fileId].vue:4:95)
gif img is : https://github.com/ueberdosis/tiptap/assets/29058747/378a75b1-6f63-411c-b55b-e9c577671b36