editor: fix new lines from google docs not being preserved on paste (s…

…treetwriters#3988)

* editor: handle <br> directly under root element

* editor: fix pasting from google docs

---------

Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>

packages/editor/src/extensions/clipboard/clipboard-dom-parser.ts

@@ -75,29 +75,43 @@ export function convertBrToSingleSpacedParagraphs(dom: HTMLElement | Document) {
   for (const br of dom.querySelectorAll("br")) {
     let paragraph = br.closest("p");
 
-    // if no paragraph is found over the br, we add one.
-    if (!paragraph && br.parentElement) {
-      const parent = br.parentElement;
-      const p = document.createElement("p");
-      p.append(...parent.childNodes);
-      parent.append(p);
-      paragraph = p;
+    if (!paragraph) {
+      // we split and wrap all text nodes into their own single spaced
+      // paragraphs
+      const nodes = getSiblingTextNodes(br);
+      if (nodes.length > 0) {
+        paragraph = document.createElement("p");
+        paragraph.dataset.spacing = "single";
+        paragraph.append(...nodes);
+        br.replaceWith(paragraph);
+        continue;
+      }
+
+      // we convert the next pargraph into a single spaced paragraph
+      if (br.nextElementSibling instanceof HTMLParagraphElement) {
+        br.nextElementSibling.dataset.spacing = "single";
+      }
+
+      // just convert all br tags into single spaced paragraphs
+      const newParagraph = document.createElement("p");
+      newParagraph.dataset.spacing = "single";
+      br.replaceWith(newParagraph);
     }
 
-    // if paragraph is empty, we clean out the paragraph and move on.
     if (
       paragraph &&
       (paragraph.childNodes.length === 1 ||
         !paragraph.textContent ||
         paragraph.textContent.trim().length === 0)
     ) {
+      // if paragraph is empty, we clean out the paragraph and move on.
       paragraph.innerHTML = "";
       continue;
     }
 
     if (paragraph) {
       splitOn(paragraph, br);
-      const children = Array.from(paragraph.childNodes.values());
+      const children = Array.from(paragraph.childNodes);
       const newParagraph = document.createElement("p");
       newParagraph.dataset.spacing = "single";
       newParagraph.append(...children.slice(children.indexOf(br) + 1));
@@ -123,3 +137,13 @@ function splitOn(bound: Element, cutElement: Element) {
     }
   }
 }
+
+function getSiblingTextNodes(element: ChildNode) {
+  const siblings = [];
+  let sibling: ChildNode | null = element;
+  while ((sibling = sibling.previousSibling)) {
+    if (sibling.nodeType === Node.ELEMENT_NODE) break;
+    else if (sibling.nodeType === Node.TEXT_NODE) siblings.push(sibling);
+  }
+  return siblings;
+}

packages/editor/src/extensions/clipboard/tests/__snapshots__/clipboard-dom-parser.test.ts.snap

@@ -11,14 +11,12 @@ exports[`convert br tags to paragraphs 4`] = `"<p>line <span><em>1</em></span></
 exports[`convert br tags to paragraphs 5`] = `"<p></p>"`;
 
 exports[`convert br tags to paragraphs 6`] = `
-"<p>
-<!--StartFragment-->A troll, they call me, but I have no wish</p><p data-spacing=\\"single\\">
+"<!--StartFragment--><p data-spacing=\\"single\\">A troll, they call me, but I have no wish
+</p><p data-spacing=\\"single\\">
 to be associated with those dolls</p><p data-spacing=\\"single\\">
 </p><p data-spacing=\\"single\\">
 We lack religion, purpose, politics,</p><p data-spacing=\\"single\\">
-and yet, we somehow manage to get by.</p><p data-spacing=\\"single\\">
-
-  </p>"
+and yet, we somehow manage to get by.</p>"
 `;
 
 exports[`convert br tags to paragraphs 7`] = `
@@ -54,6 +52,29 @@ exports[`convert br tags to paragraphs 9`] = `
   </div>"
 `;
 
+exports[`convert br tags to paragraphs 10`] = `
+"<div>
+  <p style=\\"line-height: 100%; margin-bottom: 0in\\">
+  I am not talking to you</p><p data-spacing=\\"single\\">
+  </p>
+  <p>I am talking to you</p>
+  </div>"
+`;
+
+exports[`convert br tags to paragraphs 11`] = `
+"<div>
+    <!--StartFragment--><p><span>Hello</span></p><p data-spacing=\\"single\\"></p><p data-spacing=\\"single\\"></p><p data-spacing=\\"single\\"></p><p data-spacing=\\"single\\"></p><p data-spacing=\\"single\\"></p><p data-spacing=\\"single\\"><span>world</span></p><!--EndFragment-->
+    
+    </div>"
+`;
+
+exports[`convert br tags to paragraphs 12`] = `
+"<div>
+    <!--StartFragment--><meta charset=\\"utf-8\\"><h1><span>Write notes</span></h1><p data-spacing=\\"single\\"></p><p dir=\\"ltr\\" data-spacing=\\"single\\"><span>Welcome of </span><a><span>Notesnook</span></a><span>, an syncing.</span></p><p data-spacing=\\"single\\"></p><p dir=\\"ltr\\" data-spacing=\\"single\\"><span>Enjoy the read!</span></p><p data-spacing=\\"single\\"></p><p dir=\\"ltr\\" data-spacing=\\"single\\"><span><span><img></span></span></p><p data-spacing=\\"single\\"></p><p dir=\\"ltr\\" data-spacing=\\"single\\"><span>vision?</span></p><p data-spacing=\\"single\\"></p><p dir=\\"ltr\\" data-spacing=\\"single\\"><span>everyone means</span></p><!--EndFragment-->
+    
+    </div>"
+`;
+
 exports[`properly format codeblocks 1`] = `
 "<div>
   <!--StartFragment--><p>Sure! Here's an implementation of a word counter for Thai that considers each syllable consisting of a consonant sound followed by a vowel sound as a word:</p><pre><code>javascript</code></pre><pre class=\\"language-javascript\\"><code>function countThaiWords(text) {

packages/editor/src/extensions/clipboard/tests/clipboard-dom-parser.test.ts

@@ -77,6 +77,26 @@ and yet, we somehow manage to get by.<br>
   you</p>
   
   </div>`
+  ],
+  [
+    `<div>
+  <p style="line-height: 100%; margin-bottom: 0in">
+  I am not talking to you</p>
+  <br/>
+  <p>I am talking to you</p>
+  </div>`
+  ],
+  [
+    `<div>
+    <!--StartFragment--><p><span>Hello</span></p><br><br><br><br><br><p><span >world</span></p><!--EndFragment-->
+    
+    </div>`
+  ],
+  [
+    `<div>
+    <!--StartFragment--><meta charset="utf-8"><h1><span >Write notes</span></h1><br><p dir="ltr" ><span >Welcome of </span><a><span >Notesnook</span></a><span >, an syncing.</span></p><br><p dir="ltr" ><span >Enjoy the read!</span></p><br><p dir="ltr" ><span ><span ><img></span></span></p><br><p dir="ltr" ><span >vision?</span></p><br><p dir="ltr" ><span >everyone means</span></p><!--EndFragment-->
+    
+    </div>`
   ]
 ];