HtmlEditor: multiline break before list should not merge with the 1st list item (T1206652) (#110)

* Multiline break before list should not merge with the 1st list item (T1206652)

* Turn on checks for devextreme 24.1 branch

* Fix CI workflow

* Fix tests

* Cleanup

* Fix tests

* Review fix

---------

Co-authored-by: Alexander Bulychev <[email protected]>

Author: iBat

.github/workflows/html-editor-checks.yml

@@ -9,7 +9,7 @@ on:
       - master
 
 env:
-  DEVEXTREME_BRANCHES: '["23_2", "23_1", "22_2", "22_1"]'
+  DEVEXTREME_BRANCHES: '["24_1", "23_2", "23_1", "22_2", "22_1"]'
 
 jobs:
   set-up-branches:
@@ -52,7 +52,7 @@ jobs:
         uses: ./quill-repo/.github/actions/html-editor/steps/build
         with:
           branch: ${{ matrix.branch }}
-          devextreme-package-directory: ${{ matrix.branch == '23_2' && 'devextreme-repo/packages/devextreme' || 'devextreme-repo' }}
+          devextreme-package-directory: ${{ (matrix.branch == '23_2' || matrix.branch == '24_1') && 'devextreme-repo/packages/devextreme' || 'devextreme-repo' }}
 
   qunit:
     needs: [build-devextreme, set-up-branches]
@@ -74,7 +74,7 @@ jobs:
         uses: ./quill-repo/.github/actions/html-editor/steps/qunit-tests
         with:
           branch: ${{ matrix.branch }}
-          devextreme-package-directory: ${{ matrix.branch == '23_2' && 'devextreme-repo/packages/devextreme' || 'devextreme-repo' }}
+          devextreme-package-directory: ${{ (matrix.branch == '23_2' || matrix.branch == '24_1') && 'devextreme-repo/packages/devextreme' || 'devextreme-repo' }}
           test-suite: ${{ matrix.test-suite }}
 
   testcafe:
@@ -99,6 +99,6 @@ jobs:
         uses: ./quill-repo/.github/actions/html-editor/steps/testcafe-tests
         with:
           branch: ${{ matrix.branch }}
-          devextreme-package-directory: ${{ matrix.branch == '23_2' && 'devextreme-repo/packages/devextreme' || 'devextreme-repo' }}
+          devextreme-package-directory: ${{ (matrix.branch == '23_2' || matrix.branch == '24_1') && 'devextreme-repo/packages/devextreme' || 'devextreme-repo' }}
           component-directory: ${{ matrix.test-suite.componentFolder }}
           quarantine-mode: ${{ matrix.test-suite.quarantineMode }}

modules/clipboard.js

@@ -73,6 +73,7 @@ class Clipboard extends Module {
     this.quill.root.addEventListener('paste', this.onCapturePaste.bind(this));
     this.matchers = [];
     this.tableBlots = options.tableBlots ?? [];
+    this.multilineParagraph = false;
     CLIPBOARD_CONFIG.concat(this.options.matchers).forEach(
       ([selector, matcher]) => {
         this.addMatcher(selector, matcher);
@@ -129,6 +130,7 @@ class Clipboard extends Module {
       elementMatchers,
       textMatchers,
       nodeMatches,
+      this.multilineParagraph,
     );
     // Remove trailing newline
     if (
@@ -382,23 +384,30 @@ function isPre(node) {
   return preNodes.get(node);
 }
 
-function traverse(scroll, node, elementMatchers, textMatchers, nodeMatches) {
+function traverse(scroll, node, elementMatchers, textMatchers, nodeMatches, multilineParagraph) {
   // Post-order
   if (node.nodeType === node.TEXT_NODE) {
     return textMatchers.reduce((delta, matcher) => {
       return matcher(node, delta, scroll);
     }, new Delta());
   }
   if (node.nodeType === node.ELEMENT_NODE) {
-    return Array.from(node.childNodes || []).reduce((delta, childNode) => {
+    return Array.from(node.childNodes || []).reduce((delta, childNode, idx, allNodes) => {
       let childrenDelta = traverse(
         scroll,
         childNode,
         elementMatchers,
         textMatchers,
         nodeMatches,
+        multilineParagraph,
       );
+      const nextNode = idx < allNodes.length - 1 && allNodes[idx + 1];
+      const isNextNodeList = nextNode
+        && nextNode.nodeType === node.ELEMENT_NODE
+        && ['ul', 'ol'].indexOf(nextNode.tagName.toLowerCase()) > -1;
+
       if (childNode.nodeType === node.ELEMENT_NODE) {
+        multilineParagraph = childNode.tagName.toLowerCase() === 'br';
         childrenDelta = elementMatchers.reduce((reducedDelta, matcher) => {
           return matcher(childNode, reducedDelta, scroll);
         }, childrenDelta);
@@ -409,7 +418,14 @@ function traverse(scroll, node, elementMatchers, textMatchers, nodeMatches) {
           childrenDelta,
         );
       }
-      return delta.concat(childrenDelta);
+
+      const newDelta = delta.concat(childrenDelta);
+
+      if (multilineParagraph && isNextNodeList) {
+        newDelta.insert('\n');
+      }
+
+      return newDelta;
     }, new Delta());
   }
   return new Delta();

modules/multiline.js

@@ -4,7 +4,7 @@ import MultilineBreak from '../blots/multiline_break';
 import Module from '../core/module';
 
 function breakMatcher(node) {
-  if (!node.nextSibling && !node.previousSibling) {
+  if (!(node.nextSibling || node.previousSibling)) {
     return new Delta().insert('\n');
   }
   return new Delta().insert({ multilineBreak: '' });

test/functional/example/list.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DevExtreme-Quill Base Editing</title>
+    <link rel="stylesheet" type="text/css" href="src/dx-quill.core.css"/>
+    <script type="text/javascript" src="src/dx-quill.js"></script>
+</head>
+
+<body>
+    <div>
+        <div id="editor">
+            Test Headline
+            <br><br>
+            <ul>
+                <li>First</li>
+                <li>Second</li>
+                <li>Third</li>
+            </ul>
+        </div>
+    </div>
+</body>
+
+<script>
+    const editorElem = document.getElementById('editor');
+    const editor = new DevExpress.Quill(editorElem, {
+      modules: {
+        multiline: true
+      }
+    });
+</script>
+</html>

test/functional/list.ts

@@ -0,0 +1,20 @@
+import { getEditorSelector, sanitizeTableHtml } from './helpers';
+import url from './helpers/getPageUrl';
+
+fixture`HtmlEditor - list`
+  .page(url(__dirname, './example/list.html'));
+
+test('multiline break before list should not merge with the 1st list item (T1206652)', async (t) => {
+  const editor = getEditorSelector('.ql-editor');
+  const tableContent = sanitizeTableHtml(await editor.innerHTML);
+
+  await t.expect(tableContent.replace(/\s/g, ''))
+    .eql(`
+      <p>Test Headline<br><br></p>
+      <ol>
+        <li><span class="ql-ui" contenteditable="false"></span>First</li>
+        <li><span class="ql-ui" contenteditable="false"></span>Second</li>
+        <li><span class="ql-ui" contenteditable="false"></span>Third</li>
+      </ol>
+    `.replace(/\s/g, ''));
+});