Convert regular spaces to non-breaking spaces when exporting to HTML

slab · Aug 27, 2024 · 0a40b93 · 0a40b93
1 parent 08522f8
commit 0a40b93
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/packages/quill/src/core/editor.ts b/packages/quill/src/core/editor.ts
@@ -370,7 +370,8 @@ 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));
+ return escapedText.replace(/\s/g, '&nbsp;');
  }
  if (blot instanceof ParentBlot) {
  // TODO fix API

diff --git a/packages/quill/test/unit/core/editor.spec.ts b/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,6 +56,9 @@ const createEditor = (html: string) => {
  SizeClass,
  ]),
  });
+ if (typeof htmlOrContents !== 'string') {
+ quill.setContents(htmlOrContents);
+ }
  return quill.editor;
 };
 
@@ -1246,6 +1251,25 @@ describe('Editor', () => {
  );
  });
 
+ test('collapsible spaces', () => {
+ expect(
+ createEditor('<p><strong>123 </strong>123<em> 123</em></p>').getHTML(
+ 0,
+ 11,
+ ),
+ ).toEqual('<strong>123&nbsp;</strong>123<em>&nbsp;123</em>');
+
+ expect(createEditor(new Delta().insert('1 2\n')).getHTML(0, 5)).toEqual(
+ '1&nbsp;&nbsp;&nbsp;2',
+ );
+
+ expect(
+ createEditor(
+ new Delta().insert(' 123', { bold: true }).insert('\n'),
+ ).getHTML(0, 5),
+ ).toEqual('<strong>&nbsp;&nbsp;123</strong>');
+ });
+
  test('mixed list', () => {
  const editor = createEditor(
  `