Upgrade CodeMirror and Lezer dependencies (#30615)

* Upgrade CodeMirror and Lezer dependencies
* Ensure that BraceWidget and IconBraceWidget always have string content
* Add updateDOM to BraceWidget
* Use pinned versions
* Fix description list decoration

GitOrigin-RevId: 5306f7f09290eb9a2c375e97d33509537f3c5e5f

services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts

@@ -1017,7 +1017,7 @@ export const atomicDecorations = (options: Options) => {
                   ...decorateArgumentBraces(
                     new BraceWidget(decorateBrackets ? '' : '['),
                     argumentNode,
-                    from,
+                    argumentNode.from,
                     false,
                     new BraceWidget(decorateBrackets ? '' : ']'),
                     { open: OpenBracket, close: CloseBracket }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/brace.ts

@@ -1,16 +1,14 @@
 import { WidgetType } from '@codemirror/view'
 
 export class BraceWidget extends WidgetType {
-  constructor(private content?: string) {
+  constructor(private content = '') {
     super()
   }
 
   toDOM() {
     const element = document.createElement('span')
     element.classList.add('ol-cm-brace')
-    if (this.content !== undefined) {
-      element.textContent = this.content
-    }
+    element.textContent = this.content
     return element
   }
 
@@ -22,6 +20,11 @@ export class BraceWidget extends WidgetType {
     return widget.content === this.content
   }
 
+  updateDOM(element: HTMLSpanElement): boolean {
+    element.textContent = this.content
+    return true
+  }
+
   coordsAt(element: HTMLElement) {
     return element.getBoundingClientRect()
   }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/icon-brace.ts

@@ -1,7 +1,7 @@
 import { WidgetType } from '@codemirror/view'
 
 export class IconBraceWidget extends WidgetType {
-  constructor(private content?: string) {
+  constructor(private content = '') {
     super()
   }
 
@@ -9,9 +9,7 @@ export class IconBraceWidget extends WidgetType {
     const element = document.createElement('span')
     element.classList.add('ol-cm-brace')
     element.classList.add('ol-cm-icon-brace')
-    if (this.content !== undefined) {
-      element.textContent = this.content
-    }
+    element.textContent = this.content
     return element
   }
 
@@ -24,7 +22,7 @@ export class IconBraceWidget extends WidgetType {
   }
 
   updateDOM(element: HTMLElement): boolean {
-    element.textContent = this.content ?? ''
+    element.textContent = this.content
     return true
   }
 

services/web/package.json

@@ -207,20 +207,20 @@
     "@babel/preset-typescript": "^7.28.5",
     "@babel/register": "^7.28.3",
     "@codemirror/autocomplete": "github:overleaf/codemirror-autocomplete#6445cd056671c98d12d1c597ba705e11327ec4c5",
-    "@codemirror/commands": "^6.9.0",
-    "@codemirror/lang-markdown": "^6.4.0",
-    "@codemirror/language": "^6.11.3",
-    "@codemirror/lint": "^6.9.0",
+    "@codemirror/commands": "6.10.1",
+    "@codemirror/lang-markdown": "6.5.0",
+    "@codemirror/language": "6.12.1",
+    "@codemirror/lint": "6.9.2",
     "@codemirror/search": "github:overleaf/codemirror-search#04380a528c339cd4b78fb10b3ef017f657ec17bd",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.6",
+    "@codemirror/state": "6.5.4",
+    "@codemirror/view": "6.39.11",
     "@floating-ui/react": "^0.27.5",
     "@juggle/resize-observer": "^3.3.1",
-    "@lezer/common": "^1.2.3",
-    "@lezer/generator": "^1.7.3",
-    "@lezer/highlight": "^1.2.1",
-    "@lezer/lr": "^1.4.2",
-    "@lezer/markdown": "^1.4.3",
+    "@lezer/common": "1.5.0",
+    "@lezer/generator": "1.8.0",
+    "@lezer/highlight": "1.2.3",
+    "@lezer/lr": "1.4.7",
+    "@lezer/markdown": "1.6.3",
     "@overleaf/codemirror-tree-view": "^0.1.3",
     "@overleaf/dictionaries": "https://github.com/overleaf/dictionaries/archive/refs/tags/v0.0.3.tar.gz",
     "@overleaf/eslint-plugin": "*",

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

@@ -730,7 +730,7 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
       cy.get('.ol-cm-textcolor')
         .should('have.length', 1)
         .should('have.text', 'foo')
-        .should('have.attr', 'style', 'color: rgb(255,0,0)')
+        .should('have.attr', 'style', 'color: rgb(255, 0, 0);')
     })
 
     it('decorates colorbox', function () {
@@ -738,7 +738,7 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
       cy.get('.ol-cm-colorbox')
         .should('have.length', 1)
         .should('have.text', 'foo')
-        .should('have.attr', 'style', 'background-color: rgb(255,255,0)')
+        .should('have.attr', 'style', 'background-color: rgb(255, 255, 0);')
     })
   })