From 4ee42a6cf6a6e99bcccb2be336fa7c7fa69ec40e Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujit@lime-technology.com>
Date: Mon, 6 Jan 2025 14:59:36 -0500
Subject: [PATCH] fix(web): escaping html-encoded symbols like apostrophes in
 translations (#1002)

e.g. end user would see `&apos;` from translations
---
 web/components/I18nHost.ce.vue |  7 +++++--
 web/helpers/i18n-utils.ts      | 26 ++++++++++++++++++++++++++
 web/plugins/i18n.ts            |  4 +++-
 3 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 web/helpers/i18n-utils.ts

diff --git a/web/components/I18nHost.ce.vue b/web/components/I18nHost.ce.vue
index 79dc47267..edd15b1e7 100644
--- a/web/components/I18nHost.ce.vue
+++ b/web/components/I18nHost.ce.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
+import en_US from '~/locales/en_US.json';
 import { provide } from 'vue';
 import { createI18n, I18nInjectionKey } from 'vue-i18n';
+import { createHtmlEntityDecoder } from '~/helpers/i18n-utils';
 
-import en_US from '~/locales/en_US.json';
 // import ja from '~/locales/ja.json';
 
 const defaultLocale = 'en_US'; // ja, en_US
@@ -34,7 +35,9 @@ const i18n = createI18n<false>({
     en_US,
     // ja,
     ...(nonDefaultLocale ? parsedMessages : {}),
-  }
+  },
+  /** safely decodes html-encoded symbols like &amp; and &apos; */
+  postTranslation: createHtmlEntityDecoder(),
 });
 
 provide(I18nInjectionKey, i18n);
diff --git a/web/helpers/i18n-utils.ts b/web/helpers/i18n-utils.ts
new file mode 100644
index 000000000..2c534bc54
--- /dev/null
+++ b/web/helpers/i18n-utils.ts
@@ -0,0 +1,26 @@
+/**
+ * Creates a post-translation function that decodes HTML entities in translated strings.
+ * This function is typically used with createI18n to handle HTML-encoded translations.
+ * 
+ * @returns A function that takes a translated value and decodes any HTML entities if it's a string.
+ *          If the input is not a string, it returns the original value unchanged.
+ * 
+ * @example
+ * const decode = createHtmlEntityDecoder();
+ * decode("&amp;"); // Returns "&"
+ * decode(123); // Returns 123
+ * const i18n = createI18n({
+ *  // ... other options
+ *  postTranslation(translated) {
+ *   return decode(translated);
+ *  },
+ * });
+ */
+export const createHtmlEntityDecoder = () => {
+    const parser = new DOMParser();
+    return <T>(translated: T) => {
+        if (typeof translated !== 'string') return translated;
+        const decoded = parser.parseFromString(translated, 'text/html').documentElement.textContent;
+        return decoded ?? translated;
+    };
+};
diff --git a/web/plugins/i18n.ts b/web/plugins/i18n.ts
index 13ec59b3c..d9738ab91 100644
--- a/web/plugins/i18n.ts
+++ b/web/plugins/i18n.ts
@@ -1,6 +1,7 @@
 import { createI18n } from 'vue-i18n';
 
-import en_US from '@/locales/en_US.json';  
+import en_US from '@/locales/en_US.json'; 
+import { createHtmlEntityDecoder } from '~/helpers/i18n-utils';
 
 export default defineNuxtPlugin(({ vueApp }) => {
   const i18n = createI18n({
@@ -11,6 +12,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
     messages: {
       en_US,  
     },
+    postTranslation: createHtmlEntityDecoder(),
   });
 
   vueApp.use(i18n);