ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
27.74k stars 2.31k forks source link

[Bug]: Inserting images with useEffect breaks mathmatical expressions #4378

Open sarasilvaworkera opened 1 year ago

sarasilvaworkera commented 1 year ago

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:

useEffect(() => {
    if (channel && editor) {
      // Listeners
      channel.on(`test:image-upload-complete:${channelToken}`, (data) => {
         editor.chain().setImage({ src : data.url }).focus().run();
      });
  }, [channel, channelToken, editor, id]);

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

Will add some screenshots: Original editor: image

Editor after image upload: image

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?

sarasilvaworkera commented 1 year ago

@bdbch @svenadlung any updates on this?