2 files changed, 25 insertions, 0 deletions
diff --git a/src/platform/polyfills.ts b/src/platform/polyfills.ts
index 3dbd13981..a64c2c33a 100644
--- a/src/platform/polyfills.ts
+++ b/src/platform/polyfills.ts
@@ -1,3 +1,5 @@
+import 'fast-text-encoding'
+import Graphemer from 'graphemer'
 export {}
 
 /**
@@ -48,3 +50,18 @@ globalThis.atob = (str: string): string => {
   }
   return result
 }
+
+const splitter = new Graphemer()
+globalThis.Intl = globalThis.Intl || {}
+
+// @ts-ignore we're polyfilling -prf
+globalThis.Intl.Segmenter =
+  // @ts-ignore we're polyfilling -prf
+  globalThis.Intl.Segmenter ||
+  class Segmenter {
+    constructor() {}
+    // NOTE
+    // this is not a precisely correct polyfill but it's sufficient for our needs
+    // -prf
+    segment = splitter.iterateGraphemes
+  }
diff --git a/src/platform/polyfills.web.ts b/src/platform/polyfills.web.ts
index 7a42f4887..e46963a6f 100644
--- a/src/platform/polyfills.web.ts
+++ b/src/platform/polyfills.web.ts
@@ -2,3 +2,11 @@
 
 // @ts-ignore whatever typescript wants to complain about here, I dont care about -prf
 window.setImmediate = (cb: () => void) => setTimeout(cb, 0)
+
+// @ts-ignore not on the TS signature due to bad support -prf
+if (!globalThis.Intl?.Segmenter) {
+  // NOTE loading as a separate script to reduce main bundle size, as this is only needed in FF -prf
+  const script = document.createElement('script')
+  script.setAttribute('src', '/static/js/intl-segmenter-polyfill.min.js')
+  document.head.appendChild(script)
+}