From 3e11ee6e5a40e73f5345a2d5f5a2a0463b024953 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Thu, 22 Feb 2024 13:20:37 +0000
Subject: [PATCH] Ensure that the editor state is preserved when switching
 views (#17238)

GitOrigin-RevId: 946b82cb633afbea13a72e30a9ce432aa1a8196d
---
 .../ide-react/components/editor-and-pdf.tsx   | 90 +++++++++----------
 .../components/editor/editor-pane.tsx         | 10 ++-
 .../components/layout/main-layout.tsx         | 12 +--
 .../hooks/use-codemirror-scope.ts             |  3 +
 4 files changed, 58 insertions(+), 57 deletions(-)

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 dfd892bd44..53ba5de77d 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
@@ -13,10 +13,9 @@ import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import { fileViewFile } from '@/features/ide-react/util/file-view'
 import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-open-context'
+import { EditorPane } from '@/features/ide-react/components/editor/editor-pane'
 
-export const EditorAndPdf: FC<{
-  editorPane: React.ReactNode
-}> = ({ editorPane }) => {
+export const EditorAndPdf: FC = () => {
   const [resizing, setResizing] = useState(false)
 
   const { t } = useTranslation()
@@ -43,54 +42,53 @@ export const EditorAndPdf: FC<{
       direction="horizontal"
       className={classNames({
         'ide-panel-group-resizing': resizing,
+        hidden: view === 'history',
       })}
     >
       {/* main */}
-      {editorIsOpen && (
-        <>
-          <Panel
-            id="panel-main"
-            order={1}
-            defaultSize={50}
-            minSize={5}
-            className={classNames('ide-react-panel', {
-              'ide-panel-group-resizing': resizing,
-            })}
-          >
-            {selectedEntityCount === 0 && <NoSelectionPane />}
-            {selectedEntityCount === 1 && openEntity?.type === 'fileRef' && (
-              <FileView file={fileViewFile(openEntity.entity)} />
-            )}
-            {selectedEntityCount === 1 && editorPane}
-            {selectedEntityCount > 1 && (
-              <MultipleSelectionPane
-                selectedEntityCount={selectedEntityCount}
-              />
-            )}
-          </Panel>
+      <Panel
+        id="panel-main"
+        order={1}
+        defaultSize={50}
+        minSize={5}
+        className={classNames('ide-react-panel', {
+          'ide-panel-group-resizing': resizing,
+          hidden: !editorIsOpen,
+        })}
+      >
+        {selectedEntityCount === 0 && <NoSelectionPane />}
+        {selectedEntityCount === 1 && openEntity?.type === 'fileRef' && (
+          <FileView file={fileViewFile(openEntity.entity)} />
+        )}
+        {selectedEntityCount > 1 && (
+          <MultipleSelectionPane selectedEntityCount={selectedEntityCount} />
+        )}
+        <EditorPane />
+      </Panel>
 
-          <HorizontalResizeHandle
-            resizable={pdfLayout === 'sideBySide'}
-            onDoubleClick={togglePdfPane}
-            onDragging={setResizing}
-          >
-            <HorizontalToggler
-              id="editor-pdf"
-              togglerType="east"
-              isOpen={pdfIsOpen}
-              setIsOpen={setPdfIsOpen}
-              tooltipWhenOpen={t('tooltip_hide_pdf')}
-              tooltipWhenClosed={t('tooltip_show_pdf')}
-            />
+      <HorizontalResizeHandle
+        resizable={pdfLayout === 'sideBySide'}
+        onDoubleClick={togglePdfPane}
+        onDragging={setResizing}
+        className={classNames({
+          hidden: !editorIsOpen,
+        })}
+      >
+        <HorizontalToggler
+          id="editor-pdf"
+          togglerType="east"
+          isOpen={pdfIsOpen}
+          setIsOpen={setPdfIsOpen}
+          tooltipWhenOpen={t('tooltip_hide_pdf')}
+          tooltipWhenClosed={t('tooltip_show_pdf')}
+        />
 
-            {pdfLayout === 'sideBySide' && (
-              <div className="synctex-controls">
-                <DefaultSynctexControl />
-              </div>
-            )}
-          </HorizontalResizeHandle>
-        </>
-      )}
+        {pdfLayout === 'sideBySide' && (
+          <div className="synctex-controls">
+            <DefaultSynctexControl />
+          </div>
+        )}
+      </HorizontalResizeHandle>
 
       {/* pdf */}
       <Panel
diff --git a/services/web/frontend/js/features/ide-react/components/editor/editor-pane.tsx b/services/web/frontend/js/features/ide-react/components/editor/editor-pane.tsx
index 4da5a32fa3..4f5f816eef 100644
--- a/services/web/frontend/js/features/ide-react/components/editor/editor-pane.tsx
+++ b/services/web/frontend/js/features/ide-react/components/editor/editor-pane.tsx
@@ -2,7 +2,10 @@ import { Panel, PanelGroup } from 'react-resizable-panels'
 import React, { FC, lazy, Suspense } from 'react'
 import useScopeValue from '@/shared/hooks/use-scope-value'
 import SourceEditor from '@/features/source-editor/components/source-editor'
-import { EditorScopeValue } from '@/features/ide-react/context/editor-manager-context'
+import {
+  EditorScopeValue,
+  useEditorManagerContext,
+} from '@/features/ide-react/context/editor-manager-context'
 import classNames from 'classnames'
 import { LoadingPane } from '@/features/ide-react/components/editor/loading-pane'
 import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
@@ -16,6 +19,11 @@ const SymbolPalettePane = lazy(
 export const EditorPane: FC = () => {
   const [editor] = useScopeValue<EditorScopeValue>('editor')
   const { selectedEntityCount, openEntity } = useFileTreeOpenContext()
+  const { currentDocumentId } = useEditorManagerContext()
+
+  if (!currentDocumentId) {
+    return null
+  }
 
   const isLoading = Boolean(
     (!editor.sharejs_doc || editor.opening) &&
diff --git a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
index fbaa8f520d..7da8e4060d 100644
--- a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
+++ b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
@@ -10,12 +10,10 @@ import { HistorySidebar } from '@/features/ide-react/components/history-sidebar'
 import { HistoryProvider } from '@/features/history/context/history-context'
 import History from '@/features/ide-react/components/history'
 import EditorSidebar from '@/features/ide-react/components/editor-sidebar'
-import { EditorPane } from '@/features/ide-react/components/editor/editor-pane'
 import { useTranslation } from 'react-i18next'
 import { useSidebarPane } from '@/features/ide-react/hooks/use-sidebar-pane'
 import { useChatPane } from '@/features/ide-react/hooks/use-chat-pane'
 import { EditorAndPdf } from '@/features/ide-react/components/editor-and-pdf'
-import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
 
 export const MainLayout: FC = () => {
   const { view } = useLayoutContext()
@@ -41,13 +39,8 @@ export const MainLayout: FC = () => {
     handlePaneExpand: handleChatExpand,
   } = useChatPane()
 
-  const { currentDocumentId } = useEditorManagerContext()
-
   const { t } = useTranslation()
 
-  // keep the editor pane open when a doc is open, even if the history view is open
-  const editorPane = currentDocumentId ? <EditorPane /> : null
-
   return (
     <div className="ide-react-main">
       <EditorNavigationToolbar />
@@ -93,13 +86,12 @@ export const MainLayout: FC = () => {
           <Panel id="panel-outer-main" order={2}>
             <PanelGroup autoSaveId="ide-inner-layout" direction="horizontal">
               <Panel className="ide-react-panel" id="panel-main" order={1}>
-                {view === 'history' ? (
+                {view === 'history' && (
                   <HistoryProvider>
                     <History />
                   </HistoryProvider>
-                ) : (
-                  <EditorAndPdf editorPane={editorPane} />
                 )}
+                <EditorAndPdf />
               </Panel>
 
               <HorizontalResizeHandle
diff --git a/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts b/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts
index d9f2bafc85..83d766e1c1 100644
--- a/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts
+++ b/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts
@@ -58,6 +58,7 @@ import { captureException } from '@/infrastructure/error-reporter'
 import grammarlyExtensionPresent from '@/shared/utils/grammarly'
 import { DocumentContainer } from '@/features/ide-react/editor/document-container'
 import { useLayoutContext } from '@/shared/context/layout-context'
+import { debugConsole } from '@/utils/debugging'
 
 function useCodeMirrorScope(view: EditorView) {
   const ide = useIdeContext()
@@ -278,6 +279,8 @@ function useCodeMirrorScope(view: EditorView) {
 
   useEffect(() => {
     if (currentDoc) {
+      debugConsole.log('creating new editor state')
+
       const state = EditorState.create({
         doc: currentDoc.getSnapshot(),
         extensions: createExtensions({