From 809172d5311810588686501b5bb4ad98a27d7ea9 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Tue, 11 Jul 2023 14:36:46 +0100
Subject: [PATCH] Decorate verbatim and lstlisting environments (#13722)

GitOrigin-RevId: 2e5af20bf2fe0c7769011ecd26797e93290b4fdb
---
 .../extensions/visual/atomic-decorations.ts   |  7 ++-
 .../extensions/visual/mark-decorations.ts     |  2 +
 .../extensions/visual/visual-theme.ts         |  6 +++
 .../codemirror-editor-visual.spec.tsx         | 48 +++++++++++++++++++
 4 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts b/services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts
index e7bfad45bb..74f6e2951f 100644
--- a/services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts
+++ b/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')
diff --git a/services/web/frontend/js/features/source-editor/extensions/visual/mark-decorations.ts b/services/web/frontend/js/features/source-editor/extensions/visual/mark-decorations.ts
index 2bd42c6b17..135ead530b 100644
--- a/services/web/frontend/js/features/source-editor/extensions/visual/mark-decorations.ts
+++ b/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)
diff --git a/services/web/frontend/js/features/source-editor/extensions/visual/visual-theme.ts b/services/web/frontend/js/features/source-editor/extensions/visual/visual-theme.ts
index 82ac7cf1f2..e27898e51c 100644
--- a/services/web/frontend/js/features/source-editor/extensions/visual/visual-theme.ts
+++ b/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': {
diff --git a/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx b/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx
index 819fbda58c..df11be5a3d 100644
--- a/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx
+++ b/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 () {