fix: prevent rte from trimming whitespace on delta conversion (#6651) (…

…#6662)
vaadin · Oct 17, 2023 · 083a653 · 083a653
1 parent c08955b
commit 083a653
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor.js b/packages/rich-text-editor/src/vaadin-rich-text-editor.js
@@ -1013,7 +1013,26 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
    * @param {string} htmlValue
    */
   dangerouslySetHtmlValue(htmlValue) {
+    const whitespaceCharacters = {
+      '\t': '__VAADIN_RICH_TEXT_EDITOR_TAB',
+      '  ': '__VAADIN_RICH_TEXT_EDITOR_DOUBLE_SPACE',
+    };
+    // Replace whitespace characters with placeholders before the Delta conversion to prevent Quill from trimming them
+    Object.entries(whitespaceCharacters).forEach(([character, replacement]) => {
+      htmlValue = htmlValue.replaceAll(/>[^<]*</gu, (match) => match.replaceAll(character, replacement)); // NOSONAR
+    });
+
     const deltaFromHtml = this._editor.clipboard.convert(htmlValue);
+
+    // Restore whitespace characters after the conversion
+    Object.entries(whitespaceCharacters).forEach(([character, replacement]) => {
+      deltaFromHtml.ops.forEach((op) => {
+        if (typeof op.insert === 'string') {
+          op.insert = op.insert.replaceAll(replacement, character);
+        }
+      });
+    });
+
     this._editor.setContents(deltaFromHtml, SOURCE.API);
   }
 

diff --git a/packages/rich-text-editor/test/basic.test.js b/packages/rich-text-editor/test/basic.test.js
@@ -690,6 +690,41 @@ describe('rich text editor', () => {
       expect(rte.htmlValue).to.equal('<p><strong>Hello </strong></p><p><strong>world</strong></p>');
     });
 
+    it('should not lose leading tab characters from the resulting htmlValue', () => {
+      const htmlWithLeadingTab = '<p>\tTab</p>';
+      rte.dangerouslySetHtmlValue(htmlWithLeadingTab);
+      flushValueDebouncer();
+      expect(rte.htmlValue).to.equal(htmlWithLeadingTab);
+    });
+
+    it('should not lose extra space characters from the resulting htmlValue', () => {
+      const htmlWithExtraSpaces = '<p>Extra   spaces</p>';
+      rte.dangerouslySetHtmlValue(htmlWithExtraSpaces);
+      flushValueDebouncer();
+      expect(rte.htmlValue).to.equal(htmlWithExtraSpaces);
+    });
+
+    it('should not break code block attributes', () => {
+      const htmlWithCodeBlock = `<pre spellcheck="false">code\n</pre>`;
+      rte.dangerouslySetHtmlValue(htmlWithCodeBlock);
+      flushValueDebouncer();
+      expect(rte.htmlValue).to.equal(htmlWithCodeBlock);
+    });
+
+    it('should support double spaces inside html tags', () => {
+      const htmlWithCodeBlock = `<pre  spellcheck="false">code\n</pre>`;
+      rte.dangerouslySetHtmlValue(htmlWithCodeBlock);
+      flushValueDebouncer();
+      expect(rte.htmlValue).to.equal(`<pre spellcheck="false">code\n</pre>`);
+    });
+
+    it('should support tabs inside html tags', () => {
+      const htmlWithCodeBlock = `<pre\tspellcheck="false">code\n</pre>`;
+      rte.dangerouslySetHtmlValue(htmlWithCodeBlock);
+      flushValueDebouncer();
+      expect(rte.htmlValue).to.equal(`<pre spellcheck="false">code\n</pre>`);
+    });
+
     it('should return the quill editor innerHTML', () => {
       expect(rte.htmlValue).to.equal('<p><br></p>');
     });