Use dispatchTransactions option when creating EditorView (#14743)

Co-authored-by: Tim Down <158919+timdown@users.noreply.github.com>
GitOrigin-RevId: ccc43ead570bdf96e47d1d08fc114ddce32d1293

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

@@ -41,13 +41,13 @@ function CodeMirrorEditor() {
 
     const view = new EditorView({
       state,
-      dispatch: tr => {
-        timer.start(tr)
-        view.update([tr])
+      dispatchTransactions: trs => {
+        timer.start(trs)
+        view.update(trs)
         if (isMounted.current) {
           setState(view.state)
         }
-        timer.end(tr, view)
+        timer.end(trs, view)
       },
     })
     viewRef.current = view

services/web/frontend/js/infrastructure/cm6-performance.ts

@@ -81,8 +81,8 @@ function isKeypress(userEventType: string | undefined) {
 }
 
 export function dispatchTimer(): {
-  start: (tr: Transaction) => void
-  end: (tr: Transaction, view: EditorView) => void
+  start: (trs: readonly Transaction[]) => void
+  end: (trs: readonly Transaction[], view: EditorView) => void
 } {
   if (!performanceOptionsSupport) {
     return { start: () => {}, end: () => {} }
@@ -92,22 +92,30 @@ export function dispatchTimer(): {
   let keypressesSinceDomUpdateCount = 0
   const unpaintedKeypressStartTimes: number[] = []
 
-  const start = (tr: Transaction) => {
+  const start = (trs: readonly Transaction[]) => {
+    const keypressStart = performance.now()
+
+    trs.forEach(tr => {
       const userEventType = tr.annotation(Transaction.userEvent)
 
       if (isKeypress(userEventType)) {
-      unpaintedKeypressStartTimes.push(performance.now())
+        unpaintedKeypressStartTimes.push(keypressStart)
       }
+    })
 
     performance.mark(TIMER_START_NAME)
   }
 
-  const end = (tr: Transaction, view: EditorView) => {
+  const end = (trs: readonly Transaction[], view: EditorView) => {
     performance.mark(TIMER_END_NAME)
 
+    let anyInputOrDelete = false
+
+    trs.forEach(tr => {
       const userEventType = tr.annotation(Transaction.userEvent)
 
       if (isInputOrDelete(userEventType)) {
+        anyInputOrDelete = true
         ++userEventsSinceDomUpdateCount
 
         if (isKeypress(userEventType)) {
@@ -119,7 +127,10 @@ export function dispatchTimer(): {
           end: TIMER_END_NAME,
           detail: { userEventType, userEventsSinceDomUpdateCount },
         })
+      }
+    })
 
+    if (anyInputOrDelete) {
       // The `key` property ensures that the measurement task is only run once
       // per measure phase
       view.requestMeasure({
@@ -144,7 +155,7 @@ export function dispatchTimer(): {
       })
     }
 
-    latestDocLength = tr.state.doc.length
+    latestDocLength = trs[trs.length - 1].state.doc.length
   }
 
   return { start, end }