fix: Bugs predominate with sonner workaround.

package.json

@@ -42,7 +42,7 @@
     "react-hook-form": "^7.58.1",
     "react-textarea-autosize": "^8.5.3",
     "react-transition-group": "^4.4.5",
-    "sonner": "^2.0.5",
+    "sonner": "github:ujiro99/sonner",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.24.1"

src/components/App.tsx

@@ -16,7 +16,11 @@ import { Settings } from '@/services/settings'
 import { InvisibleItem } from '@/components/menu/InvisibleItem'
 import type { ShowToastParam } from '@/types'
 
-export function App() {
+type Props = {
+  rootElm: HTMLElement
+}
+
+export function App({ rootElm }: Props) {
   const [positionElm, setPositionElm] = useState<Element | null>(null)
   const [isHover, setIsHover] = useState<boolean>(false)
 
@@ -113,7 +117,7 @@ export function App() {
         <OpenInTab />
         <PageActionRunner />
         <PageActionRecorder />
-        <Toaster />
+        <Toaster cssContainer={rootElm} />
       </SelectContextProvider>
     </PageActionContextProvider>
   )

src/content_script.tsx

@@ -10,7 +10,7 @@ const mode = isDebug ? 'open' : 'closed' // 'open' for debugging
 const shadow = rootDom.attachShadow({ mode })
 shadow.innerHTML = icons
 const root = createRoot(shadow)
-root.render(<App />)
+root.render(<App rootElm={shadow as unknown as HTMLElement} />)
 
 const insertCss = (elm: ShadowRoot, filePath: string) => {
   const url = chrome.runtime.getURL(filePath)
@@ -36,13 +36,3 @@ window.addEventListener('beforeprint', () => {
 window.addEventListener('afterprint', () => {
   rootDom.style.display = 'block'
 })
-
-// For sonner
-// Move only one style element you put in to shadow-dom.
-let appended = false
-document.head.querySelectorAll('style').forEach((styleEl) => {
-  if (styleEl.textContent?.includes('[data-sonner-toaster]') && !appended) {
-    shadow.append(styleEl)
-    appended = true
-  }
-})