Repository navigation
Enable editing inline content programatically #1858
Description
Is your feature request related to a problem? Please describe.
We need to change existing inline contents' properties programatically inside the editor.
For instance, changing a property of that inline content to change how it's rendered.
Describe the solution you'd like
Adding an updateInlineContent function/method akin to updateBlock.
This may require adding a unique identifier to all inline contents, just like for blocks.
Describe alternatives you've considered
I don't see an alternative.
Additional context
N/A
Bonus
[ ] I'm a sponsor and would appreciate if you could look into this sooner than later 💖
Activity
ClementEXWiki commentedon Jul 28, 2025
Re-reading this issue, I see that I forgot to mention this is very high priority for us (just like #1861).
Do you think this would be something complex to implement on your side? And if so, would there be any more simple alternative for us to do what we need while waiting for an implementation?
Thanks :)
YousefED commentedon Jul 28, 2025
ClementEXWiki commentedon Jul 28, 2025
The modifications can happen in many ways: it can be from an interaction with a button on the toolbar for instance, or it could be in a completely asynchronous way through an event.
One such case is: when you double-click on some specific inline contents, we open a modal to edit some parameters that define how that content is displayed. When closing the modal, the inline content is updated.
YousefED commentedon Jul 28, 2025
What might be helpful is that we pass a function
updateInlineContentto the ICrenderfunction. This is a bit limited but it should be able to cover your scenario, let me know if not.See:
BlockNote/packages/core/src/schema/inlineContent/createSpec.ts
Line 35 in 64eb00c
(Note that this is currently undocumented)
ClementEXWiki commentedon Jul 28, 2025
This should do the trick! All the modification functions are created inside our renderer.
I'll try that and tell you if it works. Thanks :)
EDIT: Actually I'm wrong, we sometimes to need to act based on an external event, not from inside the renderer. So we could hack a way to e.g. put a unique ID inside every inline content we use and register every single element inside some big hashmap, but it would be very hacky.
So if possible we would actually need a way to edit any inline content from the editor instance itself - which also means a way to identify uniquely inline contents in the document.
ClementEXWiki commentedon Jul 30, 2025
I implemented a register that puts all the update functions in a big map, but it's indeed very hacky, not ideal in terms of performance, and problematic in the way that it moves a function provided to a React function outside of React. So it may cause problems in the future.
So we indeed need to have a function to replace inline contents from the editor instance itself. Would that be possible?
YousefED commentedon Jul 30, 2025
Glad to hear the function in
renderalready addresses some cases.Can you explain the steps the user takes in the other scenarios? I want to learn the use-case on how you as developer and the user would know which IC needs to be updated
ClementEXWiki commentedon Jul 30, 2025
Of course, so basically we have a concept of "macros". These are custom blocks / inline contents that are added dynamically to the editor's schema before its initialization.
Each macro is an object with a name, a description, a set of parameters, etc. They also have a customized React render function to show the block / inline content inside the editor.
To edit a macro, you double-click on it. This calls a function that's provided to our library, we don't know what that function does. Usually it will open a custom modal, show informations about the macro itself, and when it's edited and submitted, the modal is closed and an event is sent back to our library, along with the changes.
We then need to reflect those changes on the selected macro instance. Obviously, the same macro can appear multiple times in the document, so we need to uniquely identify each and every one of them.
For blocks, it's easy: each BlockNote block has a unique ID and we have an update method to modify a block based on its ID.
But for inline contents we don't have any of these features, and that's what we need now.
The hack I currently do is when rendering the element, the double-click element handler will register the
updateInlineContentparameter in a global map, and when the edit event is fired back to the library, this map is used to find the update function. But this is both hacky, kind of slow, and not ideal as we are using a React parameter outside of React, which may break in future releases on BlockNote depending on how that function works under-the-hood. Plus, it requires to manually generate and store a unique ID in every macro inline content we use.So adding a unique
idproperty to inline contents (just like blocks have) and aneditor.updateInlineContentmethod (or something similar) would be very useful.ClementEXWiki commentedon Feb 2, 2026
Hi, I see this is now closed as "not planned". Is there a reason for this?