Add source editor React component using CodeMirror 6 (#5642)

GitOrigin-RevId: 3e67bffbeeade02a8d4ff2c468ca784230fc7408

services/web/app/src/Features/Project/ProjectController.js

@@ -893,6 +893,10 @@ const ProjectController = {
               logsUISubvariant: logsUIVariant.subvariant,
               showPdfDetach,
               showNewPdfPreview,
+              showNewSourceEditor: shouldDisplayFeature(
+                'new_source_editor',
+                false
+              ),
               showSymbolPalette: shouldDisplayFeature(
                 'symbol_palette',
                 user.alphaProgram || user.betaProgram

services/web/app/views/project/editor/editor-no-symbol-palette.pug

@@ -34,7 +34,11 @@
 			.multi-selection-message
 				h4 {{ multiSelectedCount }} #{translate('files_selected')}
 
-		include ./source-editor
+		if showNewSourceEditor
+			if moduleIncludesAvailable('editor:source-editor')
+				!= moduleIncludes('editor:source-editor', locals)
+		else
+			include ./source-editor
 
 		if !isRestrictedTokenMember
 			include ./review-panel

services/web/app/views/project/editor/editor-with-symbol-palette.pug

@@ -46,7 +46,11 @@
 					.multi-selection-message
 						h4 {{ multiSelectedCount }} #{translate('files_selected')}
 
-				include ./source-editor
+				if showNewSourceEditor
+					if moduleIncludesAvailable('editor:source-editor')
+						!= moduleIncludes('editor:source-editor', locals)
+				else
+					include ./source-editor
 
 				if !isRestrictedTokenMember
 							include ./review-panel

services/web/package-lock.json

@@ -4884,6 +4884,283 @@
         "minimist": "^1.2.0"
       }
     },
+    "@codemirror/autocomplete": {
+      "version": "0.19.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-0.19.4.tgz",
+      "integrity": "sha512-Wuuf4xZ9opIpUwMvxFMknC1C202qtTx1q5bS1GuMnTK4lBYoG+tekpAqlLBF3x6fEe2+fw6dRLwYTigtCuS7pQ==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/state": "^0.19.2",
+        "@codemirror/text": "^0.19.2",
+        "@codemirror/tooltip": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.0"
+      }
+    },
+    "@codemirror/closebrackets": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/closebrackets/-/closebrackets-0.19.0.tgz",
+      "integrity": "sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/commands": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-0.19.5.tgz",
+      "integrity": "sha512-8PZOtx7d/GbKhFYA88zs2wINDtaUgj3pEjLYScKTd/Vsyw8qOp86tJQQNnMFTRZj/ISQl9Lbg3aAmHvroMqspw==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/matchbrackets": "^0.19.0",
+        "@codemirror/state": "^0.19.2",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.0"
+      }
+    },
+    "@codemirror/comment": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/comment/-/comment-0.19.0.tgz",
+      "integrity": "sha512-3hqAd0548fxqOBm4khFMcXVIivX8p0bSlbAuZJ6PNoUn/0wXhxkxowPp0FmFzU2+y37Z+ZQF5cRB5EREWPRIiQ==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/fold": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/fold/-/fold-0.19.1.tgz",
+      "integrity": "sha512-3GwQpxgv03urb8BPBvX1JSjl+uMXKqngRG6qHZXSM2FefxFKvTuyL44MCb35aodtfKjGwoxizk+7b6CbAOLyOw==",
+      "requires": {
+        "@codemirror/gutter": "^0.19.0",
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/gutter": {
+      "version": "0.19.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/gutter/-/gutter-0.19.4.tgz",
+      "integrity": "sha512-zcDtGafuzLs9mvSBqHVuLNbS4UpHBo1+DRY6NtZfC31bV8abDxOPgokq2+6UsVPQp+RA1LgmPHatp4gOYSM+cA==",
+      "requires": {
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/highlight": {
+      "version": "0.19.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/highlight/-/highlight-0.19.6.tgz",
+      "integrity": "sha512-+eibu6on9quY8uN3xJ/n3rH+YIDLlpX7YulVmFvqAIz/ukRQ5tWaBmB7fMixHmnmRIRBRZgB8rNtonuMwZSAHQ==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "@codemirror/history": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/history/-/history-0.19.0.tgz",
+      "integrity": "sha512-E0H+lncH66IMDhaND9jgkjE7s0dhYfjCPmS+Ig2Yes9I8+UIEecIdObj8c8HPCFGctGg3fxXqRAw2mdHl2Wouw==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/lang-css": {
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-0.19.3.tgz",
+      "integrity": "sha512-tyCUJR42/UlfOPLb94/p7dN+IPsYSIzHbAHP2KQHANj0I+Orqp+IyIOS++M8TuCX4zkWh9dvi8s92yy/Tn8Ifg==",
+      "requires": {
+        "@codemirror/autocomplete": "^0.19.0",
+        "@codemirror/highlight": "^0.19.6",
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@lezer/css": "^0.15.2"
+      }
+    },
+    "@codemirror/lang-html": {
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-0.19.3.tgz",
+      "integrity": "sha512-QlZN8VhQ+vlOpDMbcfXcG3HiiNeklAfIYnKonPM902SM3nJc4rJ66X9O8mzy0TUDBmew9zaYDubvQcqw7rc5Bg==",
+      "requires": {
+        "@codemirror/autocomplete": "^0.19.0",
+        "@codemirror/highlight": "^0.19.6",
+        "@codemirror/lang-css": "^0.19.0",
+        "@codemirror/lang-javascript": "^0.19.0",
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@lezer/common": "^0.15.0",
+        "@lezer/html": "^0.15.0"
+      }
+    },
+    "@codemirror/lang-javascript": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-0.19.2.tgz",
+      "integrity": "sha512-qNFjCSTWOTZ/KusoVx3CxjmNS37DrhVoVO9E1IkrIMVC3tkk8Hs2eA6HNMxT4VGp5O+0yBmf1DE2o5QQSMs0jg==",
+      "requires": {
+        "@codemirror/autocomplete": "^0.19.0",
+        "@codemirror/highlight": "^0.19.6",
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/lint": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/javascript": "^0.15.0"
+      }
+    },
+    "@codemirror/lang-markdown": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-0.19.2.tgz",
+      "integrity": "sha512-LFzY5TEPmKEBe9ABpG7XujW5pXZwyreunsROOwxewsri0XpupKj3WDfM8U7RwgM0aVc2pXP1u7R1C2MdQPOwPQ==",
+      "requires": {
+        "@codemirror/highlight": "^0.19.0",
+        "@codemirror/lang-html": "^0.19.0",
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.0",
+        "@lezer/markdown": "^0.15.0"
+      }
+    },
+    "@codemirror/language": {
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-0.19.3.tgz",
+      "integrity": "sha512-6vjkRYHRJg/z9wdAk75nU2fQwCJBsh2HpkIjKXIHfzISSgLt5qSDxVhPd8Uu8PD5WMmFFP8tX7I9kdIt873o0A==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.5",
+        "@lezer/lr": "^0.15.0"
+      }
+    },
+    "@codemirror/legacy-modes": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-0.19.0.tgz",
+      "integrity": "sha512-GSPdBNUeyF3nxJ2lztXGp2UoQjn+ggK5z+Kd4tflziecCG1+8mcdudDgFvxDuaTGWyM34S7Ldb4Xv7/XodZtBA==",
+      "requires": {
+        "@codemirror/stream-parser": "^0.19.0"
+      }
+    },
+    "@codemirror/lint": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-0.19.2.tgz",
+      "integrity": "sha512-477qvXWwuf24YsBi1DzjrGyzM+qfPe5L4xEHGxQTGOMq6R0+QAFKppOJsxN3y7gzDpLrZSYZdhJzWevOuliZQg==",
+      "requires": {
+        "@codemirror/panel": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/tooltip": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/matchbrackets": {
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/matchbrackets/-/matchbrackets-0.19.3.tgz",
+      "integrity": "sha512-ljkrBxaLgh8jesroUiBa57pdEwqJamxkukXrJpL9LdyFZVJaF+9TldhztRaMsMZO1XnCSSHQ9sg32iuHo7Sc2g==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.0"
+      }
+    },
+    "@codemirror/panel": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/panel/-/panel-0.19.0.tgz",
+      "integrity": "sha512-LJuu49xnuhaAztlhnLJQ57ddOirSyf8/lnl7twsQUG/05RkxodBZ9F7q8r5AOLqOkaQOy9WySEKX1Ur8lD9Q5w==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/rangeset": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/rangeset/-/rangeset-0.19.1.tgz",
+      "integrity": "sha512-WaKTEw8JB/3QFlQzpdgRoklopcWvG8O/Xp+rxxOfFKYTaeaejpY/tjpyBBg+Ea65Ka3m7+pPp9d5j/oR2rd9NA==",
+      "requires": {
+        "@codemirror/state": "^0.19.0"
+      }
+    },
+    "@codemirror/rectangular-selection": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/rectangular-selection/-/rectangular-selection-0.19.1.tgz",
+      "integrity": "sha512-9ElnqOg3mpZIWe0prPRd1SZ48Q9QB3bR8Aocq8UtjboJSUG8ABhRrbuTZMW/rMqpBPSjVpCe9xkCCkEQMYQVmw==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/text": "^0.19.4",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/search": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-0.19.2.tgz",
+      "integrity": "sha512-TrRxUxyJ/a7HXtUvMZhgkOUbKE1xO33UhXjn1XACEHKWhgovw1vEeEEti9dZejN8/QOOFJed39InUxmp7oQ8HA==",
+      "requires": {
+        "@codemirror/panel": "^0.19.0",
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.2",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/state": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.2.tgz",
+      "integrity": "sha512-dDqCrtkb0c/LYUlvQBLyLfkISEskbZnhvBbcVOF4j2AusJ1ptJ3EGMxBL9G16GP1TOdC1T613gA1J1qc3pbfGQ==",
+      "requires": {
+        "@codemirror/text": "^0.19.0"
+      }
+    },
+    "@codemirror/stream-parser": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/stream-parser/-/stream-parser-0.19.2.tgz",
+      "integrity": "sha512-hBKRQlyu8GUOrY33xZ6/1kAfNZ8ZUm6cX9a7mPx8zAAqnpz/fpksC/qJRrkg1mPMBwxm+JG4fqAwDGJ3gLVniQ==",
+      "requires": {
+        "@codemirror/highlight": "^0.19.0",
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/text": "^0.19.0",
+        "@lezer/common": "^0.15.0",
+        "@lezer/lr": "^0.15.0"
+      }
+    },
+    "@codemirror/text": {
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.19.5.tgz",
+      "integrity": "sha512-Syu5Xc7tZzeUAM/y4fETkT0zgGr48rDG+w4U38bPwSIUr+L9S/7w2wDE1WGNzjaZPz12F6gb1gxWiSTg9ocLow=="
+    },
+    "@codemirror/tooltip": {
+      "version": "0.19.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.19.4.tgz",
+      "integrity": "sha512-DTv6SOzjw8LbHdTd2FszpIkQCUKRl0dqh1pWqawR31Lu/ZCz1nOiOY1sxkiEZVXMTFg44V0Uff0YlY6mTVK2DQ==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/view": {
+      "version": "0.19.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.19.9.tgz",
+      "integrity": "sha512-d2Z2rFl53yTwvhsRYtS97xT7ce1f/Q/NNE2uDg/Be1MVjP2v1OlwUTyTosBmxiCt4oUvMklfa+EdPGOATVJhtg==",
+      "requires": {
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.2",
+        "@codemirror/text": "^0.19.0",
+        "style-mod": "^4.0.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "@contentful/axios": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/@contentful/axios/-/axios-0.18.0.tgz",
@@ -5971,6 +6248,51 @@
       "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==",
       "dev": true
     },
+    "@lezer/common": {
+      "version": "0.15.7",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.7.tgz",
+      "integrity": "sha512-Rw8TDJnBzZnkyzIXs1Tmmd241FrBLJBj8gkdy3y0joGFb8Z4I/joKEsR+gv1pb13o1TMsZxm3fmP+d/wPt2CTQ=="
+    },
+    "@lezer/css": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-0.15.2.tgz",
+      "integrity": "sha512-tnMOMZY0Zs6JQeVjqfmREYMV0GnmZR1NitndLWioZMD6mA7VQF/PPKPmJX1f+ZgVZQc5Am0df9mX3aiJnNJlKQ==",
+      "requires": {
+        "@lezer/lr": "^0.15.0"
+      }
+    },
+    "@lezer/html": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-0.15.0.tgz",
+      "integrity": "sha512-ErmgP/Vv0AhYJvs/Ekb9oue4IzBHemKLi7K8tJ0jgS+20Y8FGC9foK6knCXtEHqdPaxVGQH9PVp7gecLnzLd9Q==",
+      "requires": {
+        "@lezer/lr": "^0.15.0"
+      }
+    },
+    "@lezer/javascript": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-0.15.0.tgz",
+      "integrity": "sha512-euFjbbyYmxpBls9FyBAKnGLEjaMFqfHvhfueA7M1PitZdieHu8KSblutmcwjpWKIV4eH4uElMZO2cPVe0aFxXA==",
+      "requires": {
+        "@lezer/lr": "^0.15.0"
+      }
+    },
+    "@lezer/lr": {
+      "version": "0.15.4",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-0.15.4.tgz",
+      "integrity": "sha512-vwgG80sihEGJn6wJp6VijXrnzVai/KPva/OzYKaWvIx0IiXKjoMQ8UAwcgpSBwfS4Fbz3IKOX/cCNXU3r1FvpQ==",
+      "requires": {
+        "@lezer/common": "^0.15.0"
+      }
+    },
+    "@lezer/markdown": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-0.15.1.tgz",
+      "integrity": "sha512-CV8UQv5sfXj3eKjWVI23JUg2l7eBMV2B4tfbPoXGImzl6Yh0u2PEyTkcKaRw5fVNWZMGs6a4MOwxZ4vfvR5M0w==",
+      "requires": {
+        "@lezer/common": "^0.15.0"
+      }
+    },
     "@mdx-js/loader": {
       "version": "1.6.22",
       "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-1.6.22.tgz",
@@ -16341,6 +16663,11 @@
         }
       }
     },
