fix: 候補リストに同じ文字列が含まれる場合にキーボードによる候補の移動がおかしくなる問題を修正

- fix & refactor: 選択候補の管理をテキストベースから index ベースに変更
    - これにより，候補リストに同じ文字列が含まれていても正しく操作できるようになった
- refactor: `useWordSuggestionList` の役割を，候補リストの提供のみに限定
- refactor: types の定義を `/@/lib/suggestion/base.ts` にまとめる
- refactor: 引数の型をより汎用的にする
- refactor: 命名や空白や宣言順序の軽微な改善
- fix: 非推奨の `insert` API の代わりに `setRangeText` を利用する

Author: uni-kakurenbo

dev.config.ts

@@ -1 +1 @@
-export const DEV_SERVER_PROXY_HOST = 'https://q-dev.trapti.tech'
+export const DEV_SERVER_PROXY_HOST = 'https://q.trap.jp'

package-lock.json

@@ -43,7 +43,6 @@
     "mitt": "^3.0.0",
     "party-js": "^2.2.0",
     "sortablejs": "^1.15.6",
-    "text-field-edit": "^4.1.1",
     "throttle-debounce": "^5.0.2",
     "ts-pattern": "^5.8.0",
     "turndown": "^7.2.1",

package.json

@@ -31,12 +31,9 @@
 
 <script lang="ts" setup>
 import { computed, type ComponentPublicInstance } from 'vue'
-import type {
-  Candidate,
-  WordOrConfirmedPart
-} from '../composables/suggestion/useWordSuggester'
 import DropdownSuggesterCandidate from './DropdownSuggesterCandidate.vue'
 import { isIOS } from '/@/lib/dom/browser'
