Ensure that the editor state is preserved when switching views (#17238)

GitOrigin-RevId: 946b82cb633afbea13a72e30a9ce432aa1a8196d

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,11 +42,10 @@ export const EditorAndPdf: FC<{
       direction="horizontal"
       className={classNames({
         'ide-panel-group-resizing': resizing,
+        hidden: view === 'history',
       })}
     >
       {/* main */}
-      {editorIsOpen && (
-        <>
       <Panel
         id="panel-main"
         order={1}
@@ -55,24 +53,26 @@ export const EditorAndPdf: FC<{
         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 && editorPane}
         {selectedEntityCount > 1 && (
-              <MultipleSelectionPane
-                selectedEntityCount={selectedEntityCount}
-              />
+          <MultipleSelectionPane selectedEntityCount={selectedEntityCount} />
         )}
+        <EditorPane />
       </Panel>
 
       <HorizontalResizeHandle
         resizable={pdfLayout === 'sideBySide'}
         onDoubleClick={togglePdfPane}
         onDragging={setResizing}
+        className={classNames({
+          hidden: !editorIsOpen,
+        })}
       >
         <HorizontalToggler
           id="editor-pdf"
@@ -89,8 +89,6 @@ export const EditorAndPdf: FC<{
           </div>
         )}
       </HorizontalResizeHandle>
-        </>
-      )}
 
       {/* pdf */}
       <Panel

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) &&

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

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({