+    "crelt": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz",
+      "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA=="
+    },
     "cron": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/cron/-/cron-1.8.2.tgz",
@@ -34788,6 +35115,11 @@
         }
       }
     },
+    "style-mod": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
+      "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw=="
+    },
     "style-to-object": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
@@ -37014,6 +37346,11 @@
         "browser-process-hrtime": "^1.0.0"
       }
     },
+    "w3c-keyname": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz",
+      "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
+    },
     "w3c-xmlserializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",

services/web/package.json

@@ -47,6 +47,25 @@
     "@babel/core": "^7.14.5",
     "@babel/preset-env": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
+    "@codemirror/autocomplete": "^0.19.4",
+    "@codemirror/closebrackets": "^0.19.0",
+    "@codemirror/commands": "^0.19.5",
+    "@codemirror/comment": "^0.19.0",
+    "@codemirror/fold": "^0.19.1",
+    "@codemirror/gutter": "^0.19.4",
+    "@codemirror/highlight": "^0.19.6",
+    "@codemirror/history": "^0.19.0",
+    "@codemirror/lang-markdown": "^0.19.2",
+    "@codemirror/language": "^0.19.3",
+    "@codemirror/legacy-modes": "^0.19.0",
+    "@codemirror/lint": "^0.19.2",
+    "@codemirror/matchbrackets": "^0.19.3",
+    "@codemirror/rangeset": "^0.19.1",
+    "@codemirror/rectangular-selection": "^0.19.1",
+    "@codemirror/search": "^0.19.2",
+    "@codemirror/state": "^0.19.2",
+    "@codemirror/stream-parser": "^0.19.2",
+    "@codemirror/view": "^0.19.9",
     "@overleaf/metrics": "^3.5.1",
     "@overleaf/o-error": "^3.3.1",
     "@overleaf/object-persistor": "^1.0.1",

