Merge pull request #23940 from overleaf/td-react-18

Upgrade to React 18 GitOrigin-RevId: 9b81936e6eea2bccd97fe5c2c5841f0b946371b8
2026-11-14 06:03:45 +01:00 · 2025-05-02 08:05:29 +00:00
parent 4464320757
commit 7abafb01ea
213 changed files with 2469 additions and 2105 deletions
@@ -15,4 +15,6 @@ const IdeRoot: FC = () => {
  )
 }

-export default withErrorBoundary(memo(IdeRoot), GenericErrorBoundaryFallback)
+export default withErrorBoundary(memo(IdeRoot), () => (
+  <GenericErrorBoundaryFallback />
+))
@@ -10,7 +10,9 @@ type HorizontalResizeHandleOwnProps = {
 }

 export const HorizontalResizeHandle: FC<
-  HorizontalResizeHandleOwnProps & PanelResizeHandleProps
+  React.PropsWithChildren<
+    HorizontalResizeHandleOwnProps & PanelResizeHandleProps
+  >
 > = ({ children, resizable = true, onDoubleClick, ...props }) => {
  const { t } = useTranslation()
  const [isDragging, setIsDragging] = useState(false)
@@ -30,7 +30,7 @@ export const UnsavedDocs: FC = () => {
  useEventListener(
    'beforeunload',
    useCallback(
-      event => {
+      (event: BeforeUnloadEvent) => {
        if (openDocs.hasUnsavedChanges()) {
          // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
          event.preventDefault()
@@ -23,7 +23,9 @@ type CommandRegistry = {
  unregister: (...id: string[]) => void
 }

-export const CommandRegistryProvider: React.FC = ({ children }) => {
+export const CommandRegistryProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
  const [registry, setRegistry] = useState(new Map<string, Command>())
  const register = useCallback((...elements: Command[]) => {
    setRegistry(
@@ -36,7 +36,9 @@ export const ConnectionContext = createContext<
  ConnectionContextValue | undefined
 >(undefined)

-export const ConnectionProvider: FC = ({ children }) => {
+export const ConnectionProvider: FC<React.PropsWithChildren> = ({
+  children,
+}) => {
  const location = useLocation()

  const [connectionManager] = useState(() => new ConnectionManager())
@@ -88,7 +88,9 @@ export const EditorManagerContext = createContext<EditorManager | undefined>(
  undefined
 )

-export const EditorManagerProvider: FC = ({ children }) => {
+export const EditorManagerProvider: FC<React.PropsWithChildren> = ({
+  children,
+}) => {
  const { t } = useTranslation()
  const { scopeStore } = useIdeContext()
  const { reportError, eventEmitter, projectId } = useIdeReactContext()
@@ -36,7 +36,9 @@ const FileTreeOpenContext = createContext<
  | undefined
 >(undefined)

-export const FileTreeOpenProvider: FC = ({ children }) => {
+export const FileTreeOpenProvider: FC<React.PropsWithChildren> = ({
+  children,
+}) => {
  const { rootDocId, owner } = useProjectContext()
  const { eventEmitter, projectJoined } = useIdeReactContext()
  const { openDocWithId, currentDocumentId, openInitialDoc } =
@@ -4,7 +4,9 @@ const GlobalAlertsContext = createContext<HTMLDivElement | null | undefined>(
  undefined
 )

-export const GlobalAlertsProvider: FC = ({ children }) => {
+export const GlobalAlertsProvider: FC<React.PropsWithChildren> = ({
+  children,
+}) => {
  const [globalAlertsContainer, setGlobalAlertsContainer] =
    useState<HTMLDivElement | null>(null)

@@ -77,7 +77,7 @@ export function createReactScopeValueStore(projectId: string) {
  return scopeStore
 }

-export const IdeReactProvider: FC = ({ children }) => {
+export const IdeReactProvider: FC<React.PropsWithChildren> = ({ children }) => {
  const projectId = getMeta('ol-project_id')
  const [scopeStore] = useState(() => createReactScopeValueStore(projectId))
  const [eventEmitter] = useState(createIdeEventEmitter)
@@ -16,7 +16,9 @@ export const IdeRedesignSwitcherContext = createContext<
  IdeRedesignSwitcherContextValue | undefined
 >(undefined)

-export const IdeRedesignSwitcherProvider: FC = ({ children }) => {
+export const IdeRedesignSwitcherProvider: FC<React.PropsWithChildren> = ({
+  children,
+}) => {
  const [showSwitcherModal, setShowSwitcherModal] = useState(false)

  return (
@@ -47,7 +47,7 @@ export const MetadataContext = createContext<
  | undefined
 >(undefined)

-export const MetadataProvider: FC = ({ children }) => {
+export const MetadataProvider: FC<React.PropsWithChildren> = ({ children }) => {
  const { t } = useTranslation()
  const { eventEmitter, projectId } = useIdeReactContext()
  const { socket } = useConnectionContext()
@@ -30,7 +30,9 @@ type ModalsContextValue = {

 const ModalsContext = createContext<ModalsContextValue | undefined>(undefined)

-export const ModalsContextProvider: FC = ({ children }) => {
+export const ModalsContextProvider: FC<React.PropsWithChildren> = ({
+  children,
+}) => {
  const [showGenericModal, setShowGenericModal] = useState(false)
  const [showConfirmModal, setShowConfirmModal] = useState(false)
  const [genericMessageModalData, setGenericMessageModalData] =
@@ -65,7 +65,9 @@ export const OnlineUsersContext = createContext<
  OnlineUsersContextValue | undefined
 >(undefined)

-export const OnlineUsersProvider: FC = ({ children }) => {
+export const OnlineUsersProvider: FC<React.PropsWithChildren> = ({
+  children,
+}) => {
  const { eventEmitter } = useIdeReactContext()
  const { socket } = useConnectionContext()
  const { currentDocumentId } = useEditorManagerContext()
@@ -42,7 +42,7 @@ const OutlineContext = createContext<
  | undefined
 >(undefined)

-export const OutlineProvider: FC = ({ children }) => {
+export const OutlineProvider: FC<React.PropsWithChildren> = ({ children }) => {
  const [flatOutline, setFlatOutline] = useState<FlatOutlineState>(undefined)
  const [currentlyHighlightedLine, setCurrentlyHighlightedLine] =
    useState<number>(-1)
@@ -55,7 +55,7 @@ export const OutlineProvider: FC = ({ children }) => {

  useEventListener(
    'file-view:file-opened',
-    useCallback(_ => {
+    useCallback(() => {
      setBinaryFileOpened(true)
    }, [])
  )
@@ -63,7 +63,7 @@ export const OutlineProvider: FC = ({ children }) => {
  useEventListener(
    'scroll:editor:update',
    useCallback(
-      evt => {
+      (evt: CustomEvent) => {
        if (ignoreNextScroll) {
          setIgnoreNextScroll(false)
          return
@@ -77,7 +77,7 @@ export const OutlineProvider: FC = ({ children }) => {
  useEventListener(
    'cursor:editor:update',
    useCallback(
-      evt => {
+      (evt: CustomEvent) => {
        if (ignoreNextCursorUpdate) {
          setIgnoreNextCursorUpdate(false)
          return
@@ -90,7 +90,7 @@ export const OutlineProvider: FC = ({ children }) => {

  useEventListener(
    'doc:after-opened',
-    useCallback(evt => {
+    useCallback((evt: CustomEvent) => {
      if (evt.detail.isNewDoc) {
        setIgnoreNextCursorUpdate(true)
      }
@@ -79,7 +79,9 @@ const noTrackChangesPermissionsMap: typeof permissionsMap = {
  owner: permissionsMap.owner,
 }

-export const PermissionsProvider: React.FC = ({ children }) => {
+export const PermissionsProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
  const [permissions, setPermissions] =
    useScopeValue<Readonly<Permissions>>('permissions')
  const { connectionState } = useConnectionContext()
@@ -27,10 +27,11 @@ import { UserSettingsProvider } from '@/shared/context/user-settings-context'
 import { IdeRedesignSwitcherProvider } from './ide-redesign-switcher-context'
 import { CommandRegistryProvider } from './command-registry-context'

-export const ReactContextRoot: FC<{ providers?: Record<string, FC> }> = ({
-  children,
-  providers = {},
-}) => {
+export const ReactContextRoot: FC<
+  React.PropsWithChildren<{
+    providers?: Record<string, FC>
+  }>
+> = ({ children, providers = {} }) => {
  const Providers = {
    ChatProvider,
    ConnectionProvider,
@@ -26,7 +26,9 @@ export const ReferencesContext = createContext<
  | undefined
 >(undefined)

-export const ReferencesProvider: FC = ({ children }) => {
+export const ReferencesProvider: FC<React.PropsWithChildren> = ({
+  children,
+}) => {
  const { fileTreeData } = useFileTreeData()
  const { eventEmitter, projectId } = useIdeReactContext()
  const { socket } = useConnectionContext()
@@ -50,7 +50,7 @@ export const SnapshotContext = createContext<
  | undefined
 >(undefined)

-export const SnapshotProvider: FC = ({ children }) => {
+export const SnapshotProvider: FC<React.PropsWithChildren> = ({ children }) => {
  const { _id: projectId } = useProjectContext()
  const [snapshotLoadingState, setSnapshotLoadingState] =
    useState<SnapshotLoadingState>('')