Merge pull request #15754 from overleaf/td-ide-page-pdf-detach-fixes

React IDE page: fix file preview with detached PDF and make PDF resizer toggler reattach PDF

GitOrigin-RevId: e28bf753174fa445af70e5d3efae05f89aa5a21c

services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx

@@ -23,11 +23,12 @@ export default function EditorAndPdf({
   editorContent,
 }: EditorProps) {
   const { t } = useTranslation()
-  const { view, pdfLayout, changeLayout } = useLayoutContext()
+  const { view, pdfLayout, changeLayout, detachRole, reattach } =
+    useLayoutContext()
 
   const pdfPanelRef = useRef<ImperativePanelHandle>(null)
   const isDualPane = pdfLayout === 'sideBySide'
-  const editorIsVisible = isDualPane || view === 'editor'
+  const editorIsVisible = isDualPane || view === 'editor' || view === 'file'
   const pdfIsOpen = isDualPane || view === 'pdf'
 
   useCollapsiblePanel(pdfIsOpen, pdfPanelRef)
@@ -36,6 +37,9 @@ export default function EditorAndPdf({
 
   function setPdfIsOpen(isOpen: boolean) {
     if (isOpen) {
+      if (detachRole === 'detacher') {
+        reattach()
+      }
       changeLayout('sideBySide')
     } else {
       changeLayout('flat', 'editor')

services/web/frontend/js/features/ide-react/components/editor-and-sidebar.tsx

@@ -24,6 +24,7 @@ import { debugConsole } from '@/utils/debugging'
 import { HistorySidebar } from '@/features/ide-react/components/history-sidebar'
 import { BinaryFile } from '@/features/file-view/types/binary-file'
 import useScopeValue from '@/shared/hooks/use-scope-value'
+import { useSelectFileTreeEntity } from '@/features/ide-react/hooks/use-select-file-tree-entity'
 
 type EditorAndSidebarProps = {
   shouldPersistLayout: boolean
@@ -72,6 +73,7 @@ export function EditorAndSidebar({
   } = useEditorManagerContext()
   const { view } = useLayoutContext()
   const { projectJoined } = useIdeReactContext()
+  const { selectEntity } = useSelectFileTreeEntity()
   const [, setOpenFile] = useScopeValue<BinaryFile | null>('openFile')
 
   const historyIsOpen = view === 'history'
@@ -86,6 +88,7 @@ export function EditorAndSidebar({
     setFileTreeReady(true)
   }, [])
 
+  // Open a document in the editor when one is selected in the file tree
   const handleFileTreeSelect = useCallback(
     (selectedEntities: FileTreeFindResult[]) => {
       debugConsole.log('File tree selection changed', selectedEntities)
@@ -135,14 +138,10 @@ export function EditorAndSidebar({
   // state.
   useEffect(() => {
     debugConsole.log(`openDocId changed to ${openDocId}`)
-    if (openDocId === null) {
-      return
+    if (openDocId !== null) {
+      selectEntity(openDocId)
     }
-
-    window.dispatchEvent(
-      new CustomEvent('editor.openDoc', { detail: openDocId })
-    )
-  }, [openDocId])
+  }, [openDocId, selectEntity])
 
   // Open a document once the file tree and project are ready
   const initialOpenDoneRef = useRef(false)

services/web/frontend/js/features/ide-react/hooks/use-open-file.ts

@@ -5,16 +5,17 @@ import { findInTree } from '@/features/file-tree/util/find-in-tree'
 
 export function useOpenFile() {
   const ide = useIdeContext()
-  const { fileTreeData } = useFileTreeData()
+
+  const { fileTreeData, setSelectedEntities } = useFileTreeData()
 
   const openFileWithId = useCallback(
     (id: string) => {
       const result = findInTree(fileTreeData, id)
       if (result?.type === 'fileRef') {
-        window.dispatchEvent(new CustomEvent('editor.openDoc', { detail: id }))
+        setSelectedEntities(result)
       }
     },
-    [fileTreeData]
+    [fileTreeData, setSelectedEntities]
   )
 
   // Expose BinaryFilesManager via ide object solely for the benefit of the file

services/web/frontend/js/features/ide-react/hooks/use-select-file-tree-entity.ts

@@ -0,0 +1,26 @@
+import { useFileTreeData } from '@/shared/context/file-tree-data-context'
+import { useCallback } from 'react'
+import { findInTree } from '@/features/file-tree/util/find-in-tree'
+
+export function useSelectFileTreeEntity() {
+  const { fileTreeData, selectedEntities, setSelectedEntities } =
+    useFileTreeData()
+
+  const selectEntity = useCallback(
+    id => {
+      if (
+        selectedEntities.length === 1 &&
+        selectedEntities[0].entity._id === id
+      ) {
+        return
+      }
+      const entityToSelect = findInTree(fileTreeData, id)
+      if (entityToSelect) {
+        setSelectedEntities([entityToSelect])
+      }
+    },
+    [fileTreeData, selectedEntities, setSelectedEntities]
+  )
+
+  return { selectEntity }
+}