How do I set a unique ID for my headers?

[LondonAppDev]

I'm trying to add an id tag to each header (h1, h2, h3) for my Quill editor so I can link to specific sections of my page.

I have the following code which is working for adding the ID tag:

const Header = Quill.import("formats/header");

class EnhancedHeader extends Header {
  static blotName = "header";
  static create(value) {
    const node = super.create(value);
    const id = `header-123`;
    console.log(node.innerHTML);
    console.log(node.innerText);
    node.setAttribute("id", id);
    return node;
  }
}

Quill.register(EnhancedHeader);

const quill = new Quill('#editor', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block'],
    ],
  },
  placeholder: 'Compose an epic...',
  theme: 'snow', // or 'bubble'
});

Playgound Example

How can I access the contents of the selected text in the create function? I need this so I can make a "slug" of the heading to use in the ID.

I've tried the following which return a blank string:

node.innerHTML
node.innerText

[LondonAppDev]

After days and days of attempts and trying to use AI to figure it out, I've finally got a solution that works. I tried custom handlers, overriding the Header extension, using the optimize method, and just couldn't get a solution which:

• Sets an id or name tag on my headings to a slugified version of the contents.
• Updates the id or name if the tag changes.

I actually gave up in frustration and switched to TipTap, but then I missed the out of the box features that QuillJS offers so I switched back.

After a lot of effort, the solution I came up with was embarrassingly simple.

I added a listener for the TEXT_CHANGE event and simply used raw JS to modify the contents.

  quill.on(Quill.events.TEXT_CHANGE, (delta, oldDelta, source) => {
    const editorElement = document.querySelector(elementId);
    const headings = editorElement.querySelectorAll("h2,h3,h4");
    for (const heading of headings) {
      const text = heading.textContent;
      const slug = slugify(text);
      heading.setAttribute("name", slug);
    }
  });

The full implementation looks like this:

export function slugify(text) {
  return text
    .toString()
    .toLowerCase()
    .trim()
    .replace(/\s+/g, "-") // Replace spaces with -
    .replace(/[^\w\-]+/g, "") // Remove all non-word chars
    .replace(/\-\-+/g, "-") // Replace multiple - with single -
    .replace(/^-+/, "") // Trim - from start of text
    .replace(/-+$/, ""); // Trim - from end of text
}


const quill = new Quill(elementId, {
  modules: {
    toolbar: {
      container: [
        [{ header: 2 }, { header: 3 }, { header: 4 }],
        ["bold", "italic", "underline", "strike"],
        ["link", "code-block", "video"],
        [{ list: "ordered" }, { list: "bullet" }],
      ],
    },
  },
  formats: [
    "header",
    "bold",
    "italic",
    "code-block",
    "link",
    "underline",
    "strike",
    "video",
    "list",
  ],
  theme: "snow",
});

quill.on(Quill.events.TEXT_CHANGE, (delta, oldDelta, source) => {
  const editorElement = document.querySelector(elementId);
  const headings = editorElement.querySelectorAll("h2,h3,h4");
  for (const heading of headings) {
    const text = heading.textContent;
    const slug = slugify(text);
    heading.setAttribute("name", slug);
  }
});

I don't think it's super efficient because it runs on ever change, but it's suitable for what I need.

If anyone finds a more elegant or efficient solution, I would love to hear about it! In the meantime I hope this helps someone save hours of effort trying to figure it out.