From aca889a3e04ff376ee72ec84f5139a79b3ffcd64 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Fri, 8 Apr 2022 10:07:13 +0100
Subject: [PATCH] Sync cursor position to PDF when double-clicking on a heading
 in the file outline (#7314)

GitOrigin-RevId: ef98f5d20e99bfc03c91cbf4027d277e738ab176
---
 .../outline/components/outline-item.js        | 10 +++-------
 .../components/pdf-synctex-controls.js        | 15 +++++++++++++-
 .../outline/components/outline-item.test.js   | 20 +++++++++++--------
 .../test/frontend/helpers/editor-providers.js |  1 +
 4 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/services/web/frontend/js/features/outline/components/outline-item.js b/services/web/frontend/js/features/outline/components/outline-item.js
index 7410141f68..55ff9b38af 100644
--- a/services/web/frontend/js/features/outline/components/outline-item.js
+++ b/services/web/frontend/js/features/outline/components/outline-item.js
@@ -40,12 +40,9 @@ function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
     setExpanded(!expanded)
   }
 
-  function handleOutlineItemLinkClick() {
-    jumpToLine(outlineItem.line, false)
-  }
-
-  function handleOutlineItemLinkDoubleClick() {
-    jumpToLine(outlineItem.line, true)
+  function handleOutlineItemLinkClick(event) {
+    const syncToPdf = event.detail === 2 // double-click = sync to PDF
+    jumpToLine(outlineItem.line, syncToPdf)
   }
 
   useEffect(() => {
@@ -87,7 +84,6 @@ function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
         <button
           className={itemLinkClasses}
           onClick={handleOutlineItemLinkClick}
-          onDoubleClick={handleOutlineItemLinkDoubleClick}
           ref={titleElementRef}
         >
           {outlineItem.title}
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.js b/services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.js
index 47ea7879de..fffdd125a4 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.js
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.js
@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { useIdeContext } from '../../../shared/context/ide-context'
 import { useProjectContext } from '../../../shared/context/project-context'
@@ -16,6 +16,7 @@ import useDetachState from '../../../shared/hooks/use-detach-state'
 import useDetachAction from '../../../shared/hooks/use-detach-action'
 import localStorage from '../../../infrastructure/local-storage'
 import { useFileTreeData } from '../../../shared/context/file-tree-data-context'
+import useScopeEventListener from '../../../shared/hooks/use-scope-event-listener'
 
 function GoToCodeButton({
   position,
@@ -233,6 +234,18 @@ function PdfSynctexControls() {
     [getCurrentFilePath, goToPdfLocation]
   )
 
+  const cursorPositionRef = useRef(cursorPosition)
+
+  useEffect(() => {
+    cursorPositionRef.current = cursorPosition
+  }, [cursorPosition])
+
+  const handleSyncToPdf = useCallback(() => {
+    syncToPdf(cursorPositionRef.current)
+  }, [syncToPdf])
+
+  useScopeEventListener('cursor:editor:syncToPdf', handleSyncToPdf)
+
   const _syncToCode = useCallback(
     (position, visualOffset = 0) => {
       setSyncToCodeInFlight(true)
diff --git a/services/web/test/frontend/features/outline/components/outline-item.test.js b/services/web/test/frontend/features/outline/components/outline-item.test.js
index 64759cfe45..0fdd9dd6dc 100644
--- a/services/web/test/frontend/features/outline/components/outline-item.test.js
+++ b/services/web/test/frontend/features/outline/components/outline-item.test.js
@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
-import { screen, render, fireEvent } from '@testing-library/react'
+import { screen, render, fireEvent, waitFor } from '@testing-library/react'
 
 import OutlineItem from '../../../../../frontend/js/features/outline/components/outline-item'
 
@@ -82,7 +82,7 @@ describe('<OutlineItem />', function () {
     screen.getByRole('treeitem', { name: 'Parent', current: true })
   })
 
-  it('click and double-click jump to location', function () {
+  it('click and double-click jump to location', async function () {
     const outlineItem = {
       title: 'Parent',
       line: 1,
@@ -91,13 +91,17 @@ describe('<OutlineItem />', function () {
 
     const titleButton = screen.getByRole('button', { name: outlineItem.title })
 
-    fireEvent.click(titleButton)
-    expect(jumpToLine).to.be.calledOnce
-    expect(jumpToLine).to.be.calledWith(1, false)
+    fireEvent.click(titleButton, { detail: 1 })
+    await waitFor(() => {
+      expect(jumpToLine).to.be.calledOnce
+      expect(jumpToLine).to.be.calledWith(1, false)
+    })
 
     jumpToLine.reset()
-    fireEvent.doubleClick(titleButton)
-    expect(jumpToLine).to.be.calledOnce
-    expect(jumpToLine).to.be.calledWith(1, true)
+    fireEvent.click(titleButton, { detail: 2 })
+    await waitFor(() => {
+      expect(jumpToLine).to.be.calledOnce
+      expect(jumpToLine).to.be.calledWith(1, true)
+    })
   })
 })
diff --git a/services/web/test/frontend/helpers/editor-providers.js b/services/web/test/frontend/helpers/editor-providers.js
index f039bebc24..72dca645e1 100644
--- a/services/web/test/frontend/helpers/editor-providers.js
+++ b/services/web/test/frontend/helpers/editor-providers.js
@@ -79,6 +79,7 @@ export function EditorProviders({
       callback(get($scope, path))
       return () => null
     },
+    $on: sinon.stub(),
     $applyAsync: sinon.stub(),
     toggleHistory: sinon.stub(),
     permissionsLevel,