quill icon indicating copy to clipboard operation
quill copied to clipboard

How to extract a set of all content of a given type (h1, img, etc.)

Open JoeRoddy opened this issue 3 years ago • 2 comments

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

JoeRoddy avatar Jul 28 '22 14:07 JoeRoddy

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.

JoeRoddy avatar Aug 01 '22 02:08 JoeRoddy

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.

matheushoeltgebaum avatar Aug 03 '22 18:08 matheushoeltgebaum