How to ignore unregistered namespaces in i18next (colons in strings) - i18next

Question

We use i18next in a CMS to power its internationalization features. Since developers can build however they want with the CMS there is opportunity for them to add l10n keys that include colons, including as part of HTML, such as Find more info here.
As has been documented, with default namespace separator settings i18next will think the colon is identifying a namespace/key pair. Since the CMS uses its own namespace (so devs won't accidentally overwrite UI strings), we don't have the option to turn off namespacing completely (with nsSeparator: false).
What I'm looking for is a way for i18next to only recognize registered namespaces as namespaces. So if we tell i18next that the valid namespaces are ['ns1', 'ns2'] and it receives Title: Subtitle, that string will be treated as a key, not a namespace/key pair.
I saw the loadNamespaces method, but that looks to simply register them to the ns option on the instance. Is there a way for i18next to essentially disallow any unregistered namespace?

Answer 1

This is definitely a workaround, but it doesn't feel too hackey, so I was comfortable using it indefinitely. It's been several weeks, so I don't remember if I got this from somewhere else, but it's possible, for the sake of not taking the credit if undeserved.
First, I added the appendNamespaceToMissingKey: true option to the init function. This adds the default namespace to any keys that don't already have a namespace. It also includes an unknown namespace (or something it thinks is a NS) with the "missing key" for parsing.
Then I added the parseMissingKeyHandler option assigned to the following function:
function (key) {
if (key.startsWith(`${this.defaultNS[0]}:`)) {
return key.slice(this.defaultNS[0].length + 1);
} else {
return key;
}
}
Since I didn't have to hard-code the namespace I felt okay with that.
So if a "key" comes in here with the default namespace, which will include all unlocalized strings without colons (e.g., 'Some text'), that namespace is removed and the string continues on normally. Since i18next doesn't have a value for that string, the string is printed as-is.
If an unlocalized string comes in containing a colon (e.g., '🏛', i18next thinks the first part before the colon is a namespace, so the default is not applied. Therefore this colon-ized string is returned from the function the same as it entered. Again, since i18next doesn't have a value for this string, the string is printed as-is. In this case, that includes the part before the colon as well as the colon separator. We end up with the full link HTML, for example.
So in addition to the other options in place, it looks like:
i18next.init({
...otherOptions,
appendNamespaceToMissingKey: true,
parseMissingKeyHandler (key) {
// We include namespaces with unrecognized l10n keys using
// `appendNamespaceToMissingKey: true`. This passes strings containing
// colons that were never meant to be localized through to the UI.
//
// Strings that do not include colons ("Content area") are given the
// default namespace by i18next ("translation," by default). Here we
// check if the key starts with that default namespace, meaning it
// belongs to no other registered namespace, then remove that default
// namespace before passing this through to be processed and displayed.
if (key.startsWith(`${this.defaultNS[0]}:`)) {
return key.slice(this.defaultNS[0].length + 1);
} else {
return key;
}
}
});
I'm including my code comment since you may also want to include something like this to remind yourself later why you include this convoluted handler.