#428

2026-10-18 18:28:05 +09:00
@@ -1,6 +1,6 @@
 // TODO: TagSearch と共通化する．

-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'

 import { useLocale } from '@/lib/useLocale'
 import { useUITranslation } from '@/lib/useUITranslation'
@@ -46,11 +46,19 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {

  const [bounds, setBounds] = useState<{ start: number; end: number }> ({ start: 0, end: 0 })
  const [focused, setFocused] = useState (false)
-  const [suggestions, setSuggestions] = useState<Tag[]> ([])
+  const [request, setRequest] = useState ({ query: '' })
+  const [result, setResult] = useState<{
+      locale: string
+      request: { query: string }
+      tags: Tag[] }> ({ locale, request, tags: [] })
+  const currentToken = getTokenAt (tags, Math.min (bounds.start, tags.length)).token
+  const suggestions = (result.locale === locale && result.request === request
+      && request.query === currentToken) ? result.tags : []
  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)

  const handleTagSelect = (tag: Tag) => {
    setSuggestionsVsbl (false)
+    setRequest ({ query: '' })
    const textarea = ref.current!
    const newValue = replaceToken (tags, bounds.start, bounds.end, tag.name + ' ')
    setTags (newValue)
@@ -62,8 +70,10 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
    })
  }

-  const recompute = async (pos: number, v: string = tags) => {
+  const recompute = (pos: number, v: string = tags) => {
    const { start, end, token } = getTokenAt (v, pos)
+    setRequest ({ query: token })
+    setSuggestionsVsbl (token.trim () !== '')
    if (!(token.trim ()))
      {
 	setSuggestionsVsbl (false)
@@ -71,15 +81,41 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
      }

    setBounds ({ start, end })
-
-    const data = await apiGet<Tag[]> ('/tags/autocomplete', { locale, params: {
-	q: token,
-	nico: '0' } })
-    const nextSuggestions = data.filter (t => t.postCount > 0)
-    setSuggestions (nextSuggestions)
-    setSuggestionsVsbl (nextSuggestions.length > 0)
  }

+  useEffect (() => {
+    if (request.query.trim () === '')
+      return
+    const controller = new AbortController ()
+    let active = true
+    void (async () => {
+      try
+      {
+	const tags = await apiGet<Tag[]> ('/tags/autocomplete', {
+	    locale, signal: controller.signal, params: { q: request.query, nico: '0' } })
+	if (active)
+	{
+	  setResult ({ locale, request,
+	      tags: tags.filter (tag => tag.postCount > 0) })
+	}
+      }
+      catch
+      {
+	if (active)
+	  setResult ({ locale, request, tags: [] })
+      }
+    }) ()
+    return () => {
+      active = false
+      controller.abort ()
+    }
+  }, [request, locale])
+
+  useEffect (() => {
+    setSuggestionsVsbl (false)
+    setRequest ({ query: '' })
+  }, [locale])
+
  return (
      <FormField className="relative w-full" label={label ('tags')} messages={errors}>
 	{({ describedBy, invalid }) => (
@@ -93,7 +129,7 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
 		  onChange={ev => setTags (ev.target.value)}
 		  onSelect={async (ev: SyntheticEvent<HTMLTextAreaElement>) => {
 		    const pos = (ev.target as HTMLTextAreaElement).selectionStart
-		    await recompute (pos)
+		    await recompute (pos, (ev.target as HTMLTextAreaElement).value)
 		  }}
 		  onFocus={() => setFocused (true)}
 		  onBlur={() => {
@@ -23,25 +23,57 @@ const TagSearch: FC = () => {

  const [activeIndex, setActiveIndex] = useState (-1)
  const [search, setSearch] = useState ('')
-  const [suggestions, setSuggestions] = useState<Tag[]> ([])
+  const [request, setRequest] = useState ({ query: '' })
+  const [result, setResult] = useState<{
+      locale: string
+      request: { query: string }
+      tags: Tag[] }> ({ locale, request, tags: [] })
+  const suggestions = result.locale === locale && result.request === request
+      ? result.tags : []
  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)

-  const whenChanged = async (ev: ChangeEvent<HTMLInputElement>) => {
-    setSearch (ev.target.value)
-
-    const q = ev.target.value.trim ().split (' ').at (-1)
-    if (!(q))
-      {
-	setSuggestions ([])
-	return
-      }
-
-    const data = await apiGet<Tag[]> ('/tags/autocomplete', { locale, params: { q } })
-    setSuggestions (data.filter (t => t.postCount > 0))
-    if (suggestions.length > 0)
-      setSuggestionsVsbl (true)
+  const whenChanged = (ev: ChangeEvent<HTMLInputElement>) => {
+    const value = ev.target.value
+    const query = value.trim ().split (' ').at (-1) ?? ''
+    setSearch (value)
+    setRequest ({ query })
+    setActiveIndex (-1)
+    setSuggestionsVsbl (query !== '')
  }

+  useEffect (() => {
+    if (request.query === '')
+      return
+    const controller = new AbortController ()
+    let active = true
+    void (async () => {
+      try
+      {
+	const tags = await apiGet<Tag[]> ('/tags/autocomplete', {
+	    locale, signal: controller.signal, params: { q: request.query } })
+	if (active)
+	{
+	  setResult ({ locale, request,
+	      tags: tags.filter (tag => tag.postCount > 0) })
+	}
+      }
+      catch
+      {
+	if (active)
+	  setResult ({ locale, request, tags: [] })
+      }
+    }) ()
+    return () => {
+      active = false
+      controller.abort ()
+    }
+  }, [request, locale])
+
+  useEffect (() => {
+    setActiveIndex (-1)
+    setSuggestionsVsbl (false)
+  }, [locale])
+
  const handleKeyDown = (ev: KeyboardEvent<HTMLInputElement>) => {
    switch (ev.key)
    {
@@ -85,6 +117,7 @@ const TagSearch: FC = () => {
 		match }))
 	    .toString () }`)
 	setSuggestionsVsbl (false)
+	setRequest ({ query: '' })
      }
  }

@@ -95,7 +128,8 @@ const TagSearch: FC = () => {
 	? ('not:' + tag.name)
 	: tag.name)
    setSearch (parts.join (' ') + ' ')
-    setSuggestions ([])
+    setRequest ({ query: '' })
+    setSuggestionsVsbl (false)
    setActiveIndex (-1)
  }

@@ -104,6 +138,9 @@ const TagSearch: FC = () => {
    const anyFlg = query.get ('match') === 'any'
    const tagsQuery = `${ query.get ('tags') ?? '' }${ anyFlg ? ' type:or' : '' }`
    setSearch (tagsQuery)
+    setRequest ({ query: '' })
+    setActiveIndex (-1)
+    setSuggestionsVsbl (false)
  }, [location.search])

  return (
@@ -35,15 +35,16 @@ const WikiBody: FC<Props> = ({ title, body, language = 'und' }) => {
  const missingPage = message ('missingPage', {
      url: `/wiki/new?title=${ encodeURIComponent (title) }` })
  const contentLanguage = body ? language : missingPage.language
-  const matchLanguage = contentLanguage === 'ain-Kana' ? 'ain' : contentLanguage
+  const matchLanguage = contentLanguage === 'und'
+      ? 'ja' : (contentLanguage === 'ain-Kana' ? 'ain' : contentLanguage)
  const { data } = useQuery ({
      enabled: Boolean (body),
      queryKey: wikiKeys.autolinkCandidates (matchLanguage, locale),
      queryFn: () => fetchWikiAutolinkCandidates (matchLanguage, locale) })

  const remarkPlugins = useMemo (
-      () => [() => remarkWikiAutoLink (data ?? [], matchLanguage), remarkGFM],
-      [data, matchLanguage])
+      () => [() => remarkWikiAutoLink (data ?? [], matchLanguage, locale), remarkGFM],
+      [data, matchLanguage, locale])
  const components = {
      ...((contentLanguage === 'ain' || contentLanguage === 'ain-Kana')
 	  ? ainuMDXComponents : { }),
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'

 import { useLocale } from '@/lib/useLocale'
 import TagSearchBox from '@/components/TagSearchBox'
@@ -27,34 +27,67 @@ const TagInput: FC<Props> = ({
 }) => {
  const locale = useLocale ()
  const [activeIndex, setActiveIndex] = useState (-1)
-  const [suggestions, setSuggestions] = useState<Tag[]> ([])
+  const [request, setRequest] = useState ({ query: '' })
+  const [result, setResult] = useState<{
+      locale: string
+      includeNico: boolean
+      request: { query: string }
+      tags: Tag[] }> ({ locale, includeNico, request, tags: [] })
+  const suggestions = (result.locale === locale && result.includeNico === includeNico
+      && result.request === request
+      && request.query === value.trim ().split (' ').at (-1)) ? result.tags : []
  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)

  // TODO: TagSearch からのコピペのため，共通化を考へる．
-  const whenChanged = async (ev: ChangeEvent<HTMLInputElement>) => {
+  const whenChanged = (ev: ChangeEvent<HTMLInputElement>) => {
    setValue (ev.target.value)
-
-    const q = ev.target.value.trim ().split (' ').at (-1)
-    if (!(q))
-      {
-	setSuggestions ([])
-	return
-      }
-
-    const data = await apiGet<Tag[]> ('/tags/autocomplete', { locale, params: {
-	q,
-	nico: includeNico ? '1' : '0' } })
-    const nextSuggestions = data.filter (t => t.postCount > 0)
-    setSuggestions (nextSuggestions)
-    setSuggestionsVsbl (nextSuggestions.length > 0)
+    const query = ev.target.value.trim ().split (' ').at (-1) ?? ''
+    setRequest ({ query })
+    setActiveIndex (-1)
+    setSuggestionsVsbl (query !== '')
  }

+  useEffect (() => {
+    if (request.query === '')
+      return
+    const controller = new AbortController ()
+    let active = true
+    void (async () => {
+      try
+      {
+	const tags = await apiGet<Tag[]> ('/tags/autocomplete', {
+	    locale, signal: controller.signal,
+	    params: { q: request.query, nico: includeNico ? '1' : '0' } })
+	if (active)
+	{
+	  setResult ({ locale, includeNico, request,
+	      tags: tags.filter (tag => tag.postCount > 0) })
+	}
+      }
+      catch
+      {
+	if (active)
+	  setResult ({ locale, includeNico, request, tags: [] })
+      }
+    }) ()
+    return () => {
+      active = false
+      controller.abort ()
+    }
+  }, [request, locale, includeNico])
+
+  useEffect (() => {
+    setActiveIndex (-1)
+    setSuggestionsVsbl (false)
+    setRequest ({ query: '' })
+  }, [locale, includeNico])
+
  // TODO: TagSearch からのコピペのため，共通化を考へる．
  const handleTagSelect = (tag: Tag) => {
    const parts = value?.split (' ')
    parts[parts.length - 1] = tag.name
    setValue (parts.join (' ') + ' ')
-    setSuggestions ([])
+    setRequest ({ query: '' })
    setActiveIndex (-1)
  }