Merge pull request #16378 from overleaf/ae-upgrade-codemirror-3

Upgrade `@codemirror` dependencies

GitOrigin-RevId: 242b1dbcf2878869957f40a5522dabcbcc181b5b

services/web/frontend/js/features/source-editor/extensions/visual/list-item-marker.ts

@@ -17,7 +17,7 @@ export const listItemMarker = EditorState.transactionFilter.of(tr => {
     for (const [index, range] of tr.selection.ranges.entries()) {
       if (range.empty) {
         const node = syntaxTree(tr.state).resolveInner(range.anchor, 1)
-        const pos = chooseTargetPosition(node, tr, range)
+        const pos = chooseTargetPosition(node, tr, range, index)
         if (pos !== null) {
           selection = selection.replaceRange(
             EditorSelection.cursor(
@@ -41,7 +41,8 @@ export const listItemMarker = EditorState.transactionFilter.of(tr => {
 const chooseTargetPosition = (
   node: SyntaxNode,
   tr: Transaction,
-  range: SelectionRange
+  range: SelectionRange,
+  index: number
 ) => {
   let targetNode
   if (node.type.is('Item')) {
@@ -62,8 +63,10 @@ const chooseTargetPosition = (
     return targetNode.to
   }
 
+  const previousHead = tr.startState.selection.ranges[index]?.head
+
   // keyboard navigation
-  if (range.assoc === 1 && !range.goalColumn) {
+  if (range.head < previousHead) {
     // moving backwards: jump to end of the previous line
     return Math.max(tr.state.doc.lineAt(range.anchor).from - 1, 1)
   } else {

services/web/package.json

@@ -177,13 +177,13 @@
     "@babel/preset-typescript": "^7.23.2",
     "@babel/register": "^7.22.15",
     "@codemirror/autocomplete": "github:overleaf/codemirror-autocomplete#v6.10.2-overleaf-1",
-    "@codemirror/commands": "^6.3.0",
-    "@codemirror/lang-markdown": "^6.2.1",
-    "@codemirror/language": "^6.9.1",
+    "@codemirror/commands": "^6.3.3",
+    "@codemirror/lang-markdown": "^6.2.3",
+    "@codemirror/language": "^6.10.0",
     "@codemirror/lint": "^6.4.2",
     "@codemirror/search": "github:overleaf/codemirror-search#29f7a871969ad64b89341bacbe5d46dda02eee12",
-    "@codemirror/state": "^6.2.1",
-    "@codemirror/view": "^6.21.2",
+    "@codemirror/state": "^6.4.0",
+    "@codemirror/view": "^6.23.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/common": "^1.1.0",
     "@lezer/generator": "^1.5.1",

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-list.spec.tsx

@@ -191,20 +191,22 @@ describe('<CodeMirrorEditor/> lists in Rich Text mode', function () {
 
   it('handles keyboard navigation around a list', function () {
     const content = [
+      '',
       '\\begin{itemize}',
       '\\item One',
       '\\item Two',
       '\\end{itemize}',
+      '',
     ].join('\n')
     mountEditor(content)
 
     cy.get('.cm-line').eq(0).as('line')
     cy.get('@line').click('left')
     cy.get('@line').type(
-      '{downArrow}'.repeat(4) + // down to the end line
-        '{rightArrow}'.repeat(3) + // along a few characters
-        '{upArrow}'.repeat(2) + // up to the first list item
-        '{rightArrow}'.repeat(4) + // along to the start of the second list item
+      '{downArrow}'.repeat(2) + // down to the second list item
+        '{rightArrow}'.repeat(2) + // along a few characters
+        '{upArrow}'.repeat(1) + // up to the first list item
+        '{rightArrow}'.repeat(2) + // along to the start of the second list item
         '{shift}' + // start extending the selection
         '{rightArrow}'.repeat(3) // cover the word
     )