From 52646af15ebce6c7f8783fe45463c7cc70fcad19 Mon Sep 17 00:00:00 2001
From: KaiyiWing <Zhang.kaiyi42@gmail.com>
Date: Wed, 19 Apr 2023 02:32:48 +0800
Subject: [PATCH] feat: add isTextSelectable switcher

---
 .../CurrentWord/components/Phonetic/index.tsx |  9 ++++++--
 .../components/Translation/index.tsx          | 12 +++++++++-
 .../CurrentWord/components/Word/Letter.tsx    |  2 +-
 .../CurrentWord/components/Word/index.tsx     |  7 ++++--
 .../components/Setting/AdvancedSetting.tsx    | 22 ++++++++++++++++++-
 src/store/index.ts                            |  2 ++
 6 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/pages/Typing/components/CurrentWord/components/Phonetic/index.tsx b/src/pages/Typing/components/CurrentWord/components/Phonetic/index.tsx
index 0a55bcce..3266d680 100644
--- a/src/pages/Typing/components/CurrentWord/components/Phonetic/index.tsx
+++ b/src/pages/Typing/components/CurrentWord/components/Phonetic/index.tsx
@@ -1,4 +1,4 @@
-import { phoneticConfigAtom } from '@/store'
+import { isTextSelectableAtom, phoneticConfigAtom } from '@/store'
 import { Word } from '@/typings'
 import { useAtomValue } from 'jotai'
 
