v2.0.3 Reformat nested blots seem to mess up the text order

[oldj]

Hi, I'm trying to build an editor based on Quill. In my business, sometimes I need to dynamically format the content in the editor. These formatted areas may overlap or even nest.

I'm customizing some blots and I've found that when their regions are nested, the reformat operation can mess up the positioning of some of the text.

I made a demo that can reproduce the problem: https://codesandbox.io/p/sandbox/gqxsl9

The effect is shown in the following animation.

The red background, green text, and underlined text represent three custom blots respectively.

What is the problem? Is it a bug or is it because I didn't define the blots correctly? Thanks!

---

The full code is available in the CodeSandbox link above, and I've copied the main code below.

App.js

import "./styles.css";
import Quill from "quill";
import { useEffect, useRef } from "react";
import "./blots";
import "quill/dist/quill.core.css";

export default function App() {
  const ref_editor = useRef();
  const ref_quill = useRef();

  const doFormat = () => {
    const quill = ref_quill.current;
    if (!quill) return;

    const length = quill.getLength();
    quill.formatText(0, length, "tag1", false);
    quill.formatText(0, length, "tag2", false);
    quill.formatText(0, length, "tag3", false);

    quill.formatText(1, 14, "tag1", true);
    quill.formatText(2, 8, "tag2", true);
    quill.formatText(3, 8, "tag3", true);
  };

  useEffect(() => {
    const quill = new Quill(ref_editor.current);
    quill.setText("0123456789abcdef");
    ref_quill.current = quill;

    doFormat();
  }, []);

  return (
    <div className="App">
      <h1>Quill Test</h1>
      <div ref={ref_editor} />

      <button onClick={doFormat}>format</button>
    </div>
  );
}

blots.js

import Quill from "quill";
import Inline from "quill/blots/inline";

export class MyTagBlot1 extends Inline {
  static blotName = "tag1";
  static className = "tag1";
  static tagName = "span";

  static create(value) {
    const node = super.create();
    node.dataset.type = "tag1";

    return node;
  }

  static formats(domNode) {
    return domNode.dataset.type;
  }
}

Quill.register("formats/tag1", MyTagBlot1);

export class MyTagBlot2 extends Inline {
  static blotName = "tag2";
  static className = "tag2";
  static tagName = "span";

  static create(value) {
    const node = super.create();
    node.dataset.type = "tag2";

    return node;
  }

  static formats(domNode) {
    return domNode.dataset.type;
  }
}

Quill.register("formats/tag2", MyTagBlot2);

export class MyTagBlot3 extends Inline {
  static blotName = "tag3";
  static className = "tag3";
  static tagName = "span";

  static create(value) {
    const node = super.create();
    node.dataset.type = "tag3";

    return node;
  }

  static formats(domNode) {
    return domNode.dataset.type;
  }
}

Quill.register("formats/tag3", MyTagBlot3);

styles.css

.App {
  font-family: sans-serif;
  font-size: 16px;
}

.App .ql-container {
  font-size: 20px;
  border: 1px solid #000;
  min-height: 100px;
}

.tag1 {
  background: #f99;
}

.tag2 {
  color: #0f0;
}

.tag3 {
  text-decoration: underline;
  text-underline-offset: 2;
  font-size: 2em;
}