search

mdx-editor / editor

A rich text editor React component for markdown
https://mdxeditor.dev
MIT License
1.63k stars 131 forks source link

[BUG] Mask id not unique #426

Closed IMBeniamin closed 3 months ago

IMBeniamin commented 3 months ago

If you want to ask for support or request features, sponsor the project and contact me over email.

Describe the bug The mask id declared for the editor icon is not unique and causes issues when having multiple instances of which one is hidden

Reproduction codesandbox link

To Reproduce Steps to reproduce the behavior:

  1. Create at least 2 editor instances
  2. Change the visibility of the first instance
  3. Enjoy the extra blank space instead of the buttons in the second editor

Expected behavior Icons should be visible on all instances even if one or more instances are hidden

Screenshots image image image

Desktop (please complete the following information):

Additional context Refer to this issue on devexpress's support forum for the original troubleshooting

petyosi commented 3 months ago

I think I explored this at some point, it's a matter of svgr configuration. Happy to accept a PR. On a side note, it's great that you're a devexpress customer. A sponsorship of the MDXEditor project would help me to prioritize my work on problems like this one and further feature development.

david10sing commented 3 months ago

@petyosi

I tried to have look at this and not sure that SVGR config would help here.

We could force visibility on mask elements to alway be visible with !important to avoid visibility: hidden being inherited.

If we want really unique ids for each instance of the svg, then it would require a bit of time.

Thoughts on which path you would prefer?

Cheers

petyosi commented 3 months ago

@david10sing I'm even thinking about using spritesheet for the icons, some authors mention it as more performant.

Alternatively, I can rework the icons to not use masks, but this would require a bit of leveling up of my figma skills :).

github-actions[bot] commented 3 months ago

:tada: This issue has been resolved in version 3.0.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

david10sing commented 3 months ago

Thanks @petyosi

I was wondering too why the mask was needed...