Merge pull request #22768 from overleaf/mj-ide-source-editor

[web] Add editor to editor redesign

GitOrigin-RevId: cdda3d5391866b882d6696ba833316aa91cf2856

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>
+  )
+}

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

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%;
+}