From 182e9deada8cdf8ebc3f7f58b36a5a9979b982e4 Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Fri, 10 Jan 2025 10:07:14 +0000
Subject: [PATCH] Merge pull request #22768 from overleaf/mj-ide-source-editor

[web] Add editor to editor redesign

GitOrigin-RevId: cdda3d5391866b882d6696ba833316aa91cf2856
---
 .../ide-redesign/components/editor.tsx        | 73 +++++++++++++++++++
 .../ide-redesign/components/main-layout.tsx   |  5 +-
 .../pages/editor/ide-redesign.scss            |  9 +++
 3 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 services/web/frontend/js/features/ide-redesign/components/editor.tsx

diff --git a/services/web/frontend/js/features/ide-redesign/components/editor.tsx b/services/web/frontend/js/features/ide-redesign/components/editor.tsx
new file mode 100644
index 0000000000..12e6e3b4fb
--- /dev/null
+++ b/services/web/frontend/js/features/ide-redesign/components/editor.tsx
@@ -0,0 +1,73 @@
+import { LoadingPane } from '@/features/ide-react/components/editor/loading-pane'
+import {
+  EditorScopeValue,
+  useEditorManagerContext,
+} from '@/features/ide-react/context/editor-manager-context'
+import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-open-context'
+import useScopeValue from '@/shared/hooks/use-scope-value'
+import classNames from 'classnames'
+import SourceEditor from '@/features/source-editor/components/source-editor'
+import { useProjectContext } from '@/shared/context/project-context'
+import { useFileTreeData } from '@/shared/context/file-tree-data-context'
+import { useEffect, useRef } from 'react'
+import { findInTree } from '@/features/file-tree/util/find-in-tree'
+
+// FIXME: This is only needed until we have a working file tree. This hook does
+//        the minimal amount of work to load the initial document.
+const useWorkaroundForOpeningInitialDocument = () => {
+  const { _id: projectId } = useProjectContext()
+  const { fileTreeData, setSelectedEntities } = useFileTreeData()
+  const isReady = Boolean(projectId && fileTreeData)
+  const { handleFileTreeInit, handleFileTreeSelect } = useFileTreeOpenContext()
+  const { currentDocumentId } = useEditorManagerContext()
+
+  useEffect(() => {
+    if (isReady) handleFileTreeInit()
+  }, [isReady, handleFileTreeInit])
+
+  const alreadyOpenedFile = useRef(false)
+  useEffect(() => {
+    if (isReady && currentDocumentId && !alreadyOpenedFile.current) {
+      alreadyOpenedFile.current = true
+      const doc = findInTree(fileTreeData, currentDocumentId)
+      if (doc) {
+        handleFileTreeSelect([doc])
+        setSelectedEntities([doc])
+      }
+    }
+  }, [
+    isReady,
+    currentDocumentId,
+    fileTreeData,
+    handleFileTreeSelect,
+    setSelectedEntities,
+  ])
+}
+
+export const Editor = () => {
+  const [editor] = useScopeValue<EditorScopeValue>('editor')
+  useWorkaroundForOpeningInitialDocument()
+  const { selectedEntityCount, openEntity } = useFileTreeOpenContext()
+  const { currentDocumentId } = useEditorManagerContext()
+
+  if (!currentDocumentId) {
+    return null
+  }
+
+  const isLoading = Boolean(
+    (!editor.sharejs_doc || editor.opening) &&
+      !editor.error_state &&
+      editor.open_doc_id
+  )
+
+  return (
+    <div
+      className={classNames('ide-redesign-editor-content', {
+        hidden: openEntity?.type !== 'doc' || selectedEntityCount !== 1,
+      })}
+    >
+      <SourceEditor />
+      {isLoading && <LoadingPane />}
+    </div>
+  )
+}
diff --git a/services/web/frontend/js/features/ide-redesign/components/main-layout.tsx b/services/web/frontend/js/features/ide-redesign/components/main-layout.tsx
index 553fe95ca6..fb8e6b870c 100644
--- a/services/web/frontend/js/features/ide-redesign/components/main-layout.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/main-layout.tsx
@@ -2,6 +2,7 @@ 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'
 
 export default function MainLayout() {
   return (
@@ -34,8 +35,8 @@ export default function MainLayout() {
             hitAreaMargins={{ coarse: 0, fine: 0 }}
           />
           <Panel id="ide-redesign-editor-panel" order={2}>
-            <div className="ide-skeleton-block ide-redesign-full-height">
-              Editor
+            <div className="ide-redesign-editor-container">
+              <Editor />
             </div>
           </Panel>
           <HorizontalResizeHandle
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide-redesign.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide-redesign.scss
index 4ca5ce3873..953064ce5d 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide-redesign.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide-redesign.scss
@@ -24,3 +24,12 @@
 .ide-redesign-pdf-container {
   position: relative;
 }
+
+.ide-redesign-editor-container {
+  position: relative;
+  height: 100%;
+}
+
+.ide-redesign-editor-content {
+  height: 100%;
+}