fix: refresh paragragh

.changeset/sour-ears-run.md

@@ -0,0 +1,5 @@
+---
+'novel-speech-synthesis': patch
+---
+
+fix: refresh paragragh

packages/novel-speech-synthesis/src/adapter/index.ts

@@ -1,5 +1,5 @@
 import { Route, RouterOptions } from 'shared'
-import { SpeechOptions } from '../speech'
+import Speech, { SpeechOptions } from '../speech'
 
 type Adapter = Omit<RouterOptions, 'routes'> & {
   routes: (Partial<Route> & { speech?: SpeechOptions })[]
@@ -54,6 +54,21 @@ export const adapters: Adapter[] = [
               ?.click()
           },
         },
+        run() {
+          const speech = new Speech(this.speech!)
+
+          const ob = new MutationObserver(() => {
+            if (
+              speech.paragraphList.length !== speech.opts.getParagraph().length
+            ) {
+              speech.setupParagraph()
+            }
+          })
+
+          ob.observe(document.querySelector('.read-content')!, {
+            childList: true,
+          })
+        },
       },
     ],
   },
@@ -77,6 +92,21 @@ export const adapters: Adapter[] = [
               ?.click()
           },
         },
+        run() {
+          const speech = new Speech(this.speech!)
+
+          const ob = new MutationObserver(() => {
+            if (
+              speech.paragraphList.length !== speech.opts.getParagraph().length
+            ) {
+              speech.setupParagraph()
+            }
+          })
+
+          ob.observe(document.querySelector('#acontentz')!, {
+            childList: true,
+          })
+        },
       },
     ],
   },

packages/novel-speech-synthesis/src/index.ts

@@ -9,8 +9,9 @@ adapters.forEach((adapter) => {
       return {
         ...route,
         run: () => {
-          route.run?.()
-          if (route.speech) new Speech(route.speech)
+          if (route.run) {
+            route.run()
+          } else if (route.speech) new Speech(route.speech)
         },
       }
     }),

packages/novel-speech-synthesis/src/speech/index.ts

@@ -30,23 +30,29 @@ export default class Speech {
     disabled: false,
   }
   private voices: SpeechSynthesisVoice[] = []
-  private paragraphList = [] as HTMLElement[]
+  paragraphList: HTMLElement[] = []
+  private paragraphDisposeList: (() => void)[] = []
 
   private speakDispose: (() => void) | null = null
-  drag!: Drag
+  private drag!: Drag
 
-  constructor(private opts: SpeechOptions) {
+  constructor(public opts: SpeechOptions) {
     this.loadUtterance()
-    this.washContent()
+    this.setupParagraph()
     this.createUI()
   }
 
-  private washContent() {
+  setupParagraph() {
+    if (this.paragraphDisposeList.length) {
+      this.paragraphDisposeList.forEach((fn) => fn())
+      this.paragraphDisposeList = []
+    }
+
     this.paragraphList = this.opts.getParagraph()
-    this.paragraphList.forEach((p, idx) => {
+    this.paragraphDisposeList = this.paragraphList.map((p, idx) => {
       p.setAttribute('data-speech-idx', idx.toString())
 
-      p.addEventListener('click', () => {
+      const fn = () => {
         if (this.utterance.disabled) return
 
         let current = idx
@@ -66,7 +72,14 @@ export default class Speech {
           cancel = true
         }
         speak()
-      })
+      }
+
+      p.addEventListener('click', fn)
+
+      return () => {
+        p.removeAttribute('data-speech-idx')
+        p.removeEventListener('click', fn)
+      }
     })
   }