overleaf/services/web/frontend/js/shared/context/ide-context.tsx
Alf Eaton c24ace801b Remove Angular (#17534)
GitOrigin-RevId: 7a0d45e17d9905fa75569e2d19ca59caa4a41565
2024-06-06 08:04:09 +00:00

60 lines
1.6 KiB
TypeScript

import { createContext, FC, useContext, useEffect, useMemo } from 'react'
import { ScopeValueStore } from '../../../../types/ide/scope-value-store'
import { ScopeEventEmitter } from '../../../../types/ide/scope-event-emitter'
export type Ide = {
[key: string]: any // TODO: define the rest of the `ide` and `$scope` properties
$scope: Record<string, any>
}
type IdeContextValue = Ide & {
scopeStore: ScopeValueStore
scopeEventEmitter: ScopeEventEmitter
}
export const IdeContext = createContext<IdeContextValue | undefined>(undefined)
export const IdeProvider: FC<{
ide: Ide
scopeStore: ScopeValueStore
scopeEventEmitter: ScopeEventEmitter
}> = ({ ide, scopeStore, scopeEventEmitter, children }) => {
/**
* Expose scopeStore via `window.overleaf.unstable.store`, so it can be accessed by external extensions.
*
* These properties are expected to be available:
* - `editor.view`
* - `project.spellcheckLanguage`
* - `editor.open_doc_name`,
* - `editor.open_doc_id`,
*/
useEffect(() => {
window.overleaf = {
...window.overleaf,
unstable: {
...window.overleaf?.unstable,
store: scopeStore,
},
}
}, [scopeStore])
const value = useMemo<IdeContextValue>(() => {
return {
...ide,
scopeStore,
scopeEventEmitter,
}
}, [ide, scopeStore, scopeEventEmitter])
return <IdeContext.Provider value={value}>{children}</IdeContext.Provider>
}
export function useIdeContext(): IdeContextValue {
const context = useContext(IdeContext)
if (!context) {
throw new Error('useIdeContext is only available inside IdeProvider')
}
return context
}