Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Putting a watcher on blocks add / edition / removal #1541

Open
ClementEXWiki opened this issue Mar 18, 2025 · 3 comments
Open

Putting a watcher on blocks add / edition / removal #1541

ClementEXWiki opened this issue Mar 18, 2025 · 3 comments
Labels
enhancement New feature or request

Comments

@ClementEXWiki
Copy link

Is your feature request related to a problem? Please describe.
For a current project, I need to create some custom blocks that automatically change depending on the editor's content. One such block is a table of contents, which should be updated dynamically in real time as soon as headings are added / removed / modified anywhere in the editor.

Describe the solution you'd like
It would be extremely useful to have a way to observe some changes in the editor, specifically related to some block types. For instance, an API on the editor that runs a function as soon as a block of type heading is added / removed / modified.

Describe alternatives you've considered
There are alternatives but none are ideal:

  • Re-implementing the heading types (or other blocks if needed) and trigger an event manually when they are updated
  • Putting a listener on the editor to watch for any change, which would require to traverse the entire AST to find headings and make a diff against the previous state
  • Showing a button to manually refresh the ToC block's content, but this requires manual user interaction

Additional context
I gave an example with headings but it could really be anything else.

I have absolutely no idea how hard such a feature would be to implement in BlockNote

@ClementEXWiki ClementEXWiki added the enhancement New feature or request label Mar 18, 2025
@ClementEXWiki ClementEXWiki changed the title Blocks observer Putting a watcher on blocks add / edition / removal Mar 18, 2025
@YousefED
Copy link
Collaborator

We'd love to work on this as I think it would unlock all sorts of interesting scenarios.

I think we should implement it with some additional requirements in mind:

  • metadata about the source of the change (e.g. remote update, paste, user edit (typing), if we have this info)
  • in the case of a remote update: who made the change (not sure if we have this)
  • besides add / delete / update, we also need to think about what happens when a child block of a parent block has changed

Top of head; I see two ways to implement this:

  • derived from prosemirror changes (listen to transactions and detect changed ranges -> transform to the API we need)
  • alternatively, we could iterate through all blocks in the document with nodeToBlock and see which blocks have changed. Because we cache the return value of nodeToBlock, we should be able to compare this by reference, and it might not be as "expensive" as it sounds

@ClementEXWiki
Copy link
Author

That seems like a very good idea, having as much informations as we can will ensure the watcher won't be limited.

@nperez0111
Copy link
Contributor

I implemented something similar for Tiptap V3: ueberdosis/tiptap#6022

I went with the prosemirror change approach (since that was the most obvious for Tiptap).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants