Csmccarthy/intl html substitution (#183)

* prettier

src/components/App.tsx

@@ -69,15 +69,16 @@ export function App({
  });
 
  // Language setup
- const { language, handleChangeLanguage, messages, htmlTagVariables } = useLanguage({
- supportedLanguages,
- translationsLocation:
- // Order of priority:
- // 1. Take airgap.js data-messages
- // 2. Take consentManagerConfig.messages
- // 3. Look for translations locally
- settings.messages || config.messages || './translations',
- });
+ const { language, handleChangeLanguage, messages, htmlTagVariables } =
+ useLanguage({
+ supportedLanguages,
+ translationsLocation:
+ // Order of priority:
+ // 1. Take airgap.js data-messages
+ // 2. Take consentManagerConfig.messages
+ // 3. Look for translations locally
+ settings.messages || config.messages || './translations',
+ });
 
  // Create the `transcend` API
  const consentManagerAPI = makeConsentManagerAPI({

src/hooks/useLanguage.ts

@@ -177,7 +177,9 @@ export function useLanguage({
  const [messages, setMessages] = useState<TranslatedMessages | undefined>();
 
  // Store the HTML opening/closing tags we need to replace our tag variables with
- const [htmlTagVariables, setHtmlTagVariables] = useState<Record<string, string>>({});
+ const [htmlTagVariables, setHtmlTagVariables] = useState<
+ Record<string, string>
+ >({});
 
  // Load the default translations
  useEffect(() => {

src/utils/substitute-html.ts

@@ -10,19 +10,22 @@ import { TranslatedMessages } from '@transcend-io/internationalization';
  */
 export function substituteHtml(messages: TranslatedMessages): {
  /** The set of messages with their HTML opening/closing tags substituted */
- substitutedMessages: TranslatedMessages,
+ substitutedMessages: TranslatedMessages;
  /** The set of variables used to replace the substitutions with their corresponding HTML opening/closing tags */
- tagVariables: Record<string, string>
+ tagVariables: Record<string, string>;
 } {
- const substitutedMessages = { ...messages};
+ const substitutedMessages = { ...messages };
  const tagVariables: Record<string, string> = {};
  Object.entries(substitutedMessages).forEach(([key, rawMessage]) => {
  let placeholderMessage = rawMessage;
- const htmlTags = [...rawMessage.matchAll(/<[^>]+>/g)].flat()
+ const htmlTags = [...rawMessage.matchAll(/<[^>]+>/g)].flat();
  htmlTags.forEach((tag, idx) => {
  const uniqKey = key.replaceAll('.', '_');
- placeholderMessage = placeholderMessage.replace(tag, `{tcm_${uniqKey}_tag_match_${idx}}`);
- tagVariables[`tcm_${uniqKey}_tag_match_${idx}`] = tag
+ placeholderMessage = placeholderMessage.replace(
+ tag,
+ `{tcm_${uniqKey}_tag_match_${idx}}`,
+ );
+ tagVariables[`tcm_${uniqKey}_tag_match_${idx}`] = tag;
  });
  substitutedMessages[key] = placeholderMessage;
  });