There is a small bug in the Exercism website. In the editor view if you select the ChatGPT tab from the top right corner and if you are not an insider a helpful text shows up. The problem is that instead of the text is rendered bold with the semantic <strong> element it appears as a raw text:
The raw text comes looks like this:
// https://github.com/exercism/website/blob/main/app/javascript/i18n/en/components-editor-ChatGptFeedback.ts#L17-L18
'chatGptUpsellContent.needHelpGettingUnstuckUnlockOurChatGPTIntegration':
'Need help getting unstuck? Unlock our <strong>ChatGPT Integration</strong> and extra mentoring slots, as well as Dark Mode, exclusive badges and more, when you donate to Exercism.',
The bug comes from this lines in the source code of the website:
The Exercism website uses the i18next library to correctly shows the appropriate language’s translated content. The t function returns the appropriate text for the language and the problem is that React renders the content as a raw text and ignores the elements and show them as raw text returned from that method.
There is a similar content in the same file as the problematic text which uses bold tag:
// https://github.com/exercism/website/blob/main/app/javascript/i18n/en/components-editor-ChatGptFeedback.ts#L8-L9
'chatGptDialog.noteChatGPT4IsSignificantlyBetter':
'Note: ChatGPT 4 is <bold>significantly</bold> better...'
When I check the code for it I see the Trans component used to correctly display that bold tag:
So the same component can be used to fix this issue like this:
<Trans
i18nKey="chatGptUpsellContent.needHelpGettingUnstuckUnlockOurChatGPTIntegration"
ns="components/editor/ChatGptFeedback"
components={{
strong: <strong className="font-semibold" />,
}}
/>
The example code should fix the issue in theory (because I didn’t and can’t test it in the codebase.)