Merge pull request #6683 from overleaf/ta-file-tree-selection-flat

File Tree File Selection in Flat PDF View

GitOrigin-RevId: a6169e7d167e26f4b086ca13acd863988ce07c2f

services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js

@@ -15,6 +15,7 @@ import { findInTree } from '../util/find-in-tree'
 import { useFileTreeData } from '../../../shared/context/file-tree-data-context'
 import { useProjectContext } from '../../../shared/context/project-context'
 import { useEditorContext } from '../../../shared/context/editor-context'
+import { useLayoutContext } from '../../../shared/context/layout-context'
 import usePersistedState from '../../../shared/hooks/use-persisted-state'
 import usePreviousValue from '../../../shared/hooks/use-previous-value'
 
@@ -193,7 +194,9 @@ const projectContextPropTypes = {
 const editorContextPropTypes = {
   permissionsLevel: PropTypes.oneOf(['readOnly', 'readAndWrite', 'owner']),
 }
+
 export function useSelectableEntity(id) {
+  const { view, setView } = useLayoutContext(layoutContextPropTypes)
   const { selectedEntityIds, selectOrMultiSelectEntity } = useContext(
     FileTreeSelectableContext
   )
@@ -203,8 +206,9 @@ export function useSelectableEntity(id) {
   const handleEvent = useCallback(
     ev => {
       selectOrMultiSelectEntity(id, ev.ctrlKey || ev.metaKey)
+      setView('editor')
     },
-    [id, selectOrMultiSelectEntity]
+    [id, selectOrMultiSelectEntity, setView]
   )
 
   const handleClick = useCallback(
@@ -233,20 +237,26 @@ export function useSelectableEntity(id) {
     [id, handleEvent, selectedEntityIds]
   )
 
+  const isVisuallySelected = isSelected && view !== 'pdf'
   const props = useMemo(
     () => ({
-      className: classNames({ selected: isSelected }),
-      'aria-selected': isSelected,
+      className: classNames({ selected: isVisuallySelected }),
+      'aria-selected': isVisuallySelected,
       onClick: handleClick,
       onContextMenu: handleContextMenu,
       onKeyPress: handleKeyPress,
     }),
-    [handleClick, handleContextMenu, handleKeyPress, isSelected]
+    [handleClick, handleContextMenu, handleKeyPress, isVisuallySelected]
   )
 
   return { isSelected, props }
 }
 
+const layoutContextPropTypes = {
+  view: PropTypes.string,
+  setView: PropTypes.func.isRequired,
+}
+
 export function useFileTreeSelectable() {
   const context = useContext(FileTreeSelectableContext)