Merge pull request #12677 from overleaf/ae-codemirror-view-upgrade

[cm6] Upgrade CodeMirror dependencies

GitOrigin-RevId: cc973b1c5b23eca0fc93a9b3a970c832212e47af

package-lock.json

@@ -3145,9 +3145,9 @@
       "dev": true
     },
     "node_modules/@codemirror/autocomplete": {
-      "version": "6.4.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.4.2.tgz",
-      "integrity": "sha512-8WE2xp+D0MpWEv5lZ6zPW1/tf4AGb358T5GWYiKEuCP8MvFfT3tH2mIF9Y2yr2e3KbHuSvsVhosiEyqCpiJhZQ==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.5.1.tgz",
+      "integrity": "sha512-/Sv9yJmqyILbZ26U4LBHnAtbikuVxWUp+rQ8BXuRGtxZfbfKOY/WPbsUtvSP2h0ZUZMlkxV/hqbKRFzowlA6xw==",
       "dependencies": {
         "@codemirror/language": "^6.0.0",
         "@codemirror/state": "^6.0.0",
@@ -3238,9 +3238,9 @@
       }
     },
     "node_modules/@codemirror/lint": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.2.0.tgz",
-      "integrity": "sha512-KVCECmR2fFeYBr1ZXDVue7x3q5PMI0PzcIbA+zKufnkniMBo1325t0h1jM85AKp8l3tj67LRxVpZfgDxEXlQkg==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.2.1.tgz",
+      "integrity": "sha512-y1muai5U/uUPAGRyHMx9mHuHLypPcHWxzlZGknp/U5Mdb5Ol8Q5ZLp67UqyTbNFJJ3unVxZ8iX3g1fMN79S1JQ==",
       "dependencies": {
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.0.0",
@@ -3263,9 +3263,9 @@
       "integrity": "sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA=="
     },
     "node_modules/@codemirror/view": {
-      "version": "6.9.4",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.9.4.tgz",
-      "integrity": "sha512-Ov2H9gwlGUxiH94zWxlLtTlyogSFaQDIYjtSEcfzgh7MkKmKVchkmr4JbtR5zBev3jY5DVtKvUC8yjd1bKW55A==",
+      "version": "6.9.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.9.5.tgz",
+      "integrity": "sha512-IZwGdkn8PDyMkGms7bCMpFuTCg6+6eCZNgLOe9xQL4RYvMw1yYLviH+qoAqsNoYGpDt4HhHoW9v3FmalobFoKw==",
       "dependencies": {
         "@codemirror/state": "^6.1.4",
         "style-mod": "^4.0.0",
@@ -35087,14 +35087,14 @@
         "@babel/preset-env": "^7.14.5",
         "@babel/preset-react": "^7.14.5",
         "@babel/preset-typescript": "^7.16.0",
-        "@codemirror/autocomplete": "^6.4.2",
+        "@codemirror/autocomplete": "^6.5.1",
         "@codemirror/commands": "^6.2.2",
         "@codemirror/lang-markdown": "^6.1.0",
         "@codemirror/language": "^6.6.0",
-        "@codemirror/lint": "^6.2.0",
+        "@codemirror/lint": "^6.2.1",
         "@codemirror/search": "^6.3.0",
         "@codemirror/state": "^6.2.0",
-        "@codemirror/view": "^6.9.4",
+        "@codemirror/view": "^6.9.5",
         "@contentful/rich-text-html-renderer": "^16.0.2",
         "@contentful/rich-text-types": "^16.0.2",
         "@google-cloud/bigquery": "^6.0.1",
@@ -39847,9 +39847,9 @@
       "dev": true
     },
     "@codemirror/autocomplete": {
-      "version": "6.4.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.4.2.tgz",
-      "integrity": "sha512-8WE2xp+D0MpWEv5lZ6zPW1/tf4AGb358T5GWYiKEuCP8MvFfT3tH2mIF9Y2yr2e3KbHuSvsVhosiEyqCpiJhZQ==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.5.1.tgz",
+      "integrity": "sha512-/Sv9yJmqyILbZ26U4LBHnAtbikuVxWUp+rQ8BXuRGtxZfbfKOY/WPbsUtvSP2h0ZUZMlkxV/hqbKRFzowlA6xw==",
       "requires": {
         "@codemirror/language": "^6.0.0",
         "@codemirror/state": "^6.0.0",
@@ -39934,9 +39934,9 @@
       }
     },
     "@codemirror/lint": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.2.0.tgz",
-      "integrity": "sha512-KVCECmR2fFeYBr1ZXDVue7x3q5PMI0PzcIbA+zKufnkniMBo1325t0h1jM85AKp8l3tj67LRxVpZfgDxEXlQkg==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.2.1.tgz",
+      "integrity": "sha512-y1muai5U/uUPAGRyHMx9mHuHLypPcHWxzlZGknp/U5Mdb5Ol8Q5ZLp67UqyTbNFJJ3unVxZ8iX3g1fMN79S1JQ==",
       "requires": {
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.0.0",
@@ -39959,9 +39959,9 @@
       "integrity": "sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA=="
     },
     "@codemirror/view": {
-      "version": "6.9.4",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.9.4.tgz",
-      "integrity": "sha512-Ov2H9gwlGUxiH94zWxlLtTlyogSFaQDIYjtSEcfzgh7MkKmKVchkmr4JbtR5zBev3jY5DVtKvUC8yjd1bKW55A==",
+      "version": "6.9.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.9.5.tgz",
+      "integrity": "sha512-IZwGdkn8PDyMkGms7bCMpFuTCg6+6eCZNgLOe9xQL4RYvMw1yYLviH+qoAqsNoYGpDt4HhHoW9v3FmalobFoKw==",
       "requires": {
         "@codemirror/state": "^6.1.4",
         "style-mod": "^4.0.0",
@@ -44765,14 +44765,14 @@
         "@babel/preset-react": "^7.14.5",
         "@babel/preset-typescript": "^7.16.0",
         "@babel/register": "^7.14.5",
-        "@codemirror/autocomplete": "^6.4.2",
+        "@codemirror/autocomplete": "^6.5.1",
         "@codemirror/commands": "^6.2.2",
         "@codemirror/lang-markdown": "^6.1.0",
         "@codemirror/language": "^6.6.0",
-        "@codemirror/lint": "^6.2.0",
+        "@codemirror/lint": "^6.2.1",
         "@codemirror/search": "^6.3.0",
         "@codemirror/state": "^6.2.0",
-        "@codemirror/view": "^6.9.4",
+        "@codemirror/view": "^6.9.5",
         "@contentful/rich-text-html-renderer": "^16.0.2",
         "@contentful/rich-text-types": "^16.0.2",
         "@google-cloud/bigquery": "^6.0.1",

services/web/frontend/js/features/source-editor/extensions/empty-line-filler.ts

@@ -68,8 +68,8 @@ export const emptyLineFiller = () => {
     ),
     EditorView.baseTheme({
       '.ol-cm-filler': {
-        display: 'inline-block',
-        width: '4px',
+        display: 'inline',
+        padding: '2px',
       },
     }),
   ]

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

@@ -38,7 +38,7 @@ import { thirdPartyExtensions } from './third-party-extensions'
 import { lineNumbers } from './line-numbers'
 import { highlightActiveLine } from './highlight-active-line'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
-// import { emptyLineFiller } from './empty-line-filler'
+import { emptyLineFiller } from './empty-line-filler'
 import { goToLinePanel } from './go-to-line'
 import { parserWatcher } from './wait-for-parser'
 import { drawSelection } from './draw-selection'
@@ -138,8 +138,7 @@ export const createExtensions = (options: Record<string, any>): Extension[] => [
   spelling(options.spelling),
   shortcuts(),
   symbolPalette(),
-  // TODO: re-enable this once incompatibility with @codemirror/view is fixed
-  // emptyLineFiller(), // NOTE: must be before `trackChanges`
+  emptyLineFiller(), // NOTE: must be before `trackChanges`
   trackChanges(options.currentDoc, options.changeManager),
   visual(options.currentDoc, options.visual),
   verticalOverflow(),

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

@@ -185,7 +185,7 @@ const staticTheme = EditorView.theme({
     userSelect: 'none',
   },
   // make cursor visible with reduced opacity when the editor is not focused
-  '&:not(.cm-focused) .cm-cursor': {
+  '&:not(.cm-focused) > .cm-scroller > .cm-cursorLayer .cm-cursor': {
     display: 'block',
     opacity: 0.2,
   },

services/web/frontend/js/features/source-editor/languages/latex/completions/apply.ts

@@ -1,10 +1,12 @@
-import { codePointAt, codePointSize, Text } from '@codemirror/state'
 import {
-  clearSnippet,
-  Completion,
-  insertCompletionText,
-  snippet,
-} from '@codemirror/autocomplete'
+  codePointAt,
+  codePointSize,
+  EditorSelection,
+  EditorState,
+  Text,
+  TransactionSpec,
+} from '@codemirror/state'
+import { clearSnippet, Completion, snippet } from '@codemirror/autocomplete'
 import { EditorView } from '@codemirror/view'
 import { prepareSnippetTemplate } from '../snippets'
 import { ancestorNodeOfType } from '../../../utils/tree-query'
@@ -22,6 +24,42 @@ export const prevChar = (doc: Text, pos: number) => {
     : prev.slice(1)
 }
 
+// from https://github.com/codemirror/autocomplete/blob/6.4.2/src/completion.ts
+// forked due to an issue with `to` in https://github.com/codemirror/autocomplete/commit/a4cce022daea903c8b9ffcb7ca2fb598b17bfb66
+export function insertCompletionText(
+  state: EditorState,
+  text: string,
+  from: number,
+  to: number
+): TransactionSpec {
+  return {
+    ...state.changeByRange(range => {
+      if (range === state.selection.main) {
+        return {
+          changes: { from, to, insert: text },
+          range: EditorSelection.cursor(from + text.length),
+        }
+      }
+      if (!range.empty) {
+        return { range }
+      }
+      const len = to - from
+      if (
+        len &&
+        state.sliceDoc(range.from - len, range.from) !==
+          state.sliceDoc(from, to)
+      ) {
+        return { range }
+      }
+      return {
+        changes: { from: range.from - len, to: range.from, insert: text },
+        range: EditorSelection.cursor(range.from - len + text.length),
+      }
+    }),
+    userEvent: 'input.complete',
+  }
+}
+
 // Apply a completed command, removing any subsequent closing brace, optionally
 // providing a function that generates the completion text. If missing, the
 // completion label is used.

services/web/frontend/js/features/source-editor/themes/cm6/ambiance.json

@@ -19,7 +19,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "borderLeft": "1px solid #7991E8"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgba(221, 240, 255, 0.20)"
     },
     ".cm-selectionMatch.cm-selectionMatch, .cm-searchMatch.cm-searchMatch": {

services/web/frontend/js/features/source-editor/themes/cm6/chaos.json

@@ -14,7 +14,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "borderLeft": "2px solid #FFFFFF"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#494836"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/chrome.json

@@ -15,7 +15,7 @@
       "color": "black"
     },
     ".cm-foldPlaceholder": {},
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgb(181, 213, 255)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/clouds.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#000000"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#BDD5FC"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/clouds_midnight.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#7DA5DC"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#000000"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/cobalt.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#FFFFFF"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgba(179, 101, 57, 0.75)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/crimson_editor.json

@@ -15,7 +15,7 @@
       "color": "black"
     },
     ".cm-foldPlaceholder": {},
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgb(181, 213, 255)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/dawn.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#000000"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgba(39, 95, 255, 0.30)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/dracula.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#f8f8f0"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#44475a"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/dreamweaver.json

@@ -16,7 +16,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "black"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgb(181, 213, 255)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/eclipse.json

@@ -17,7 +17,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "black"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgb(181, 213, 255)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/github.json

@@ -16,7 +16,7 @@
     ".cm-activeLine": {
       "background": "rgb(245, 245, 245)"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgb(181, 213, 255)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/gob.json

@@ -15,7 +15,7 @@
       "backgroundColor": "rgba(16, 240, 248, 0.70)",
       "opacity": "0.4"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgba(221, 240, 255, 0.20)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/gruvbox.json

@@ -11,7 +11,7 @@
       "color": "#EBDAB4",
       "backgroundColor": "#1D2021"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgba(179, 101, 57, 0.75)"
     },
     ".cm-activeLine": {

services/web/frontend/js/features/source-editor/themes/cm6/idle_fingers.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#91FF00"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgba(90, 100, 126, 0.88)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/iplastic.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#333"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#BAD6FD"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/katzenmilch.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "borderLeft": "2px solid #100011"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgba(100, 5, 208, 0.27)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/kr_theme.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#FF9900"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgba(170, 0, 255, 0.45)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/kuroir.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#202020"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgba(245, 170, 0, 0.57)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/merbivore.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#FFFFFF"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#454545"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/merbivore_soft.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#FFFFFF"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#494949"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/mono_industrial.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#FFFFFF"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgba(145, 153, 148, 0.40)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/monokai.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#F8F8F0"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#49483E"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/nord_dark.json

@@ -15,7 +15,7 @@
     ".cm-activeLine": {
       "background": "#434c5ecc"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#434c5ecc"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/one_dark.json

@@ -13,12 +13,12 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#528bff"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#3d4350"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
-      "margin": "-1px 0 0 -1px",
-      "border": "1px solid #747369"
+      "margin": 0,
+      "outline": "1px solid #747369"
     },
     ".cm-activeLine": {
       "background": "rgba(76, 87, 103, .19)"
@@ -27,7 +27,8 @@
       "backgroundColor": "rgba(76, 87, 103, .19)"
     },
     ".cm-selectionMatch.cm-selectionMatch, .cm-searchMatch.cm-searchMatch": {
-      "border": "1px solid #3d4350"
+      "outline": "1px solid #3d4350",
+      "margin": 0
     },
     ".cm-foldPlaceholder": {
       "backgroundColor": "#61afef",

services/web/frontend/js/features/source-editor/themes/cm6/overleaf.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "black"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgb(181, 213, 255)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/pastel_on_dark.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#A7A7A7"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgba(221, 240, 255, 0.20)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/solarized_dark.json

@@ -16,7 +16,7 @@
     ".cm-activeLine": {
       "background": "rgba(255, 255, 255, 0.1)"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgba(255, 255, 255, 0.1)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/solarized_light.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#000000"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgba(7, 54, 67, 0.09)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/sqlserver.json

@@ -14,7 +14,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "black"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgb(181, 213, 255)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/terminal.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#9F9F9F"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#424242"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/textmate.json

@@ -16,7 +16,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "black"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgb(181, 213, 255)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/tomorrow.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#AEAFAD"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#D6D6D6"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/tomorrow_night.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#AEAFAD"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#373B41"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/tomorrow_night_blue.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#FFFFFF"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#003F8E"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/tomorrow_night_bright.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#9F9F9F"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#424242"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/tomorrow_night_eighties.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#CCCCCC"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#515151"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/twilight.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#A7A7A7"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "rgba(221, 240, 255, 0.20)"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
@@ -57,9 +57,6 @@
     ".tok-function": {
       "color": "#AC885B"
     },
-    ".tok-attributeValue": {
-      "color": "#7587A6"
-    },
     ".tok-string": {
       "color": "#8F9D6A"
     },
@@ -69,6 +66,9 @@
     ".tok-comment": {
       "fontStyle": "italic",
       "color": "#5F5A60"
+    },
+    ".tok-attributeValue": {
+      "color": "#7587A6"
     }
   },
   "dark": true

services/web/frontend/js/features/source-editor/themes/cm6/vibrant_ink.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#FFFFFF"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#6699CC"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/cm6/xcode.json

@@ -13,7 +13,7 @@
     ".cm-cursor, .cm-dropCursor": {
       "color": "#000000"
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
+    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected": {
       "background": "#B5D5FF"
     },
     "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {

services/web/frontend/js/features/source-editor/themes/convert.js

@@ -57,7 +57,7 @@ const themeMapping = new Map([
   ['.ace_cursor', '.cm-cursor, .cm-dropCursor'],
   [
     '.ace_marker-layer .ace_selection',
-    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected',
+    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection, .cm-searchMatch.cm-searchMatch.cm-searchMatch-selected',
   ],
   [
     '.ace_marker-layer .ace_selected-word',

services/web/package.json

@@ -71,14 +71,14 @@
     "@babel/preset-env": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.16.0",
-    "@codemirror/autocomplete": "^6.4.2",
+    "@codemirror/autocomplete": "^6.5.1",
     "@codemirror/commands": "^6.2.2",
     "@codemirror/lang-markdown": "^6.1.0",
     "@codemirror/language": "^6.6.0",
-    "@codemirror/lint": "^6.2.0",
+    "@codemirror/lint": "^6.2.1",
     "@codemirror/search": "^6.3.0",
     "@codemirror/state": "^6.2.0",
-    "@codemirror/view": "^6.9.4",
+    "@codemirror/view": "^6.9.5",
     "@contentful/rich-text-html-renderer": "^16.0.2",
     "@contentful/rich-text-types": "^16.0.2",
     "@google-cloud/bigquery": "^6.0.1",