diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index f06fc298b6..358e6a6118 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -268,6 +268,10 @@ "do_this_later": "", "do_you_want_to_change_your_primary_email_address_to": "", "do_you_want_to_overwrite_them": "", + "document_too_long": "", + "document_too_long_detail": "", + "document_updated_externally": "", + "document_updated_externally_detail": "", "documentation": "", "doesnt_match": "", "doing_this_allow_log_in_through_institution": "", @@ -336,6 +340,8 @@ "enter_image_url": "", "entry_point": "", "error": "", + "error_opening_document": "", + "error_opening_document_detail": "", "error_performing_request": "", "example_project": "", "existing_plan_active_until_term_end": "", @@ -366,6 +372,7 @@ "file_outline": "", "file_size": "", "files_cannot_include_invalid_characters": "", + "files_selected": "", "find_out_more": "", "find_out_more_about_institution_login": "", "find_out_more_about_the_file_outline": "", @@ -745,6 +752,7 @@ "no_projects": "", "no_resolved_threads": "", "no_search_results": "", + "no_selection_select_file": "", "no_symbols_found": "", "no_thanks_cancel_now": "", "normal": "", @@ -770,6 +778,7 @@ "only_group_admin_or_managers_can_delete_your_account_4": "", "only_group_admin_or_managers_can_delete_your_account_5": "", "only_importer_can_refresh": "", + "open_a_file_on_the_left": "", "open_file": "", "open_link": "", "open_project": "", @@ -1195,6 +1204,8 @@ "token_read_only": "", "token_read_write": "", "too_many_attempts": "", + "too_many_comments_or_tracked_changes": "", + "too_many_comments_or_tracked_changes_detail": "", "too_many_files_uploaded_throttled_short_period": "", "too_many_requests": "", "too_many_search_results": "", diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-root.jsx b/services/web/frontend/js/features/file-tree/components/file-tree-root.jsx index 5efea694e8..d36e2a49ee 100644 --- a/services/web/frontend/js/features/file-tree/components/file-tree-root.jsx +++ b/services/web/frontend/js/features/file-tree/components/file-tree-root.jsx @@ -29,6 +29,7 @@ const FileTreeRoot = React.memo(function FileTreeRoot({ setStartedFreeTrial, onSelect, onInit, + onDelete, isConnected, }) { const { _id: projectId } = useProjectContext(projectContextPropTypes) @@ -52,7 +53,7 @@ const FileTreeRoot = React.memo(function FileTreeRoot({ - + @@ -62,8 +63,8 @@ const FileTreeRoot = React.memo(function FileTreeRoot({ ) }) -function FileTreeRootFolder() { - useFileTreeSocketListener() +function FileTreeRootFolder({ onDelete }) { + useFileTreeSocketListener(onDelete) const { fileTreeData } = useFileTreeData() const { isOver, dropRef } = useDroppable(fileTreeData._id) @@ -93,9 +94,14 @@ function FileTreeRootFolder() { ) } +FileTreeRootFolder.propTypes = { + onDelete: PropTypes.func, +} + FileTreeRoot.propTypes = { onSelect: PropTypes.func.isRequired, onInit: PropTypes.func.isRequired, + onDelete: PropTypes.func, isConnected: PropTypes.bool.isRequired, setRefProviderEnabled: PropTypes.func.isRequired, setStartedFreeTrial: PropTypes.func.isRequired, diff --git a/services/web/frontend/js/features/file-tree/hooks/file-tree-socket-listener.js b/services/web/frontend/js/features/file-tree/hooks/file-tree-socket-listener.js index 0c85efc873..239b81bd8c 100644 --- a/services/web/frontend/js/features/file-tree/hooks/file-tree-socket-listener.js +++ b/services/web/frontend/js/features/file-tree/hooks/file-tree-socket-listener.js @@ -4,9 +4,10 @@ import PropTypes from 'prop-types' import { useUserContext } from '../../../shared/context/user-context' import { useFileTreeData } from '../../../shared/context/file-tree-data-context' import { useFileTreeSelectable } from '../contexts/file-tree-selectable' -import { findInTreeOrThrow } from '../util/find-in-tree' +import { findInTree, findInTreeOrThrow } from '../util/find-in-tree' +import { useIdeContext } from '@/shared/context/ide-context' -export function useFileTreeSocketListener() { +export function useFileTreeSocketListener(onDelete) { const user = useUserContext({ id: PropTypes.string.isRequired, }) @@ -21,7 +22,7 @@ export function useFileTreeSocketListener() { } = useFileTreeData() const { selectedEntityIds, selectedEntityParentIds, select, unselect } = useFileTreeSelectable() - const socket = window._ide && window._ide.socket + const { socket } = useIdeContext() const selectEntityIfCreatedByUser = useCallback( // hack to automatically re-open refreshed linked files @@ -52,6 +53,7 @@ export function useFileTreeSocketListener() { useEffect(() => { function handleDispatchDelete(entityId) { + const entity = findInTree(fileTreeData, entityId) unselect(entityId) if (selectedEntityParentIds.has(entityId)) { // we're deleting a folder with a selected children so we need to @@ -67,6 +69,9 @@ export function useFileTreeSocketListener() { } } dispatchDelete(entityId) + if (onDelete) { + onDelete(entity) + } } if (socket) socket.on('removeEntity', handleDispatchDelete) return () => { @@ -79,6 +84,7 @@ export function useFileTreeSocketListener() { fileTreeData, selectedEntityIds, selectedEntityParentIds, + onDelete, ]) useEffect(() => { diff --git a/services/web/frontend/js/features/ide-react/components/editor/editor.tsx b/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx similarity index 74% rename from services/web/frontend/js/features/ide-react/components/editor/editor.tsx rename to services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx index eb0635069d..4140f22c42 100644 --- a/services/web/frontend/js/features/ide-react/components/editor/editor.tsx +++ b/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx @@ -1,4 +1,4 @@ -import { useRef } from 'react' +import { ReactNode, useRef } from 'react' import { useTranslation } from 'react-i18next' import { ImperativePanelHandle, @@ -9,21 +9,18 @@ import { HorizontalResizeHandle } from '@/features/ide-react/components/resize/h import { HorizontalToggler } from '@/features/ide-react/components/resize/horizontal-toggler' import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel' import { useLayoutContext } from '@/shared/context/layout-context' -import { EditorPane } from '@/features/ide-react/components/editor/editor-pane' -import PlaceholderFile from '@/features/ide-react/components/layout/placeholder/placeholder-file' -import PlaceholderPdf from '@/features/ide-react/components/layout/placeholder/placeholder-pdf' +import PdfPreview from '@/features/pdf-preview/components/pdf-preview' +import { DefaultSynctexControl } from '@/features/pdf-preview/components/detach-synctex-control' import classnames from 'classnames' export type EditorProps = { shouldPersistLayout?: boolean - openDocId: string | null - fileTreeReady: boolean + editorContent: ReactNode } -export default function Editor({ +export default function EditorAndPdf({ shouldPersistLayout = false, - openDocId, - fileTreeReady, + editorContent, }: EditorProps) { const { t } = useTranslation() const { view, pdfLayout, changeLayout } = useLayoutContext() @@ -35,10 +32,6 @@ export default function Editor({ useCollapsiblePanel(pdfIsOpen, pdfPanelRef) - if (view === 'file') { - return - } - const historyIsOpen = view === 'history' function setPdfIsOpen(isOpen: boolean) { @@ -58,12 +51,13 @@ export default function Editor({ className={classnames({ hide: historyIsOpen })} > {editorIsVisible ? ( - - + + {editorContent} ) : null} {isDualPane ? ( @@ -76,6 +70,9 @@ export default function Editor({ tooltipWhenOpen={t('tooltip_hide_pdf')} tooltipWhenClosed={t('tooltip_show_pdf')} /> +
+ +
) : null} {pdfIsOpen ? ( @@ -87,8 +84,9 @@ export default function Editor({ minSize={5} collapsible onCollapse={collapsed => setPdfIsOpen(!collapsed)} + className="ide-react-panel" > - + ) : null} 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 53cb7a05a3..e9e6c96d5a 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 @@ -1,13 +1,28 @@ -import React, { useCallback, useState } from 'react' +import React, { useCallback, useEffect, useRef, useState } from 'react' import TwoColumnMainContent from '@/features/ide-react/components/layout/two-column-main-content' -import Editor from '@/features/ide-react/components/editor/editor' import EditorSidebar from '@/features/ide-react/components/editor-sidebar' -import customLocalStorage from '@/infrastructure/local-storage' import History from '@/features/ide-react/components/history' import { HistoryProvider } from '@/features/history/context/history-context' import { useProjectContext } from '@/shared/context/project-context' import { useLayoutContext } from '@/shared/context/layout-context' -import { FileTreeFindResult } from '@/features/ide-react/types/file-tree' +import { + FileTreeDeleteHandler, + FileTreeDocumentFindResult, + FileTreeFileRefFindResult, + FileTreeFindResult, +} from '@/features/ide-react/types/file-tree' +import usePersistedState from '@/shared/hooks/use-persisted-state' +import FileView from '@/features/file-view/components/file-view' +import { FileRef } from '../../../../../types/file-ref' +import { EditorPane } from '@/features/ide-react/components/editor/editor-pane' +import EditorAndPdf from '@/features/ide-react/components/editor-and-pdf' +import MultipleSelectionPane from '@/features/ide-react/components/editor/multiple-selection-pane' +import NoSelectionPane from '@/features/ide-react/components/editor/no-selection-pane' +import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context' +import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context' +import NoOpenDocPane from '@/features/ide-react/components/editor/no-open-doc-pane' +import { debugConsole } from '@/utils/debugging' +import { HistorySidebar } from '@/features/ide-react/components/history-sidebar' type EditorAndSidebarProps = { shouldPersistLayout: boolean @@ -15,6 +30,25 @@ type EditorAndSidebarProps = { setLeftColumnDefaultSize: React.Dispatch> } +// `FileViewHeader`, which is TypeScript, expects a BinaryFile, which has a +// `created` property of type `Date`, while `TPRFileViewInfo`, written in JS, +// into which `FileViewHeader` passes its BinaryFile, expects a file object with +// `created` property of type `string`, which is a mismatch. `TPRFileViewInfo` +// is the only one making runtime complaints and it seems that other uses of +// `FileViewHeader` pass in a string for `created`, so that's what this function +// does too. +function fileViewFile(fileRef: FileRef) { + return { + _id: fileRef._id, + name: fileRef.name, + id: fileRef._id, + type: 'file', + selected: true, + linkedFileData: fileRef.linkedFileData, + created: fileRef.created, + } +} + export function EditorAndSidebar({ shouldPersistLayout, leftColumnDefaultSize, @@ -22,12 +56,21 @@ export function EditorAndSidebar({ }: EditorAndSidebarProps) { const [leftColumnIsOpen, setLeftColumnIsOpen] = useState(true) const { rootDocId, _id: projectId } = useProjectContext() + const { eventEmitter } = useIdeReactContext() + const { openDocId: openDocWithId, currentDocumentId } = + useEditorManagerContext() const { view } = useLayoutContext() const historyIsOpen = view === 'history' - const [openDocId, setOpenDocId] = useState( - () => customLocalStorage.getItem(`doc.open_id.${projectId}`) || rootDocId + // Persist the open document ID in local storage + const [openDocId, setOpenDocId] = usePersistedState( + `doc.open_id.${projectId}`, + rootDocId ) + const [openEntity, setOpenEntity] = useState< + FileTreeDocumentFindResult | FileTreeFileRefFindResult | null + >(null) + const [selectedEntityCount, setSelectedEntityCount] = useState(0) const [fileTreeReady, setFileTreeReady] = useState(false) const handleFileTreeInit = useCallback(() => { @@ -36,37 +79,140 @@ export function EditorAndSidebar({ const handleFileTreeSelect = useCallback( (selectedEntities: FileTreeFindResult[]) => { - const firstDocId = - selectedEntities.find(result => result.type === 'doc')?.entity._id || - null - setOpenDocId(firstDocId) + debugConsole.log('File tree selection changed', selectedEntities) + setSelectedEntityCount(selectedEntities.length) + if (selectedEntities.length !== 1) { + setOpenEntity(null) + return + } + const [selected] = selectedEntities + + if (selected.type === 'folder') { + return + } + + setOpenEntity(selected) + if (selected.type === 'doc') { + setOpenDocId(selected.entity._id) + } }, - [] + [setOpenDocId] ) - const leftColumnContent = ( + const handleFileTreeDelete: FileTreeDeleteHandler = useCallback( + entity => { + eventEmitter.emit('entity:deleted', entity) + // Select the root document if the current document was deleted + if (entity.entity._id === openDocId) { + openDocWithId(rootDocId) + } + }, + [eventEmitter, openDocId, openDocWithId, rootDocId] + ) + + // Synchronize the file tree when openDoc or openDocId is called on the editor + // manager context from elsewhere. If the file tree does change, it will + // trigger the onSelect handler in this component, which will update the local + // state. + useEffect(() => { + debugConsole.log( + `currentDocumentId changed to ${currentDocumentId}. Updating file tree` + ) + if (currentDocumentId === null) { + return + } + + window.dispatchEvent( + new CustomEvent('editor.openDoc', { detail: currentDocumentId }) + ) + }, [currentDocumentId]) + + // Store openDocWithId, which is unstable, in a ref and keep the ref + // synchronized with the source + const openDocWithIdRef = useRef(openDocWithId) + + useEffect(() => { + openDocWithIdRef.current = openDocWithId + }, [openDocWithId]) + + // Open a document in the editor when the local document ID changes + useEffect(() => { + if (!fileTreeReady || !openDocId) { + return + } + debugConsole.log( + `Observed change in local state. Opening document with ID ${openDocId}` + ) + openDocWithIdRef.current(openDocId) + }, [fileTreeReady, openDocId]) + + const leftColumnContent = historyIsOpen ? ( + + ) : ( ) - const rightColumnContent = ( - <> - {/* Recreate the history context when the history view is toggled */} - {historyIsOpen && ( - - - - )} - + + + ) + } else { + let editorContent = null + + // Always have the editor mounted when not in history view, and hide and + // show it as necessary + const editorPane = ( + - - ) + ) + if (openDocId === undefined) { + rightColumnContent = + } else if (selectedEntityCount === 0) { + rightColumnContent = ( + <> + {editorPane} + + + ) + } else if (selectedEntityCount > 1) { + editorContent = ( + <> + {editorPane} + + + ) + } else if (openEntity) { + editorContent = + openEntity.type === 'doc' ? ( + editorPane + ) : ( + <> + {editorPane} + + + ) + } + + if (editorContent) { + rightColumnContent = ( + + ) + } + } return ( void onFileTreeSelect: FileTreeSelectHandler + onFileTreeDelete: FileTreeDeleteHandler } export default function EditorSidebar({ shouldPersistLayout, onFileTreeInit, onFileTreeSelect, + onFileTreeDelete, }: EditorSidebarProps) { - const { view } = useLayoutContext() - const historyIsOpen = view === 'history' - return ( <> -