`autofocus` doesn't work with Hocuspocus

[Deckluhm]

What’s the bug you are facing?

While setting autofocus to start or 0 (which is, from my understanding, supposed to do the same thing?) with Hocuspocus as a back-end, it doesn't work as intended (focus being put at the end of the document).

I guess the issue is caused by Hocuspocus content being synchronized asynchronously, so the following is probably happening:

1. Editor is instantiated, empty
2. Focus is put at the start of the document
3. Content is loaded by the Collaboration extension and cursor/focus being "moved" to the end of the document (kind of "pushed" by the content)

It's just a guess, maybe it's something totally different.

Which browser was this experienced in? Are any special extensions installed?

Tested on Firefox 101.0 and Edge 102.0.1245.30 (both latest versions).

Extensions installed:

• Document
• Paragraph
• Text
• Collaboration (with Hocuspocus)

How can we reproduce the bug on our side?

Clone https://github.com/Deckluhm/tiptap-hocuspocus-autofocus and follow README instructions.

Can you provide a CodeSandbox?

See provided repository above.

What did you expect to happen?

autofocus: 'start' should work with Hocuspocus/Tiptap Collaboration extension.

Anything to add? (optional)

As a temporary workaround I tried to disable autofocus, listen to Hocuspocus provider synced event and manually call editor.commands.focus('start') but it's not working (probably because synced doesn't mean content has been rendered by Tiptap).

Did you update your dependencies?

• [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• [X] Yes, I’m a sponsor. 💖

[Alecyrus]

It is an expected behavior for the dependence( yUndoPlugin in y-prosemirror ) of Collaboration Extension. The initialization of yUndoPlugin() will put the cursor to the end of document.

You can copy the code of Collaboration Extension, remove yUndoPlugin() from 'addProseMirrorPlugins' method and register yUndoPlugin() manually in onCreate hook, and then you are able to put cursor to any position of the document. By the way, this workaround also fix redo/undo bug in https://github.com/ueberdosis/tiptap/issues/2761.

[Deckluhm]

Thank you for the quick response @Alecyrus.

I don't really understand why yUndoPlugin needs to focus the document? I will keep the issue opened as it seems to be a bug anyway (from a Tiptap standpoint).

[Alecyrus]

I have no time to dig in. Anyway, this issue is related to yUndoPlugin and UndoManager inyjs. Check the meta information by printing all transactions in onTransaction , you'll find something useful.

[davesnx]

I'm having similar issues here. Tried to workaround it without forking de yUndoPlugin.

Tried to replicate the behaviour inside a codesandbox, but I'm afraid isn't the same flow: https://codesandbox.io/s/tiptap-react-editor-forked-s7hvdk?file=/src/App.tsx

Running a callback "when content gets loaded for the first time" seems like the only possible solution at this point, but it's hard to make sure to work consistently relying on onConnect and a few conditionals.

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[Deckluhm]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

Just commenting because it is still an issue.

[codewitch]

for me the autofocus doesnt work at all with the collaboration extension enabled. Without it, it works well. I am also using hocuspocus.

Would it be possible for remove yUndoPlugin() from 'addProseMirrorPlugins' method and register yUndoPlugin() manually in onCreate hook, to be a permanent fix for the extension?

[cvakodobro]

any updates on this? autofocus is still useless when using a collaborative editor with a hocuspocus server.

[Alecyrus]

for me the autofocus doesnt work at all with the collaboration extension enabled. Without it, it works well. I am also using hocuspocus.

Would it be possible for remove yUndoPlugin() from 'addProseMirrorPlugins' method and register yUndoPlugin() manually in onCreate hook, to be a permanent fix for the extension?

@codewitch I prefer the upstream library to fix this problem. you can find more details here. the root cause is https://github.com/yjs/y-prosemirror/issues/114

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[Deckluhm]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

Just commenting because it is still an issue.

[vrepsys]

Encountered the same issue

[AnnieTJohn]

const ydoc = new Y.Doc()
const websocketProvider = new TiptapCollabProvider({
  appId: '7j9y6m10',
  name: room,
  document: ydoc,
})
websocketProvider.on("synced", (event) => {

            /**
             * Editor cursor position - Start
             */
            editor?.commands.focus('start');
            window.scrollTo(0, 0);
            /**
             * Editor cursor position - End
             */
 });

It's work fine... @vrepsys

[vrepsys]

@AnnieTJohn your solution doesn't work for me. It's flaky: it sometimes positions the cursor and scroll at the top, and sometimes doesn't. I guess depends if synced event fires before or after the rendering is finished.

[benkingcode]

Any fix for this?

[bgeils]

+1

[nperez0111]

The issue was upstream as mentioned here: https://github.com/ueberdosis/tiptap/issues/2840#issuecomment-1345574849

but it looks like there is a new release of y-prosemirror that should resolve this https://github.com/yjs/y-prosemirror/commit/a5a921a5f7c657c12f6d6e8f3c86fae6a9c9daa9

[EricHasegawa]

@nperez0111 this is not fixed for me with the y-prosemirror release you linked. When you say it should be resolved, has that been tested or verified on your end? For me it's not working

[nperez0111]

@EricHasegawa, if you are still seeing an issue then could you report it to y-prosemirror instead & link back here?

It is not an issue with tiptap per-se from what I understand. I have not tested nor verified this. I just happened to be checking on the y-prosemirror integration and saw it