[CodeHighlight] Prevent hightlight.js from throwing error when language is unknown

[songkeys]

What package has an issue

@mantine/code-highlight

Describe the bug

We get the result from highlight.js in this line without any error handling:

https://github.com/mantinedev/mantine/blob/a8e0dae3aeac876e0f016ca0b53922423661d6d3/src/mantine-code-highlight/src/use-highlight.ts#L11C46

which may resulting in the "Unknown language" error thrown by highlight.js in this line:

https://github.com/highlightjs/highlight.js/blob/17494c81dbade12834feedddf6fb208bcc9cbcce/src/highlight.js#L556

What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)

v7

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

User can sovle this by wrapping a ErrorBoundary anyway but that brings some extra work.

So I'm thinking of these solutions:

1. Fallbacking to language: plaintextif the language is unknown;
2. or, providing a languageFallback prop if the language is unknown;
3. or, providing a renderError prop if any error happens in the highlight and renders an alternative UI instead.

What do you think?

[rtivital]

How can we know that the language is unknown?

[songkeys]

We could call the getLanguage method beforehand?

[rtivital]

Why do you think it is a better idea to implement it on library side rather than on your application side?

[songkeys]

If developers like me encountering this problem, they might be rendering CodeHighlight with content from UGC (i.e. without control). The path to the solution will probably like: looking at the source code and figuring out the error coming from the underlying highlight.js library and uncatchable; choosing to

• either (if using pnpm, installinghighlight.jsthen) calling the getLanguage method to do the fallback themself,
• or using ErrorBoundary but will probably get other unwanted issues like Can an error boundary prevent React's error logging? facebook/react#15069

Though they are doable, neither seems ideal to me if this comes from a out-of-box UI library. Also it takes developer extra time and work to figure out and solve.

But I'm acceptable if the documentation gives a solution in this case? Like clarifying that the default built-in languages are listed here, and what to do if beyond the list.

[rtivital]

Fallback to plaintext was added in 7.2.1.