Decorate verbatim and lstlisting environments (#13722)

GitOrigin-RevId: 2e5af20bf2fe0c7769011ecd26797e93290b4fdb

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

@@ -228,7 +228,12 @@ export const atomicDecorations = (options: Options) => {
       enter(nodeRef) {
         if (nodeRef.type.is('$Environment')) {
           const envName = getUnstarredEnvironmentName(nodeRef.node, state)
-          const hideInEnvironmentTypes = ['figure', 'table']
+          const hideInEnvironmentTypes = [
+            'figure',
+            'table',
+            'verbatim',
+            'lstlisting',
+          ]
           if (envName && hideInEnvironmentTypes.includes(envName)) {
             const beginNode = nodeRef.node.getChild('BeginEnv')
             const endNode = nodeRef.node.getChild('EndEnv')

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

@@ -112,6 +112,8 @@ export const markDecorations = ViewPlugin.define(
                 case 'abstract':
                 case 'figure':
                 case 'table':
+                case 'verbatim':
+                case 'lstlisting':
                   {
                     const centered = Boolean(
                       centeringNodeForEnvironment(nodeRef)

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

@@ -254,6 +254,12 @@ export const visualTheme = EditorView.theme({
   '.ol-cm-caption-line .ol-cm-label': {
     marginRight: '1ch',
   },
+  '.ol-cm-environment-verbatim': {
+    fontFamily: 'var(--source-font-family)',
+  },
+  '.ol-cm-environment-lstlisting': {
+    fontFamily: 'var(--source-font-family)',
+  },
   '.ol-cm-tex': {
     textTransform: 'uppercase',
     '& sup': {

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

@@ -258,6 +258,54 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
         .should('not.have.class', 'ol-cm-environment-centered')
     })
   })
+
+  describe('verbatim environments', function () {
+    beforeEach(function () {
+      cy.get('@first-line').type('\\begin{{}verbatim')
+      cy.get('@first-line').type('{Enter}test') // end with cursor in content
+    })
+
+    it('marks lines as verbatim environments', function () {
+      // inside the environment
+      cy.get('@second-line').should('have.class', 'ol-cm-environment-verbatim')
+
+      // outside the environment
+      cy.get('.cm-line')
+        .eq(4)
+        .should('not.have.class', 'ol-cm-environment-verbatim')
+
+      // move the cursor out of the environment
+      cy.get('.cm-line').eq(4).click()
+
+      cy.get('.cm-content').should('have.text', '    test')
+    })
+  })
+
+  describe('lstlisting environments', function () {
+    beforeEach(function () {
+      cy.get('@first-line').type('\\begin{{}lstlisting')
+      cy.get('@first-line').type('{Enter}test') // end with cursor in content
+    })
+
+    it('marks lines as lstlisting environments', function () {
+      // inside the environment
+      cy.get('@second-line').should(
+        'have.class',
+        'ol-cm-environment-lstlisting'
+      )
+
+      // outside the environment
+      cy.get('.cm-line')
+        .eq(4)
+        .should('not.have.class', 'ol-cm-environment-lstlisting')
+
+      // move the cursor out of the environment
+      cy.get('.cm-line').eq(4).click()
+
+      cy.get('.cm-content').should('have.text', '    test')
+    })
+  })
+
   describe('Toolbar', function () {
     describe('Formatting buttons highlighting', function () {
       it('handles empty selections inside of bold', function () {