清除文字時清除錯誤字符

igncp · Mar 11, 2024 · 1ef8a7e · 1ef8a7e
1 parent d41fa31
commit 1ef8a7e
Show file tree

Hide file tree

Showing 15 changed files with 115 additions and 91 deletions.
diff --git a/packages/react-ui/src/containers/Panel/Panel.tsx b/packages/react-ui/src/containers/Panel/Panel.tsx
@@ -94,7 +94,7 @@ const Panel = ({
     perc: number
   }>(null)
 
-  const uiHandler = languageUIManager.getUIHandler()
+  const 語言UI處理程序 = languageUIManager.獲取語言UI處理程序()
 
   const [文字片段列表, setFragments] = useState<類型_文字片段列表>({
     列表: [text],
@@ -128,7 +128,7 @@ const Panel = ({
   const [hasExtraControls, setHasExtraControls] = useState(false)
   const [isMobile, setIsMobile] = useState(false)
   const writingArea = useRef<HTMLTextAreaElement | null>(null)
-  const 語言選項 = _stories.語言選項 ?? uiHandler.取得語言選項()
+  const 語言選項 = _stories.語言選項 ?? 語言UI處理程序.取得語言選項()
 
   const langHandler = languageManager.getCurrentLanguageHandler()
 
@@ -348,6 +348,7 @@ const Panel = ({
       },
     )
     const newFragments: 類型_文字片段列表 = { 列表: [''], 索引: 0 }
+    語言UI處理程序.處理清除事件?.(語言UI處理程序)
     storage.setValue('fragments', JSON.stringify(newFragments))
     setShowingPronunciation(true)
     setShowingEdition(true)
@@ -360,9 +361,7 @@ const Panel = ({
     updateLanguage(newSelectedLanguage)
   }
 
-  const handleWritingKeyDown = (
-    事件: React.KeyboardEvent<HTMLTextAreaElement>,
-  ) => {
+  const 處理寫鍵按下 = (事件: React.KeyboardEvent<HTMLTextAreaElement>) => {
     // special key
     if (事件.key === '`') {
       事件.preventDefault()
@@ -376,7 +375,7 @@ const Panel = ({
       setPractice(`${practiceValue}\n`)
     }
 
-    uiHandler.handleWritingKeyDown({
+    語言UI處理程序.處理寫鍵按下({
       getCurrentCharObjFromPractice,
       originalTextValue,
       practiceValue,
@@ -392,21 +391,21 @@ const Panel = ({
       語言選項,
     })
 
-    uiHandler.儲存語言選項(語言選項)
+    語言UI處理程序.儲存語言選項(語言選項)
   }
 
   const 更改語言選項 = (選項: 類型_語言選項) => {
-    uiHandler.儲存語言選項(選項)
+    語言UI處理程序.儲存語言選項(選項)
     觸發重新渲染(Math.random())
   }
 
   const handleWritingAreaClick = () => {
     setLastThreeKeys([])
   }
 
-  const 連結區塊 = uiHandler.取得連結區塊()
-  const OptionsBlock = uiHandler.getOptionsBlock()
-  const handleDisplayedCharClick = uiHandler.getDisplayedCharHandler()
+  const 連結區塊 = 語言UI處理程序.取得連結區塊()
+  const OptionsBlock = 語言UI處理程序.getOptionsBlock()
+  const handleDisplayedCharClick = 語言UI處理程序.getDisplayedCharHandler()
 
   const saveRecord = () => {
     setShowingRecordsInitScreen(RecordsScreen.Save)
@@ -462,7 +461,7 @@ const Panel = ({
   }
 
   const 重點字元顏色 = doesPracticeHaveError
-    ? uiHandler.取得錯誤顏色?.(語言選項, getCurrentCharObjFromPractice())
+    ? 語言UI處理程序.取得錯誤顏色?.(語言選項, getCurrentCharObjFromPractice())
     : undefined
 
   return (
@@ -633,8 +632,8 @@ const Panel = ({
           >
             <文字區
               onBlur={() => {
-                if (uiHandler.onBlur) {
-                  const { newFragmentsList } = uiHandler.onBlur({
+                if (語言UI處理程序.onBlur) {
+                  const { newFragmentsList } = 語言UI處理程序.onBlur({
                     fragmentsList: 文字片段列表.列表,
                     語言選項,
                   })
@@ -712,7 +711,9 @@ const Panel = ({
             <CharactersDisplay
               fontSize={fontSize}
               onCharClick={handleDisplayedCharClick}
-              shouldHaveDifferentWidths={!uiHandler.shouldAllCharsHaveSameWidth}
+              shouldHaveDifferentWidths={
+                !語言UI處理程序.shouldAllCharsHaveSameWidth
+              }
               shouldHidePronunciation={!isShowingPronunciation}
               showCurrentCharPronunciation={
                 doesPracticeHaveError && 語言選項.遊戲模式值 === '還原論者'
@@ -737,12 +738,12 @@ const Panel = ({
                   preventDefault: () => {},
                 } as unknown as React.KeyboardEvent<HTMLTextAreaElement>
 
-                handleWritingKeyDown(mockEvent)
+                處理寫鍵按下(mockEvent)
               }
             }}
             onClick={handleWritingAreaClick}
             onFocus={() => setWritingBorder('bold')}
-            onKeyDown={handleWritingKeyDown}
+            onKeyDown={處理寫鍵按下}
             placeholder={practiceValue ? '' : '書寫區'}
             rows={1}
             setRef={ref => (writingArea.current = ref)}

diff --git a/packages/react-ui/src/containers/Panel/__stories__/Panel.stories.tsx b/packages/react-ui/src/containers/Panel/__stories__/Panel.stories.tsx
@@ -8,12 +8,15 @@ import {
 } from 'writing-trainer-core'
 
 import { dummyServices } from '../../../__stories__/storybookHelpers'
-import { uiHandlers } from '../../../languages/handlers'
+import { 語言UI處理程序清單 } from '../../../languages/handlers'
 import { LanguageUIManager } from '../../../languages/languageUIManager'
 import Panel from '../Panel'
 
 const languageManager = new LanguageManager()
-const languageUIManager = new LanguageUIManager(languageManager, uiHandlers)
+const languageUIManager = new LanguageUIManager(
+  languageManager,
+  語言UI處理程序清單,
+)
 
 const initialText = '崩比筆,壁必畢.閉編'
 

diff --git a/packages/react-ui/src/index.ts b/packages/react-ui/src/index.ts
@@ -2,7 +2,7 @@ import 按鈕 from './components/按鈕/按鈕'
 import 文字區 from './components/文字區/文字區'
 import 面板基本 from './components/面板基本/面板基本'
 import Panel from './containers/Panel/Panel'
-import { uiHandlers } from './languages/handlers'
+import { 語言UI處理程序清單 } from './languages/handlers'
 import { LanguageUIManager } from './languages/languageUIManager'
 import {
   useBodyOverflowSwitch,
@@ -13,11 +13,11 @@ import {
 export {
   LanguageUIManager,
   Panel,
-  uiHandlers,
   useBodyOverflowSwitch,
   useHover,
   useTextSelection,
   按鈕,
   文字區,
+  語言UI處理程序清單,
   面板基本,
 }
diff --git a/packages/react-ui/src/languages/__tests__/languageUIManager.test.tsx b/packages/react-ui/src/languages/__tests__/languageUIManager.test.tsx
@@ -1,6 +1,6 @@
 import { LanguageManager } from 'writing-trainer-core'
 
-import { uiHandlers } from '../handlers'
+import { 語言UI處理程序清單 } from '../handlers'
 import { LanguageUIManager } from '../languageUIManager'
 
 const languageManager = new LanguageManager()
@@ -21,30 +21,36 @@ describe('constructor', () => {
     expect(languageManager.取得可用語言()).toEqual([])
     expect(languageManager.getCurrentLanguageHandler()).toEqual(null)
 
-    new LanguageUIManager(languageManager, uiHandlers)
+    new LanguageUIManager(languageManager, 語言UI處理程序清單)
 
     expect((languageManager.clear as any).mock.calls).toEqual([[]])
     expect(languageManager.取得可用語言()).not.toEqual([])
     expect(languageManager.getCurrentLanguageHandler()).not.toEqual(null)
   })
 })
 
-describe('getUIHandler', () => {
+describe('獲取語言UI處理程序', () => {
   it('returns the UI handler with same id as the current language handler', () => {
-    const languageUIManager = new LanguageUIManager(languageManager, uiHandlers)
-
-    expect(languageUIManager.getUIHandler().languageHandler.getId()).toEqual(
-      languageManager.getCurrentLanguageHandler()!.getId(),
+    const languageUIManager = new LanguageUIManager(
+      languageManager,
+      語言UI處理程序清單,
     )
+
+    expect(
+      languageUIManager.獲取語言UI處理程序().languageHandler.getId(),
+    ).toEqual(languageManager.getCurrentLanguageHandler()!.getId())
   })
 })
 
 describe('getDefaultLanguage', () => {
   it('returns the first id of the array', () => {
-    const languageUIManager = new LanguageUIManager(languageManager, uiHandlers)
+    const languageUIManager = new LanguageUIManager(
+      languageManager,
+      語言UI處理程序清單,
+    )
 
     expect(languageUIManager.getDefaultLanguage()).toEqual(
-      uiHandlers[0].languageHandler.getId(),
+      語言UI處理程序清單[0].languageHandler.getId(),
     )
   })
 })
diff --git a/packages/react-ui/src/languages/cantonese/cantonese.tsx b/packages/react-ui/src/languages/cantonese/cantonese.tsx
@@ -5,7 +5,7 @@ import { chineseBlurHandler } from '../common/chineseBlurHandler'
 import { commonHandleWritingKeyDown } from '../common/commonLanguageUtils'
 import { 繁體轉簡體 } from '../common/conversion'
 import {
-  T_UIHandler,
+  類型_語言UI處理程序,
   類型_語言選項,
   T_CharsDisplayClickHandler,
 } from '../types'
@@ -97,7 +97,7 @@ const 解析發音 = (文字: string, 選項: 類型_語言選項) => {
   return 解析後的文本
 }
 
-const handleWritingKeyDown: T_UIHandler['handleWritingKeyDown'] = 參數 => {
+const 處理寫鍵按下: 類型_語言UI處理程序['處理寫鍵按下'] = 參數 => {
   commonHandleWritingKeyDown(參數, {
     解析發音,
   })
@@ -169,16 +169,19 @@ export const handleDisplayedCharClick: T_CharsDisplayClickHandler = ({
   }
 }
 
-const uiHandler: T_UIHandler = {
+const 語言UI處理程序: 類型_語言UI處理程序 = {
   getDisplayedCharHandler: () => handleDisplayedCharClick,
   getOptionsBlock: () => OptionsBlock,
-  handleWritingKeyDown,
   languageHandler: cantoneseHandler,
   onBlur: chineseBlurHandler,
   shouldAllCharsHaveSameWidth: false,
   儲存語言選項,
   取得語言選項,
   取得連結區塊: () => 連結區塊,
+  處理寫鍵按下,
+  處理清除事件: (處理程序: 類型_語言UI處理程序) => {
+    處理程序.儲存語言選項({ ...處理程序.取得語言選項(), 錯誤的字符: [] })
+  },
 }
 
-export default uiHandler
+export default 語言UI處理程序
diff --git a/packages/react-ui/src/languages/common/chineseBlurHandler.ts b/packages/react-ui/src/languages/common/chineseBlurHandler.ts
@@ -1,6 +1,6 @@
-import { T_UIHandler } from '../types'
+import { 類型_語言UI處理程序 } from '../types'
 
-export const chineseBlurHandler: T_UIHandler['onBlur'] = ({
+export const chineseBlurHandler: 類型_語言UI處理程序['onBlur'] = ({
   fragmentsList,
   語言選項,
 }) => {

diff --git a/packages/react-ui/src/languages/common/commonLanguageUtils.tsx b/packages/react-ui/src/languages/common/commonLanguageUtils.tsx
@@ -1,19 +1,19 @@
 import { unknownPronunciation } from 'writing-trainer-core'
 
-import { T_UIHandler, 類型_語言選項 } from '../types'
+import { 類型_語言UI處理程序, 類型_語言選項 } from '../types'
 
 import { 儲存成功字元, 儲存失敗字元 } from './統計'
 
 type 類型_解析發音 = (文字: string, 語言選項?: 類型_語言選項) => string
 type T_OnPracticeBackspaceFormat = (practiceValue: string) => string
 
 type T_CommonHandleWritingKeyDown = (
-  opts: Parameters<T_UIHandler['handleWritingKeyDown']>[0],
+  opts: Parameters<類型_語言UI處理程序['處理寫鍵按下']>[0],
   opts2: {
     onPracticeBackspaceFormat?: T_OnPracticeBackspaceFormat
     解析發音?: 類型_解析發音
   },
-) => ReturnType<T_UIHandler['handleWritingKeyDown']>
+) => ReturnType<類型_語言UI處理程序['處理寫鍵按下']>
 
 const 預設解析發音: 類型_解析發音 = 文字 => 文字.toLowerCase()
 

diff --git a/packages/react-ui/src/languages/english/__tests__/english.test.tsx b/packages/react-ui/src/languages/english/__tests__/english.test.tsx
@@ -24,7 +24,7 @@ describe('取得語言選項', () => {
   })
 })
 
-describe('handleWritingKeyDown', () => {
+describe('處理寫鍵按下', () => {
   const commonOpts: any = {
     getCurrentCharObjFromPractice: jest.fn(),
     practiceValue: 'foo bar baz ',
@@ -49,7 +49,7 @@ describe('handleWritingKeyDown', () => {
       按鍵事件: { key: 'Backspace' },
     }
 
-    englishUIHandler.handleWritingKeyDown(opts)
+    englishUIHandler.處理寫鍵按下(opts)
 
     expect(opts.setCurrentDisplayCharIdx.mock.calls).toEqual([['indexValue']])
     expect(opts.setPractice.mock.calls).toEqual([['foo bar ']])
@@ -62,7 +62,7 @@ describe('handleWritingKeyDown', () => {
       getCurrentCharObjFromPractice: () => ({}),
     }
 
-    englishUIHandler.handleWritingKeyDown(opts)
+    englishUIHandler.處理寫鍵按下(opts)
 
     expect(opts.setPracticeHasError.mock.calls).toEqual([[false]])
     expect(opts.setWriting.mock.calls).toEqual([])
@@ -78,7 +78,7 @@ describe('handleWritingKeyDown', () => {
       按鍵事件: { key: 'c', preventDefault: jest.fn() },
     }
 
-    englishUIHandler.handleWritingKeyDown(opts)
+    englishUIHandler.處理寫鍵按下(opts)
 
     expect(opts.按鍵事件.preventDefault.mock.calls).toEqual([[]])
     expect(opts.setWriting.mock.calls).toEqual([['']])

diff --git a/packages/react-ui/src/languages/english/english.tsx b/packages/react-ui/src/languages/english/english.tsx
@@ -1,12 +1,12 @@
 import { englishHandler } from 'writing-trainer-core'
 
 import { commonHandleWritingKeyDown } from '../common/commonLanguageUtils'
-import { T_UIHandler, 類型_語言選項 } from '../types'
+import { 類型_語言UI處理程序, 類型_語言選項 } from '../types'
 
 import OptionsBlock from './OptionsBlock'
 import 連結區塊 from './連結區塊/連結區塊'
 
-const handleWritingKeyDown: T_UIHandler['handleWritingKeyDown'] = params => {
+const 處理寫鍵按下: 類型_語言UI處理程序['處理寫鍵按下'] = params => {
   commonHandleWritingKeyDown(params, {})
 }
 
@@ -16,15 +16,15 @@ const 取得語言選項 = () => 語言選項
 
 const 儲存語言選項 = () => {}
 
-const uiHandler: T_UIHandler = {
+const 語言UI處理程序: 類型_語言UI處理程序 = {
   getDisplayedCharHandler: () => null,
   getOptionsBlock: () => OptionsBlock,
-  handleWritingKeyDown,
   languageHandler: englishHandler,
   shouldAllCharsHaveSameWidth: false,
   儲存語言選項,
   取得語言選項,
   取得連結區塊: () => 連結區塊,
+  處理寫鍵按下,
 }
 
 let _test:
@@ -42,4 +42,4 @@ if (__TEST__) {
 
 export { _test }
 
-export default uiHandler
+export default 語言UI處理程序
diff --git a/packages/react-ui/src/languages/handlers.ts b/packages/react-ui/src/languages/handlers.ts
@@ -3,6 +3,6 @@ import english from './english/english'
 import japanese from './japanese/japanese'
 import mandarin from './mandarin/mandarin'
 
-const uiHandlers = [mandarin, japanese, english, cantonese]
+const 語言UI處理程序清單 = [mandarin, japanese, english, cantonese]
 
-export { uiHandlers }
+export { 語言UI處理程序清單 }