Merge pull request #14618 from overleaf/ae-paragraph-newline

[visual] Add newlines after all paragraphs that aren't inside lists or tables

GitOrigin-RevId: 4e8b5b6ce07845fdf7614f7129aac2a88b3bb723

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

@@ -581,8 +581,19 @@ const selectors = [
   }),
   createSelector({
     selector: 'p',
-    match: element =>
-      element.nextElementSibling?.nodeName === 'P' && hasContent(element),
+    match: element => {
+      // must have content
+      if (!hasContent(element)) {
+        return false
+      }
+
+      // inside lists and tables, must precede another paragraph
+      if (element.closest('li') || element.closest('table')) {
+        return element.nextElementSibling?.nodeName === 'P'
+      }
+
+      return true
+    },
     end: () => '\n\n',
   }),
   createSelector({

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

@@ -270,6 +270,48 @@ describe('<CodeMirrorEditor/> paste HTML in Visual mode', function () {
     )
   })
 
+  it('handles pasted paragraphs', function () {
+    mountEditor()
+
+    const data = [
+      'test',
+      '<p>foo</p>',
+      '<p>bar</p>',
+      '<p>baz</p>',
+      'test',
+    ].join('\n')
+
+    const clipboardData = new DataTransfer()
+    clipboardData.setData('text/html', data)
+    cy.get('@content').trigger('paste', { clipboardData })
+
+    cy.get('@content').should('have.text', 'testfoobarbaztest')
+    cy.get('.cm-line').should('have.length', 8)
+  })
+
+  it('handles pasted paragraphs in list items and table cells', function () {
+    mountEditor()
+
+    const data = [
+      'test',
+      '<p>foo</p><p>bar</p><p>baz</p>',
+      '<ul><li><p>foo</p></li></ul>',
+      '<ol><li><p>foo</p></li></ol>',
+      '<table><tbody><tr><td><p>foo</p></td></tr></tbody></table>',
+      'test',
+    ].join('\n')
+
+    const clipboardData = new DataTransfer()
+    clipboardData.setData('text/html', data)
+    cy.get('@content').trigger('paste', { clipboardData })
+
+    cy.get('@content').should(
+      'have.text',
+      'testfoobarbaz foo foo\\begin{tabular}{l}foo ↩\\end{tabular}test'
+    )
+    cy.get('.cm-line').should('have.length', 17)
+  })
+
   it('handles pasted inline code', function () {
     mountEditor()