Merge pull request #23772 from overleaf/dp-binary-files

Show binary and non-tex files in new editor

GitOrigin-RevId: b6d2681e6ecc868fac0ca484570e33220ec74980

services/web/frontend/js/features/ide-redesign/components/editor-panel.tsx

@@ -0,0 +1,23 @@
+import NoSelectionPane from '@/features/ide-react/components/editor/no-selection-pane'
+import { Editor } from './editor'
+import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-open-context'
+import FileView from '@/features/file-view/components/file-view'
+import { fileViewFile } from '@/features/ide-react/util/file-view'
+import MultipleSelectionPane from '@/features/ide-react/components/editor/multiple-selection-pane'
+
+export default function EditorPanel() {
+  const { selectedEntityCount, openEntity } = useFileTreeOpenContext()
+
+  return (
+    <div className="ide-redesign-editor-container">
+      {selectedEntityCount === 0 && <NoSelectionPane />}
+      {selectedEntityCount === 1 && openEntity?.type === 'fileRef' && (
+        <FileView file={fileViewFile(openEntity.entity)} />
+      )}
+      {selectedEntityCount > 1 && (
+        <MultipleSelectionPane selectedEntityCount={selectedEntityCount} />
+      )}
+      <Editor />
+    </div>
+  )
+}

services/web/frontend/js/features/ide-redesign/components/main-layout.tsx

@@ -2,7 +2,6 @@ import { Panel, PanelGroup } from 'react-resizable-panels'
 import classNames from 'classnames'
 import { HorizontalResizeHandle } from '@/features/ide-react/components/resize/horizontal-resize-handle'
 import PdfPreview from '@/features/pdf-preview/components/pdf-preview'
-import { Editor } from './editor'
 import { RailLayout } from './rail'
 import { Toolbar } from './toolbar/toolbar'
 import { HorizontalToggler } from '@/features/ide-react/components/resize/horizontal-toggler'
@@ -10,6 +9,7 @@ import { useTranslation } from 'react-i18next'
 import { usePdfPane } from '@/features/ide-react/hooks/use-pdf-pane'
 import { useLayoutContext } from '@/shared/context/layout-context'
 import { useState } from 'react'
+import EditorPanel from './editor-panel'
 
 export default function MainLayout() {
   const [resizing, setResizing] = useState(false)
@@ -51,7 +51,7 @@ export default function MainLayout() {
             defaultSize={50}
           >
             <div className="ide-redesign-editor-container">
-              <Editor />
+              <EditorPanel />
             </div>
           </Panel>
           <HorizontalResizeHandle