The onUpdate event of the Table of Contents extension is stuck in an infinite loop.

[Dragg-io]

I’m not sure if I did something wrong, but whenever I set the onUpdate in the extension’s configuration, it goes into an infinite loop. Here's the code snippet showing how I added the extension:

'use client'
import { useEditor, EditorContent, NodeViewWrapper, mergeAttributes, EditorEvents } from '@tiptap/react';

import './styles/index.css';
import { useEffect, useRef, useState } from 'react';

import { extensions } from './extensions';
import { TableOfContents } from '@tiptap-pro/extension-table-of-contents'

export interface TipTapEditorProps {
  isEditable?: boolean;
  initialContent?: any;
  onCreate?: (content: EditorEvents["create"]) => void;
}

export function TipTapEditor({ isEditable = true, initialContent = {}, onCreate }: TipTapEditorProps) {

  const editor = useEditor({
    extensions: [
      ...extensions,
      TableOfContents.configure({
        anchorTypes: ['heading'],
        onUpdate(data, isCreate) {
          console.log('data', data);
        },
      }),
    ],
    content: initialContent,
    onCreate: onCreate
  });

  const menuContainerRef = useRef(null);

  return <div className='ProseMirror' ref={menuContainerRef}>
    <EditorContent editor={editor} />
  </div>;
}

Can someone help me?

[nperez0111]

You'll need to share more code than that. The onUpdate handler should not be an issue here

[Dragg-io]

Hi, i updated the post, but it's a simple component, I just call it inside a Next.js page

[nperez0111]

This code is still not enough. It does not show the on update function even. Or what the on create is doing.

You probably are re rendering your component in react too often.

Please diagnose this yourself this is going to take too long going back and forth it is definitely not the editor.

https://tiptap.dev/docs/guides/performance

[DhaniAM]

Have same issue here. In my case I use dynamic import for the extensions and somehow the table of contents extension cause the editor onTransaction to run on infinite loop. I have no issue though when using static import.

[nperez0111]

Why dynamically import the extensions? I could understand dynamically importing the editor, but the extensions separately?

That just seems overly complicated, since dynamic imports are async.

You'd need to show code to help with this.

[DhaniAM]

I just did some testing and I can confirm that in tiptap v2.10 has this bug where onUpdate in Table of Contents extension run on endless loop and cause editor onTransaction run on endless loop as well. I didn't have this issue on v2.9. (The dynamic import has nothing to do with this bug after some testing). When I remove the Table of Contents extension, the editor onTransaction runs normally.

[nperez0111]

Yea I just released a fix for Table of Contents in version 2.16.3
But, wasn't an issue with tiptap specifically