title: how to add css class to a quill selection?
body: <p>How can I add my own style with a class css in quilljs?</p>
  
  <p>I have this following css class </p>
  
  <pre><code>.ql-editor spanblock {
    background-color: #F8F8F8;
      border: 1px solid #CCC;
      line-height: 19px;
      padding: 6px 10px;
      border-radius: 3px;
      margin: 15px 0;
  }
  </code></pre>
  
  <p>and an event targeting this CSS transformation</p>
  
  <pre><code>var toolbarOptions = [
      [{ "header": [false, 1, 2, 3, 4, 5, 6] }, "bold", "italic"],
      [{ "list": "ordered"}, { "list": "bullet" }, { "indent": "-1"}, { "indent": "+1" }],
      ["blockquote","code-block", "span-block","link", "hr"]
  ];
  var quill = new Quill("#form_field_" + options.id + " .editor-container &gt; .editor", {
      modules: {
          toolbar:  toolbarOptions
      },
      theme: "snow"
  });
  
  var toolbar = quill.getModule("toolbar");
  toolbar.addHandler("span-block", function(){});
  var spanBlockButton = document.querySelector(".ql-span-block");
  
  spanBlockButton.addEventListener("click", () =&gt; {
      let range = quill.getSelection(true);
      // what should I add here
  }   
  </code></pre>
  
  <p>I cannot find anything in the documentation of quilljs
  <a href="https://quilljs.com" rel="noreferrer">https://quilljs.com</a></p>
  
  <p>thank you</p>