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

package.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",

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

@@ -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/DropdownSuggesterCandidate.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/MessageInputTextArea.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/composables/suggestion/overrides/channelSuggestion.ts

@@ -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/stampSuggestion.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/useWordSuggester.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
   }
 }