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 " Hi".

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?

Hi

user_1889685 · Answer

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(/^
+|
+$/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(/^
+/.test(insert)) {
                // Create a string witrh clean leading LFs
                let cleanText = insert.replace(/^
+/, '');

                // 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(/
+$/.test(insert)) {
                // Create a string witrh clean ending LFs
                let cleanText = insert.replace(/
+$/, '');

                // 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;
}

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.

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

1 Answers

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