feat(tts): replace words for TTS, closes #2057 (#2952)

apps/readest-app/src/app/reader/components/annotator/ProofreadPopup.tsx

@@ -43,6 +43,7 @@ const ProofreadPopup: React.FC<ProofreadPopupProps> = ({
   const [caseSensitive, setCaseSensitive] = useState(true);
   const [wholeWord, setWholeWord] = useState(!isPunctuationOnly(selection?.text || ''));
   const [scope, setScope] = useState<ProofreadScope>('selection');
+  const [onlyForTTS, setOnlyForTTS] = useState(false);
 
   const inputRef = useRef<HTMLInputElement>(null);
   useAutoFocus<HTMLInputElement>({ ref: inputRef });
@@ -89,6 +90,7 @@ const ProofreadPopup: React.FC<ProofreadPopupProps> = ({
         enabled: true,
         caseSensitive,
         wholeWord: wholeWord,
+        onlyForTTS: scope !== 'selection' ? onlyForTTS : undefined,
       };
       onConfirm?.(options);
 
@@ -96,7 +98,7 @@ const ProofreadPopup: React.FC<ProofreadPopupProps> = ({
 
       onDismiss();
 
-      if (scope !== 'selection') {
+      if (scope !== 'selection' && !onlyForTTS) {
         if (getView(bookKey)) {
           recreateViewer(envConfig, bookKey);
         }
@@ -162,7 +164,7 @@ const ProofreadPopup: React.FC<ProofreadPopupProps> = ({
           </div>
         </div>
 
-        <div className='flex items-center gap-8 p-4'>
+        <div className='flex flex-wrap items-center gap-4 p-4'>
           <label className='flex cursor-pointer items-center gap-2'>
             <span className='line-clamp-1 text-xs' title={_('Case sensitive:')}>
               {_('Case sensitive:')}
@@ -196,6 +198,24 @@ const ProofreadPopup: React.FC<ProofreadPopupProps> = ({
               onChange={(e) => setWholeWord(e.target.checked)}
             />
           </label>
+
+          <label className='flex cursor-pointer items-center gap-2'>
+            <span className='line-clamp-1 text-xs' title={_('Only for TTS:')}>
+              {_('Only for TTS:')}
+            </span>
+            <input
+              type='checkbox'
+              disabled={scope === 'selection'}
+              className='toggle toggle-sm bg-gray-500 checked:bg-black hover:bg-gray-500 hover:checked:bg-black'
+              style={
+                {
+                  '--tglbg': '#4B5563',
+                } as React.CSSProperties
+              }
+              checked={onlyForTTS}
+              onChange={(e) => setOnlyForTTS(e.target.checked)}
+            />
+          </label>
         </div>
         <div className='flex flex-1 items-center justify-between gap-2 p-4'>
           <label htmlFor='scope-select' className='line-clamp-1 text-xs' title={_('Scope:')}>