ngx-Quill - Problems with importing Parchment #1357

aleksgrunwald · 2021-09-03T16:11:04Z

This is my issue:

Font size of the bulleted list and numbered list doesn't follow the font size of the active text, they are always Normal size regardless what size has a text, and it's not possible to change it.

I've made some internet searching and so I'm trying to overwrite Parchment/Quill method based on this :

class CustomColor extends Parchment.Attributor.Style {
  value(node) {
    let value = super.value(node);

    if (!value.startsWith('rgb(')) return value;

    value = value.replace(/^[^\d]+/, '').replace(/[^\d]+$/, '');

    return '#' + value.split(',').map(function(component) {
      return ('00' + parseInt(component, 10).toString(16)).slice(-2);
    }).join('');
  }
}

const customColorAttributor = new CustomColor('custom-color', 'color', {
    scope: Parchment.Scope.BLOCK,
});

Quill.register(customColorAttributor);

and I was getting:

Cannot read properties of undefined (reading 'Attributor')

How to properly import Parchment?

Now, after reading some more advice on the internet, I don't have any errors in the console, but I don't think my code is overwriting a native Quill/Parchment method.
What I've got in my component now:

public Parchment = Quill.import('parchment');

public CustomColor = class extends this.Parchment.Attributor.Style {
    constructor(attrName: string, keyName: string, options: AttributorOptions) {
      super();
      this.attrName = attrName;
      this.keyName = keyName;
      this.options = options;
    }
    public value(node) {
      console.log('my parchment!!!!');
      let value = super.value(node);

      if (!value.startsWith('rgb(')) return value;

      value = value.replace(/^[^\d]+/, '').replace(/[^\d]+$/, '');

      return (
        '#' +
        value
          .split(',')
          .map(function (component) {
            return ('00' + parseInt(component, 10).toString(16)).slice(-2);
          })
          .join('')
      );
    }
  };`

constructor(private editQuoteTextTemplatesModalService: EditQuoteTextTemplatesModalService) {
    const customColorAttributor = new this.CustomColor('custom-color', 'color', {
      scope: this.Parchment.Scope.BLOCK,
    });
    Quill.register(customColorAttributor);
  }

I have a custom toolbar but I''m using a native quill format methods:

public colorHandler: (c: string) => void = (color: string) => {
   this.quill.format('color', color);
   this.setCursorToLastPosition();
 };

I'm getting a quill instance by this:

public afterCreation(event): void {
    this.quill = event;
  }

The text was updated successfully, but these errors were encountered:

KillerCodeMonkey · 2021-09-03T16:17:34Z

I think you should ask that at quilljs repo oder stack overflow since this is just a plain quilljs question aaaand I do not have that deep knowledge about Parchment. Sorry 😐 aleksgrunwald ***@***.***> schrieb am Fr., 3. Sept. 2021, 18:11:

…

My issues are: - Font size of the bulleted list and numbered list doesn't follow the font size of the active text, they are always Normal size regardless what size has a text, and it's not possible to change it. I've made some internet searching and so I'm trying to overwrite Parchment/Quill method based on this : slab/quill#409 <slab/quill#409> class CustomColor extends Parchment.Attributor.Style { value(node) { let value = super.value(node); if (!value.startsWith('rgb(')) return value; value = value.replace(/^[^\d]+/, '').replace(/[^\d]+$/, ''); return '#' + value.split(',').map(function(component) { return ('00' + parseInt(component, 10).toString(16)).slice(-2); }).join(''); } } const customColorAttributor = new CustomColor('custom-color', 'color', { scope: Parchment.Scope.BLOCK, }); Quill.register(customColorAttributor); and I'm still getting: Cannot read properties of undefined (reading 'Attributor') How to properly import Parchment? Now, after reading some advice on the internet, I don't have any errors in the console, but I don't think my code is overwriting a native Quill/Parchment method. What I've got now: public CustomColor = class extends this.Parchment.Attributor.Style { constructor(attrName: string, keyName: string, options: AttributorOptions) { super(); this.attrName = attrName; this.keyName = keyName; this.options = options; } public value(node) { console.log('my parchment!!!!'); let value = super.value(node); if (!value.startsWith('rgb(')) return value; value = value.replace(/^[^\d]+/, '').replace(/[^\d]+$/, ''); return ( '#' + value .split(',') .map(function (component) { return ('00' + parseInt(component, 10).toString(16)).slice(-2); }) .join('') ); } };` constructor(private editQuoteTextTemplatesModalService: EditQuoteTextTemplatesModalService) { const customColorAttributor = new this.CustomColor('custom-color', 'color', { scope: this.Parchment.Scope.BLOCK, }); Quill.register(customColorAttributor); } I have a custom toolbar but I''m using a native quill format methods: public colorHandler: (c: string) => void = (color: string) => { this.quill.format('color', color); this.setCursorToLastPosition(); }; I'm getting a quill instane by this: public afterCreation(event): void { this.quill = event; } — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1357>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARI4YFKPF4QF52I6TTZAQ3UADXSHANCNFSM5DMBYJXQ> .

aleksgrunwald · 2021-09-03T16:21:54Z

