Merge pull request #33687 from overleaf/mj-temporary-tabs-fix

[web] Only consider real key presses to make tab permanent

GitOrigin-RevId: 50ab453445e111de2b317f50470f9f4eec39a66f

services/web/frontend/js/features/source-editor/components/tabs/tab.tsx

@@ -17,6 +17,10 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  TAB_USER_EDIT_EVENT,
+  tabsEvents,
+} from '@/features/source-editor/extensions/tabs-listener'
 
 type TabProps = {
   tab: EditorFileTab
@@ -186,9 +190,9 @@ export const Tab = memo(function Tab({
       const handler = () => {
         makeTabPermanent(tab.id)
       }
-      document.body.addEventListener('keydown', handler)
+      tabsEvents.addEventListener(TAB_USER_EDIT_EVENT, handler)
       return () => {
-        document.body.removeEventListener('keydown', handler)
+        tabsEvents.removeEventListener(TAB_USER_EDIT_EVENT, handler)
       }
     }
   }, [isSelected, makeTabPermanent, tab])

services/web/frontend/js/features/source-editor/extensions/index.ts

@@ -57,6 +57,8 @@ import { reviewTooltip } from './review-tooltip'
 import { tooltipsReposition } from './tooltips-reposition'
 import { selectionListener } from '@/features/source-editor/extensions/selection-listener'
 import { contextMenu } from './context-menu'
+import { tabsListener } from './tabs-listener'
+import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 
 const moduleExtensions: Array<(options: Record<string, any>) => Extension> =
   importOverleafModules('sourceEditorExtensions').map(
@@ -178,4 +180,5 @@ export const createExtensions = (options: Record<string, any>): Extension[] => [
   fileTreeItemDrop(),
   tooltipsReposition(),
   selectionListener(options.setEditorSelection),
+  isSplitTestEnabled('editor-tabs') ? tabsListener() : [],
 ]

services/web/frontend/js/features/source-editor/extensions/tabs-listener.ts

@@ -0,0 +1,17 @@
+import { Transaction } from '@codemirror/state'
+import { EditorView } from '@codemirror/view'
+
+export const TAB_USER_EDIT_EVENT = 'tab-user-edit'
+
+export const tabsEvents = new EventTarget()
+
+export const tabsListener = () =>
+  EditorView.updateListener.of(update => {
+    if (!update.docChanged) return
+    for (const transaction of update.transactions) {
+      if (!transaction.annotation(Transaction.remote)) {
+        tabsEvents.dispatchEvent(new Event(TAB_USER_EDIT_EVENT))
+        return
+      }
+    }
+  })