Commit

pwa/src/main.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
 import { registerSW } from 'virtual:pwa-register'
+import twemoji from 'twemoji'
 
 // Register service worker
 registerSW({
@@ -16,8 +17,41 @@ registerSW({
   },
 })
 
+// Initialize Twemoji after React renders
+const initTwemoji = () => {
+  twemoji.parse(document.body, {
+    folder: 'svg',
+    ext: '.svg',
+    base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/'
+  });
+};
+
+// Create a wrapper component that initializes Twemoji
+const TwemojiWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  useEffect(() => {
+    // Initial parse
+    initTwemoji();
+
+    // Set up MutationObserver to re-parse when DOM changes
+    const observer = new MutationObserver(() => {
+      initTwemoji();
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return <>{children}</>;
+};
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <TwemojiWrapper>
+      <App />
+    </TwemojiWrapper>
   </React.StrictMode>,
 )