+import type { Candidate, WordOrConfirmedPart } from '/@/lib/suggestion/basic'
 
 const props = withDefaults(
   defineProps<{

src/components/Main/MainView/MessageInput/DropdownSuggester/DropdownSuggester.vue

@@ -23,7 +23,7 @@
 import DropdownSuggesterUserIcon from './DropdownSuggesterUserIcon.vue'
 import AStamp from '/@/components/UI/AStamp.vue'
 import DropdownSuggesterStampEffect from './DropdownSuggesterStampEffect.vue'
-import type { WordOrConfirmedPart } from '../composables/suggestion/useWordSuggester'
+import type { WordOrConfirmedPart } from '/@/lib/suggestion/basic'
 
 withDefaults(
   defineProps<{

src/components/Main/MainView/MessageInput/DropdownSuggester/DropdownSuggesterCandidate.vue

@@ -29,7 +29,7 @@
       :width="suggesterWidth"
       :position="suggesterPosition"
       :candidates="suggestedCandidates"
-      :selected-index="selectedCandidateIndex"
+      :selected-index="selectedIndex"
       :confirmed-part="confirmedPart"
       @select="onSelect"
     />
@@ -91,7 +91,9 @@ const firefoxFlag = isFirefox()
 const { isMobile } = useResponsiveStore()
 
 const textareaAutosizeRef = ref<InstanceType<typeof TextareaAutosize>>()
-const textareaRef = computed(() => textareaAutosizeRef.value?.$el)
+const textareaRef = computed<HTMLTextAreaElement>(
+  () => textareaAutosizeRef.value?.$el
+)
 
 defineExpose({ textareaAutosizeRef })
 
@@ -106,10 +108,10 @@ const {
   suggesterWidth,
   position,
   suggestedCandidates,
-  selectedCandidateIndex,
+  selectedIndex,
   confirmedPart,
   onSelect
-} = useSuggester(textareaRef, modelValue)
+} = useSuggester(textareaRef)
 
 const {
   onBeforeInput,

src/components/Main/MainView/MessageInput/MessageInputTextArea.vue

@@ -1,5 +1,5 @@
 import { computed, toValue, type MaybeRefOrGetter } from 'vue'
-import type { Candidate, ConfirmedPart } from '../useWordSuggester'
+import type { Candidate, ConfirmedPart } from '/@/lib/suggestion/basic'
 
 const CHANNEL_PATH_TRIMMING_REGEXP = /^#|\/$/
 

src/components/Main/MainView/MessageInput/composables/suggestion/overrides/channelSuggestion.ts

@@ -1,11 +1,11 @@
 import { computed, toValue, type MaybeRefOrGetter } from 'vue'
+import { useStampHistory } from '/@/store/domain/stampHistory'
 import type {
   Candidate,
   ConfirmedPart,
-  WordOrConfirmedPart
-} from '../useWordSuggester'
-import { useStampHistory } from '/@/store/domain/stampHistory'
-import type { WordWithId } from '../useWordSuggestionList'
+  WordOrConfirmedPart,
+  WordWithId
+} from '/@/lib/suggestion/basic'
 
 const stampSuggestionOverride = <
   Params extends {

src/components/Main/MainView/MessageInput/composables/suggestion/overrides/stampSuggestion.ts

@@ -1,28 +1,15 @@
-import type { ComputedRef, Ref } from 'vue'
-import { computed, ref, watch } from 'vue'
-import type { Word } from './useWordSuggestionList'
+import type { MaybeRefOrGetter } from 'vue'
+import { computed, ref, toValue, watch } from 'vue'
 import useWordSuggesterList from './useWordSuggestionList'
 import useInsertText from '/@/composables/dom/useInsertText'
 import getCaretPosition from '/@/lib/dom/caretPosition'
-import type { Target } from '/@/lib/suggestion/basic'
-import { getCurrentWord } from '/@/lib/suggestion/basic'
-
-export type WordOrConfirmedPart =
-  | Word
-  | {
-      type: 'confirmed-part'
-      text: string
-    }
-
-export interface Candidate {
-  word: Word
-  display?: string
-}
-
-export interface ConfirmedPart {
-  text: string
-  display?: string
-}
+import type { Target, WordOrConfirmedPart } from '/@/lib/suggestion/basic'
+import {
+  getCurrentWord,
+  getNextCandidateIndex,
+  getPrevCandidateIndex,
+  getSelectedCandidateIndex
+} from '/@/lib/suggestion/basic'
 
 /**
  * 補完を表示する最小の文字数
@@ -31,51 +18,77 @@ export interface ConfirmedPart {
 const MIN_LENGTH = 3
 
 const useWordSuggester = (
-  textareaRef: ComputedRef<HTMLTextAreaElement | undefined>,
-  value: Ref<string>
+  textareaRef: MaybeRefOrGetter<HTMLTextAreaElement>
 ) => {
   const isSuggesterShown = ref(false)
+
   const target = ref<Target>({
     word: '',
     begin: 0,
     end: 0
   })
+
+  /**
+   * nullのときは未選択
+   * -1のときは確定部分が選択されている
+   * 0～のときは候補が選択されている
+   */
+  const selectedIndex = ref<number | null>(null)
+
   /**
    * targetは補完をしたときに更新されないがこれは更新する
    * これはtargetを更新すると候補リストが変わってしまうため
    * (補完をしたときは候補リストを変化させたくない)
    */
   const currentInputWord = ref('')
+
+  const { suggestedCandidateWords, confirmedText } = useWordSuggesterList(
+    () => target.value.word,
+    MIN_LENGTH
+  )
+
   watch(
     () => target.value.word,
     word => {
       currentInputWord.value = word
+
+      selectedIndex.value = getSelectedCandidateIndex(
+        suggestedCandidateWords.value,
+        confirmedText.value,
+        word
+      )
+    },
+    {
+      immediate: true
     }
   )
 
+  const { insertText } = useInsertText(textareaRef, target)
+
   const position = computed(() => {
-    if (!textareaRef.value) return { top: 0, left: 0 }
-    return getCaretPosition(textareaRef.value, target.value.begin)
+    if (!toValue(textareaRef)) return { top: 0, left: 0 }
+    return getCaretPosition(toValue(textareaRef), target.value.begin)
   })
 
-  const {
-    suggestedCandidateWords,
-    confirmedText,
-    selectedCandidateIndex,
-    prevCandidateText,
-    nextCandidateText
-  } = useWordSuggesterList(target, currentInputWord, MIN_LENGTH)
+  const getCandidateTextFromIndex = (i: number) => {
+    if (i === -1) return confirmedText.value
+    return suggestedCandidateWords.value[i]?.text ?? ''
+  }
+
+  const insertTextAndMoveTarget = (index: number) => {
+    selectedIndex.value = index
+    const text = getCandidateTextFromIndex(index)
 
-  const { insertText } = useInsertText(textareaRef, target)
-  const insertTextAndMoveTarget = (text: string) => {
     insertText(text)
     target.value.end = target.value.begin + text.length
     currentInputWord.value = text
   }
 
   const updateTarget = () => {
-    if (!textareaRef.value) return
-    target.value = getCurrentWord(textareaRef.value, value.value)
+    if (!toValue(textareaRef)) return
+
+    target.value = getCurrentWord(toValue(textareaRef))
+
     if (target.value.word.length < MIN_LENGTH) {
       isSuggesterShown.value = false
       return
@@ -88,6 +101,16 @@ const useWordSuggester = (
     if (e.isComposing) return
     if (!isSuggesterShown.value) return
 
+    const prevIndex = getPrevCandidateIndex(
+      suggestedCandidateWords.value.length,
+      selectedIndex.value
+    )
+
+    const nextIndex = getNextCandidateIndex(
+      suggestedCandidateWords.value.length,
+      selectedIndex.value
+    )
+
     // Tabによるフォーカスの移動を防止するため、長押しで連続移動できるようにするためにkeyDownで行う必要がある
     if (e.key === 'Tab') {
       e.preventDefault()
@@ -98,24 +121,25 @@ const useWordSuggester = (
 
       // 未選択状態では確定部分が補完される
       if (e.shiftKey) {
-        insertTextAndMoveTarget(prevCandidateText.value)
+        insertTextAndMoveTarget(prevIndex)
       } else {
-        insertTextAndMoveTarget(nextCandidateText.value)
+        insertTextAndMoveTarget(nextIndex)
       }
       return
     }
 
     if (e.key === 'ArrowUp') {
       e.preventDefault()
-      insertTextAndMoveTarget(prevCandidateText.value)
+      insertTextAndMoveTarget(prevIndex)
       return
     }
     if (e.key === 'ArrowDown') {
       e.preventDefault()
-      insertTextAndMoveTarget(nextCandidateText.value)
+      insertTextAndMoveTarget(nextIndex)
       return
     }
   }
+
   const onKeyUp = (e: KeyboardEvent) => {
     if (e.key === 'Tab' || e.key === 'ArrowUp' || e.key === 'ArrowDown') return
     // 文字入力後の状態をとるためkeyUpで行う必要がある
@@ -153,7 +177,7 @@ const useWordSuggester = (
     suggesterWidth: 240,
     position,
     suggestedCandidates,
-    selectedCandidateIndex,
+    selectedIndex,
     confirmedPart
   }
 }