From 4b86a54241e6de50bf204460272ee544ee45c93f Mon Sep 17 00:00:00 2001 From: Tim Down <158919+timdown@users.noreply.github.com> Date: Wed, 15 Nov 2023 11:35:18 +0000 Subject: [PATCH] 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 --- .../ide-react/components/editor-and-pdf.tsx | 8 ++++-- .../components/editor-and-sidebar.tsx | 13 +++++----- .../features/ide-react/hooks/use-open-file.ts | 7 ++--- .../hooks/use-select-file-tree-entity.ts | 26 +++++++++++++++++++ 4 files changed, 42 insertions(+), 12 deletions(-) create mode 100644 services/web/frontend/js/features/ide-react/hooks/use-select-file-tree-entity.ts diff --git a/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx b/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx index 41f07edc37..32d9a7aeb9 100644 --- a/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx +++ b/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(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') diff --git a/services/web/frontend/js/features/ide-react/components/editor-and-sidebar.tsx b/services/web/frontend/js/features/ide-react/components/editor-and-sidebar.tsx index 6b5b99a154..16b51c49d0 100644 --- a/services/web/frontend/js/features/ide-react/components/editor-and-sidebar.tsx +++ b/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('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) diff --git a/services/web/frontend/js/features/ide-react/hooks/use-open-file.ts b/services/web/frontend/js/features/ide-react/hooks/use-open-file.ts index be73413799..9ddd4055c5 100644 --- a/services/web/frontend/js/features/ide-react/hooks/use-open-file.ts +++ b/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 diff --git a/services/web/frontend/js/features/ide-react/hooks/use-select-file-tree-entity.ts b/services/web/frontend/js/features/ide-react/hooks/use-select-file-tree-entity.ts new file mode 100644 index 0000000000..966e024a6e --- /dev/null +++ b/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 } +}