Hello! First of all thanks for an amazing library that has been extremely useful for a ton of use cases 😄
Currently, I am using TipTap to display images and mathematical expressions (@tiptap-pro/extension-mathematics). To insert images, I am making my own custom image uploader that, when completed, will return the image URL via WebSocket. When I receive this URL, I insert the image in the editor:
The problem occurs when I have already inserted mathematical expressions to my editor because as soon as the image is inserted, the latex expression breaks. For instance, from an expression already inserted in the editor like this $x = cos(2)$ (correctly formatted), as soon as the image is uploaded I get this x=cos(2) x = cos(2) x=cos(2).
Notes
I've noticed that if I add a table instead of an image with something like editor.chain().focus().insertTable({ rows : 2, cols : 2, withHeaderRow : false }).run() on the useEffect, I still get the same issue. I assume this is not related to the setImage command then;
I am using a custom extension of the Image TipTap component, but the same issue occurs when I use the default TipTap Image component.
Will add some screenshots:
Original editor:
Editor after image upload:
What browser are you using?
Chrome
Code example
No response
What did you expect to happen?
I expected that Latex expressions wouldn't get broken when I inserted the image and that no content would appear duplicated.
Anything to add? (optional)
No response
Did you update your dependencies?
[X] Yes, I’ve updated my dependencies to use the latest version of all packages.
Which packages did you experience the bug in?
@tiptap-pro/extension-mathematics
What Tiptap version are you using?
2.2.0-rc.3
What’s the bug you are facing?
Hello! First of all thanks for an amazing library that has been extremely useful for a ton of use cases 😄 Currently, I am using TipTap to display images and mathematical expressions (@tiptap-pro/extension-mathematics). To insert images, I am making my own custom image uploader that, when completed, will return the image URL via WebSocket. When I receive this URL, I insert the image in the editor:
The problem occurs when I have already inserted mathematical expressions to my editor because as soon as the image is inserted, the latex expression breaks. For instance, from an expression already inserted in the editor like this
$x = cos(2)$
(correctly formatted), as soon as the image is uploaded I get thisx=cos(2) x = cos(2) x=cos(2)
.Notes
editor.chain().focus().insertTable({ rows : 2, cols : 2, withHeaderRow : false }).run()
on theuseEffect
, I still get the same issue. I assume this is not related to thesetImage
command then;Will add some screenshots: Original editor:
Editor after image upload:
What browser are you using?
Chrome
Code example
No response
What did you expect to happen?
I expected that Latex expressions wouldn't get broken when I inserted the image and that no content would appear duplicated.
Anything to add? (optional)
No response
Did you update your dependencies?
Are you sponsoring us?