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)