fix: only replace double spaces on rte delta conversion (#6652)

vaadin · Oct 16, 2023 · 9aa3fd6 · 9aa3fd6
1 parent 78aa276
commit 9aa3fd6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js b/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js
@@ -695,11 +695,11 @@ export const RichTextEditorMixin = (superClass) =>
     dangerouslySetHtmlValue(htmlValue) {
       const whitespaceCharacters = {
         '\t': '__VAADIN_RICH_TEXT_EDITOR_TAB',
-        ' ': '__VAADIN_RICH_TEXT_EDITOR_SPACE',
+        '  ': '__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.replace(new RegExp(character, 'gu'), replacement);
+        htmlValue = htmlValue.replaceAll(character, replacement);
       });
 
       const deltaFromHtml = this._editor.clipboard.convert(htmlValue);
@@ -708,7 +708,7 @@ export const RichTextEditorMixin = (superClass) =>
       Object.entries(whitespaceCharacters).forEach(([character, replacement]) => {
         deltaFromHtml.ops.forEach((op) => {
           if (typeof op.insert === 'string') {
-            op.insert = op.insert.replace(new RegExp(replacement, 'gu'), character);
+            op.insert = op.insert.replaceAll(replacement, character);
           }
         });
       });

diff --git a/packages/rich-text-editor/test/basic.common.js b/packages/rich-text-editor/test/basic.common.js
@@ -713,13 +713,20 @@ describe('rich text editor', () => {
       expect(rte.htmlValue).to.equal(htmlWithLeadingTab);
     });
 
-    it('should not lose extra stpace characters from the resulting htmlValue', () => {
+    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 return the quill editor innerHTML', () => {
       expect(rte.htmlValue).to.equal('<p><br></p>');
     });