Merge pull request #16236 from overleaf/ii-ide-page-prototype-review-panel-issues-2

[web] Enable track changes on page load in react ide page

GitOrigin-RevId: 17e58490703c0d18fc700fde2e770e57a141a537

services/web/frontend/js/features/ide-react/context/editor-manager-context.tsx

@@ -56,6 +56,10 @@ export type EditorManager = {
   openDocs: OpenDocuments
   openInitialDoc: (docId: string) => void
   jumpToLine: (options: GotoLineOptions) => void
+  wantTrackChanges: boolean
+  setWantTrackChanges: React.Dispatch<
+    React.SetStateAction<EditorManager['wantTrackChanges']>
+  >
 }
 
 function hasGotoLine(options: OpenDocOptions): options is GotoLineOptions {
@@ -107,7 +111,14 @@ export const EditorManagerProvider: FC = ({ children }) => {
   const [, setOpening] = useScopeValue<boolean>('editor.opening')
   const [, setIsInErrorState] = useScopeValue<boolean>('editor.error_state')
   const [, setTrackChanges] = useScopeValue<boolean>('editor.trackChanges')
-  const [wantTrackChanges] = useScopeValue<boolean>('editor.wantTrackChanges')
+  const [wantTrackChanges, setWantTrackChanges] = useScopeValue<boolean>(
+    'editor.wantTrackChanges'
+  )
+
+  const wantTrackChangesRef = useRef(wantTrackChanges)
+  useEffect(() => {
+    wantTrackChangesRef.current = wantTrackChanges
+  }, [wantTrackChanges])
 
   const goToLineEmitter = useScopeEventEmitter('editor:gotoLine')
 
@@ -275,9 +286,9 @@ export const EditorManagerProvider: FC = ({ children }) => {
         syncTimeoutRef.current = null
       }
 
-      const want = wantTrackChanges
+      const want = wantTrackChangesRef.current
       const have = doc.getTrackingChanges()
-      if (wantTrackChanges === have) {
+      if (want === have) {
         setTrackChanges(want)
         return
       }
@@ -285,7 +296,7 @@ export const EditorManagerProvider: FC = ({ children }) => {
       const tryToggle = () => {
         const saved = doc.getInflightOp() == null && doc.getPendingOp() == null
         if (saved) {
-          doc.setTrackingChanges(wantTrackChanges)
+          doc.setTrackingChanges(want)
           setTrackChanges(want)
         } else {
           syncTimeoutRef.current = window.setTimeout(tryToggle, 100)
@@ -294,7 +305,7 @@ export const EditorManagerProvider: FC = ({ children }) => {
 
       tryToggle()
     },
-    [setTrackChanges, wantTrackChanges]
+    [setTrackChanges]
   )
 
   const doOpenNewDocument = useCallback(
@@ -598,6 +609,8 @@ export const EditorManagerProvider: FC = ({ children }) => {
       openDocs,
       openInitialDoc,
       jumpToLine,
+      wantTrackChanges,
+      setWantTrackChanges,
     }),
     [
       getEditorType,
@@ -613,6 +626,8 @@ export const EditorManagerProvider: FC = ({ children }) => {
       openDocs,
       openInitialDoc,
       jumpToLine,
+      wantTrackChanges,
+      setWantTrackChanges,
     ]
   )
 

services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts

@@ -132,11 +132,16 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
     features: { trackChangesVisible, trackChanges },
   } = project
   const { isRestrictedTokenMember } = useEditorContext()
-  const { openDocId, currentDocument, currentDocumentId } =
-    useEditorManagerContext() as MergeAndOverride<
-      EditorManager,
-      { currentDocumentId: DocId }
-    >
+  const {
+    openDocId,
+    currentDocument,
+    currentDocumentId,
+    wantTrackChanges,
+    setWantTrackChanges,
+  } = useEditorManagerContext() as MergeAndOverride<
+    EditorManager,
+    { currentDocumentId: DocId }
+  >
   // TODO permissions to be removed from the review panel context. It currently acts just as a proxy.
   const permissions = usePermissionsContext()
   const { showGenericMessageModal } = useModalsContext()
@@ -168,9 +173,6 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
     ReviewPanel.Value<'resolvedComments'>
   >({})
 
-  const [wantTrackChanges, setWantTrackChanges] = useScopeValue<
-    ReviewPanel.Value<'wantTrackChanges'>
-  >('editor.wantTrackChanges')
   const [shouldCollapse, setShouldCollapse] =
     useState<ReviewPanel.Value<'shouldCollapse'>>(true)
   const [lineHeight, setLineHeight] =
@@ -806,20 +808,19 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
           project.owner
         )
       }
-      if (project.members) {
-        for (const member of project.members) {
-          if (member.privileges === 'readAndWrite') {
-            if (!trackChangesState[member._id]) {
-              // An added member will have track changes enabled if track changes is on for everyone
-              setUserTCState(
-                trackChangesState,
-                member._id,
-                trackChangesOnForEveryone,
-                true
-              )
-            }
-            tempFormattedProjectMembers[member._id] = formatUser(member)
+      const members = project.members ?? []
+      for (const member of members) {
+        if (member.privileges === 'readAndWrite') {
+          if (!trackChangesState[member._id]) {
+            // An added member will have track changes enabled if track changes is on for everyone
+            setUserTCState(
+              trackChangesState,
+              member._id,
+              trackChangesOnForEveryone,
+              true
+            )
           }
+          tempFormattedProjectMembers[member._id] = formatUser(member)
         }
       }
       return tempFormattedProjectMembers