services/web/test/frontend/bootstrap.js

@@ -78,21 +78,24 @@ moment.updateLocale('en', {
 })
 
 // workaround for missing keys in jsdom-global's keys.js
-global.AbortController = window.AbortController
-global.MutationObserver = window.MutationObserver
-global.StorageEvent = window.StorageEvent
-global.SVGElement = window.SVGElement
-global.localStorage = window.localStorage
-global.performance = window.performance
-global.requestAnimationFrame = window.requestAnimationFrame
-global.sessionStorage = window.sessionStorage
+globalThis.AbortController = global.AbortController = window.AbortController
+globalThis.MutationObserver = global.MutationObserver = window.MutationObserver
+globalThis.StorageEvent = global.StorageEvent = window.StorageEvent
+globalThis.SVGElement = global.SVGElement = window.SVGElement
+globalThis.localStorage = global.localStorage = window.localStorage
+globalThis.performance = global.performance = window.performance
+globalThis.cancelAnimationFrame = global.cancelAnimationFrame =
+  window.cancelAnimationFrame
+globalThis.requestAnimationFrame = global.requestAnimationFrame =
+  window.requestAnimationFrame
+globalThis.sessionStorage = global.sessionStorage = window.sessionStorage
 
 // add polyfill for ResizeObserver
-global.ResizeObserver = window.ResizeObserver = require('@juggle/resize-observer').ResizeObserver
+globalThis.ResizeObserver = global.ResizeObserver = window.ResizeObserver = require('@juggle/resize-observer').ResizeObserver
 
 // node-fetch doesn't accept relative URL's: https://github.com/node-fetch/node-fetch/blob/master/docs/v2-LIMITS.md#known-differences
 const fetch = require('node-fetch')
-global.fetch = window.fetch = (url, ...options) =>
+globalThis.fetch = global.fetch = window.fetch = (url, ...options) =>
   fetch(new URL(url, 'http://localhost'), ...options)
 
 // ignore CSS files