JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>

<div id="editor">
<p id="x4uqkat" class="x4uqkat--text__typography a98db97--highlight__border">this is text <span class="test">is here</span>   replaceable</p>
</div>

JavaScript

var Inline = Quill.import('blots/inline');

    var Delta = Quill.import('delta');
    class CustomSpan extends Inline {
      static blotName = 'customSpan';
      static tagName = 'span';
    
      static formats(domNode) {
          const className = domNode.getAttribute('class');
          console.log('Formats called with:', className, domNode);
          return className ? { customSpan: className } : {};
        }
    
      format(name, value) {
        if (name === 'customSpan') {
          if (value) {
            this.domNode.setAttribute('class', value);
          } else {
            this.domNode.removeAttribute('class');
          }
        } else {
          super.format(name, value);
        }
      }
    }
    
    
    Quill.register(CustomSpan,false);
   
   const quill = new Quill("#editor", {
      modules: {
        toolbar: false,
      }, 
      theme: "snow" ,
      
     });