How to extract a set of all content of a given type (h1, img, etc.)
Is there an api to extract, for instance, all headings ( or images, or links, etc. ) in the document along with their given indeces? I can't find anything like this in the documentation but I would assume something like this exists already.
Thanks! -Joe
Here's how I'm solving it right now, if anyone gets here, but I can't imagine this is the right way.
const lines = quill?.getLines();
const headers = lines?.reduce(
(h1s, next, i) => (next.statics.name === 'Header' ? [...h1s, { index: i, line: next }] : h1s),
[],
);
Leaving this open in case someone with expertise can point me in the right direction.
You can use a combination of the descendants function, from ScrollBlot, and the offset function, from the blot you are searching, since it is inherited from the ShadowBlot. Below is a sample code on how you can use these functions:
//Your blot definition
class MyCustomBlot extends Inline {
static create(value) {
let node = super.create();
return node;
}
}
MyCustomBlot.blotName = 'my-custom-blot';
MyCustomBlot.tagName = 'custom-blot';
//Helper function, to get the blot class
function getBlotClass(blotName) {
return quill.scroll.query(blotName);
}
//Here's how you retrieve all the instances from the document
const myBlot = getBlotClass('my-custom-blot');
const instances = quill.scroll.descendants(myBlot);
for (let i = 0; i < instances.length; i++) {
let instance = instances[i];
let instanceIndex = instance.offset(quill);
}
If you want only from a specific line, you can do something like this:
const myBlot = getBlotClass('my-custom-blot');
//Retrieve all lines from the document
const lines = quill.getLines();
for (let i = 0; i < lines.length; i++) {
let currentLine = lines[i];
//Get instances per line
let instances = currentLine.descendants(myBlot);
...
}
If you want to know more about blots (and attributors), you can check out the parchment repository and the API from Quill. Although the docs could be a lot better, at least it's something.