Fix white spaces not being preserved when pasted into editor

packages/quill/src/core/editor.ts

@@ -360,6 +360,10 @@ function convertListHTML(
   return `</li></${endTag}>${convertListHTML(items, lastIndent - 1, types)}`;
 }
 
+const SPACE_EXCLUDE_NBSP = '[^\\S\\u00a0]';
+const COLLAPSIBLE_SPACES_REGEX = new RegExp(
+  `^${SPACE_EXCLUDE_NBSP}|${SPACE_EXCLUDE_NBSP}{2,}|${SPACE_EXCLUDE_NBSP}$`,
+);
 function convertHTML(
   blot: Blot,
   index: number,
@@ -370,7 +374,18 @@ function convertHTML(
     return blot.html(index, length);
   }
   if (blot instanceof TextBlot) {
-    return escapeText(blot.value().slice(index, index + length));
+    const escapedText = escapeText(blot.value().slice(index, index + length));
+
+    if (!COLLAPSIBLE_SPACES_REGEX.test(escapedText)) {
+      return escapedText;
+    }
+
+    const { parentElement } = blot.domNode;
+    const style =
+      parentElement?.ownerDocument.defaultView?.getComputedStyle(parentElement);
+    return style?.whiteSpace
+      ? `<span style="white-space:${style.whiteSpace}">${escapedText}</span>`
+      : escapedText;
   }
   if (blot instanceof ParentBlot) {
     // TODO fix API

packages/quill/src/modules/clipboard.ts

@@ -364,18 +364,48 @@ function isBetweenInlineElements(node: HTMLElement, scroll: ScrollBlot) {
   );
 }
 
-const preNodes = new WeakMap();
-function isPre(node: Node | null) {
-  if (node == null) return false;
-  if (!preNodes.has(node)) {
-    // @ts-expect-error
+enum WhiteSpaceStyle {
+  Collapsed,
+  Preserved,
+  Inherited,
+}
+const getWhiteSpaceStyle = (node: Node) => {
+  if (node instanceof HTMLElement) {
+    const { whiteSpace } = node.style;
+    if (
+      whiteSpace === 'pre' ||
+      whiteSpace === 'pre-wrap' ||
+      whiteSpace === 'break-spaces'
+    ) {
+      return WhiteSpaceStyle.Preserved;
+    }
+    if (whiteSpace && whiteSpace !== 'inherit') {
+      return WhiteSpaceStyle.Collapsed;
+    }
     if (node.tagName === 'PRE') {
-      preNodes.set(node, true);
-    } else {
-      preNodes.set(node, isPre(node.parentNode));
+      return WhiteSpaceStyle.Preserved;
     }
   }
-  return preNodes.get(node);
+  return WhiteSpaceStyle.Inherited;
+};
+
+const whiteSpacePreservationMap = new WeakMap();
+function getShouldPreserveWhiteSpaces(node: Node | null) {
+  if (node == null) return false;
+
+  if (!whiteSpacePreservationMap.has(node)) {
+    let shouldPreserve = false;
+
+    const style = getWhiteSpaceStyle(node);
+    if (style === WhiteSpaceStyle.Preserved) {
+      shouldPreserve = true;
+    } else if (style === WhiteSpaceStyle.Inherited) {
+      shouldPreserve = getShouldPreserveWhiteSpaces(node.parentNode);
+    }
+
+    whiteSpacePreservationMap.set(node, shouldPreserve);
+  }
+  return whiteSpacePreservationMap.get(node);
 }
 
 function traverse(
@@ -631,7 +661,7 @@ function matchText(node: HTMLElement, delta: Delta, scroll: ScrollBlot) {
   if (node.parentElement?.tagName === 'O:P') {
     return delta.insert(text.trim());
   }
-  if (!isPre(node)) {
+  if (!getShouldPreserveWhiteSpaces(node)) {
     if (
       text.trim().length === 0 &&
       text.includes('\n') &&

packages/quill/test/unit/core/editor.spec.ts

@@ -28,9 +28,11 @@ import { ColorClass } from '../../../src/formats/color.js';
 import Quill from '../../../src/core.js';
 import { normalizeHTML } from '../__helpers__/utils.js';
 
-const createEditor = (html: string) => {
+const createEditor = (htmlOrContents: string | Delta) => {
   const container = document.createElement('div');
-  container.innerHTML = normalizeHTML(html);
+  if (typeof htmlOrContents === 'string') {
+    container.innerHTML = normalizeHTML(htmlOrContents);
+  }
   document.body.appendChild(container);
   const quill = new Quill(container, {
     registry: createRegistry([
@@ -54,9 +56,17 @@ const createEditor = (html: string) => {
       SizeClass,
     ]),
   });
+  if (typeof htmlOrContents !== 'string') {
+    quill.setContents(htmlOrContents);
+  }
   return quill.editor;
 };
 
+const applyWhiteSpace = (editor: Editor, whiteSpace: string) => {
+  editor.scroll.domNode.style.whiteSpace = whiteSpace;
+  return editor;
+};
+
 describe('Editor', () => {
   describe('insert', () => {
     test('text', () => {
@@ -1246,6 +1256,57 @@ describe('Editor', () => {
       );
     });
 
+    test('collapsible spaces', () => {
+      expect(
+        applyWhiteSpace(
+          createEditor('<p><strong>123 </strong>123<em> 123</em></p>'),
+          'pre-wrap',
+        ).getHTML(0, 11),
+      ).toEqual(
+        '<strong><span style="white-space:pre-wrap">123 </span></strong>123<em><span style="white-space:pre-wrap"> 123</span></em>',
+      );
+
+      expect(
+        applyWhiteSpace(
+          createEditor(new Delta().insert('1   2\n')),
+          'pre-wrap',
+        ).getHTML(0, 5),
+      ).toEqual('<span style="white-space:pre-wrap">1   2</span>');
+
+      expect(
+        applyWhiteSpace(
+          createEditor(
+            new Delta().insert('  123', { bold: true }).insert('\n'),
+          ),
+          'pre-wrap',
+        ).getHTML(0, 5),
+      ).toEqual(
+        '<strong><span style="white-space:pre-wrap">  123</span></strong>',
+      );
+    });
+
+    test('&nbsp;', () => {
+      expect(
+        applyWhiteSpace(
+          createEditor(
+            new Delta().insert('\u00a0 123', { bold: true }).insert('\n'),
+          ),
+          'pre-wrap',
+        ).getHTML(0, 5),
+      ).toEqual('<strong>\u00a0 123</strong>');
+
+      expect(
+        applyWhiteSpace(
+          createEditor(
+            new Delta().insert('\u00a0  123', { bold: true }).insert('\n'),
+          ),
+          'pre-wrap',
+        ).getHTML(0, 6),
+      ).toEqual(
+        '<strong><span style="white-space:pre-wrap">\u00a0  123</span></strong>',
+      );
+    });
+
     test('mixed list', () => {
       const editor = createEditor(
         `

packages/quill/test/unit/modules/clipboard.spec.ts

@@ -361,6 +361,22 @@ describe('Clipboard', () => {
       );
     });
 
+    test('white-space', () => {
+      const html = '<span style="white-space:pre">0  1</span>';
+      expect(createClipboard().convert({ html })).toEqual(
+        new Delta().insert('0  1'),
+      );
+    });
+
+    test('white-space with nested levels', () => {
+      const html = `
+        <div style="white-space:pre"><span>0  1</span><span style="white-space:normal">0  1</span><span style="white-space:inherit">0  1</span></div>
+      `;
+      expect(createClipboard().convert({ html })).toEqual(
+        new Delta().insert('0  10 10  1'),
+      );
+    });
+
     test('nested list', () => {
       const delta = createClipboard().convert({
         html: '<ol><li>One</li><li class="ql-indent-1">Alpha</li></ol>',