mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-05-23 17:19:37 +02:00
Reference picker
This commit is contained in:
David Rotermund
@@ -0,0 +1,93 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
import ReferencePickerModal from './reference-picker-modal'
|
||||
import { useEditorViewContext } from '@/features/ide-react/context/editor-view-context'
|
||||
|
||||
export default function ReferencePickerController() {
|
||||
const { view } = useEditorViewContext()
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [from, setFrom] = useState<number | null>(null)
|
||||
const [to, setTo] = useState<number | null>(null)
|
||||
const [braceFrom, setBraceFrom] = useState<number | null>(null)
|
||||
const [braceTo, setBraceTo] = useState<number | null>(null)
|
||||
const [initialKeys, setInitialKeys] = useState<string[]>([])
|
||||
|
||||
const onClose = useCallback(() => setOpen(false), [])
|
||||
|
||||
const onApply = useCallback(
|
||||
(selectedKeys: string[]) => {
|
||||
if (!view || from == null || to == null) return
|
||||
let insert = selectedKeys.join(', ')
|
||||
|
||||
// Smart separator handling for cursor-only insertion (from === to)
|
||||
if (from === to && insert.length > 0) {
|
||||
const bFrom = braceFrom ?? from
|
||||
const bTo = braceTo ?? to
|
||||
// Add ", " before inserted keys if adjacent to existing content
|
||||
if (from > bFrom) {
|
||||
const charBefore = view.state.doc.sliceString(from - 1, from)
|
||||
if (!/[,\s]/.test(charBefore)) {
|
||||
insert = ', ' + insert
|
||||
}
|
||||
}
|
||||
// Add ", " after inserted keys if adjacent to existing content
|
||||
if (to < bTo) {
|
||||
const charAfter = view.state.doc.sliceString(to, to + 1)
|
||||
if (!/[,\s]/.test(charAfter)) {
|
||||
insert = insert + ', '
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
view.dispatch({ changes: { from, to, insert } })
|
||||
view.focus()
|
||||
},
|
||||
[view, from, to, braceFrom, braceTo]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (evt: CustomEvent) => {
|
||||
const detail = evt.detail || {}
|
||||
|
||||
if (detail.insertFrom == null) {
|
||||
// Not inside a cite — insert \cite{} and open modal
|
||||
if (!view) return
|
||||
const pos = view.state.selection.main.head
|
||||
const insertText = '\\cite{}'
|
||||
view.dispatch({
|
||||
changes: { from: pos, to: pos, insert: insertText },
|
||||
})
|
||||
const newFrom = pos + insertText.indexOf('{') + 1
|
||||
setFrom(newFrom)
|
||||
setTo(newFrom)
|
||||
setBraceFrom(newFrom)
|
||||
setBraceTo(newFrom)
|
||||
setInitialKeys([])
|
||||
} else {
|
||||
setFrom(detail.insertFrom)
|
||||
setTo(detail.insertTo)
|
||||
setBraceFrom(detail.braceFrom ?? detail.insertFrom)
|
||||
setBraceTo(detail.braceTo ?? detail.insertTo)
|
||||
setInitialKeys(detail.selectedTokens || [])
|
||||
}
|
||||
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
window.addEventListener('reference:openPicker', handler as EventListener)
|
||||
return () =>
|
||||
window.removeEventListener(
|
||||
'reference:openPicker',
|
||||
handler as EventListener
|
||||
)
|
||||
}, [view])
|
||||
|
||||
return (
|
||||
<ReferencePickerModal
|
||||
show={open}
|
||||
onClose={onClose}
|
||||
onApply={onApply}
|
||||
initialKeys={initialKeys}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,338 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import {
|
||||
OLModal,
|
||||
OLModalBody,
|
||||
OLModalFooter,
|
||||
OLModalHeader,
|
||||
OLModalTitle,
|
||||
} from '@/shared/components/ol/ol-modal'
|
||||
import OLButton from '@/shared/components/ol/ol-button'
|
||||
import { useReferencesContext } from '@/features/ide-react/context/references-context'
|
||||
import Tag from '@/shared/components/tag'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { Bib2JsonEntry } from '@/features/ide-react/references/types'
|
||||
|
||||
type FocusArea = 'search' | 'list' | 'footer'
|
||||
|
||||
const SEARCH_FIELD_OPTIONS = [
|
||||
{ label: 'Author', value: 'author' },
|
||||
{ label: 'Title', value: 'title' },
|
||||
{ label: 'Year', value: 'year' },
|
||||
{ label: 'Journal', value: 'journal' },
|
||||
{ label: 'Key', value: 'EntryKey' },
|
||||
] as const
|
||||
|
||||
const DEFAULT_FIELDS = ['author', 'title', 'year', 'journal', 'EntryKey']
|
||||
|
||||
function matchesFields(
|
||||
entry: Bib2JsonEntry,
|
||||
query: string,
|
||||
fields: string[]
|
||||
): boolean {
|
||||
const q = query.toLowerCase()
|
||||
const noFilter = fields.length === 0
|
||||
if ((noFilter || fields.includes('EntryKey')) && entry.EntryKey.toLowerCase().includes(q)) return true
|
||||
const f = entry.Fields
|
||||
if ((noFilter || fields.includes('title')) && f.title?.toLowerCase().includes(q)) return true
|
||||
if ((noFilter || fields.includes('author')) && f.author?.toLowerCase().includes(q)) return true
|
||||
if ((noFilter || fields.includes('journal')) && f.journal?.toLowerCase().includes(q)) return true
|
||||
if ((noFilter || fields.includes('year')) && f.year?.toLowerCase().includes(q)) return true
|
||||
return false
|
||||
}
|
||||
|
||||
export default function ReferencePickerModal({
|
||||
show,
|
||||
onClose,
|
||||
onApply,
|
||||
initialKeys,
|
||||
}: {
|
||||
show: boolean
|
||||
onClose: () => void
|
||||
onApply: (selectedKeys: string[]) => void
|
||||
initialKeys: string[]
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
const { searchLocalReferences } = useReferencesContext()
|
||||
|
||||
const [query, setQuery] = useState('')
|
||||
const [selectedKeys, setSelectedKeys] = useState<string[]>([])
|
||||
|
||||
const [results, setResults] = useState<{ _source: Bib2JsonEntry }[]>([])
|
||||
const [selectedFields, setSelectedFields] =
|
||||
useState<string[]>(DEFAULT_FIELDS)
|
||||
|
||||
// Ref holding initial key tokens that still need to be matched against
|
||||
// actual bib entries once the first search completes.
|
||||
const pendingInitialKeysRef = useRef<string[]>([])
|
||||
|
||||
// Reset state and load fresh entries every time the modal opens
|
||||
const [openCount, setOpenCount] = useState(0)
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
setQuery('')
|
||||
setSelectedKeys([])
|
||||
setResults([])
|
||||
pendingInitialKeysRef.current = [...initialKeys]
|
||||
setOpenCount(c => c + 1)
|
||||
}
|
||||
}, [show, initialKeys])
|
||||
|
||||
useEffect(() => {
|
||||
if (!show) return
|
||||
let cancelled = false
|
||||
|
||||
const perform = async () => {
|
||||
// The module's enhanced index handles empty query as "list all"
|
||||
const r = await searchLocalReferences(query.trim() || '')
|
||||
if (cancelled) return
|
||||
|
||||
// Apply field filtering client-side
|
||||
if (query.trim() && selectedFields.length > 0 && selectedFields.length < DEFAULT_FIELDS.length) {
|
||||
setResults(r.hits.filter(h => matchesFields(h._source, query.trim(), selectedFields)))
|
||||
} else {
|
||||
setResults(r.hits)
|
||||
}
|
||||
|
||||
// Match pending initial keys (from selection) against known bib keys
|
||||
if (pendingInitialKeysRef.current.length > 0) {
|
||||
const knownKeys = new Set(r.hits.map(h => h._source.EntryKey))
|
||||
const matched = pendingInitialKeysRef.current.filter(k =>
|
||||
knownKeys.has(k)
|
||||
)
|
||||
if (matched.length > 0) {
|
||||
setSelectedKeys(matched)
|
||||
}
|
||||
pendingInitialKeysRef.current = []
|
||||
}
|
||||
}
|
||||
|
||||
perform()
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
// openCount ensures a fresh search on every modal open
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [query, searchLocalReferences, selectedFields, show, openCount])
|
||||
|
||||
const filteredKeys = useMemo(
|
||||
() => results.map(r => r._source.EntryKey),
|
||||
[results]
|
||||
)
|
||||
|
||||
const [focusArea, setFocusArea] = useState<FocusArea>('search')
|
||||
const [focusedIndex, setFocusedIndex] = useState<number | null>(null)
|
||||
const searchRef = useRef<HTMLInputElement | null>(null)
|
||||
const footerRef = useRef<HTMLDivElement | null>(null)
|
||||
|
||||
const toggleKey = useCallback((key: string) => {
|
||||
setSelectedKeys(prev =>
|
||||
prev.includes(key) ? prev.filter(x => x !== key) : [...prev, key]
|
||||
)
|
||||
}, [])
|
||||
|
||||
const handleApply = useCallback(() => {
|
||||
onApply(selectedKeys)
|
||||
onClose()
|
||||
}, [selectedKeys, onApply, onClose])
|
||||
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
setTimeout(() => searchRef.current?.focus(), 0)
|
||||
setFocusArea('search')
|
||||
setFocusedIndex(null)
|
||||
}
|
||||
}, [show])
|
||||
|
||||
const onKeyDown = useCallback(
|
||||
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (focusArea === 'search') {
|
||||
if (event.key === 'ArrowDown') {
|
||||
event.preventDefault()
|
||||
setFocusArea('list')
|
||||
setFocusedIndex(0)
|
||||
}
|
||||
} else if (focusArea === 'list') {
|
||||
if (event.key === 'ArrowDown') {
|
||||
event.preventDefault()
|
||||
setFocusedIndex(prev =>
|
||||
prev == null ? 0 : Math.min(filteredKeys.length - 1, prev + 1)
|
||||
)
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
event.preventDefault()
|
||||
setFocusedIndex(prev =>
|
||||
prev == null ? 0 : Math.max(0, prev - 1)
|
||||
)
|
||||
} else if (event.key === ' ') {
|
||||
event.preventDefault()
|
||||
if (focusedIndex != null && filteredKeys[focusedIndex]) {
|
||||
toggleKey(filteredKeys[focusedIndex])
|
||||
}
|
||||
} else if (event.key === 'Enter') {
|
||||
event.preventDefault()
|
||||
handleApply()
|
||||
}
|
||||
}
|
||||
|
||||
if (event.key === 'Tab') {
|
||||
event.preventDefault()
|
||||
const areas: FocusArea[] = ['search', 'list', 'footer']
|
||||
const currentIdx = areas.indexOf(focusArea)
|
||||
const nextIdx = event.shiftKey
|
||||
? (currentIdx - 1 + areas.length) % areas.length
|
||||
: (currentIdx + 1) % areas.length
|
||||
const nextArea = areas[nextIdx]
|
||||
setFocusArea(nextArea)
|
||||
if (nextArea === 'list') {
|
||||
setFocusedIndex(0)
|
||||
} else if (nextArea === 'search') {
|
||||
setFocusedIndex(null)
|
||||
setTimeout(() => searchRef.current?.focus(), 0)
|
||||
} else {
|
||||
setFocusedIndex(null)
|
||||
setTimeout(
|
||||
() => footerRef.current?.querySelector('button')?.focus(),
|
||||
0
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
[focusArea, focusedIndex, filteredKeys, toggleKey, handleApply]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (focusArea === 'list' && focusedIndex !== null) {
|
||||
const el = document.getElementById(
|
||||
`reference-picker-item-${focusedIndex}`
|
||||
)
|
||||
if (el) {
|
||||
el.focus()
|
||||
searchRef.current?.setAttribute('aria-activedescendant', el.id)
|
||||
}
|
||||
}
|
||||
if (focusArea !== 'list') {
|
||||
searchRef.current?.removeAttribute('aria-activedescendant')
|
||||
}
|
||||
}, [focusArea, focusedIndex])
|
||||
|
||||
const toggleField = useCallback((value: string) => {
|
||||
setSelectedFields(prev =>
|
||||
prev.includes(value) ? prev.filter(v => v !== value) : [...prev, value]
|
||||
)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<OLModal show={show} onHide={onClose} size="lg">
|
||||
<OLModalHeader>
|
||||
<OLModalTitle data-testid="reference-picker-title">
|
||||
{t('references_picker_title')}
|
||||
</OLModalTitle>
|
||||
</OLModalHeader>
|
||||
<OLModalBody>
|
||||
<div onKeyDown={onKeyDown} className="reference-picker">
|
||||
<input
|
||||
aria-label={t('search_references')}
|
||||
type="search"
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
autoFocus
|
||||
ref={searchRef}
|
||||
className="form-control"
|
||||
data-testid="reference-picker-search"
|
||||
/>
|
||||
|
||||
<div className="search-selectors">
|
||||
{SEARCH_FIELD_OPTIONS.map(s => (
|
||||
<label key={s.value} className="search-selector-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedFields.includes(s.value)}
|
||||
onChange={() => toggleField(s.value)}
|
||||
/>
|
||||
<span>{s.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="selected-chips"
|
||||
data-testid="reference-picker-selected-chips"
|
||||
>
|
||||
{selectedKeys.map(key => (
|
||||
<Tag key={key} closeBtnProps={{ onClick: () => toggleKey(key) }}>
|
||||
{key}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
role="listbox"
|
||||
aria-label={t('reference_search_results')}
|
||||
id="reference-picker-list"
|
||||
data-testid="reference-picker-list"
|
||||
>
|
||||
{results.length === 0 ? (
|
||||
<div
|
||||
className="reference-picker-empty"
|
||||
data-testid="reference-picker-empty"
|
||||
>
|
||||
{t('references_picker_empty_hint')}
|
||||
</div>
|
||||
) : (
|
||||
results.map((hit, index) => {
|
||||
const key = hit._source.EntryKey
|
||||
const { title = '', author = '', year = '', journal = '' } =
|
||||
hit._source.Fields ?? {}
|
||||
const meta = [
|
||||
author,
|
||||
author && year ? ` — ${year}` : year,
|
||||
journal ? ` · ${journal}` : '',
|
||||
].join('')
|
||||
|
||||
return (
|
||||
<label
|
||||
id={`reference-picker-item-${index}`}
|
||||
key={key}
|
||||
className={`d-block ${focusedIndex === index ? 'focused' : ''}`}
|
||||
role="option"
|
||||
aria-selected={selectedKeys.includes(key)}
|
||||
tabIndex={0}
|
||||
onClick={() => setFocusedIndex(index)}
|
||||
data-entry-key={key}
|
||||
data-testid={`reference-picker-item-${key}`}
|
||||
>
|
||||
<div className="hit-head">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedKeys.includes(key)}
|
||||
onChange={() => toggleKey(key)}
|
||||
/>
|
||||
<span className="hit-key">{key}</span>
|
||||
</div>
|
||||
<div className="hit-main">
|
||||
<span className="hit-title">{title}</span>
|
||||
<span className="hit-meta">{meta}</span>
|
||||
</div>
|
||||
</label>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</OLModalBody>
|
||||
<OLModalFooter>
|
||||
<div ref={footerRef}>
|
||||
<OLButton variant="secondary" onClick={onClose}>
|
||||
{t('cancel')}
|
||||
</OLButton>
|
||||
<OLButton
|
||||
variant="primary"
|
||||
onClick={handleApply}
|
||||
data-testid="reference-picker-insert"
|
||||
>
|
||||
{t('insert')}
|
||||
</OLButton>
|
||||
</div>
|
||||
</OLModalFooter>
|
||||
</OLModal>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user