Merge pull request #15415 from overleaf/td-scope-store-and-emitter-fixed

IDE scope store and emitter with fixed PDF URLs

GitOrigin-RevId: 9d33bad8a006bb55714878332f78932538dd8921

services/web/frontend/js/shared/context/ide-angular-provider.tsx

@@ -0,0 +1,25 @@
+import { FC, useState } from 'react'
+import { AngularScopeValueStore } from '@/features/ide-react/scope-value-store/angular-scope-value-store'
+import { AngularScopeEventEmitter } from '@/features/ide-react/scope-event-emitter/angular-scope-event-emitter'
+import { Ide, IdeProvider } from '@/shared/context/ide-context'
+import { getMockIde } from '@/shared/context/mock/mock-ide'
+
+export const IdeAngularProvider: FC<{ ide?: Ide }> = ({ ide, children }) => {
+  const [ideValue] = useState(() => ide || getMockIde())
+  const [scopeStore] = useState(
+    () => new AngularScopeValueStore(ideValue.$scope)
+  )
+  const [scopeEventEmitter] = useState(
+    () => new AngularScopeEventEmitter(ideValue.$scope)
+  )
+
+  return (
+    <IdeProvider
+      ide={ideValue}
+      scopeStore={scopeStore}
+      scopeEventEmitter={scopeEventEmitter}
+    >
+      {children}
+    </IdeProvider>
+  )
+}

services/web/frontend/js/shared/context/ide-context.tsx

@@ -1,20 +1,41 @@
-import { createContext, FC, useContext, useState } from 'react'
-import { getMockIde } from './mock/mock-ide'
+import { createContext, FC, useContext, useMemo } from 'react'
+import { ScopeValueStore } from '../../../../types/ide/scope-value-store'
+import { Scope } from '../../../../types/angular/scope'
+import getMeta from '@/utils/meta'
+import { ScopeEventEmitter } from '../../../../types/ide/scope-event-emitter'
 
-type Ide = {
+export type Ide = {
   [key: string]: any // TODO: define the rest of the `ide` and `$scope` properties
-  $scope: Record<string, any>
+  $scope: Scope
 }
 
-const IdeContext = createContext<Ide | null>(null)
+type IdeContextValue = Ide & {
+  isReactIde: boolean
+  scopeStore: ScopeValueStore
+  scopeEventEmitter: ScopeEventEmitter
+}
 
-export const IdeProvider: FC<{ ide: Ide }> = ({ ide, children }) => {
-  const [value] = useState(() => ide || getMockIde())
+const IdeContext = createContext<IdeContextValue | undefined>(undefined)
+const isReactIde: boolean = getMeta('ol-idePageReact')
+
+export const IdeProvider: FC<{
+  ide: Ide
+  scopeStore: ScopeValueStore
+  scopeEventEmitter: ScopeEventEmitter
+}> = ({ ide, scopeStore, scopeEventEmitter, children }) => {
+  const value = useMemo<IdeContextValue>(() => {
+    return {
+      ...ide,
+      isReactIde,
+      scopeStore,
+      scopeEventEmitter,
+    }
+  }, [ide, scopeStore, scopeEventEmitter])
 
   return <IdeContext.Provider value={value}>{children}</IdeContext.Provider>
 }
 
-export function useIdeContext(): Ide {
+export function useIdeContext(): IdeContextValue {
   const context = useContext(IdeContext)
 
   if (!context) {

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

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import createSharedContext from 'react2angular-shared-context'
 
 import { UserProvider } from './user-context'
-import { IdeProvider } from './ide-context'
+import { IdeAngularProvider } from './ide-angular-provider'
 import { EditorProvider } from './editor-context'
 import { LocalCompileProvider } from './local-compile-context'
 import { DetachCompileProvider } from './detach-compile-context'
@@ -17,7 +17,7 @@ import { ProjectSettingsProvider } from '@/features/editor-left-menu/context/pro
 export function ContextRoot({ children, ide }) {
   return (
     <SplitTestProvider>
-      <IdeProvider ide={ide}>
+      <IdeAngularProvider ide={ide}>
         <UserProvider>
           <ProjectProvider>
             <FileTreeDataProvider>
@@ -37,7 +37,7 @@ export function ContextRoot({ children, ide }) {
             </FileTreeDataProvider>
           </ProjectProvider>
         </UserProvider>
-      </IdeProvider>
+      </IdeAngularProvider>
     </SplitTestProvider>
   )
 }