Custom override closing tags rendered in Firefox

[dmaier-indeed]

As of the 7.4 update, custom component overrides that render children are rendering the closing tag in Firefox. This only occurs when the custom component render children; self-closing custom components render correctly. This rendered correctly in version 7.3.2

Code to reproduce

<Markdown
    options={{
        overrides: {
            CustomComponent: ({ children }) => <h3>Hello {children}</h3>
        }
    }}
>
    {'This will render the closing tag <CustomComponent>Drew</CustomComponent>'}
</Markdown>

Screenshots

Firefox (the bug occurs)

Chrome (bug does not occur)

[stevemckenzie]

Any workarounds for this? I want to be able to use the new renderRules feature but I am also experiencing this issue.

Update:

I just instead made a self closing custom tag to get around this issue for my case. Easy enough.

[dmaier-indeed]

@stevemckenzie yes I ended up doing the same thing. Instead of nesting, make the parent tag contain the child in its render function and make it self-closing

[rodeyseijkens]

We where running into the same issue on our application.

I saw that storybook rolled back to v7.1.8 too, this version works for us.

Tried 7.1.9 and it breaks again.

So we are sticking to v7.1.8 for now.

[seancdavis]

I was seeing similar behavior. Resolved by downgrading to 7.3.2 (7.4.0 was broken).

Noting that 7.1.8 and 7.1.9 also seemed to resolve my issues. (7.1.9 was not broken for me.)

[Juanxpeke]

Had the same issue on version 7.4.1, downgrading to 7.3.2 solved my problem.

[lukeapage]

The problem was introduced in 1583486

specifically this change:

and adding these 3 lines seems to fix the problem:

    if (typeA < typeB) {
      return -1;
    }

the reason is that array sort is not stable in firefox.

There are 2 other fixes:

1. adjust the ordering of all the rules. The problem is that self closing tag rule can end up higher in priority than the html tag rule. This causes self closing tags to be parsed first and the closing tag is then left over and parsed as text
2. implement a quicksort thats used instead of the native sort.

@quantizor Can you comment here on what the best fix would be and whether you want a Pr or you will take it from here?

[lukeapage]

Also, just to be ultra confusing, in index.cjs run through prettier:

but in index.modern.js

It looks like the latest 7.4.1 has been published with an out of date index.cjs....

[zegl]

Hey @quantizor. I'm willing to sponsor this issue and #542 with $100 (via polar.sh) to get it fixed.

[quantizor]

I will try and look at this tonight, thanks for your patience

[quantizor]

The problem was introduced in 1583486

specifically this change:

and adding these 3 lines seems to fix the problem:

    if (typeA < typeB) {
      return -1;
    }

the reason is that array sort is not stable in firefox.

There are 2 other fixes:

1. adjust the ordering of all the rules. The problem is that self closing tag rule can end up higher in priority than the html tag rule. This causes self closing tags to be parsed first and the closing tag is then left over and parsed as text
2. implement a quicksort thats used instead of the native sort.

@quantizor Can you comment here on what the best fix would be and whether you want a Pr or you will take it from here?

@lukeapage Did you end up making a PR for this? Looks easy enough to accept.

[lukeapage]

No, I was waiting to hear the correct fix. If you want me to I can but it will be tomorrow.

[quantizor]

Hey @quantizor. I'm willing to sponsor this issue and #542 with $100 (via polar.sh) to get it fixed.

@zegl Donations to my Github Sponsor profile are appreciated :) looking at this now

[quantizor]

Fixed in https://github.com/quantizor/markdown-to-jsx/releases/tag/v7.4.3