Quill: Dynamic value for Whitelist, or just ignore Whitelist

[ccpu]

Hi,
At first I would like to thank you for your brilliant plugin, it’s the best one I have seen so far.
My question is about adding new style values to the Whitelist.
I would like to have a font size range from 5 to 5000, currently to do this; I have to register the values as it shown below:

    var size = Quill.import('attributors/style/size');
    var sizes = [];
    for (var i = 5; i < 5000; i++) {
        sizes.push(i + "px");
    }
    size.whitelist = sizes;
    Quill.register(size, false);

And I use it like this:

    quill.format('size', '100px');

It works perfectly, however I am wondering if it can be done without adding the fonts to the Whitelist and just execute ‘quill.format’ with any value.

My main concern is memory usage, I thought it would be great to not keep all the values in the memory and just be able to execute dynamic values.

Many thanks,

[ccpu]

The answer is parchment off course :)

[LouisWayne]

@mdoaie, could you post an example code for the solution please?

[student020341]

This is still the only relevant google result for this issue, so I thought I would share my solution in case @LouisWayne and any future eyes are still in need.

```
// create your style parchment thing
let Parchment = Quill.import('parchment');
let fsStyle = new Parchment.Attributor.Style('fs', 'font-size', {
scope: Parchment.Scope.INLINE
});
Quill.register(fsStyle);

// I created a font size slider to have a range of values without a whitelist / enumeration
let fsSlider = editorContainer.querySelector("#q-font-slider");
fsSlider.addEventListener("change", () => {
    // not necessary, this is my idea for making the slider go away after you pick a value
    fsSlider.parentElement.classList.toggle('hidden');

    let range = quill.getSelection();
    if (range) {
        // important - the value you set here is whatever you aliased it as with the parchment thing.
        // I called mine fs just to see if a custom identifier could be used - and it can!
        // doing this via parchment also preserves the inline font-size attribute when you export the html :)
        quill.formatText(range.index, range.length, {
            'fs': `${fsSlider.value}px`
        });
    }
});

```

[luizoliveira-hotmart]

In react-quill, i do this:

const Parchment = ReactQuill.Quill.import('parchment');

class IndentAttributor extends Parchment.Attributor.Style {
  canAdd() {
    return true;
  }
}

const IndentStyle = new IndentAttributor('indent', 'margin-left');

Override canAdd function, return always true, so i can put any 'margin-left' value;

It works for any other Attributors

[fzdp]

set whitelist to be null so that canAdd will always return true.

var SizeStyle = Quill.import('attributors/style/size');
SizeStyle.whitelist = null;
Quill.register(FontStyle, true);

then any size will be ok, e.g: quill.format('size', '100px')