Add "[PDF]" prefix to detached window title (#8039)

* Move DetachProvider outside EditorProvider
* Add "[PDF]" prefix to detached window title

GitOrigin-RevId: 7d09f4053069b20d55a2a04a8f29f90b973e50b9

services/web/frontend/js/shared/context/detach-context.js

@@ -135,6 +135,9 @@ DetachProvider.propTypes = {
 
 export function useDetachContext(propTypes) {
   const data = useContext(DetachContext)
+  if (!data) {
+    throw new Error('useDetachContext is only available inside DetachProvider')
+  }
   PropTypes.checkPropTypes(propTypes, data, 'data', 'DetachContext.Provider')
   return data
 }

services/web/frontend/js/shared/context/editor-context.js

@@ -10,6 +10,7 @@ import useScopeValue from '../hooks/use-scope-value'
 import useBrowserWindow from '../hooks/use-browser-window'
 import { useIdeContext } from './ide-context'
 import { useProjectContext } from './project-context'
+import { useDetachContext } from './detach-context'
 
 export const EditorContext = createContext()
 
@@ -41,6 +42,8 @@ EditorContext.Provider.propTypes = {
 export function EditorProvider({ children, settings }) {
   const ide = useIdeContext()
 
+  const { role } = useDetachContext()
+
   const { owner, features } = useProjectContext({
     owner: PropTypes.shape({
       _id: PropTypes.string.isRequired,
@@ -107,12 +110,24 @@ export function EditorProvider({ children, settings }) {
 
   const { setTitle } = useBrowserWindow()
   useEffect(() => {
-    setTitle(
-      `${projectName ? projectName + ' - ' : ''}Online LaTeX Editor ${
-        window.ExposedSettings.appName
-      }`
-    )
-  }, [projectName, setTitle])
+    const parts = []
+
+    if (role === 'detached') {
+      parts.push('[PDF]')
+    }
+
+    if (projectName) {
+      parts.push(projectName)
+      parts.push('-')
+    }
+
+    parts.push('Online LaTeX Editor')
+    parts.push(window.ExposedSettings.appName)
+
+    const title = parts.join(' ')
+
+    setTitle(title)
+  }, [projectName, setTitle, role])
 
   const insertSymbol = useCallback(symbol => {
     window.dispatchEvent(

services/web/frontend/js/shared/context/root-context.js

@@ -20,8 +20,8 @@ export function ContextRoot({ children, ide, settings }) {
         <UserProvider>
           <ProjectProvider>
             <FileTreeDataProvider>
-              <EditorProvider settings={settings}>
-                <DetachProvider>
+              <DetachProvider>
+                <EditorProvider settings={settings}>
                   <LayoutProvider>
                     <LocalCompileProvider>
                       <DetachCompileProvider>
@@ -29,8 +29,8 @@ export function ContextRoot({ children, ide, settings }) {
                       </DetachCompileProvider>
                     </LocalCompileProvider>
                   </LayoutProvider>
-                </DetachProvider>
-              </EditorProvider>
+                </EditorProvider>
+              </DetachProvider>
             </FileTreeDataProvider>
           </ProjectProvider>
         </UserProvider>

services/web/test/frontend/helpers/editor-providers.js

@@ -109,15 +109,15 @@ export function EditorProviders({
         <UserProvider>
           <ProjectProvider>
             <FileTreeDataProvider>
-              <EditorProvider settings={{}}>
-                <DetachProvider>
+              <DetachProvider>
+                <EditorProvider settings={{}}>
                   <LayoutProvider>
                     <LocalCompileProvider>
                       <DetachCompileProvider>{children}</DetachCompileProvider>
                     </LocalCompileProvider>
                   </LayoutProvider>
-                </DetachProvider>
-              </EditorProvider>
+                </EditorProvider>
+              </DetachProvider>
             </FileTreeDataProvider>
           </ProjectProvider>
         </UserProvider>