Merge pull request #22720 from overleaf/dp-editor-redesign

Editor redesign skeleton page

GitOrigin-RevId: 966c88ac3714e4cc7de3e21951e4e1641bfd6852

services/web/app/src/Features/Project/ProjectController.js

@@ -354,6 +354,7 @@ const _ProjectController = {
       'ai-add-on',
       'reviewer-role',
       'papers-integration',
+      'editor-redesign',
     ].filter(Boolean)
 
     const getUserValues = async userId =>

services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx

@@ -1,3 +1,4 @@
+import { lazy, Suspense } from 'react'
 import { Alerts } from '@/features/ide-react/components/alerts/alerts'
 import { MainLayout } from '@/features/ide-react/components/layout/main-layout'
 import EditorLeftMenu from '@/features/editor-left-menu/components/editor-left-menu'
@@ -10,6 +11,11 @@ import { useHasLintingError } from '@/features/ide-react/hooks/use-has-linting-e
 import { Modals } from '@/features/ide-react/components/modals/modals'
 import { GlobalAlertsProvider } from '@/features/ide-react/context/global-alerts-context'
 import { GlobalToasts } from '../global-toasts'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
+
+const MainLayoutNew = lazy(
+  () => import('@/features/ide-redesign/components/main-layout')
+)
 
 export default function IdePage() {
   useLayoutEventTracking() // sent event when the layout changes
@@ -19,12 +25,22 @@ export default function IdePage() {
   useHasLintingError() // pass editor:lint hasLintingError to the compiler
   useOpenFile() // create ide.binaryFilesManager (TODO: move to the history file restore component)
 
+  const newEditor = useFeatureFlag('editor-redesign')
+
   return (
     <GlobalAlertsProvider>
       <Alerts />
       <Modals />
-      <EditorLeftMenu />
+      {newEditor ? (
-      <MainLayout />
+        <Suspense fallback={null}>
+          <MainLayoutNew />
+        </Suspense>
+      ) : (
+        <>
+          <EditorLeftMenu />
+          <MainLayout />
+        </>
+      )}
       <GlobalToasts />
     </GlobalAlertsProvider>
   )

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

@@ -0,0 +1,53 @@
+import { Panel, PanelGroup } from 'react-resizable-panels'
+import classNames from 'classnames'
+import { HorizontalResizeHandle } from '@/features/ide-react/components/resize/horizontal-resize-handle'
+
+export default function MainLayout() {
+  return (
+    <div className="ide-redesign-main">
+      <div className="ide-skeleton-block">Toolbar</div>
+      <div className="ide-redesign-body">
+        <div className="ide-skeleton-block ide-redesign-full-height">
+          Left menu
+        </div>
+        <PanelGroup
+          autoSaveId="ide-redesign-outer-layout"
+          direction="horizontal"
+          className={classNames('ide-redesign-inner', {
+            'ide-panel-group-resizing': false,
+          })}
+        >
+          <Panel
+            id="ide-redesign-sidebar-panel"
+            order={1}
+            defaultSize={15}
+            minSize={5}
+            maxSize={80}
+          >
+            <div className="ide-skeleton-block ide-redesign-full-height">
+              Side bar
+            </div>
+          </Panel>
+          <HorizontalResizeHandle
+            resizable
+            hitAreaMargins={{ coarse: 0, fine: 0 }}
+          />
+          <Panel id="ide-redesign-editor-panel" order={2}>
+            <div className="ide-skeleton-block ide-redesign-full-height">
+              Editor
+            </div>
+          </Panel>
+          <HorizontalResizeHandle
+            resizable
+            hitAreaMargins={{ coarse: 0, fine: 0 }}
+          />
+          <Panel id="ide-redesign-pdf-panel" order={2}>
+            <div className="ide-skeleton-block ide-redesign-full-height">
+              PDF
+            </div>
+          </Panel>
+        </PanelGroup>
+      </div>
+    </div>
+  )
+}

services/web/frontend/stylesheets/bootstrap-5/pages/all.scss

@@ -6,6 +6,7 @@
 @import 'project-list-ds-nav';
 @import 'sidebar-v2-dash-pane';
 @import 'editor/ide';
+@import 'editor/ide-redesign';
 @import 'editor/toolbar';
 @import 'editor/online-users';
 @import 'editor/hotkeys';

services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide-redesign.scss

@@ -0,0 +1,22 @@
+.ide-redesign-body {
+  display: flex;
+  flex-grow: 1;
+  background-color: var(--bg-light-secondary);
+  overflow-y: hidden;
+  z-index: 0;
+}
+
+.ide-redesign-main {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.ide-skeleton-block {
+  border: 1px solid grey;
+  background-color: white;
+}
+
+.ide-redesign-full-height {
+  height: 100%;
+}