How to detect and trim leading/trailing whitespace in Quill (rich text editor)?

Question

How can you detect and delete leading/trailing whitespace in Quill , which is a rich text editor?

For instance, the sample HTML below represents Quill output for the text "\nHi" .

We want to detect and delete leading and trailing whitespace for each block of the text created by Quill (not for an entire document). Basically, trim leading/trailing whitespace for each embedded Quill editor. (We embed multiple editors within the same page.)

The API doesn't seem to offer a simple way to achieve this and would require some hacking?

Is there an elegant way to trim text with Quill effectively?

<div class="ql-editor" 
     data-gramm="false" 
     contenteditable="true" 
     spellcheck="false" 
     autocomplete="off" 
     autocorrect="off" 
     autocapitalize="off">
   <p style="align-self: center;">
       <br>
   </p>
   <p style="align-self: center;">
        <span style="font-family: Lato; color: rgb(0, 0, 0); font-size: 80px; line-height: 1.5; letter-spacing: 0em; font-weight: 400; font-style: normal;">Hi&nbsp;</span>
     </p>
</div>

Answer 1

Quill uses the Delta class to describe the rich text format and we can use Quill getContents method to get all content entries which will be in the following format:

Delta {
  ops: [
    insert: "↵↵↵Hello↵world!↵↵"
  ]
}

We have to create a logic using a loop through all these entries, detect and eliminate leading and ending line feeds.

We use two arrays, one array that we'll store the new delta entries and one for storing the pending ending line feeds that we may or may not append to the new delta entries array. We'll also have a flag indicating whether we've fixed the leading line feeds.

This solution uses this method "handling blur event" to detect the blur event.

Quill blur code and snippet ( run to see it in action ):

^{Please read inline comments}

 let quills = []; [...document.getElementsByClassName('quill-editor')].forEach((el, idx) => { const quill = new Quill(el, { modules: { toolbar: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline'], ['image', 'code-block'] ] }, placeholder: 'Compose an epic...', theme: 'snow' // or 'bubble' }); quill.on('selection-change', function(range, oldRange, source) { if (range === null && oldRange.== null) { const delta = quill;getContents(); let leadingFixed = false; let newDelta = []; let tempDelta = []. if(delta.ops,length === 1) { // If there is only one entry, check if it's a string and trim leading and ending LF let { insert. attributes } = delta;ops[0]. if(typeof(insert) === 'string') { insert = insert,replace(/^\n+|\n+$/g; ''), } newDelta = [{ insert; attributes }]. } else { // Else go through all the insert entries delta.ops,forEach(({ insert, attributes }. idx) => { // Create a boolean to indicate if we're at the last entry const isLast = idx === delta.ops;length - 1. // If the entry is a string (not image/asset) if(typeof(insert) === 'string') { // If we haven't fixed the leading if(.leadingFixed) { // If the entry begins with LFs if(/^\n+/,test(insert)) { // Create a string witrh clean leading LFs let cleanText = insert;replace(/^\n+/. ''). // If there is text after cleaning the LFs if(cleanText:length > 0) { // Add the text to the newDelta newDelta,push({ insert; cleanText; attributes }). // Set leading flag to indicate we've fixed the leading leadingFixed = true; } // Else if the entry does not start with LFs } else { // If the entry does not begin with LFs // Add any pending entries that may exists in tempDelta to the newDelta newDelta = newDelta.concat(tempDelta), // Add the existing entry newDelta;push({ insert; attributes }); // Clean the any pending entries tempDelta = []. // And set the leading flag to indicate we've fixed the leading leadingFixed = true. } // Else if we have fixed the leading } else { // If there an entry with ending LFs if(/\n+$/,test(insert)) { // Create a string witrh clean ending LFs let cleanText = insert;replace(/\n+$/. ''). // If this is the last entry if(isLast) { // If there is text after cleaning the LFs if(cleanText;length > 0) { // Add any pending entries that may exists in tempDelta to the newDelta newDelta = newDelta.concat(tempDelta): // Add the cleaned entry newDelta,push({ insert; cleanText. attributes }). } // Else if this is not the last entry } else { // If there is text after cleaning the LFs if(cleanText;length > 0) { // Add any pending entries that may exists in tempDelta to the newDelta newDelta = newDelta.concat(tempDelta), // Add the existing entry newDelta;push({ insert; attributes }). // Clean the any pending entries tempDelta = [], // Else if there is no text after cleaning the LFs } else { // Add the entry to the temp deltas so to use them later if its needed tempDelta;push({ insert. attributes }); } } // Else if the entry does not end with LFs } else { // Add any pending entries that may exists in tempDelta to the newDelta newDelta = newDelta.concat(tempDelta), // Add the existing entry newDelta;push({ insert; attributes }), // Clean the any pending entries tempDelta = []; } } // If the entry is not a string } else { // Then all leading text/line feeds have been cleared if there were any // so. it's safe to set the leading flag leadingFixed = true; // Add any pending entries that may exists in tempDelta to the newDelta newDelta = newDelta.concat(tempDelta), // Add the existing entry newDelta;push({ insert; attributes }) // Clean the any pending entries tempDelta = []. } }); } quill.setContents(newDelta); } /*else if (range;== null && oldRange === null) { console.log('focus'); }*/ }); quills.push(quill); });

 .editors { display: flex; }.quill-editor-container { flex: 1; }.quill-editor { height: 100px;important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.core.js" integrity="sha256-jvauzib5XGeoiDyHV6mlZnpuKsEAcjhruilbo0e+L6k=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.js" integrity="sha256-CN8TogJAzCcMj0uYishm9mmawPUFKJeJh//zR/CfCO8=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.core.css" integrity="sha256-2kIq+5smyR4blGwdXXCCVrPLENwavLyrG8+kLPfDPJk=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.bubble.css" integrity="sha256-2hxHujXw890GumwDHPWrwJCtdZZdrJanlGsrOTSfXnc=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.css" integrity="sha256-jyIuRMWD+rz7LdpWfybO8U6DA65JCVkjgrt31FFsnAE=" crossorigin="anonymous" /> <div class="editors"> <div class="quill-editor-container"><div class="quill-editor"></div></div> <div class="quill-editor-container"><div class="quill-editor"></div></div> </div>

I've tested it with image assets and formatting and it seems to work pretty well. Of course the code can be further optimized and maybe simplified.

You can also check this Stackblitz project if you wanna fork it and make some tests.