[visual] Decorate quotation environments (#13728)

GitOrigin-RevId: 65c4bb8b4695d0698120936d3b2fb8ec6fa402dc

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

@@ -242,6 +242,10 @@ export const atomicDecorations = (options: Options) => {
             'table',
             'verbatim',
             'lstlisting',
+            'quote',
+            'quotation',
+            'quoting',
+            'displayquote',
           ]
           if (envName && hideInEnvironmentTypes.includes(envName)) {
             const beginNode = nodeRef.node.getChild('BeginEnv')

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

@@ -153,6 +153,38 @@ export const markDecorations = ViewPlugin.define(
                     }
                     break
 
+                  case 'quote':
+                  case 'quotation':
+                  case 'quoting':
+                  case 'displayquote':
+                    {
+                      const lines = {
+                        start: state.doc.lineAt(nodeRef.from),
+                        end: state.doc.lineAt(nodeRef.to),
+                      }
+
+                      for (
+                        let lineNumber = lines.start.number;
+                        lineNumber <= lines.end.number;
+                        lineNumber++
+                      ) {
+                        const line = state.doc.line(lineNumber)
+
+                        const classNames = [
+                          `ol-cm-environment-${environmentName}`,
+                          'ol-cm-environment-quote-block',
+                          'ol-cm-environment-line',
+                        ]
+
+                        decorations.push(
+                          Decoration.line({
+                            class: classNames.join(' '),
+                          }).range(line.from)
+                        )
+                      }
+                    }
+                    break
+
                   default:
                     if (theoremStyles.has(environmentName)) {
                       const theoremStyle = theoremStyles.get(environmentName)

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

@@ -150,6 +150,11 @@ export const visualTheme = EditorView.theme({
   '.ol-cm-begin-proof > .ol-cm-environment-name': {
     fontStyle: 'italic',
   },
+  '.ol-cm-environment-quote-block.ol-cm-environment-line': {
+    borderLeft: '4px solid rgba(125, 125, 125, 0.25)',
+    paddingLeft: '1em',
+    borderRadius: '0',
+  },
   '.ol-cm-environment-padding': {
     flex: 1,
     height: '1px',

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

@@ -626,6 +626,22 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
     })
   })
 
+  forEach(['quote', 'quotation', 'quoting', 'displayquote']).it(
+    'renders a %s environment',
+    function (environment) {
+      cy.get('@first-line').type(`\\begin{{}${environment}`)
+      cy.findAllByRole('listbox').should('have.length', 1)
+      cy.findByRole('listbox').contains(`\\begin{${environment}}`).click()
+      cy.get('@second-line').type('foo')
+      cy.get('.cm-content').should(
+        'have.text',
+        [`\\begin{${environment}}`, '    foo', `\\end{${environment}}`].join('')
+      )
+      cy.get('.cm-line').eq(4).click()
+      cy.get('.cm-content').should('have.text', '    foo')
+    }
+  )
+
   // TODO: \input
   // TODO: Math
   // TODO: Abstract