oh. OK :(

But maybe do you have any new idea how to solve this initial issue? ;) :

Font size of the bulleted list and numbered list doesn't follow the font size of the active text, they are always Normal size regardless what size has a text, and it's not possible to change it.

KillerCodeMonkey · 2021-09-03T16:28:26Z

this.Parchment.Attributor looks a little bit strange.. what it is this? I thought you need to import it from the parchment package? aleksgrunwald ***@***.***> schrieb am Fr., 3. Sept. 2021, 18:22:

…

oh. OK :( But maybe do you have any new idea how to solve this initial issue? ;) : Font size of the bulleted list and numbered list doesn't follow the font size of the active text, they are always Normal size regardless what size has a text, and it's not possible to change it. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1357 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARI4YGRFANPWNJPXS3ZHRTUADY23ANCNFSM5DMBYJXQ> .

aleksgrunwald · 2021-09-03T16:37:05Z

Yes. I think this is the problem - that I'm using this.Parchemnt -> so probably I'm not overwriting this package Parchemnt tha Quill actually uses.
I tried to do this:

import Parchment from 'parchment';

But It gave me errors.
Then I've read this:
https://stackoverflow.com/questions/41086454/having-problems-extending-quill

It says to do this:

let Parchment = Quill.import('parchment');

But in angular I am within a component class, so I can't really do exactly this hence I've tried to

public Parchment = Quill.import('parchment');

What I really need to do, what maybe would work is to import Parchment like I can import Quill:

import Quill from 'quill';

KillerCodeMonkey · 2021-09-03T16:47:04Z

Sure you can. Just do it outside (above) the class ;-) aleksgrunwald ***@***.***> schrieb am Fr., 3. Sept. 2021, 18:37:

…

Yes. I think this is the problem - that I'm using this.Parchemnt -> so probably I'm not overwriting this package Parchemnt tha Quill actually uses. I tried to do this: import Parchment from 'parchment'; But It gave me errors. Then I've read this: https://stackoverflow.com/questions/41086454/having-problems-extending-quill It says to do this: let Parchment = Quill.import('parchment'); But in angular I am within a component class, so I can't really do exactly this hence I've tried to public Parchment = Quill.import('parchment'); — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1357 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARI4YBKOODWIJKZGXANVL3UAD2T3ANCNFSM5DMBYJXQ> .

aleksgrunwald · 2021-09-03T16:50:07Z

Yeeeah.. That's true. I'm just trying to do this. ;)

aleksgrunwald · 2021-09-03T17:14:17Z

Above @component, I've got this:

let Parchment = Quill.import('parchment');

class CustomColor extends Parchment.Attributor.Style {
    constructor(attrName: string, keyName: string, options: AttributorOptions) {
      super();
      this.attrName = attrName;
      this.keyName = keyName;
      this.options = options;
    }

  public value(node) {
    let value = super.value(node);
    console.log('my parchment');

    if (!value.startsWith('rgb(')) return value;

    value = value.replace(/^[^\d]+/, '').replace(/[^\d]+$/, '');

    return '#' + value.split(',').map(function(component) {
      return ('00' + parseInt(component, 10).toString(16)).slice(-2);
    }).join('');
  }
}

const customColorAttributor = new CustomColor('custom-color', 'color', {
  scope: Parchment.Scope.BLOCK,
});

Quill.register(customColorAttributor);

I guess, I should get this above console.log if this part of code works and I don't get it logged..

KillerCodeMonkey · 2021-09-04T04:37:01Z

so i will close this one here,

aleksgrunwald mentioned this issue Sep 3, 2021

List bullets associated with colored text are not colored slab/quill#409

Open

KillerCodeMonkey closed this as completed Sep 4, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ngx-Quill - Problems with importing Parchment #1357

ngx-Quill - Problems with importing Parchment #1357

aleksgrunwald commented Sep 3, 2021 •

edited

Loading

KillerCodeMonkey commented Sep 3, 2021 via email

aleksgrunwald commented Sep 3, 2021

KillerCodeMonkey commented Sep 3, 2021 via email

aleksgrunwald commented Sep 3, 2021 •

edited

Loading

KillerCodeMonkey commented Sep 3, 2021 via email

aleksgrunwald commented Sep 3, 2021

aleksgrunwald commented Sep 3, 2021

KillerCodeMonkey commented Sep 4, 2021

ngx-Quill - Problems with importing Parchment #1357

ngx-Quill - Problems with importing Parchment #1357

Comments

aleksgrunwald commented Sep 3, 2021 • edited Loading

KillerCodeMonkey commented Sep 3, 2021 via email

aleksgrunwald commented Sep 3, 2021

KillerCodeMonkey commented Sep 3, 2021 via email

aleksgrunwald commented Sep 3, 2021 • edited Loading

KillerCodeMonkey commented Sep 3, 2021 via email

aleksgrunwald commented Sep 3, 2021

aleksgrunwald commented Sep 3, 2021

KillerCodeMonkey commented Sep 4, 2021

aleksgrunwald commented Sep 3, 2021 •

edited

Loading

aleksgrunwald commented Sep 3, 2021 •

edited

Loading