Merge pull request #22738 from overleaf/dp-new-editor-pdf

Drop in PdfPreview into new editor skeleton

GitOrigin-RevId: c88806904bd2534690a1540d7e39c5f81ab65709

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

@@ -1,6 +1,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'
 
 export default function MainLayout() {
   return (
@@ -41,10 +42,12 @@ export default function MainLayout() {
             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
+            className="ide-redesign-pdf-container"
+            id="ide-redesign-pdf-panel"
+            order={2}
+          >
+            <PdfPreview />
           </Panel>
         </PanelGroup>
       </div>

services/web/frontend/js/features/pdf-preview/util/compiler.js

@@ -176,7 +176,7 @@ export default class DocumentCompiler {
   // if it contains "\documentclass" then use this as the root doc
   getRootDocOverrideId() {
     // only override when not in the root doc itself
-    if (this.currentDoc.doc_id !== this.projectRootDocId) {
+    if (this.currentDoc && this.currentDoc.doc_id !== this.projectRootDocId) {
       const snapshot = this.currentDoc.getSnapshot()
 
       if (snapshot && isMainFile(snapshot)) {

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

@@ -20,3 +20,7 @@
 .ide-redesign-full-height {
   height: 100%;
 }
+
+.ide-redesign-pdf-container {
+  position: relative;
+}