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

[BUG] imagePlugin triggers onChange when initializing the editor with content containing image url with ampersand #592

Open
2 tasks done
sandves opened this issue Sep 23, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@sandves
Copy link

sandves commented Sep 23, 2024

  • I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
  • I have read the documentation and cannot find an answer.

Describe the bug
When I initialize the MDXEditor with the imagePlugin enabled and content containing an image reference with a URL that contains an ampersand, I get an unwanted change event on the first render without the user interacting with the editor at all.

Here is a code snippet that helps to discuss the problem I am seeing:

<MDXEditor
    markdown={
      "![test-image](https://test.blob.net/foo/bar/1234/attachments/Screenshot.png?q1=foo&q2=bar)"
    }
    onChange={(content) => {
      console.log(content);
    }}
    plugins={[imagePlugin()]}
  />

Content passed in to the editor:
![test-image](https://test.blob.net/foo/bar/1234/attachments/Screenshot.png?q1=foo&q2=bar)

Content logged in the unwanted change event:
![test-image](https://test.blob.net/foo/bar/1234/attachments/Screenshot.png?q1=foo\&q2=bar)

The only difference I am able to spot is the backslash before the ampersand. It seems that the plugin escapes the ampersand which in turn triggers a change event.

If I pass in this content instead, onChange is not called:
![test-image](https://test.blob.net/foo/bar/1234/attachments/Screenshot.png?q1=foo\\&q2=bar)

Notice the double backslash before the ampersand.

This also seems to do the trick:
![test-image](https://test.blob.net/foo/bar/1234/attachments/Screenshot.png?q1=foo&amp;q2=bar)

Reproduction
Here is a codesandbox that reproduces the behaviour described above. As you can see in the console, the onChange is triggered after the first render without any interaction from the user or external changes to the markdown string.
https://codesandbox.io/p/devbox/suspicious-breeze-x8sfzs

Expected behavior
I expect the onChange not to be called unless the user actually makes changes to the content.

If escaping the URLs are necessary for it to be valid markdown, is there a helper method I could call instead to do the escaping of the content before passing it to the editor so that I can prevent the unwanted change event?
Another alternative would be to throw an error if the markdown passed to the editor is not valid markdown instead of converting it automatically and firing a callback. The this type of behaviour would be easier to spot and debug.

@sandves sandves added the bug Something isn't working label Sep 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant