fix: do not strip style attribute from the htmlValue (#7394) (#7397)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · May 10, 2024 · 8f8eb94 · 8f8eb94
1 parent f020440
commit 8f8eb94
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
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
@@ -681,7 +681,7 @@ export const RichTextEditorMixin = (superClass) =>
         return `class="${classes.join(' ')}"`;
       });
       // Remove meta spans, e.g. cursor which are empty after Quill classes removed
-      content = content.replace(/<\/?span[^>]*>/gu, '');
+      content = content.replace(/<span[^>]*><\/span>/gu, '');
 
       // Replace Quill align classes with inline styles
       [this.__dir === 'rtl' ? 'left' : 'right', 'center', 'justify'].forEach((align) => {

diff --git a/packages/rich-text-editor/test/basic.common.js b/packages/rich-text-editor/test/basic.common.js
@@ -753,6 +753,12 @@ describe('rich text editor', () => {
       expect(rte.htmlValue).to.equal('<p><strong>Hello </strong></p><p><strong>world</strong></p>');
     });
 
+    it('should not filter out span elements with style from the resulting htmlValue', () => {
+      setValueAndFormatText('color', '#e60000');
+      // Empty span should be stripped
+      expect(rte.htmlValue).to.equal('<p><span style="color: rgb(230, 0, 0);">Foo</span></p>');
+    });
+
     it('should not lose leading tab characters from the resulting htmlValue', () => {
       const htmlWithLeadingTab = '<p>\tTab</p>';
       rte.dangerouslySetHtmlValue(htmlWithLeadingTab);