[visual] Avoid showing list environment markup when the selection is within list items (#13461)

GitOrigin-RevId: cadab83774d52dc6c4867fdd7300a1217423b837

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

@@ -43,47 +43,27 @@ describe('<CodeMirrorEditor/> lists in Rich Text mode', function () {
 
     // create a nested list
     cy.get('.cm-line')
-      .eq(2)
+      .eq(1)
       .type(isMac ? '{cmd}]' : '{ctrl}]')
 
-    cy.get('.cm-content').should(
-      'have.text',
-      [
-        '\\begin{itemize}',
-        ' Test',
-        '\\begin{itemize}',
-        ' Test',
-        '\\end{itemize}',
-        '\\end{itemize}',
-      ].join('')
-    )
+    cy.get('.cm-content').should('have.text', [' Test', ' Test'].join(''))
   })
 
   it('creates a nested list inside an indented list', function () {
     const content = [
       '\\begin{itemize}',
-      '\\item Test',
-      '\\item Test',
+      '  \\item Test',
+      '  \\item Test',
       '\\end{itemize}',
     ].join('\n')
     mountEditor(content)
 
     // create a nested list
     cy.get('.cm-line')
-      .eq(2)
+      .eq(1)
       .type(isMac ? '{cmd}]' : '{ctrl}]')
 
-    cy.get('.cm-content').should(
-      'have.text',
-      [
-        '\\begin{itemize}',
-        ' Test',
-        '\\begin{itemize}',
-        ' Test',
-        '\\end{itemize}',
-        '\\end{itemize}',
-      ].join('')
-    )
+    cy.get('.cm-content').should('have.text', [' Test', ' Test'].join(''))
   })
 
   it('creates a nested list on Tab at the start of an item', function () {
@@ -96,24 +76,14 @@ describe('<CodeMirrorEditor/> lists in Rich Text mode', function () {
     mountEditor(content)
 
     // move to the start of the item and press Tab
-    cy.get('.cm-line').eq(2).as('line')
+    cy.get('.cm-line').eq(1).as('line')
     cy.get('@line').click()
     cy.get('@line').type('{leftArrow}'.repeat(4))
     cy.get('@line').trigger('keydown', {
       key: 'Tab',
     })
 
-    cy.get('.cm-content').should(
-      'have.text',
-      [
-        '\\begin{itemize}',
-        ' Test',
-        '\\begin{itemize}',
-        ' Test',
-        '\\end{itemize}',
-        '\\end{itemize}',
-      ].join('')
-    )
+    cy.get('.cm-content').should('have.text', [' Test', ' Test'].join(''))
   })
 
   it('does not creates a nested list on Tab when not at the start of an item', function () {
@@ -126,22 +96,13 @@ describe('<CodeMirrorEditor/> lists in Rich Text mode', function () {
     mountEditor(content)
 
     // focus a line (at the end of a list item) and press Tab
-    cy.get('.cm-line').eq(2).as('line')
+    cy.get('.cm-line').eq(1).as('line')
     cy.get('@line').click()
     cy.get('@line').trigger('keydown', {
       key: 'Tab',
     })
 
-    cy.get('.cm-content').should(
-      'have.text',
-      [
-        //
-        '\\begin{itemize}',
-        ' Test',
-        ' Test  ',
-        '\\end{itemize}',
-      ].join('')
-    )
+    cy.get('.cm-content').should('have.text', [' Test', ' Test  '].join(''))
   })
 
   it('removes a nested list on Shift-Tab', function () {
@@ -154,41 +115,22 @@ describe('<CodeMirrorEditor/> lists in Rich Text mode', function () {
     mountEditor(content)
 
     // move to the start of the list item and press Tab
-    cy.get('.cm-line').eq(2).as('line')
+    cy.get('.cm-line').eq(1).as('line')
     cy.get('@line').click()
     cy.get('@line').type('{leftArrow}'.repeat(4))
     cy.get('@line').trigger('keydown', {
       key: 'Tab',
     })
 
-    cy.get('.cm-content').should(
-      'have.text',
-      [
-        '\\begin{itemize}',
-        ' Test',
-        '\\begin{itemize}',
-        ' Test',
-        '\\end{itemize}',
-        '\\end{itemize}',
-      ].join('')
-    )
+    cy.get('.cm-content').should('have.text', [' Test', ' Test'].join(''))
 
     // focus the indented line and press Shift-Tab
-    cy.get('.cm-line').eq(4).trigger('keydown', {
+    cy.get('.cm-line').eq(1).trigger('keydown', {
       key: 'Tab',
       shiftKey: true,
     })
 
-    cy.get('.cm-content').should(
-      'have.text',
-      [
-        //
-        '\\begin{itemize}',
-        ' Test',
-        ' Test',
-        '\\end{itemize}',
-      ].join('')
-    )
+    cy.get('.cm-content').should('have.text', [' Test', ' Test'].join(''))
   })
 
   it('does not remove a top-level nested list on Shift-Tab', function () {
@@ -201,21 +143,12 @@ describe('<CodeMirrorEditor/> lists in Rich Text mode', function () {
     mountEditor(content)
 
     // focus a list item and press Shift-Tab
-    cy.get('.cm-line').eq(2).trigger('keydown', {
+    cy.get('.cm-line').eq(1).trigger('keydown', {
       key: 'Tab',
       shiftKey: true,
     })
 
-    cy.get('.cm-content').should(
-      'have.text',
-      [
-        //
-        '\\begin{itemize}',
-        ' Test',
-        ' Test',
-        '\\end{itemize}',
-      ].join('')
-    )
+    cy.get('.cm-content').should('have.text', [' Test', ' Test'].join(''))
   })
 
   it('handles up arrow at the start of a list item', function () {
@@ -227,7 +160,7 @@ describe('<CodeMirrorEditor/> lists in Rich Text mode', function () {
     ].join('\n')
     mountEditor(content)
 
-    cy.get('.cm-line').eq(2).as('line')
+    cy.get('.cm-line').eq(1).as('line')
     cy.get('@line').click()
     cy.get('@line').type('{leftArrow}'.repeat(3)) // to the start of the item
     cy.get('@line').type('{upArrow}{Shift}{rightArrow}{rightArrow}{rightArrow}') // up and extend to the end of the item
@@ -246,7 +179,7 @@ describe('<CodeMirrorEditor/> lists in Rich Text mode', function () {
     ].join('\n')
     mountEditor(content)
 
-    cy.get('.cm-line').eq(2).as('line')
+    cy.get('.cm-line').eq(1).as('line')
     cy.get('@line').click()
     cy.get('@line').type('{leftArrow}'.repeat(3)) // to the start of the item
     cy.get('@line').type('{upArrow}{Shift}{rightArrow}{rightArrow}{rightArrow}') // up and extend to the end of the item
@@ -290,15 +223,12 @@ describe('<CodeMirrorEditor/> lists in Rich Text mode', function () {
     ].join('\n')
     mountEditor(content)
 
-    cy.get('.cm-line').eq(2).as('line')
+    cy.get('.cm-line').eq(0).as('line')
     cy.get('@line').click()
     cy.get('@line').type('\\ite')
     cy.get('@line').type('{enter}')
     cy.get('@line').type('second')
 
-    cy.get('.cm-content').should(
-      'have.text',
-      ['\\begin{itemize}', ' first', ' second', '\\end{itemize}'].join('')
-    )
+    cy.get('.cm-content').should('have.text', [' first', ' second'].join(''))
   })
 })

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

@@ -130,18 +130,10 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
 
     clickToolbarButton('Bullet List')
 
-    cy.get('.cm-content').should(
-      'have.text',
-      [
-        //
-        '\\begin{itemize}',
-        ' test',
-        '\\end{itemize}',
-      ].join('')
-    )
+    cy.get('.cm-content').should('have.text', ' test')
 
-    cy.get('.cm-line').eq(1).type('ing')
-    cy.get('.cm-line').eq(1).should('have.text', ' testing')
+    cy.get('.cm-line').eq(0).type('ing')
+    cy.get('.cm-line').eq(0).should('have.text', ' testing')
   })
 
   it('should insert a numbered list', function () {
@@ -150,17 +142,9 @@ describe('<CodeMirrorEditor/> toolbar in Rich Text mode', function () {
 
     clickToolbarButton('Numbered List')
 
-    cy.get('.cm-content').should(
-      'have.text',
-      [
-        //
-        '\\begin{enumerate}',
-        ' test',
-        '\\end{enumerate}',
-      ].join('')
-    )
+    cy.get('.cm-content').should('have.text', ' test')
 
-    cy.get('.cm-line').eq(1).type('ing')
-    cy.get('.cm-line').eq(1).should('have.text', ' testing')
+    cy.get('.cm-line').eq(0).type('ing')
+    cy.get('.cm-line').eq(0).should('have.text', ' testing')
   })
 })

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

@@ -68,25 +68,21 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
     // select the first autocomplete item
     cy.findByRole('option').eq(0).click()
 
-    cy.get('@first-line').should('have.text', '\\begin{itemize}')
-    cy.get('@second-line')
+    cy.get('@first-line')
       .should('have.text', ' ')
       .find('.ol-cm-item')
       .should('have.length', 1)
-    cy.get('@third-line').should('have.text', '\\end{itemize}')
 
-    cy.get('@second-line').type('test{Enter}test')
+    cy.get('@first-line').type('test{Enter}test')
 
-    cy.get('@first-line').should('have.text', '\\begin{itemize}')
+    cy.get('@first-line')
+      .should('have.text', ' test')
+      .find('.ol-cm-item')
+      .should('have.length', 1)
     cy.get('@second-line')
       .should('have.text', ' test')
       .find('.ol-cm-item')
       .should('have.length', 1)
-    cy.get('@third-line')
-      .should('have.text', ' test')
-      .find('.ol-cm-item')
-      .should('have.length', 1)
-    cy.get('@fourth-line').should('have.text', '\\end{itemize}')
   })
 
   it('finishes a list on Enter in the last item if empty', function () {
@@ -95,10 +91,9 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
     // select the first autocomplete item
     cy.findByRole('option').eq(0).click()
 
-    cy.get('@second-line').type('test{Enter}{Enter}')
+    cy.get('@first-line').type('test{Enter}{Enter}')
 
-    cy.get('.cm-line')
-      .eq(0)
+    cy.get('@first-line')
       .should('have.text', ' test')
       .find('.ol-cm-item')
       .should('have.length', 1)
@@ -113,18 +108,7 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
     cy.findByRole('option').eq(0).click()
 
     cy.get('@second-line').type('test{Enter}test{Enter}{upArrow}{Enter}{Enter}')
-
-    const lines = [
-      '\\begin{itemize}',
-      ' test',
-      ' ',
-      ' ',
-      ' test',
-      ' ',
-      '\\end{itemize}',
-    ]
-
-    cy.get('.cm-content').should('have.text', lines.join(''))
+    cy.get('.cm-content').should('have.text', ' testtest')
   })
 
   forEach(['textbf', 'textit', 'underline']).it(