@@ -8,9 +8,14 @@ export type PhoneticProps = {
 
 function Phonetic({ word }: PhoneticProps) {
   const phoneticConfig = useAtomValue(phoneticConfigAtom)
+  const isTextSelectable = useAtomValue(isTextSelectableAtom)
 
   return (
-    <div className="space-x-5 pt-1 text-center text-sm font-normal text-gray-600 transition-colors duration-300 dark:text-gray-400">
+    <div
+      className={`space-x-5 pt-1 text-center text-sm font-normal text-gray-600 transition-colors duration-300 dark:text-gray-400 ${
+        !isTextSelectable && 'select-none'
+      }`}
+    >
       {phoneticConfig.type === 'us' && word.usphone && word.usphone.length > 1 && <span>{`AmE: [${word.usphone}]`}</span>}
       {phoneticConfig.type === 'uk' && word.ukphone && word.ukphone.length > 1 && <span>{`BrE: [${word.ukphone}]`}</span>}
     </div>
diff --git a/src/pages/Typing/components/CurrentWord/components/Translation/index.tsx b/src/pages/Typing/components/CurrentWord/components/Translation/index.tsx
index e9fb9170..e8dc94e2 100644
--- a/src/pages/Typing/components/CurrentWord/components/Translation/index.tsx
+++ b/src/pages/Typing/components/CurrentWord/components/Translation/index.tsx
@@ -1,8 +1,18 @@
+import { isTextSelectableAtom } from '@/store'
+import { useAtomValue } from 'jotai'
+
 export type TranslationProps = {
   trans: string
 }
 export default function Translation({ trans }: TranslationProps) {
+  const isTextSelectable = useAtomValue(isTextSelectableAtom)
   return (
-    <div className="max-w-4xl pb-4 pt-5 font-sans text-lg transition-colors duration-300 dark:text-white dark:text-opacity-80">{trans}</div>
+    <div
+      className={`max-w-4xl pb-4 pt-5 font-sans text-lg transition-colors duration-300 dark:text-white dark:text-opacity-80 ${
+        !isTextSelectable && 'select-none'
+      }`}
+    >
+      {trans}
+    </div>
   )
 }
diff --git a/src/pages/Typing/components/CurrentWord/components/Word/Letter.tsx b/src/pages/Typing/components/CurrentWord/components/Word/Letter.tsx
index 662887cd..346f8fc5 100644
--- a/src/pages/Typing/components/CurrentWord/components/Word/Letter.tsx
+++ b/src/pages/Typing/components/CurrentWord/components/Word/Letter.tsx
@@ -24,7 +24,7 @@ export type LetterProps = {
 
 const Letter: React.FC<LetterProps> = ({ letter, state = 'normal', visible = true }) => (
   <span
-    className={`m-0 select-none p-0 font-mono text-5xl font-normal ${
+    className={`m-0 p-0 font-mono text-5xl font-normal ${
       stateClassNameMap[(letter === EXPLICIT_SPACE) as unknown as string][state]
     } pr-0.8 duration-0 dark:text-opacity-80`}
   >
diff --git a/src/pages/Typing/components/CurrentWord/components/Word/index.tsx b/src/pages/Typing/components/CurrentWord/components/Word/index.tsx
index 34f813bb..1243ae4e 100644
--- a/src/pages/Typing/components/CurrentWord/components/Word/index.tsx
+++ b/src/pages/Typing/components/CurrentWord/components/Word/index.tsx
@@ -6,7 +6,7 @@ import style from './index.module.css'
 import { EXPLICIT_SPACE } from '@/constants'
 import useKeySounds from '@/hooks/useKeySounds'
 import { TypingContext, TypingStateActionType } from '@/pages/Typing/store'
-import { isIgnoreCaseAtom, pronunciationIsOpenAtom } from '@/store'
+import { isIgnoreCaseAtom, isTextSelectableAtom, pronunciationIsOpenAtom } from '@/store'
 import { useMixPanelWordLogUploader } from '@/utils'
 import { useSaveWordRecord } from '@/utils/db'
 import { LetterMistakes } from '@/utils/db/record'
@@ -55,6 +55,7 @@ export default function Word({ word, onFinish }: { word: string; onFinish: () =>
   const { state, dispatch } = useContext(TypingContext)!
   const [wordState, setWordState] = useImmer<WordState>(structuredClone(initialWordState))
 
+  const isTextSelectable = useAtomValue(isTextSelectableAtom)
   const isIgnoreCase = useAtomValue(isIgnoreCaseAtom)
   const saveWordRecord = useSaveWordRecord()
   const wordLogUploader = useMixPanelWordLogUploader(state)
@@ -208,7 +209,9 @@ export default function Word({ word, onFinish }: { word: string; onFinish: () =>
       <InputHandler updateInput={updateInput} />
       <div className="flex justify-center pb-1 pt-4">
         <div className="relative">
-          <div className={`flex items-center justify-center ${wordState.hasWrong ? style.wrong : ''}`}>
+          <div
+            className={`flex items-center ${!isTextSelectable && 'select-none'} justify-center ${wordState.hasWrong ? style.wrong : ''}`}
+          >
             {wordState.displayWord.split('').map((t, index) => {
               return (
                 <Letter
diff --git a/src/pages/Typing/components/Setting/AdvancedSetting.tsx b/src/pages/Typing/components/Setting/AdvancedSetting.tsx
index ee834342..cb56e307 100644
--- a/src/pages/Typing/components/Setting/AdvancedSetting.tsx
+++ b/src/pages/Typing/components/Setting/AdvancedSetting.tsx
@@ -1,5 +1,5 @@
 import styles from './index.module.css'
-import { isIgnoreCaseAtom, randomConfigAtom } from '@/store'
+import { isIgnoreCaseAtom, isTextSelectableAtom, randomConfigAtom } from '@/store'
 import { Switch } from '@headlessui/react'
 import { useAtom } from 'jotai'
 import { useCallback } from 'react'
@@ -7,6 +7,7 @@ import { useCallback } from 'react'
 export default function AdvancedSetting() {
   const [randomConfig, setRandomConfig] = useAtom(randomConfigAtom)
   const [isIgnoreCase, setIsIgnoreCase] = useAtom(isIgnoreCaseAtom)
+  const [isTextSelectable, setIsTextSelectable] = useAtom(isTextSelectableAtom)
 
   const onToggleRandom = useCallback(
     (checked: boolean) => {
@@ -25,6 +26,13 @@ export default function AdvancedSetting() {
     [setIsIgnoreCase],
   )
 
+  const onToggleTextSelectable = useCallback(
+    (checked: boolean) => {
+      setIsTextSelectable(checked)
+    },
+    [setIsTextSelectable],
+  )
+
   return (
     <div className={styles.tabContent}>
       <div className={styles.section}>
@@ -51,6 +59,18 @@ export default function AdvancedSetting() {
           }`}</span>
         </div>
       </div>
+      <div className={styles.section}>
+        <span className={styles.sectionLabel}>是否允许选择文本</span>
+        <span className={styles.sectionDescription}>开启后，可以通过鼠标选择文本 </span>
+        <div className={styles.switchBlock}>
+          <Switch checked={isTextSelectable} onChange={onToggleTextSelectable} className="switch-root">
+            <span aria-hidden="true" className="switch-thumb" />
+          </Switch>
+          <span className="text-right text-xs font-normal leading-tight text-gray-600">{`选择文本已${
+            isTextSelectable ? '开启' : '关闭'
+          }`}</span>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/src/store/index.ts b/src/store/index.ts
index 7e62ed5e..1847a1ba 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -53,6 +53,8 @@ export const isLoopSingleWordAtom = atom(false)
 
 export const isIgnoreCaseAtom = atomWithStorage('isIgnoreCase', true)
 
+export const isTextSelectableAtom = atomWithStorage('isTextSelectable', false)
+
 export const phoneticConfigAtom = atomWithStorage('phoneticConfig', {
   isOpen: true,
   type: 'us' as PhoneticType,