Merge pull request #15376 from overleaf/td-ide-page-working-editor

React IDE page: working editor GitOrigin-RevId: 3ba8cb787a6f7f8435686d8962adb7444d09acb5
2026-11-14 22:23:42 +01:00 · 2023-10-27 08:03:07 +00:00
parent a59e63846d
commit 01439641ca
48 changed files with 3622 additions and 62 deletions
@@ -0,0 +1,80 @@
+import { Panel, PanelGroup } from 'react-resizable-panels'
+import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle'
+import React, { ElementType, useEffect } from 'react'
+import useScopeValue from '@/shared/hooks/use-scope-value'
+import SourceEditor from '@/features/source-editor/components/source-editor'
+import {
+  EditorScopeValue,
+  useEditorManagerContext,
+} from '@/features/ide-react/context/editor-manager-context'
+import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
+import { EditorProps } from '@/features/ide-react/components/editor/editor'
+
+const symbolPaletteComponents = importOverleafModules(
+  'sourceEditorSymbolPalette'
+) as { import: { default: ElementType }; path: string }[]
+
+export function EditorPane({
+  shouldPersistLayout,
+  openDocId,
+  fileTreeReady,
+}: EditorProps) {
+  const { openDocId: openDocWithId } = useEditorManagerContext()
+
+  const [editor] = useScopeValue<EditorScopeValue>('editor')
+
+  useEffect(() => {
+    if (!fileTreeReady || !openDocId) {
+      return
+    }
+    openDocWithId(openDocId)
+  }, [fileTreeReady, openDocId, openDocWithId])
+
+  return (
+    <PanelGroup
+      autoSaveId={
+        shouldPersistLayout
+          ? 'ide-react-editor-and-symbol-palette-layout'
+          : undefined
+      }
+      direction="vertical"
+      units="pixels"
+    >
+      <Panel
+        id="editor"
+        order={1}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {!!editor.sharejs_doc &&
+        !editor.opening &&
+        editor.multiSelectedCount === 0 &&
+        !editor.error_state ? (
+          <SourceEditor />
+        ) : null}
+      </Panel>
+      {editor.showSymbolPalette ? (
+        <>
+          <VerticalResizeHandle id="editor-symbol-palette" />
+          <Panel
+            id="symbol-palette"
+            order={2}
+            defaultSize={250}
+            minSize={250}
+            maxSize={336}
+          >
+            <div className="ide-react-placeholder-symbol-palette">
+              {symbolPaletteComponents.map(
+                ({ import: { default: Component }, path }) => (
+                  <Component key={path} />
+                )
+              )}
+            </div>
+          </Panel>
+        </>
+      ) : null}
+    </PanelGroup>
+  )
+}
@@ -0,0 +1,96 @@
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  ImperativePanelHandle,
+  Panel,
+  PanelGroup,
+} from 'react-resizable-panels'
+import { HorizontalResizeHandle } from '@/features/ide-react/components/resize/horizontal-resize-handle'
+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'
+
+export type EditorProps = {
+  shouldPersistLayout?: boolean
+  openDocId: string | null
+  fileTreeReady: boolean
+}
+
+export default function Editor({
+  shouldPersistLayout = false,
+  openDocId,
+  fileTreeReady,
+}: EditorProps) {
+  const { t } = useTranslation()
+  const { view, pdfLayout, changeLayout } = useLayoutContext()
+
+  const pdfPanelRef = useRef<ImperativePanelHandle>(null)
+  const isDualPane = pdfLayout === 'sideBySide'
+  const editorIsVisible = isDualPane || view === 'editor'
+  const pdfIsOpen = isDualPane || view === 'pdf'
+
+  useCollapsiblePanel(pdfIsOpen, pdfPanelRef)
+
+  if (view === 'file') {
+    return <PlaceholderFile />
+  }
+
+  if (view === 'history') {
+    return null
+  }
+
+  function setPdfIsOpen(isOpen: boolean) {
+    if (isOpen) {
+      changeLayout('sideBySide')
+    } else {
+      changeLayout('flat', 'editor')
+    }
+  }
+
+  return (
+    <PanelGroup
+      autoSaveId={
+        shouldPersistLayout ? 'ide-react-editor-and-pdf-layout' : undefined
+      }
+      direction="horizontal"
+    >
+      {editorIsVisible ? (
+        <Panel id="editor" order={1} defaultSize={50}>
+          <EditorPane
+            shouldPersistLayout={shouldPersistLayout}
+            openDocId={openDocId}
+            fileTreeReady={fileTreeReady}
+          />
+        </Panel>
+      ) : null}
+      {isDualPane ? (
+        <HorizontalResizeHandle>
+          <HorizontalToggler
+            id="editor-pdf"
+            togglerType="east"
+            isOpen={pdfIsOpen}
+            setIsOpen={isOpen => setPdfIsOpen(isOpen)}
+            tooltipWhenOpen={t('tooltip_hide_pdf')}
+            tooltipWhenClosed={t('tooltip_show_pdf')}
+          />
+        </HorizontalResizeHandle>
+      ) : null}
+      {pdfIsOpen ? (
+        <Panel
+          ref={pdfPanelRef}
+          id="pdf"
+          order={2}
+          defaultSize={50}
+          minSize={5}
+          collapsible
+          onCollapse={collapsed => setPdfIsOpen(!collapsed)}
+        >
+          <PlaceholderPdf />
+        </Panel>
+      ) : null}
+    </PanelGroup>
+  )
+}