hocuspocus: Exception on front-end when trying to update doc

I followed tutorial and done minimal setup, just to make it work, but i am receiving an exception on the front-end.

So, when i return document from onCreateDocument(data) on server side, i am receiving this error on front end:

Exception: 
TypeError: Cannot read property 'matchesNode' of null at EditorView.updateStateInner (webpack-internal:///./node_modules/prosemirror-view/dist/index.es.js:4765:43) at EditorView.updateState (webpack-internal:///./node_modules/prosemirror-view/dist/index.es.js:4736:8) at Editor.dispatchTransaction (webpack-internal:///./node_modules/@tiptap/core/dist/tiptap-core.esm.js:2407:19) at EditorView.dispatch (webpack-internal:///./node_modules/prosemirror-view/dist/index.es.js:5004:50) at eval (webpack-internal:///./node_modules/y-prosemirror/src/plugins/sync-plugin.js:301:28) at ProsemirrorBinding.eval [as mux] (webpack-internal:///./node_modules/lib0/mutex.js:37:9) at ProsemirrorBinding._forceRerender (webpack-internal:///./node_modules/y-prosemirror/src/plugins/sync-plugin.js:297:10) at eval (webpack-internal:///./node_modules/y-prosemirror/src/plugins/sync-plugin.js:156:17)
message: "Cannot read property 'matchesNode' of null"

Hocuspocus setup method:

async onCreateDocument(data) {
	try {
		const prosemirrorDocument = JSON.parse(
			`{
				"type": "doc",
				"content": [{ "type": "paragraph", "content": [] }]
			}`
		);

		// When using the tiptap editor we need the schema to create
		// a prosemirror JSON. You can use the `getSchema` method and
		// pass it all the tiptap extensions you're using in the frontend
		const schema = getSchema([ Document, Paragraph, Text ]);

		// Convert the prosemirror JSON to a Y-Doc and simply return it
		const result = prosemirrorJSONToYDoc(schema, prosemirrorDocument);
		return result;
		// return data.document;
	} catch(e) {
		console.log(e);
	}
}

This is front-end setup:

mounted() {
    const ydoc = new Y.Doc();
    this.provider = new WebsocketProvider(process.env.VUE_APP_WS_ENDPOINT, 'tiptap-collaboration-example', ydoc);
    this.provider.on('status', event => {
      this.status = event.status;
    });

   this.editor = new Editor({
      extensions: [
	Document,
        Paragraph,
        Text,
	CollaborationCursor.configure({
          provider: this.provider,
          user: this.currentUser,
          onUpdate: users => {
            this.users = users;
          },
        }),
        Collaboration.configure({ document: ydoc }),
	],
	});

			this.updateCurrentUser({
				name: this.getRandomName(),
				color: this.getRandomColor()
			});

		localStorage.setItem('currentUser', JSON.stringify(this.currentUser));
	},

Those are the library versions that i am using on the front-end:

"@tiptap/vue-2": "^2.0.0-beta.1",
"@tiptap/starter-kit": "^2.0.0-beta.3",
"@tiptap/core": "^2.0.0-beta.2",
"@tiptap/extension-underline": "^2.0.0-beta.1",
"@tiptap/extension-image": "^2.0.0-beta.1",
"prosemirror-commands": "^1.1.7",
"@tiptap/extension-collaboration": "^2.0.0-beta.3",
"@tiptap/extension-collaboration-cursor": "^2.0.0-beta.3",
"yjs": "^13.5.2",
"y-websocket": "^1.3.11"

Any thoughts what am i doing wrong?

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 20 (3 by maintainers)

Most upvoted comments

Awesome, congrats! We’re always happy to help. 😃

kriskbx on Mar 30, 2021

The old collaborative editing system should still work, but we don’t plan to port the extensions. We’ve had this in production and had so much trouble with it. Y.js is way more robust and better in many ways.

I want to get this working for you. Sorry for all the bumps. 😃

I’ve set up a test project, see the complete code below. It doesn’t throw the exception you’re describing, but I don’t see the content in the editor though. I’ll look into this.

import { Server } from '@hocuspocus/server'
import { Logger } from '@hocuspocus/logger'

import { getSchema } from '@tiptap/core'
import { Document } from '@tiptap/extension-document'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Text } from '@tiptap/extension-text'

import { prosemirrorJSONToYDoc } from 'y-prosemirror'

const server = Server.configure({
  async onCreateDocument(data) {
    const prosemirrorDocument = {
      type: 'doc',
      content: [
        {
          type: 'paragraph',
          content: [
            {
              type: 'text',
              text: 'Example Text',
            }
          ]
        }
      ]
    }

    const schema = getSchema([Document, Paragraph, Text])
    const ydoc = prosemirrorJSONToYDoc(schema, prosemirrorDocument, 'default')

    console.log('onCreateDocument', ydoc.toJSON())

    return ydoc
  },

  extensions: [
    new Logger,
  ],
})

server.listen()

hanspagel on Mar 15, 2021

It is working now, thank you! 😃

zeljko-bulatovic on Mar 30, 2021

FYI: If you used any extension - for example the RocksDB extension - you need to update your package.json. We just renamed all extensions. @hocuspocus/rocksdb is now called @hocuspocus/extension-rocksdb and @hocuspocus/logger is now called @hocuspocus/extension-logger.

kriskbx on Mar 25, 2021

Sorry, I didn’t find the time to test the store page yet and that’s why I didn’t write you an answer here. Glad it works now! No worries, take your time. 😃

kriskbx on Mar 24, 2021

Hey guys, i just tried and saw that you fixed the store page. It looks like that my auth token is now changed, and after npmrc update with the new token, I was able to download alpha.37 version! I will let you know how it is working…

zeljko-bulatovic on Mar 22, 2021