Files
Verso/services/web/frontend/js/features/command-palette/hooks/use-file-tree-command-source.ts
T
Mathias Jakobsen eddec90cb1 Merge pull request #33649 from overleaf/mj-command-palette
[web] Add command palette

GitOrigin-RevId: 5bf1903836810ca5f0e2bc7f6c00a4b1da797ea2
2026-05-21 08:07:04 +00:00

128 lines
3.3 KiB
TypeScript

import { useCallback, useMemo } from 'react'
import { CommandPaletteSearchResult, CommandPaletteSource } from '../types'
import { useFileTreeData } from '@/shared/context/file-tree-data-context'
import { Folder } from '@ol-types/folder'
import MiniSearch from 'minisearch'
import { findInTree } from '@/features/file-tree/util/find-in-tree'
import { debugConsole } from '@/utils/debugging'
import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
type FlatFileTree = { path: string; name: string; id: string }[]
const useFileTreeCommandSource = (): CommandPaletteSource => {
const { fileTreeData } = useFileTreeData()
const { openDocWithId, openFileWithId } = useEditorManagerContext()
const flatFileTree = useMemo(
() => flattenFileTree(fileTreeData),
[fileTreeData]
)
const index = useMemo(
() => flatFileTree && indexFromFlatFileTree(flatFileTree),
[flatFileTree]
)
const onSelect = useCallback(
async (id: string) => {
if (!fileTreeData) {
return
}
const file = findInTree(fileTreeData, id)
if (!file) {
return
}
if (file.type === 'doc') {
await openDocWithId(file.entity._id)
} else if (file.type === 'fileRef') {
openFileWithId(file.entity._id)
} else {
debugConsole.error('Attempting to open invalid entity type')
}
},
[fileTreeData, openDocWithId, openFileWithId]
)
const defaults = useCallback((): CommandPaletteSearchResult[] => {
if (!flatFileTree) {
return []
}
const files: CommandPaletteSearchResult[] = flatFileTree
.slice(0, 10)
.map(({ path, name, id }) => ({
title: name,
description: path,
onSelect: () => onSelect(id),
score: 1,
}))
return files
}, [flatFileTree, onSelect])
const source: CommandPaletteSource = useMemo(
() => ({
id: 'file-tree',
search(query) {
if (!index) {
return []
}
const result = index.search(query, {
prefix: true,
fuzzy: term => (term.length > 3 ? 0.2 : false),
})
return result.map(({ path, name, id, score }) => ({
title: name,
description: path,
onSelect: () => onSelect(id),
score,
}))
},
defaults,
}),
[index, onSelect, defaults]
)
return source
}
export default useFileTreeCommandSource
const flattenFileTree = (
folder: Folder,
parentPath = ''
): FlatFileTree | null => {
if (!folder) {
return null
}
const currentPath = `${parentPath}/${folder.name}`
const files = folder.fileRefs.map(file => ({
path: `${currentPath}/${file.name}`.replace(/^\/rootFolder\//, ''),
name: file.name,
id: file._id,
}))
const docs = folder.docs.map(doc => ({
path: `${currentPath}/${doc.name}`.replace(/^\/rootFolder\//, ''),
name: doc.name,
id: doc._id,
}))
const subFolders = folder.folders
.flatMap(subFolder => flattenFileTree(subFolder, currentPath))
.filter(x => x !== null)
return [...docs, ...files, ...subFolders]
}
function indexFromFlatFileTree(flatFileTree: FlatFileTree): MiniSearch {
const miniSearch = new MiniSearch({
fields: ['path', 'name'],
storeFields: ['path', 'name'],
})
if (!flatFileTree) {
return miniSearch
}
miniSearch.addAll(flatFileTree)
return miniSearch
}