From d6d61d3dd40f947290dc67f8cfa13c21f6f73f90 Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujit@lime-technology.com>
Date: Mon, 6 Jan 2025 14:31:17 -0500
Subject: [PATCH 1/2] fix(web): escaping html-encoded symbols like apostrophes
 in translations

---
 web/components/I18nHost.ce.vue | 12 ++++++++++--
 web/plugins/i18n.ts            |  9 ++++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/web/components/I18nHost.ce.vue b/web/components/I18nHost.ce.vue
index 79dc47267d..19320cee0a 100644
--- a/web/components/I18nHost.ce.vue
+++ b/web/components/I18nHost.ce.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import en_US from '~/locales/en_US.json';
 import { provide } from 'vue';
 import { createI18n, I18nInjectionKey } from 'vue-i18n';
 
-import en_US from '~/locales/en_US.json';
 // import ja from '~/locales/ja.json';
 
 const defaultLocale = 'en_US'; // ja, en_US
@@ -26,6 +26,7 @@ if (windowLocaleData) {
   }
 }
 
+const parser = new DOMParser();
 const i18n = createI18n<false>({
   legacy: false, // must set to `false`
   locale: nonDefaultLocale ? parsedLocale : defaultLocale,
@@ -34,7 +35,14 @@ const i18n = createI18n<false>({
     en_US,
     // ja,
     ...(nonDefaultLocale ? parsedMessages : {}),
-  }
+  },
+  /** safely decodes html-encoded symbols like &amp; and &apos; */
+  postTranslation(translated) {
+    if (typeof translated !== 'string') return translated;
+    // parseFromString interprets the string as HTML, then textContent reads the decoded text
+    const decoded = parser.parseFromString(translated, 'text/html').documentElement.textContent;
+    return decoded ?? translated;
+  },
 });
 
 provide(I18nInjectionKey, i18n);
diff --git a/web/plugins/i18n.ts b/web/plugins/i18n.ts
index 13ec59b3c2..41e4ba7a0f 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'; 
+const parser = new DOMParser();
 
 export default defineNuxtPlugin(({ vueApp }) => {
   const i18n = createI18n({
@@ -11,6 +12,12 @@ export default defineNuxtPlugin(({ vueApp }) => {
     messages: {
       en_US,  
     },
+    postTranslation(translated) {
+      if (typeof translated !== 'string') return translated;
+      // parseFromString interprets the string as HTML, then textContent reads the decoded text
+      const decoded = parser.parseFromString(translated, 'text/html').documentElement.textContent;
+      return decoded ?? translated; // fallback if somehow it's null
+    }
   });
 
   vueApp.use(i18n);

From 9cdff652fbd55925e28cc8b06af4d9da34b71855 Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujit@lime-technology.com>
Date: Mon, 6 Jan 2025 14:54:15 -0500
Subject: [PATCH 2/2] refactor(web): extract post-translation decoding

---
 web/components/I18nHost.ce.vue |  9 ++-------
 web/helpers/i18n-utils.ts      | 26 ++++++++++++++++++++++++++
 web/plugins/i18n.ts            |  9 ++-------
 3 files changed, 30 insertions(+), 14 deletions(-)
 create mode 100644 web/helpers/i18n-utils.ts

diff --git a/web/components/I18nHost.ce.vue b/web/components/I18nHost.ce.vue
index 19320cee0a..edd15b1e70 100644
--- a/web/components/I18nHost.ce.vue
+++ b/web/components/I18nHost.ce.vue
@@ -2,6 +2,7 @@
 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 ja from '~/locales/ja.json';
 
@@ -26,7 +27,6 @@ if (windowLocaleData) {
   }
 }
 
-const parser = new DOMParser();
 const i18n = createI18n<false>({
   legacy: false, // must set to `false`
   locale: nonDefaultLocale ? parsedLocale : defaultLocale,
@@ -37,12 +37,7 @@ const i18n = createI18n<false>({
     ...(nonDefaultLocale ? parsedMessages : {}),
   },
   /** safely decodes html-encoded symbols like &amp; and &apos; */
-  postTranslation(translated) {
-    if (typeof translated !== 'string') return translated;
-    // parseFromString interprets the string as HTML, then textContent reads the decoded text
-    const decoded = parser.parseFromString(translated, 'text/html').documentElement.textContent;
-    return decoded ?? translated;
-  },
+  postTranslation: createHtmlEntityDecoder(),
 });
 
 provide(I18nInjectionKey, i18n);
diff --git a/web/helpers/i18n-utils.ts b/web/helpers/i18n-utils.ts
new file mode 100644
index 0000000000..2c534bc544
--- /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 41e4ba7a0f..d9738ab918 100644
--- a/web/plugins/i18n.ts
+++ b/web/plugins/i18n.ts
@@ -1,7 +1,7 @@
 import { createI18n } from 'vue-i18n';
 
 import en_US from '@/locales/en_US.json'; 
-const parser = new DOMParser();
+import { createHtmlEntityDecoder } from '~/helpers/i18n-utils';
 
 export default defineNuxtPlugin(({ vueApp }) => {
   const i18n = createI18n({
@@ -12,12 +12,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
     messages: {
       en_US,  
     },
-    postTranslation(translated) {
-      if (typeof translated !== 'string') return translated;
-      // parseFromString interprets the string as HTML, then textContent reads the decoded text
-      const decoded = parser.parseFromString(translated, 'text/html').documentElement.textContent;
-      return decoded ?? translated; // fallback if somehow it's null
-    }
+    postTranslation: createHtmlEntityDecoder(),
   });
 
   vueApp.use(i18n);