React-Quill does not preserve HTML response as is - Messes up the layout

Question

EDIT: We replaced Quill with TinyMCE and solved all our issues. We can successfully insert HTML response (as is) into tinyMCE's state as well as modify it!

We're experiencing a styling issue. We're building a mail templating application and the user can create/modify their templates. We also provide preexisting templates for our users.

The issue we're experiencing is the following.

1- We send the user a mail template. The initial/original response sent to the user is the following HTML


  
    FINROTA
    
  
  
    
      
        
          
            
            
              
                
                  
                    
                      
                        
                      
                    
                  
                
              
            
            
            
            
              
                
                  
                  
                    
                      
                    
                  
                  
                  
                  
                    
                       Ödeme iade işleminiz gerçekleşmiştir. 
                    
                  
                  
                  
                  
                    
                       İşlem Bilgileri 
                    
                  
                  
                    
                      
                        
                          
                             İşlem No 
                          
                          
                             {{TransactionNumber}} 
                          
                        
                        
                          
                             İşlem Tarihi 
                          
                          
                             {{TransactionDate}} 
                          
                        
                      
                    
                  
                  
                    
                       Ödeme Bilgileri 
                    
                  
                  
                    
                      
                        
                          
                             Ödeme Şekli 
                          
                          
                             Kredi Kartı 
                          
                        
                        
                          
                             Ödeme Tutarı 
                          
                          
                             {{PureAmount}} 
                          
                        
                        
                          
                             Ödenen Tutar 
                          
                          
                             {{ProcessAmount}} 
                          
                        
                        
                          
                             Taksit Sayısı 
                          
                          
                             {{Installment}} Taksit 
                          
                        
                        
                          
                             Taksit Tutarı 
                          
                          
                             {{InstallmentRate}} 
                          
                        
                        
                          
                             Açıklama 
                          
                        
                        
                          
                             {{Description}} 
                          
                        
                      
                    
                  
                  
                    
                       Kart Bilgileri 
                    
                  
                  
                    
                      
                        
                          
                             Kart Numarası 
                          
                          
                             {{CreditCardNumber}} 
                          
                        
                        
                          
                             Kart Sahibi Adı-Soyadı 
                          
                          
                             {{CardHolderName}} 
                          
                        
                      
                    
                  
                  
                    
                       İade Bilgileri 
                    
                  
                  
                    
                      
                        
                          
                             İade Tutarı 
                          
                          
                             {{RefundAmount}} 
                          
                        
                        
                          
                             İade Tarihi 
                          
                          
                             {{RefundDate}} 
                          
                        
                      
                    
                  
                
              
            
            
            
            
            
              
                
                  
                    
                      
                        
                          Netahsilat Müşteri Hizmetleri
                        
                        
                          
                            
                              
                                 Sistem Destek E-Mail: 
                                 netahsilatdestek @finrota .com 
                              
                              
                                 Telefon: 
                                 0 (212) 256 60 00 
                              
                              
                                 Fax: 
                                 0 (212) 256 54 00

2- We then take this html response and set the react-quill 'state' with it

import { textEditorOptions } from "lib/constants";
import React, { forwardRef, useImperativeHandle, useRef } from "react";
import ReactQuill from "react-quill";

const editorOptions = {
    toolbar: false,
    clipboard: {
      matchVisual: false
    }
  },

  TemplateEditor = forwardRef(({ formParamForQuill, setFormParamForQuill, shouldHideToolbar, data, stateData, update, communicationType }, ref) => {

    const [quillState, setQuillState] = React.useState({ description: data || "" }),
      editorRef = useRef(),

      handleQuillChange = val => {

        setQuillState(() => ({ description: val }));
        update(`${communicationType}`, { ...stateData[`${communicationType}`], body: val });

      };

    useImperativeHandle(ref, () => ({ editorRef }));

    React.useEffect(() => {

      if (formParamForQuill.token !== null && formParamForQuill.explanation !== null)
        setFormParamForQuill({ token: null, explanation: null, ref: null });

    }, [formParamForQuill]);

    return (
      <>
        
           handleQuillChange(value)}
          />
        
      
    );
  });

export default TemplateEditor;

'data' passed onto the editor component as a prop is the initial HTML response attached above. However, when the quill state is set with this 'data', quill state then becomes this (state modified by react-quill (attached below)), which does not preserve the original HTML thus leaving us with a messed up layout.

FINROTA 
    
  
   Sayın {{fullName}},

Ödeme sırasında alınan hata nedeniyle ödemeniz gerçekleşmemiştir.
İşlem Bilgileri
İşlem No
{{transactionNumber}}
İşlem Tarihi
{{transactionDate}}
Ödeme Bilgileri
Ödeme Şekli
Kredi Kartı
Ödeme Tutarı
{{pureAmount}}
Ödenen Tutar
{{processAmount}}
Taksit Sayısı
{{installment}} Taksit
Taksit Tutarı
{{installmentRate}}
Açıklama
{{description}}
Hata Mesajı
{{errorMessage}}
Kart Bilgileri
Kart Numarası
{{creditCardNumber}}
Kart Sahibi Adı-Soyadı
{{cardHolderName}}

  ** ** ** Sistem Destek E-Mail:  **@**.com  Telefon:  0(**) ** ** 00  Fax:  0(**) ** ** 00

How could the original HTML be preserved ? How do we overcome this styling issue ?

user_4961158 · Answer

Short answer

No, you can't just throw any markup into a WYSIWYG editor and expect it to be able to perfectly work with the structure. These editors work with a subset of HTML.

Emails usually use ancient styling techniques. Even if Quill is able to correctly parse each tag and attribute, the result would likely be terrible to work with while editing. Emails often put everything in a table and need to add inline styles to work in older clients.

You can get part of the way there by only injecting the actual visible body content into Quill, not an entire HTML document.

The document head is not something that you could edit in a WYSIWYG editor. As you can see Quill just removes all tags it doesn't "know about" from around the content. Then it adds p tags around orphaned text. Hence you see the document title in the output as a paragraph.

1- We send the user a mail template

You only need to send the user the part of the template they can edit. The outer HTML is something that can be added by your server when the mail is finally sent.

The second problem is that the email content seems to be from a pre-existing application that formatted everything as tables. Also it contains a bunch of inline styles.

Quill is not a sophisticated HTML parser. (I mean, come on, it doesn't even remove the head tag) Neither is it very good at outputting HTML.

So if you want to convert this text to an email with that specific mark up, you'll have to do this conversion yourself from the tags and style attributes returned by Quill's content.

You'll probably also have to do a one time effort to convert these old templates into a format Quill can work with. Or write a function that can convert between the formats.

You could also try quil-better-table. It might improve Quill's ability to pick up table markup in the input.

If you're sending your emails with PHP, you could try quil-delta-parser or php-quil-renderer. That way you can send Quill's "deltas" to your back end, and transform them to the right HTML at save time, or even when the email is sent.

You can install both with Composer.

composer require nadar/quill-delta-parser

or

composer require deanblackborough/php-quill-renderer

Both libraries seem flexible enough to make it output the styles you want based on which attributes are in Quill's delta.

In any case it's probably very challenging if not impossible to make Quill understand and return the exact same markup of the template you post. Much easier to just take whatever it outputs and transform it afterwards.

React-Quill does not preserve HTML response as is - Messes up the layout

1 Answers

Short answer