first commit

services/web/frontend/js/features/ide-react/components/editor/editor-pane.tsx

@@ -0,0 +1,61 @@
+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 { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
+import { EditorScopeValue } from '@/features/ide-react/scope-adapters/editor-manager-context-adapter'
+import classNames from 'classnames'
+import { LoadingPane } from '@/features/ide-react/components/editor/loading-pane'
+import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
+import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle'
+import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-open-context'
+
+const SymbolPalettePane = lazy(
+  () => import('@/features/ide-react/components/editor/symbol-palette-pane')
+)
+
+export const EditorPane: FC = () => {
+  const [editor] = useScopeValue<EditorScopeValue>('editor')
+  const { selectedEntityCount, openEntity } = useFileTreeOpenContext()
+  const { currentDocumentId, isLoading } = useEditorManagerContext()
+
+  if (!currentDocumentId) {
+    return null
+  }
+
+  return (
+    <div
+      className={classNames('ide-react-editor-content', 'full-size', {
+        hidden: openEntity?.type !== 'doc' || selectedEntityCount !== 1,
+      })}
+    >
+      <PanelGroup autoSaveId="ide-editor-layout" direction="vertical">
+        <Panel
+          id="panel-source-editor"
+          order={1}
+          className="ide-react-editor-panel"
+        >
+          <SourceEditor />
+          {isLoading && <LoadingPane />}
+        </Panel>
+
+        {editor.showSymbolPalette && (
+          <>
+            <VerticalResizeHandle id="editor-symbol-palette" />
+            <Panel
+              id="panel-symbol-palette"
+              order={2}
+              defaultSize={25}
+              minSize={10}
+              maxSize={50}
+            >
+              <Suspense fallback={<FullSizeLoadingSpinner delay={500} />}>
+                <SymbolPalettePane />
+              </Suspense>
+            </Panel>
+          </>
+        )}
+      </PanelGroup>
+    </div>
+  )
+}

services/web/frontend/js/features/ide-react/components/editor/loading-pane.tsx

@@ -0,0 +1,10 @@
+import { FC } from 'react'
+import LoadingSpinner from '@/shared/components/loading-spinner'
+
+export const LoadingPane: FC = () => {
+  return (
+    <div className="loading-panel">
+      <LoadingSpinner />
+    </div>
+  )
+}

services/web/frontend/js/features/ide-react/components/editor/multiple-selection-pane.tsx

@@ -0,0 +1,17 @@
+import { useTranslation } from 'react-i18next'
+
+export default function MultipleSelectionPane({
+  selectedEntityCount,
+}: {
+  selectedEntityCount: number
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div className="multi-selection-ongoing">
+      <div className="multi-selection-message">
+        <h4>{`${selectedEntityCount} ${t('files_selected')}`}</h4>
+      </div>
+    </div>
+  )
+}

services/web/frontend/js/features/ide-react/components/editor/no-selection-pane.tsx

@@ -0,0 +1,13 @@
+import { useTranslation } from 'react-i18next'
+
+export default function NoSelectionPane() {
+  const { t } = useTranslation()
+
+  return (
+    <div className="no-file-selection">
+      <div className="no-file-selection-message">
+        <h3>{t('no_selection_select_file')}</h3>
+      </div>
+    </div>
+  )
+}

services/web/frontend/js/features/ide-react/components/editor/symbol-palette-pane.tsx

@@ -0,0 +1,20 @@
+import React, { ElementType, FC } from 'react'
+import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
+
+const symbolPaletteComponents = importOverleafModules(
+  'sourceEditorSymbolPalette'
+) as { import: { default: ElementType }; path: string }[]
+
+const SymbolPalettePane: FC = () => {
+  return (
+    <div className="ide-react-symbol-palette">
+      {symbolPaletteComponents.map(
+        ({ import: { default: Component }, path }) => (
+          <Component key={path} />
+        )
+      )}
+    </div>
+  )
+}
+
+export default SymbolPalettePane